1. Getting a Taste of Cascading Stylesheets Steve Mooradian steve@negative99.com December 14, 2005

2. Outline  Crawl Definitions / HistoryDefinitions / History Types / UsesTypes / Uses  Walk Practical Examples and ExercisesPractical Examples and Exercises  Run The Wow Factor!The Wow Factor!

3. Definitions  XHTML Extensible HyperText Markup Language, or XHTML, is a markup language that has the same expressive possibilities as HTML, but a stricter syntax. HTML is an application of SGML, a very flexible markup language, and XHTML is an application of XML, a more restrictive subset of SGML. XHTML can be thought of as the intersection of HTML and XML. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000.Extensible HyperText Markup Language, or XHTML, is a markup language that has the same expressive possibilities as HTML, but a stricter syntax. HTML is an application of SGML, a very flexible markup language, and XHTML is an application of XML, a more restrictive subset of SGML. XHTML can be thought of as the intersection of HTML and XML. XHTML 1.0 became a World Wide Web Consortium (W3C) Recommendation on January 26, 2000.

4. Definitions  CSS CSS is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document. CSS is used to define color, fonts, layout and other aspects of document presentation. It is designed primarily to enable the separation of document structure from document presentation.CSS is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document. CSS is used to define color, fonts, layout and other aspects of document presentation. It is designed primarily to enable the separation of document structure from document presentation.

5. Definitions  W3C The World Wide Web Consortium (W3C) is an international consortium where member organizations, a full-time staff, and the public, work together to develop standards for the World Wide Web. W3C's mission is: "To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web". W3C also engages in education and outreach, develops software, and serves as an open forum for discussion about the Web. The Consortium is headed by Tim Berners- Lee, the original creator of the World Wide Web and primary author of the URL (Uniform Resource Locator), HTTP (HyperText Transfer Protocol) and HTML (HyperText Markup Language) specifications, the principal technologies that form the basis of the Web.The World Wide Web Consortium (W3C) is an international consortium where member organizations, a full-time staff, and the public, work together to develop standards for the World Wide Web. W3C's mission is: "To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web". W3C also engages in education and outreach, develops software, and serves as an open forum for discussion about the Web. The Consortium is headed by Tim Berners- Lee, the original creator of the World Wide Web and primary author of the URL (Uniform Resource Locator), HTTP (HyperText Transfer Protocol) and HTML (HyperText Markup Language) specifications, the principal technologies that form the basis of the Web. …and CSS!!!

6. Brief History  CSS1 released in December 1996 Around 50 properties for simple formatting, fonts and colorsAround 50 properties for simple formatting, fonts and colors  CSS2 released in May 1998 Additional 70 properties for more advanced featuresAdditional 70 properties for more advanced features  Browsers only recently became capable of correctly implementing this technology (but even now there’s Excedrin involved)  CSS3 is in the works

