CSS Cascade
Rules effect things below them:
<body> rules effect
<p>
When Rules Fight...
- Closer is stronger
- #id is stronger than .class is stronger than tag
- Last rule wins
More CSS Syntax
- /* comment */
- ',' means 'and'
- ' ' means 'descendent'
- '*' means 'everything'
- '>' means 'child'
- '+' means 'sibling'
- :link, :visited
- :hover, :focus, :active
Right Column
CSS Cascade: Inheritance and Specificity
- What about arguments?
- Closer is stronger
- body { color: red; background-color: yellow; }
- p { color: black; }
- Result:
- <body>
This is red on yellow.
<p>This is black on yellow</p>
</body>
- <body>
- #id is stronger than .class is stronger than tag
- .caption { font-weight: bold; font-family: arial; }
- #mainImageCaption { font-family: verdana; }
- <p class="caption" id="mainImageCaption">
This is black, bold and verdana on yellow
</p>
- Tie? Last rule wins
- p { color: orange; }
- <p>This is orange</p>
- Some things don't inherit
- Sensible things like background images, borders, etc.