Introduction to CSS

Cascading Style Sheets
CSS is used to apply styling to a web page independent of content. It defines a series of rules that define how this are displayed.
H1 { color: purple; }
They are loosely patterned after the Algol family of programming languages, familiar from C etc. Hence the use of { } as delimiters and C-style comments (no // though).
/* this is a comment.*/
/* This is also a comment
they can be extended over multiple lines */
Multiple styles can be applied to a page in a 'cascade' that defines the order of precedence.
At the top of the cascade are external style sheets. They are imported by placeing a limk on the head section of the html.
<link href="/style.css" type="text/css" rel="stylesheet" title="default">
These are overridden by the style element, which is also placed in the head section
<style type =text/css>
@import url(newstyle.css); /* come first, imports external style sheet */
h1 {color: grey;}

Finally there are inline styles:
<h1 style="color: pink;">
Together these allow a fine granularity of control over the way elements are displayed.
Style Sheets
Multiple style sheets can be used in one document. On their own they will be combined: allowing you to use both a site-wide and section or page spcific style sheets. It is also possible to target them. There are hacks that are used to target specific (older) browser versions to take into account their quirks and inadequacies, but this is definately hackish and we won't be covering it here. A better example, and one that is incresingly frequent is using different stylesheets for mobile phones or when printing a page, for example.
<link rel="stylesheet" type="text/css" media="handheld" href="/mobile.css">
<link rel="stylesheet" type="text/css" media="print" href="/print.css">

CSS Rules!

CSS consists of rules like this:
p { color: pink; }

Each rule can be separated into two parts, a selector and a declaration:
h4 { font-size: 120%; }
The selector, here colored blue, determines what the style is applied too, the declaration, colored green, what style is applied.

The declaration can be further divided into two parts: the property (orange) and the value (purple) followed by a semi-colon. CSS property describes thow things can be styled e.g. color, font, text alignment etc. the value contains one or more keywords that say exactly how that property is being changed.
pi { text-align:right; }
li { font-family: helvetica, verdana, sans-serif; }

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.

So far we have only seen styles applied directly to html elements:
h1 { color: grey; }
This means the rule is applied to every instance of that element (e.g. every h1) in a document. By itself this would be quite restrictive, fortunately there are ways to be more specific.

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.


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:, : 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.

Measure for Measure

In Living Color

There are two basic ways of referring to colors: by name and rgb value. There are sixteen names that browsers generally recognise and wgile red, blue, purple are obvious enough some of the others aren't: teal, fuschia, tan, lime,aqua, maroon, navy, olive and silver.

The commonest way of referring to rgb colors is by hex values (= hexadecimal, or base 16). White is #fffff, Black #00000 and Red #FF0000 so you can see it consists of sets of three numbers that go 00 01...0A...0F 20...FF. Where colors consist of pairs of letters you can use a short hand: so white is #fff. You can also refer to them by decimal rgb(255,0,0) or percentage rgb(100%,0,0) (both red) though this is much less common.

(Doing) Lengths

There are two ways of expressing length (width etc) Absolute and relative. The first gives you absolute control and is often the tempting choice, as wel las the more familiar, but you should restrain yourself. Using them can result in difficulties with layout, such as things disappearing from view, and is not good for accesibillity, so relative units are often better. This give rise to so called liwuid layouts which change with browser and screen size.


These are:

points: font size
also font size 1 pica = 12 points

Meet the Relatives

These are:

Ems. These are typographical, that is they measure font size. In css 1 em is equivalent to the set font size. So 1.5 em is 1 1/2 times this. Ems are good to use since they don't over ride users preferences. Some people need large type. Using ems will keep the same relative size/importance as your design but will allow for user choice. Use'em.
Ex is equivalent to the x-height (the height of a lower case x) so varies between fonts however a lot of browsers just set it to half an Em. Ems are genrally a better choice
Pixels. This is a kind of a wierd one. Pixels are relative since they depend on screen resolution. They act more like absolute measurements in a lot of ways. Great for images and can be used for alyouts with care, but can give as nearly as many problems as absolute measurements if you are not careful, though they are necessary.. Don't use them for fonts.
Percentage. Really useful. If used for fonts act like ems. When used for width etc are relative to the parent (i.e. Containing block level) element (normally a div, paragraph or the body element, though the body is relative to the html) . Very useful for layout. See the colored header (make your names meaningful) and paragraph above.

Properties, Schmoperties

There are lots of these. See this wiki page HTML, CSS, Javascript Reference for sites with full lists. Here are some common ones to be going on with. The pipe symbol | means or


These apply to block level elements text-indent:length | precent /* indents the first line.*/ text-align:left|right|center|justify

These apply to all elements text-transform:upper |lower | capitalize| none/* overides what ever is written */ text-decoration: none | overline| underline | line-through | blink /*I will hunt you down personally if you use blink. */


font-weight: normal | bold| bolder} lighter /* also 100, 200...900*/ font-size: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | ems or pts etc | percentage font-style:italic | oblique | normal/* italic and oblique should be differnet since italic is supposed to be a different design rather than just slanted but alas...*/ font-variant:small caps | normal /*Any of these can be combined */

Colors and backgrounds

color: color /*not just for letters */ background-color:color /* nornally used for block level elements but doesn't have to be. */ background-image:url(image.url) /* no quotes necessary */ background-repeat: repeat | repeat-x | repeat-y | no repeat /* no repeat can be really useful. hiny your background doesnt't have to fill the whole page also repeat-y */ background-attachment: fixed | scroll /* make the background stay will the text scroll*/ background-position:top, left, right, bottom /*can be combined e,g, top left */ filter:alpha(opacity=80); /*transparent backgrounds of IE, numeric value like percentage */ filter:alpha(opacity=80); /*CSS3 transparent backgrounds , for firefox */

Part 2...