CSS: Controlling presentation
INFO 1300 September 23, 2009
So far
h1 { color : #A0BBF2; } p { font-size: 12px; font-family: Verdana, sans-serif; } body { background-color: black; } CSS rules let you style HTML elements
What if you wanted to style an element uniquely
All paragraphs are red All paragraphs are red But one is blue All paragraphs are red All paragraphs are red
What if you wanted to have differently styled groups of an element
These paragraphs are red These paragraphs are red These paragraphs are blue These paragraphs are red These paragraphs are red These paragraphs are blue These paragraphs are blue
Styling an element use uniquely with an id
This a <p>, But it has different styling than other <p>
Lets look under the hood
Using ID for unique styling
#idName {property: value; property:value}!
#contactinfo {color: orange}!
Remember: an ID can only be used in ONE place in an HTML document. But the same ID can be used in multiple HTML documents. And a CSS file using a ID as a selector can be linked to by multiple HTML documents.
Styling a group of elements the same with a class
This a <h2> and a <p>, both have color:green
Lets look under the hood
Using classes to styled a group of elements the same
Of course you can make this element specific
Class Syntax
.className {property: value; property:value}!
.contactinfo {color: orange}!
element.className {property: value}!
p.contactinfo {color: orange}!
A class can be used as many times as you wish in a document
Class vs. id
Use class when you want to affect two or more XHTML elements <p class="caption"> Mod Crusher's Club Jacket </p> .. <p class="caption"> Scooters Outside a Mod Hangout </p>
Use id when you want to affect only one, single element
<p id="pointers"> Learn more about Mods at these sites. </p>
So why is it a cascading style sheet
Understanding XHTML Structure
From this
To this
Tree structure reflects nesting. The children of a parent are those tags nested within it.
Styles are inherited or cascade through the tree
Understanding inheritance
body {color: red} p {color: blue}
What if we want to style a whole branch (or subtree)
Use div and span to add structure
Group together parts of the document that represent logical information units Then using id or class, style those units
Adding to the tree
div vs. span
<div class="imagebox"> <img src="modsscooters.jpg" height="112" width="84" alt="" /> <p class="caption"> Scooters Outside a Mod Hangout</p> </div>
<p> <span id="opening">A Mod was a product of working class British youth of the mid-sixties.</span> They portrayed an image of being stuck up, emulating the middle classes, snobbish and phoney. .. </p>
Div is a block-level element. It groups items that should be styled together. Like <p>.
Span is an in-line element. It is used to style inside block-level elements. Like <em>.
<div> allows us to put a new invisible parent in the tree
Group a set of elements in some logical structure (cat group, dog group) Then use class to style those groups
Dogs and Cats
Some selector variations
Element: p { font-size: 1em; } Descendent: p em { font-weight: bold; } Class: p.urgent { color:red; } ID: h1#page-title { font-size: 250%} Multiple: h1, h2, h3, h4, h5, h6 { text-align: center; }
It starts to get hard to figure out what rule applies
Generally the most specific rule matches (e.g., class is more specific than element) If no match then use inhertance HF page 322 (simple) HF page 417 (the gory details)
Caveat on CSS
Beware, or you will rip your hair out
Develop CSS file step-by-step, debugging as you go Test in multiple browsers
Review
CSS defines rules that change how content is presented
With picky syntax
Lots of properties are available for styling
Color; links
You can select different (sets of) HTML elements to be styled
