CSS: Beyond the Code

CSS: Beyond the Code Karen Perone Rodman Public Library peroneka@oplin.org

HTML vs. CSS vs. Javascript • HTML for content (text, images, sound) • CSS for presentation (layout, color) • Javascript for behavior (cursor in the box, form field validation)

Why CSS? • Keep presentation separate from the content • Leaner, meaner web pages • Ease of maintenance • Easier means of reusing web pages for other purposes (RSS, text-to-speech) • Separate style sheets for media types

The Cascade • The “C” in CSS • Least specific to most specific • Depends on type of origin • User agent (browser defaults) • Author (web page creator) • User (user styles in browser)

User Agent • http://whatsmyuseragent.com/ • Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16 • Built-in style sheet in all web browsers • Varies from Firefox to IE6 to IE7 to Opera, etc.

Author Styles • Created by the web site/page author • Can be (least specific to most specific): • Linked (external) • Style element (embedded) • Element attribute (in-line)

WebPAC Style Sheets • ProStyles.css -or- iiiStyles.css (default values; cannot be modified) • styles.css (main author style sheet) • ie_styles.css (specifically for IE browsers) • printVer.css (specifically for print version)

The Document Tree • Helpful in determining containing elements • Establishes: • Ancestor • Descendent • Parent • Child • Sibling • Determines inheritance of CSS rules

http://www.guistuff.com/css/css_doctree.html

Relationships http://www.guistuff.com/css/css_doctree.html

Class vs. ID • ID • Can be used only once on a page • Identifies a specific section • Example: toplogo, content, side navigation, footer • Use in style sheet: div#nav • Use in HTML: <div id=“nav”>

ID in styles.css • Selector specified div#main {margin: 0 20px 5px 5%;} • Implied universal selector #main div {padding-top:.2em} • Can be combined with class #main .tabs a:hover { text-decoration: underline; }

Class vs. ID • Class • Can be used multiple times • Styles a type of content • Example: boldface, paragraph alignment, font • Use in style sheet: p.bold • Use in HTML: <p class=“bold”>

Class in styles.css • Implied universal selector used extensively .navigationRow { margin: -3px; } • Could be used as a div or p or ul • div class=“navigationRow” • p class=“navigationRow” • ul class=“navigationRow”

Pseudo-classes • Most common • :link • :visited • :hover • :active • Always use in this order: L V H A(LoVe – HA!)

Pseudo-classes • Less often used • :focus input:focus { background-color: Red; } BEFORE AFTER

Fun with Pseudo-classes • :first-child table.bibItems tr.bibItemsEntry td:first-child { font-weight: bold ; color: Green ; font-size: 200% ; background-color: red ; }

How We Got There From briefcit.html: table.bibItems tr.bibItemsEntry td:first-child

Specificity • Represented by four comma-separated values • Calculated based on counting elements in the selector • The highest value wins • In case of a tie, the last declaration wins

Figuring the Specificity • In-line style • Ids • Classes, Attributes, and Pseudo-classes • Element Types and Pseudo-elements

Consider This Example <style type=“text/css”> p { color: black; background-color: blue; font-size: 3em; } div.warning p { color: red; } div#caution p { color: yellow; } body#home div p { color: white; } </style> <body id="home"> <div id="caution"> <p>What color am I?</p> </div> </body> What color will the paragraph text be?

Add Up the Scores p { color: black; background-color: blue; font-size: 3em; } 0,0,0,1 div.warning p { color: red; } 0,0,1,2 div#caution p { color: yellow; } 0,1,0,2 body#home div p { color: white; }0,1,0,3 <body id="home"> <div id="caution"> <p>What color am I?</p> </div> </body>

And the Winner Is…

Inheritance of Style • In the absence of a specific declaration for the element • Value of element will inherit its characteristics from its parent

Specificity High to Low

Why Is My Text So Small? • Container size has nothing to do with it • Size property is inherited from parent • Nesting the elements will cause cumulative size • Relative font size the culprit

Container Elements • Box elements that can contain other elements • Examples of box elements: • body • div • p • h1 • ul

Example div.a { font-size: 85% ; } div.b { font-size: 85% ; } div.c { font-size: 85% ; } <div class=“a”> text in div.a <div class=“b”> text in div.b <div class=“c”> text in div.c </div> </div> </div>

Hard to tell from herewhy text gets smaller

But add in borders and widths and it becomes apparent

Mathematically Speaking… • div.a - 85% of body default font size 85% x 100% = 85% • div.b - 85% of div.a font size 85% x 85% = 72.25% • div.c - 85% of div.b font size 85% x 72.25% = 61.41%

Options that Work div.a { font-size: 18pt ; width: 85% ; border: 2px solid red ;} div.b { font-size: 18pt ; width: 85% ; border: 2px dashed blue ;} div.c { font-size: 18pt ; width: 85% ; border: 2px dotted green ; } ================== div.a { font-size: 85% ; width: 85% ; border: 2px solid red ;} div.b { font-size: 1em ; width: 85% ; border: 2px dashed blue ;} div.c { font-size: 1em ; width: 85% ; border: 2px dotted green ; }

Check Your Work • HTML Validatorhttp://validator.w3.org/ • CSS Validatorhttp://jigsaw.w3.org/css-validator/

Check in Various Browsers http://browsershots.org/

CSS Editor • TopStyle Lite or Prohttp://www.bradsoft.com/topstyle/tslite/ • Lite is free • Pro is $79.95 – and WORTH it

Develop Your Skills • Take an Online Coursehttp://eclasses.org/ • Discounts available to International Webmasters Association members($49 annually) http://www.iwanet.org/ • http://www.w3schools.com/css/(free)

For More Information • General CSS:Olsson, Tommy & Paul O’Brien. The Ultimate CSS Reference. Sitepoint, 2008.http://reference.sitepoint.com/css • Specificity:O’Brien, Paul. “Get Specific with Your CSS Styles.”www.sitepoint.com/article/get-specific-css-styles/

CSS “Cookbooks” • Andrew, Rachel. The CSS Anthology: 101 Essential Tips, Tricks & Hacks. Sitepoint, 2007. • Schmitt, Christopher. CSS Cookbook. O’Reilly, 2007.

CSS: Beyond the Code