Skip to main content

Getting StartED with CSS

Basic Selectors

Selectors tell the browser where to apply specific style rules. Knowing which selector to use is the key to mastering CSS.

The first selector that many people learn about is the class selector. As a result, they end up peppering their HTML markup with classes, making their CSS hard to maintain. Although classes are very important, you should take care not to overuse them. Often, you can achieve the same effect more easily and efficiently by using a type selector or one of the more advanced selectors, such as a descendant selector or attribute selector.

This page describes the following basic selectors:

All browsers currently in widespread use support the selectors on this page.

Universal selector

The universal selector is an asterisk (*). It matches any element. In practice, the universal selector is rarely used on its own. It’s used mainly in conjunction with attribute selectors.

Type selectors

A type selector redefines the default style of an HTML tag. It consists of the name of the tag, without the angle brackets. For example, body redefines the default style of the <body> tag. This is very powerful. For example, if you put the following style rule in an external style sheet and attach the style sheet to every page in your site, it automatically redefines the font and color of text throughout the site:

body { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #008080; }

Simply by changing the values in this style rule, you can restyle the look of text in the entire site. More specific selectors can be used to apply different fonts and colors to headlines or text in various parts of a page.

Because they affect HTML tags, type selectors are sometimes called “tag selectors.”

Class selectors

A class lets you apply styles to any HTML element, regardless of which tag it uses. Properties inherited by default are also applied to the element’s children. The class name can be anything of your choice, as long as it follows these rules:

You create a class selector by prefixing the class name with a period (dot). For example, this creates a class called warning:

.warning { font-weight: bold; color: #F00; }

The class is applied by adding the adding the class name with the class attribute to the opening tags of the elements you want to style like this:

<h1 class="warning">A bold, red heading</h1>
<p class="warning">Please fill in the missing items.</p>

You can apply more than one class to the same element by assigning a space-separated list of values to the class attribute like this:

<h1 class="warning reallyBig">A really big, bold, red heading</h1>

This applies the style rules in both the warning and reallyBig classes to the same element. For example, if the reallyBig class assigns a font-size of 72px, the heading in the preceding example will be bold, red, and 72px. However, the font-size of the paragraph in the earlier example will be unaffected, because it uses only the warning class.

Support for more than one class on an element is unreliable in IE6.

ID selectors

An ID selector applies styles to an element in the same way as a class. The main difference between an ID selector and a class is that an ID can be used only once on each page, whereas a class can be used many times. Properties inherited by default are also applied to the element’s children, so this is a powerful way to style whole sections of a page by wrapping the section in a <div>, assigning it a unique identity through the id attribute in the opening tag, and creating an ID selector.

The naming rules are the same as for a class (see preceding section).

To create an ID selector, prefix the ID name with a hash sign (#). For example, the following style rule applies to an element with the ID container:

#container { width: 960px; margin: 0 auto; }

Some developers prefix the ID selector with the element’s type selector, e.g., div#container. However, this is normally unnecessary, because an ID should be unique within the page, so the ID selector should be sufficient to identify where the style is to be applied.

JavaScript dynamic effects, such as flyout menus, make extensive use of IDs, so ID selectors are frequently a convenient way of adding styles to specific page elements without the need to add extra HTML markup.

Grouping selectors

To avoid repetition when applying the same styles to several elements, you can group selectors as a comma-separated list. For example:

h1, h2, h3, h4, h5, h6 { color: #468966; font-family: Georgia, "Times New Roman", Times, serif; margin: 10px 0; }

This has the same effect as creating six identical style rules for each level of heading.

Do not confuse grouping selectors with descendant selectors. To target both <blockquote> elements and paragraphs, you group both type selectors by adding a comma between blockquote and p (blockquote, p). Removing the comma (blockquote p) changes the meaning completely by targeting paragraphs inside <blockquote> elements.