1 / 32

CSS: Cascading Style Sheets

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)

jhein
Télécharger la présentation

CSS: 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.

E N D

Presentation Transcript

  1. CSS: Cascading Style Sheets IST 516 Fall 2011 Dongwon Lee, Ph.D.

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

  3. 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/

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

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

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

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

  8. Using XMLSpy CSS properties foo.css foo.html Download 30-day trial version from: http://www.altova.com/xml-editor/ HTML tags

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

  10. Using XMLSpy: Rendering Output

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

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

  13. 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 ; }

  14. 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 ; }

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

  16. 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;}

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

  18. 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;}

  19. 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%;}

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

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

  22. CSS List Properties • HTML has 2 lists • <ul>: unordered list w. default bullet item marker • <ol>: ordered list w. default number item marker

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

  24. 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, … • …

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

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

  27. 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; }

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

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

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

  31. 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/

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

More Related