1 / 24

Chapter 6: Cascading Style Sheets

Chapter 6: Cascading Style Sheets. CIS 275—Web Application Development for Business I. CSS Introduction. CSS stands for ____________ style sheets because multiple style definitions will cascade into one. CSS is a technology for __________ HTML elements.

Download Presentation

Chapter 6: Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  1. Chapter 6: Cascading Style Sheets CIS 275—Web Application Development for Business I

  2. CSS Introduction • CSS stands for ____________ style sheets because multiple style definitions will cascade into one. • CSS is a technology for __________ HTML elements. • Styles were added to HTML ____ to separate structure from presentation in web page. • Style sheets can be • External (stored in a one or more separate ______ files) • Internal (using the ________ tag in the <head> element) • Inline (using the ________ attribute) • Styles take effect in order of specificity such as, inline, internal, external, ________ default

  3. CSS Syntax I • The general CSS syntax is selector {property: value} • For example, body {color: black} • For multiple properties,use semi-colons p {text-align: center; color: red; font-family: “sans serif”} • This is more _________: p { text-align: center; color: red; font-family: “sans serif” }

  4. CSS Syntax II • For _________ selectors, use grouping as follows: h1, h2, h3, h4, h5, h6 { color: green } • The class attribute: • In the CSS file, p.right {text-align: right} • In the HTML file, <p class="right"> This paragraph will be right-aligned. </p> • You can use .right {text-align: right} and apply it to several different tags, such as <p>, <h1>, <td>, etc. 

  5. CSS Syntax III • The id attribute is similar to the _______ attribute • In the CSS file, #intro {font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent} • In the HTML file, <p id=“intro"> This paragraph uses the “intro” style. </p> • Also in the CSS file, p#intro {font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent} will apply ONLY to <p> tags with the id=“intro” attribute • A CSS ________ format: /* This is a comment */ • A CSS validator:http://jigsaw.w3.org/css-validator/

  6. CSS: How to Apply • External style sheet (applies to ________ pages) <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> • Internal style sheet (for a _______ page) <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> • Inline styles (for a unique element, _____ if possible) <p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

  7. body { background-color: yellow } h1 { background-color: #00ff00 } h2 { background-color: transparent } p { background-color: rgb(250,0,255) } <html> <head> <link rel="stylesheet" type="text/css" href=“mystyle.css" /> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html> Background

  8. Various Background Effects • Background image body {background-image: url("../images/bgdesert.jpg")} • __________ a background image body { background-image: url("../images/bgdesert.jpg");background-repeat: repeat-y} • ____________ a background image (IE only) body { background-image: url("../images/smiley.gif"); background-repeat: no-repeat; background-position: center center} • ___________ a background image (IE only) body {background-image: url("../images/smiley.gif"); background-repeat: no-repeat; background-attachment: fixed} • One ____________ body { background: #00ff00 url("../images/smiley.gif") no-repeat fixed center center}

  9. Setting text _____ h1 {color: #00ff00} Letter ________ (IE only) h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} ________ text h1 {text-align: center} __________ text p {text-indent: 1cm} _________ text h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} a {text-decoration: none} ______ control use <p class = “uppercase”>…</p> p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} Text

  10. Set the font _________ h3 {font-family: times} p {font-family: arial, sans-serif} p.sansserif {font-family: sans-serif} Use <p class=“sans-serif”>…</p> in HTML document Set the font _______ h1 {font-size: 150%} p {font-size: 14pt} Set the font _______ h1 {font-style: italic} h2 {font-style: normal} p {font-style: oblique} Set the font _________ p.thick {font-weight: bold} One declaration p { font: italic small-caps 900 12px arial } Font

  11. Border • Border _______ p.dotted {border-style: dotted} • __________ borders p.soliddouble {border-style: solid double} • Border ________ p.one {border-style: solid; border-color: #0000ff} • Border ________ p {border-style: solid; border-bottom-width: 15px} • One declaration p {border: medium double rgb(250,0,255)}

  12. Margin and Padding • Left margin p.margin {margin-left: 2cm} • One declaration (top, right, bottom, left) p.margin {margin: 2cm 4cm 3cm 4cm} • Padding in a table cell (between cell edge and content) td {padding-top: 2cm} • One declaration (top-bottom and left-right) td.twovalues {padding: 0.5cm 2.5cm}

  13. List • Unordered list style type ul.disc {list-style-type: disc} • Ordered list style type ol.lroman {list-style-type: lower-roman} • Using images ul {list-style-image: url("../images/arrow.gif")} • List item placement ul.inside {list-style-position: inside} • Nested elements (applies to a list within another list) ul ul {text-decoration: underline; margin-left: .5cm} • One declaration ul {list-style: square inside url("../images/arrow.gif")}

  14. Dimension Properties • Controlling the dimensions of ________ img.normal {height: auto; width: auto} img.big {height: 80px; width: 100px} img.small {height: 30px; width: 50px} • Controlling the _______ between lines p.increase {line-height: 1cm}

  15. Classification I • The display property div {display: none} Contents of <div></div> are invisible p {display: inline} Contents of <p></p> display continuously • Images may “________” next to text img {float: left} Image will float to the left of text. • Positioning text _________ to normal h1.shift {position:relative; left:20} + 20 pixels to left position • Positioning text at _________ location h1.x {position:absolute; left:100; top:150} • Making an element __________ h1.two {visibility:hidden}

  16. <span style="cursor:auto"> Auto</span> <span style="cursor:crosshair"> Crosshair</span> <span style="cursor:default"> Default</span> <span style="cursor:hand"> Hand</span> <span style="cursor:move"> Move</span> <span style="cursor:e-resize"> e-resize</span> <span style="cursor:ne-resize">ne-resize</span> <span style="cursor:nw-resize"> nw-resize</span> Changing the Cursor I

  17. <span style="cursor:n-resize"> n-resize</span> <span style="cursor:se-resize"> se-resize</span> <span style="cursor:sw-resize">sw-resize</span> <span style="cursor:s-resize"> s-resize</span> <span style="cursor:w-resize">w-resize</span> <span style="cursor:text"> text</span> <span style="cursor:wait"> wait</span> <span style="cursor:help"> help</span> Changing the Cursor II

  18. Positioning I • Positioning HTML __________ on the screen: h1 {position: absolute; top: 100px; left: 100px} p {position: absolute; bottom: 80px; right: 40px} • Controlling the display if _______ exceeds space: • In the style sheet: div {background-color:#00FFFF; width:150px; height:150px; overflow: scroll} • In the HTML document: <div>You can use the overflow property when you want to have better control of the layout.<br><br>Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.</div> elements content

  19. Positioning II • Aligning images vertically within _____: • In the style sheet: img.top {vertical-align:text-top} • In the HTML doc: <p>This is an <img class="top“ border="0" src="../images/alert_red_bg.gif“> image inside a paragraph.</p> • z-index is used to _________ HTML elements. • This code positions an image in the upper left corner AND allows text to display over it. img.x {position:absolute; left:0; top:0; z-index:-1} • Elements with larger z-index values display on top of those with smaller z-index values.

  20. Pseudo-classes • A pseudo-class is designed to add effects to some __________. • The syntax is: selector:pseudo-class {property: value} • ________ pseudo-classes (MUST occur in this order): a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */ • An interesting effect (see other examples): a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%}

  21. Pseudo-elements • A pseudo-element is similar to a pseudo-class. • The first line will display special formatting: p {font-size: 12pt} p:first-line {color: #0000FF font-variant: small-caps} • The indicated effect will occur before/after an occurrence of an element: h1:before {content: url(beep.wav)} h1:after {content: url(beep.wav)}

  22. The :first-child Pseudo-class I • The indicated effect applies only to the first-child element of the specified element: • In style sheet: div:first-child p { text-indent: 25px } • In HTML doc: <div> <p> First paragraph in div. This paragraph will be indented. </p> <p> Second paragraph in div. This paragraph will not be indented. </p> </div> <div> <h1>Header</h1> <p> The first paragraph inside the div. This paragraph will not be indented. </p> </div>

  23. The :first-child Pseudo-class II • The following applies to an <a> that is the first-child of any element: • In the style sheet: a:first-child { text-decoration: none } • In the HTML doc (only the first <a> is affected): <p> Visit <a href="http://www.w3schools.com"> W3Schools </a> and learn CSS! Visit <a href="http://www.w3schools.com"> W3Schools </a> and learn HTML! </p>

  24. Media Types • Media Types allow you to specify how documents will be presented in different media. • In the style sheet: @media screen { p.test {font-family: verdana,sans-serif; font-size: 14px} } @media print { p.test {font-family: times,serif; font-size: 10px} } @media screen, print { p.test {font-weight: bold} }

More Related