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... span class="briefcititems" table class="bibitems" tbody tr class="bibitemsheader" tr class="bibitemsentry" th class="bibitemsheader" th class="bibitemsheader" th class="bibitemsheader" td td td a a
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 1. In-line style 2. Ids 3. Classes, Attributes, and Pseudo-classes 4. Element Types and Pseudo-elements
Consider This Example <style type= text/css > </style> 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; } <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 here why 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 Validator http://validator.w3.org/ CSS Validator http://jigsaw.w3.org/css-validator/
Check in Various Browsers http://browsershots.org/
CSS Editor TopStyle Lite or Pro http://www.bradsoft.com/topstyle/tslite/ Lite is free Pro is $79.95 and WORTH it
Develop Your Skills Take an Online Course http://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/getspecific-css-styles/
CSS Cookbooks Andrew, Rachel. The CSS Anthology: 101 Essential Tips, Tricks & Hacks. Sitepoint, 2007. Schmitt, Christopher. CSS Cookbook. O Reilly, 2007.