7. Common CSS Syntax h1 { color: #0000FF; font-size: 24pt; } Declarations Selector PropertyValue

8. Types of CSS  Inline Styles Inline styles are coded in the body of the web page as an attribute of an XHTML tag. The style only applies to the specific element that contains it as an attributeInline styles are coded in the body of the web page as an attribute of an XHTML tag. The style only applies to the specific element that contains it as an attribute  Embedded Styles Embedded styles are defined in the header of a web page. These style instructions apply to the entire web page document.Embedded styles are defined in the header of a web page. These style instructions apply to the entire web page document.  Linked Styles Linked Styles are coded in a separate text file. This text file is linked to the web page by using a tag in the header section.Linked Styles are coded in a separate text file. This text file is linked to the web page by using a tag in the header section.  Imported Styles Imported Styles are similar to External Styles in that they are coded in a separate text file.Imported Styles are similar to External Styles in that they are coded in a separate text file.

9. Linked CSS <html><head> <link rel="stylesheet“ type="text/css“ href="style.css“ /> </head><body>

10. Embedded CSS <html><head> </style></head><body>

11. Inline CSS <html><head></head><body> A magenta paragraph! </p> <h1 style="color:#770000; font-style:italic"> A dark red heading in italics! </h1>

12. Grouping CSS Rules  Instead of this… CSS: H1 { color: #FFFF00; } H2 { color: #FFFF00; }  You can do this… CSS: H1, H2 { color: #FFFF00; }

13. Classes and IDs  Classes Allow styles for groups of elements CSS:.warning { color: red; } HTML: Allow styles for groups of elements CSS:.warning { color: red; } HTML: File not found. </h3>  IDs Allow styles for specific elements CSS: #copyright { color: blue; } HTML: Allow styles for specific elements CSS: #copyright { color: blue; } HTML: © 2005. </p>

14. Using classes CSS: p.black {color: #000000;} p.blue {color: #000080;} HTML: HTML: This sentence is black. </p> This sentence is blue. </p>

15. Common CSS Properties  background-color  color  font-family  font-size  padding  margin  text-decoration  line-height  text-align  background-image

16. CSS Units  Used for specific heights and lengths  CSS supports several length units px – Pixels – screen dotspx – Pixels – screen dots pt – Points – font sizespt – Points – font sizes in, cm – Inches and centimetersin, cm – Inches and centimeters % - percent of the current/parent font/element% - percent of the current/parent font/element em – height of current fontem – height of current font  Pixels vs. Em For easiest/best design control – pixelsFor easiest/best design control – pixels For best flexibility/accessibility – % or emFor best flexibility/accessibility – % or em

17. Fonts  font-family Ordered list of font namesOrdered list of font names Quote names with spaces: ex. “Arial Black”Quote names with spaces: ex. “Arial Black” CSS: p.arial { font-family: Arial, Helvetica, sans-serif; }  font-size larger, smaller, or specific heightlarger, smaller, or specific height CSS: p.big { font-size: 60px; }

18. Colors  color: Named Colors: red, blue, greenNamed Colors: red, blue, green Hex: #FFCC00, #FC0Hex: #FFCC00, #FC0 RGB values: rgb(123, 123, 123)RGB values: rgb(123, 123, 123) CSS: p.green { color: #00FF00; }  background-color: color or transparentcolor or transparent CSS: p.highlight { background-color: #FFCC00; }

19. Margins & Padding  Margin The space between this and other elementsThe space between this and other elements margin-top, margin-right, margin-bottom, margin-leftmargin-top, margin-right, margin-bottom, margin-left margin: 5px 10px 5px 10px;margin: 5px 10px 5px 10px; Values are in clockwise orderValues are in clockwise order margin padding Text Text Text Text Text Text Text Text Text Text Text Text

20. Margins & Padding  Padding The space between the margin and the elementThe space between the margin and the element padding-top, padding-right, padding- bottom, padding-left (can use same shortcut as with margins)padding-top, padding-right, padding- bottom, padding-left (can use same shortcut as with margins) Comparable to TABLE’s cell-paddingComparable to TABLE’s cell-padding margin padding Text Text Text Text Text Text Text Text Text Text Text Text

21. The Box Model  http://www.w3.org/TR/REC- CSS2/box.html#box-dimensions http://www.w3.org/TR/REC- CSS2/box.html#box-dimensions http://www.w3.org/TR/REC- CSS2/box.html#box-dimensions  http://www.redmelon.net/tstme/box _model/ http://www.redmelon.net/tstme/box _model/ http://www.redmelon.net/tstme/box _model/

22. DIV and SPAN  DIV Block elements (like ‘p’ and ‘h1’)Block elements (like ‘p’ and ‘h1’) Use the tag to create a specially formatted division or area of a web page. It can be used to format that area and places a line break before and after the division.Use the tag to create a specially formatted division or area of a web page. It can be used to format that area and places a line break before and after the division. CSS: div.chapter_title { font-size: 24pt; } div#heading {font-color: blue; }  SPAN Inline element (like ‘a’ and ‘img’)Inline element (like ‘a’ and ‘img’) Use the tag if you need to format an area that is contained within another, such as within a paragraph.Use the tag if you need to format an area that is contained within another, such as within a paragraph. CSS: span.really_bold { font-weight: bold; font-size: 110% }

23. The Cascade  This “cascade” applies the styles in order from outermost (External / Linked Styles) to innermost (actual XHTML code on the page).  This way site-wide styles can be configured but overridden when needed by more granular (or page specific) styles.

24. Some Simple Demos  http://www.w3schools.com/css/css_ examples.asp http://www.w3schools.com/css/css_ examples.asp http://www.w3schools.com/css/css_ examples.asp

25. More Complex Demos  http://www.cssplay.co.uk/boxes/krazy.html http://www.cssplay.co.uk/boxes/krazy.html  http://cssplay.co.uk/menu/tablescroll.html http://cssplay.co.uk/menu/tablescroll.html  http://cssplay.co.uk/menu/mantis.html http://cssplay.co.uk/menu/mantis.html  http://cssplay.co.uk/menu/gallery3l.html http://cssplay.co.uk/menu/gallery3l.html  http://www.cssplay.co.uk/menus/menuthree.html http://www.cssplay.co.uk/menus/menuthree.html  http://www.cssplay.co.uk/menus/menu5teen.html http://www.cssplay.co.uk/menus/menu5teen.html  http://www.cssplay.co.uk/menus/ultimate.html http://www.cssplay.co.uk/menus/ultimate.html  http://www.cssplay.co.uk/menus/snazzymenu.html http://www.cssplay.co.uk/menus/snazzymenu.html  http://www.cssplay.co.uk/menus/snazzymenu2.html http://www.cssplay.co.uk/menus/snazzymenu2.html  http://www.cssplay.co.uk/boxes/borders.html http://www.cssplay.co.uk/boxes/borders.html  http://www.positioniseverything.net/css-flyout.html http://www.positioniseverything.net/css-flyout.html  http://csszengarden.com/ http://csszengarden.com/

26. Things we did NOT cover!  Pseudo-classes  Degrading gracefully  Inheritance  Media types  Browser Bugs & Hacks  Specificity  Many, many, many more…

27. Resources REM -=- How do I find out more? -=- 10print “Wikipedia.org” 20goto 10  http://en.wikipedia.org/wiki/ Cascading_Style_Sheets  http://www.w3schools.com

28. Credits  Web Developer Foundations: Using XHTML by Terry Felke  Styles and Grace: Effectively Using Cascading Stylesheets by B. Collier Jones (bcjones@vt.edu) bcjones@vt.edu  Wikipedia.org