How CSS styles apply to HTML elements

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. 1. Applying to HTML elements themselves 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.

p { font-weight:bold; line-height:1.3em; } The styles above will apply to me because I am a paragraph. But they won't apply to me.

The code above will apply bold text and slightly increased line-height to the contents of any element of type (i.e. paragraphs).

2. Applying to elements with class names 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).

Applies to me. But does not apply to me.

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).

3. Elements can have multiple classes

HTML elements can have more than one class. Class names must be separated in the class property with spaces.

Both styles will apply to me.

4. Applying styles by id property 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).

This text would come out green, because the ID trumps the class and the element type.

Note that, in the example above, the font-weight:bold; and background-color:#ff9; styles still apply to the text, because it's only the color: property that is overwritten by the superior style definition.

5. CSS styles apply to elements within elements, unless overwritten Taking the above example...

This text is only inside the div... This text is inside the div and inside the paragraph... This text is inside the div, paragraph with classname and span with id.

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.