Go Forth & Multiply

Multiple selectors can be applied to a declaration
h1, h2, h3, h4 { color: #5AE030; } /* lime green! This is color as a hex value. You can install gcolor2 to find these, or even better agave which will generate color schemes for you. */

You can also apply multiply declarations to a selector (or selectors). For easy reading they are normally put one to a line and indented.
p { font-family: helvetica, verdana, sans-serif; font-size: 1.25em; text-align: right; color: #ff7152; background-color: #52dfff; width: 75%; }

This paragraph is
oh so moderne.

You Got Class

The first of these is the class attribute. These can be used multiple times in one document. The HTML looks like this:
<h4 class="section_header">Make you class names meaningful</h4>
The CSS looks like this:
h4.section_header { font-family: helvetica, verdana, sans-serif; font-size:18pts; text-align: center; color: #89ff52; background-color: #c852ff; width: 50%; }

Make your class names meaningful

Names that are easy to understand and relate to the content or structure of your document, like section_header, are good. Names like sbschd or bob are not. It's tempting to use names like lime_green. These are easy to remember but not always the best of ideas. If you want to redo the color scheme, say, you can easily end up sabotaging yourself. A name that reflects the pupose like 'warning' is better.<span class="warning">Don't shoot yourself in the foot.</span>

It is also possible to have a class name that is not attached to any element:
.warning {
You can then apply to any HTML element using class="warning" as part of the tag.

Can I See Your ID?

IDs work like classes but they are unique, they should only appear once in a document. The other thing to note is that they take precedence. So if you apply a generic style to paragraphs, say, and then apply an id to a specific one attributes set with id will overide those in the genric style if you set something in both ID's are designated by # in CSS.
#main_title { ... <h1 id="main_title">
N.B. You can have a class and an id in one tag but not two classes or two id's etc.

Pseud!

CSS contains something known as pseudo-classes and pseudo-elements. The first is most often used to control the display of links:
a:link {color: grey;} /* unvisited links are green */ a:visited {color: green;} /* visited links are green */ a:hover {color: orange;} /* links turn orange when a user hover their mouse over them. */ a:active {color: red;} /* and red when they click on them. */ There is also a :focus pseudo-element which applies to things that have keyboard focus and a :lang class e.g. :lang(fr) that affects things like punctuation where they are specific to that language.

Pseudo-elements behave like real elements (paragraphs, headers etc) but are used where these don't actually exist in the text. (shown here as <p:first lint>)
p:first-line { text-transform: uppercase; } <p><p:first line>The first line</p> of this paragraph is upper case.</p>

The first line of this paragraph is upper case. The first line is defined by the browser so it won't always end in the same place. Instead it will end the first time the browser wraps the line. Note as presented the CSS will effect all paragraphs to prevent this you need to add a class or id like this: p.upper_fl:first-line.

Other pseudo elements are :first-letter (which can be used to make drop caps (see: http://tinsology.net/2009/06/css-drop-cap-effect/), : before and :after which might be used for giant quote marks (using the <blockquote> tag). CSS3 introduces the ::selection psuedo element, and furhter distungushes them from pseudo-classes by using a double colon:: for all of them.

(We're busy spending your) Inheritance

The cascade has been refered to before when talking about how one style overrides an other. There are some other things you need to know about. When one tag encloses another, for instance <li> tags wrapped in <ul> tags any attrbutes we call these the parent (ul) and child (li) elements. The child inherits the attributes of the parent: so if you set font size, for instance, in the parent this will also apply to the children. If you want to overide this — as you might want to do with links in a paragraph — you can use contextual selectors:
p { color: blue; } p a:link { color: grey; } p.message { color: white; background-color:green; } p.message a:link { color: red; }

Remember the ordinary rules of precedence apply. So if you set: p{color: grey;} and .notice{color: purple;}and use <p class="notice"> it will be purple, not grey. Generic is over ruled by class, which is over ruled by id which is over ruled by inline (in tag) styles, and ditto for imported vs inpage etc. Finally you can use !important to overide any of these. p{color: pink !important;} will always color the text pink.

Block(head) or Inline (skater)?

Block level elements are those which display on a line of their own: paragraphs, lists, tables, headers, divs and the body tag (as well as, on occasion, images and forms). They can only be chldren of other block level elements,m and not always then.

Inline elements contains pretty much everything else: links, images, spans em and strong etc. They are contained in line: that is within the flow of the text. There are also list-item elements: li , dt and dd. The importance of all this will become clear when we look at layout in the next lesson.