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: More Syntax
- Comments:
- /* This is a CSS Comment */
- Select Multiples
- h1, h2, h3 { font-family: arial; }
- <h1>'s and <h2>'s and <h3>'s are arial
- Select Descendents
- div p { color: red}
- Note the ' ' (space)
- div [space] p
- <p>'s that are inside <div>'s are red
- Question: What's This:
div h1 h2 h3 { font-weight: bold; } - And this?
div h1, div h2, div h3 { font-weight: bold; }
- Select Everything
- * { background-color: white }
- everything is on white
- rarely used
- Select Immediate Child
- div > ol { color: orange }
- Only <ol>'s that are directly inside <div>'s
- div#navigation > ul.topNav { color: white; }
- Only an <ul> with class "topNav" inside of a <div> with id "navigation"
- div > ol { color: orange }
- Select Sibling
- h1 + p { margin-top: 0px; }
- Only a <p> right after an <h1>
- h3.sideBar + p { margin-top: 0px; }
- Only a <p> right after an <h3> with class "sideBar"
- h1 + p { margin-top: 0px; }
- Psuedo-Selectors
- :link and :visited (<a> tags)
- :hover (mouse moves over)
- a:hover { }
- a.mainNav:hover { }
- :focus (element with focus)
- :active (element that has been activated - e.g. a link while being clicked down)
- Usually <a>
- a:active { color: #FF0000; }