CSS3 Examples

There are a few basic rules that govern which (separately-defined) styles apply to what elements. Fortunately, these are relatively simple and logical, once explained. I'll go through them one at a time.

In CSS, if you want some styles to apply to HTML elements of a certain type, you write the HTML element type, followed by style definitions all contained between curly braces and separated with semicolons.

You can give any HTML element one or more class names. In CSS, these are defined with a preceding period (full-stop).

Styles derived from classnames (normally) override any of the same styles defined for the HTML element type (more on this later).

This is extremely useful, because you can definte style characteristics under a single class, and then apply those characteristics to multiple elements by giving them that class (even if they're different types of elements).

HTML elements can have id properties as well as class names.

While there can be multiple elements that share any class name, there should only be one element with a particular id property. This isn't important in CSS, but it is important in DHTML, so good practice to follow.

Styles are associated with particular ids in CSS by prefixing the name with a hash/pound sign (#).

Another thing to remember is that properties inherited from an id will overwrite properties an element gets from its class (or from its HTML element type).

Taking the above example...

The first bit of text gets its green colour because it's inside the div. The second bit of text becomes red because it's inside something with class="special", which overrides the previous color property. It also gets the additional background-color. The third bit of text is inside all three elements, but the properties it gets from its id overrule any other conflicting style properties it gets from the other elements. Note that it has also inherited the background-color from the special paragraph, because the id's styles don't specify a background.