Cascade: Determining which rule will be applied

• Styles conflict can occur thru inheritance (p inherits from body) - more specific wins over closest
• Cascading more than one sheet, on specificity ties last one in wins
• Style attributes is the closest and most specific, it always wins

Body is blue, paragraph is maroon strong is 24px, strong gets it color from most recent/nearest ancestor

Specificity: equation for more specific; specifity rankinsgs : style="sets font-size", ID, class, tag is lowest

Detailed Specificity, but in general
10,000 !important, 1,000 Points Inline attribute style, 100 Points ID, 10 Points Class, 1 point Tag

jsbin specificity summary with color: red !important; (specific to selector)

for this page all anchor tags are sky blue, inside a li tag bold, with span class .byline anchors have no text-decoration.

Paragraph tag class byline with anchor tag class email inside* - Two classes w tag, same specificity - last one in wins,
!important declaration overrides all CSS properties specificity rules.

Best Practice use one style sheet for entire site...

• typical to have sites with multiple style sheets (class site - aka jQueryUI),
• Selective Overriding: use style block after link, to set specific properties on page.
• Can also have a specific style sheet for each page
• Or structure each page with unique identifiers body id="pagename". class site

CSS Resets

• Browsers apply default formats to all tags. For example h1 is display type block and is 20% larger than h2. Problems is defaults vary between browsers.
• * { margin:0; padding: 0 ; }
• Deprecated Eric Meyer resets
• If you zero out all elements, you need to reset all elements.
• I don't use resets - may need default formatting, do not want to format all elements
• Better approach is normalize.css, make all browsers look the same.

Tutorial: the Cascade in Action Page 111

1. Copy up folder 05 and open 05/cascade.html
2. View linked styles.css; Note DW will have a Red Error in the bottom tag selector
   Fix Error,
   
   If using one folder for all finished assignments use the name and links cascade.css instead of previously used styles.css
   
   
3. Under .sidebar rule add...
   body {
   color: #B1967C;
   font-family: "Palatino Linotype", Baskerville, serif;
   padding-top: 115px;
   background: #CDE6FF url(images/bg_body.png) repeat-x;
   max-width: 800px;
   margin: 0 auto;
   }
   h1 {
   font-size: 3em;
   font-family: "Arial Black", Arial, sans-serif;
   margin-bottom: 15px;
   }
4. Preview and test page

Creating a Hybrid style page 113

1. Add rule for h2 at end of styles.css or cascade.css
   h2 {
   font-size: 2.2em;
   color: #AFC3D6;
   margin-bottom: 5px;
   }
2. Add more Specific tag < class, to end of styles.css or cascade.css
   .main h2 {
   color: #E8A064;
   border-bottom: 2px white solid;
   background: url(images/bullet_flower.png) no-repeat;
   padding: 0 0 2px 80px;
   }
3. Save work preview, verify specificity

Overcoming Conflicts page 115

1. Create style to format just main column paragraphs
2. Add to end of styles.css or cascade.css
   .main p {
   color: #616161;
   font-family: "Palatino Linotype", Baskerville, serif;
   font-size: 1.1em;
   line-height: 150%;
   margin-bottom: 10px;
   margin-left: 80px;
   }
3. Style specific for .intro
   .intro {
   color: #6A94CC;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.2em;
   margin-left: 0;
   margin-bottom: 15px;
   }
4. Set first paragraph in cascade.html to class="intro"
5. Preview Web page
6. Alter .intro to p.intro
   p.intro is paragraph tag set to class="intro"' p.intro is more specify than .main p
   .main p would be a paragraph tag inside a tag of class="main"
7. Preview Web page, verify rules and specificity