CSS: Cascading Style Sheets IST 516 Fall 2011 Dongwon Lee, Ph.D.
Cascading Style Sheet CSS (Cascading Style Sheets) Advantages Low-level formatting information to specify physical properties of HTML Eg, font, color, layout, etc Stored in a separate file from HTML (usually) can be shared or re-used for many HTML files Advantages Separation of logical and physical contents Consistency among many HTML documents
Cascading Style Sheet CSS V 2.1 (2009) http://www.w3.org/TR/CSS21/ W3C’s official CSS validation service http://jigsaw.w3.org/css-validator/
When to Use CSS Uniform look on multiple web pages or sites Better maintenance of formatting Increased re-usability of web design If your project plans to have HTML pages or web sites consider using CSS+HTML together
Cascading Style Sheet Example HTML HTML+CSS <html> <head> <style type="text/css"> h1 {color:blue;} h1 u {color:red;} h1 i {color:green;} </style> </head> <body> <h1><u>CSS</u> Example for <i>IST Class</i></h1> </body> </html> <html> <body> <h1><u><font color=red>CSS</></u> Example for <i><font color=green>IST Class</></i></h1> </body> </html>
4 Ways to Use CSS in HTML Files Inlined within HTML tags Embedded within HTML <style> Linked or Imported or High Priority … <h1 style=“font-size:150%;”>Title here</h1> <p style=“color:red;”> regular HTML text here</p> <head> <style type=“text/css”> /* CSS code here */ </style> </head> … <link href=“foo.css” rel="stylesheet" type="text/css"> Most Recommended <style type="text/css”> @import “foo.css"; </style> Low Priority
Cascading Overriding Rules Inlined CSS overrides others (Embedded, Linked, and Imported CSS) Highest Priority Embedded CSS overrides Linked/Imported <head> <link href=“foo.css” rel="stylesheet" type="text/css”> <style type=“text/css”> p {color:blue;} </style> </head> … <p style=“color:red;”>Paragraph always appears RED</p> Linked CSS Embedded CSS Inlined CSS
Download 30-day trial version from: Using XMLSpy CSS properties foo.css foo.html Download 30-day trial version from: http://www.altova.com/xml-editor/ HTML tags
Using XMLSpy: Text Editing Embedded CSS: File New HTML 4 or XHTML 1 enter your HTML with CSS in the new file 2. Linked CSS: File New CSS
Using XMLSpy: Rendering Output
Selector { Property : Value ; } Basic Syntax Selector { Property : Value ; } Declaration Selector: an HTML tag to apply { Property : Value} to Eg, h1, title, p, table, img, body Property: a CSS element to manipulate Eg, color, border, font-size, font Value: the value of the specified property Eg, “green”, “10pt”, “150%”, “Times-Roman”
Selector { Property : Value ; } Basic Syntax: Example Selector { Property : Value ; } Declaration h1 { color : blue ; } Set the text color of <h1> tag to “blue” p { font-family : sans-serif ; } Paragraph <p> uses “sans-serif” font table { background-color : blue ; } Table <table> has “blue” background color
Property : Value ; … Property : Value ; } Grouping Syntax Selector, … , Selector { Property : Value ; … Property : Value ; } Multiple selectors are delimited by “,” Multiple declarations are delimited by “;” Means: all declarations are equally applied to all HTML tags h1, h2, p { color : blue; font-size:10pt; } All HTML tags <h1>, <h2>, and <p> will have the same format of blue color and 10pt font size
Property : Value ; … Property : Value ; } Nesting Syntax Whitespace Selector Selector { Property : Value ; … Property : Value ; } Multiple selectors are delimited by whitespace “ ” Eg, Selector1 Selector2 { declarations } Declarations are applied to the HTML tag “Selector2” IF it appears within the HTML tag “Selector1” (ie, nested) p u { color : blue; font-size:10pt; } Text within <u> tag has blue color with 10pt font if <u> appears within <p> tag
Basic Example </html> <html> <head> <style type="text/css"> body {background: lightgray;} /* CSS comments */ h1, h2 {color:blue; background: white;} h1 u {color:red;} </style> </head> <body> <h1>H1 has blue color with <u>red underlined</u></h1> <h2>H2 has the same color as H1 with <u>blue underlined</u></h2> </body> </html>
CSS Background Properties Background effects of an element Background Color Eg, body {background-color:red;} Using image as background Eg, body {background-image:url(“psu.gif”);} Positioning image in background Eg, body {background-image:url(“psu.gif”); background-position:right top;}
CSS Text Properties: Color 3 ways to specify color values A color name: eg, “red” An RGB value: eg, rgb(255,0,0) for red, green, blue A hexa-decimal value: eg, ”#FF0000” Eg, p {color:red;} From http://www.computerhope.com/htmcolor.htm
CSS Text Properties Alignment: center, right, left, justify Eg, p {text-align: right; } Decoration: overline, line-through, underline, blink, none Eg, p {text-decoration:underline;}
CSS Font Properties Font Family Font Style: normal, italic, oblique Eg, p {font-family : "Times New Roman", Times, serif; } Font Style: normal, italic, oblique Eg, p {font-style :italic;} Font Weight: normal, bold, lighter Eg, p {font-weight: bold; } Font Size: px, %, Eg, h1 {font-size:40px;} h2 {font-size:200%;}
CSS Link Properties Link (<a>) has special 4 states Rules: a:link: a normal, unvisited link a:visited: a link the user has visited a:hover: a link when the user mouses over it a:active: a link the moment it is clicked Rules: a:hover must come after a:link and a:visited a:active must come after a:hover
Link Example <html> <head> <style type="text/css"> a:link {background-color:#B2FF99;} /* unvisited link */ a:visited {background-color:#FFFF85;} /* visited link */ a:hover {background-color:#FF704D;} /* mouse over link */ a:active {background-color:#FF704D;} /* selected link */ </style> </head> <body> <p><a href="http://foo.com">Unvisited link</a> and <a href="http://bar.com">Visited link</a> appears with different color</p> </body> </html>
CSS List Properties HTML has 2 lists <ul>: unordered list w. default bullet item marker <ol>: ordered list w. default number item marker
CSS <ul> Item Markers list-style-type has 4 types for <ul>: none: No marker disc: a filled circle symbol (default) circle: an empty circle symbol square: a square symbol
CSS <ol> Item Markers list-style-type has many types for <ol>: decimal: a number decimal-leading-zero: 01, 02, 03, … lower-alpha: a, b, c, … lower-roman: I, ii, iii, iv, … upper-alpha: A, B, C, … upper-roman: I, II, III, IV, … …
List Example <html> <head> <style type="text/css"> ul {list-style-type:square;} ol {list-style-type:upper-roman;} </style> </head> <body> <ul><li>one</li><li>two</li><li>three</li></ul> <ol><li>one</li><li>two</li><li>three</li></ol> </body> </html>
CSS Table Properties Border: specifies size and color of border <table> <th> <td> can have separate borders Use border-collapse to merge multiple borders Eg, table, th, td { border: 1px solid black; } Width/Height: use px or % Eg, table {width:100%; height:100px;} Text alignment: Horizontal: left, right, center Eg, td {text-align: left} Vertical: top, bottom, middle Eg, td {vertical-align: middle}
CSS Table Properties Padding: space between border and content Eg, td {padding: 20px; } Color: color and background-color Eg, th { background-color:green; color:white; }
Table Example <html> <head> <style type="text/css"> table, td, th { border:3px solid black; border-collapse : collapse;} th {padding:20px; background-color:green; color:yellow;} </style> </head> <body> <table> <tr><th>Country</th><th>Capital</th></tr> <tr><td>US</td><td>Washington DC</td></tr> <tr><td>UK</td><td>London</td></tr> </table> </body> </html>
CSS Class Class in CSS allows multiple formats for the same HTML tag Selector . classname { Property : Value ; } In HTML <tag class=“classname”> … </tag> Class in CSS allows multiple formats for the same HTML tag Eg, In CSS: p.first {color:blue;} p.second {color:red;} In HTML: <p class=“first”>This is blue</p> <p class=“second”>This is red</p>
Class Example <html> <head> <style type="text/css"> p {font-size:200%;} p.first{ color: blue; } p.second{ color: red; } </style> </head> <body> <p>Normal BLACK paragraph</p> <p class="first">First BLUE paragraph</p> <p class="second">Second RED paragraph</p> </body> </html>
More CSS Properties and Values CSS has more properties and corresponding values than shown here Online reference sites: http://www.w3schools.com/css/css_reference.asp http://www.tizag.com/cssT/reference.php CSS-based web site building reference sites: http://www.csszengarden.com/
Reference CSS: The Definite Guide, Eric Meyer, O’Reilly, 2006 Tizag.com CSS Tutorial http://www.tizag.com/cssT/ CSS Tutorial http://www.csstutorial.net/introductionCSS.php