Cascading Style Sheets (CSS) (page 2)

CSS classes

A class in CSS is a way to group properties that can later be applied to a specific element using its "class" attribute. These groups are named and can be defined for specific elements or for all of them. To define a class, authors must write the element for which it's declared, followed by a point and the class name. The block of properties is enclosed by curly braces like in the examples above.

In the following example we'll define three classes: the first named "important" for the "p" element, the second named "tiny" for every elements and the third named "big" for every elements too.

Note that the use of an asterisk as element indicates that this class can be applied to any type of element (is the same as using nothing). Also take into account that the first declaration doesn't specify that the class must be automatically applied to the "p" elements in the document; only "p" elements with the name "important" as value of the "class" attribute will be affected by this style.

Using the "class" attribute

Let's use the previous example to show how to apply the properties grouped in classes to the elements in an HTML document. In the next example, we'll apply the three classes to three paragraphs respectively.

Remember that the "important" class was defined only for the "p" element so it worked well in the example above, but it wouldn't work if we apply it to another type of element.

In this case, the user agent will try to find a class with the name "important" that's defined for the "a" element (a.important {...) or for all elements (.important {...), and as there's no class with that definition, no property will be applied to the element.

The "class" attribute also support a space separated list of classes as value, which can be useful to apply several properties from different classes to a single element at once.

This paragraph will not only have a red color (from the "important" class) but will also have a font size of "12px" (from the "big" class).

ID selectors

ID selectors work in a very similar way to classes with a few exceptions. In the first place, in the definition of an ID selector the element's name is followed by a numeral symbol (#) and an identifier (that corresponds with the "id" value of the element to which the attributes will be applied).

Except for the "#" symbol and the name (that must be an identifier), the rest works exactly as classes do.

Using the "id" attribute

To apply CSS properties to HTML elements using ID selectors is through the "id" attribute of the element. As you may know the "id" attribute is designed to be an identifier for the element (thus it must be unique), which means that the properties defined using this method will only be applicable to a single element per document.

In this case we could say that the properties refer to a specific element instead of the classes, that are designed for elements to refer to them. In this example, a paragraph has an "id" value that matches one of the previous definition.