320 likes | 401 Views
CSS: Cascading Style Sheets. IST 516 Fall 2011 Dongwon Lee, Ph.D. Cascading Style Sheet. CSS (Cascading Style Sheets) Low-level formatting information to specify physical properties of HTML Eg, font, color, layout, etc Stored in a separate file from HTML (usually)
E N D
CSS: Cascading Style Sheets IST 516 Fall 2011 Dongwon Lee, Ph.D.
Cascading Style Sheet • CSS (Cascading Style Sheets) • 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
HTML HTML+CSS Cascading Style Sheet Example <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 • Inlinedwithin 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 Low Priority <style type="text/css”> @import “foo.css"; </style>
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
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
Basic Syntax • 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 ; } Declaration
Basic Syntax: Example • 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 Selector { Property : Value ; } Declaration
Grouping Syntax • 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 Selector, … , Selector { Property : Value ; … Property : Value ; }
Nesting Syntax Whitespace • 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 Selector Selector { Property : Value ; … Property : Value ; }
Basic Example <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 • 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 • 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 • 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> In CSS Selector . classname { Property : Value ; } In HTML <tag class=“classname”> … </tag>
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