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. • 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

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” }

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.

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/

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>

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

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}

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

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

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)}

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}

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")}

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}

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}

<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

<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

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

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.

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%}

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)}

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>

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>

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} }

Chapter 6: Cascading Style Sheets