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