{ LearnWebSiteDesign.com }

HTML, HTML5, XHTML, CSS and CSS3 Tutorials

CSS Selectors Tutorial

Selectors are used to select the HTML element on an HTML document that can be styled.

Universal Selectors
Type Selectors
Class Selectors
Combining Selectors

Combining Classes
Id Selectors
Class or Id Selectors

Universal Selectors

The universal selector is an asterisk (*). When used alone, it tells the CSS intrepreter to apply the CSS rule to all HTML elements in the HTML document.

The code example below shows you how use a universal selector:

* { color:red; }

Type Selectors

CSS type selectors specify the HTML tag or HTML element to style.

For example, to style all paragraphs within an HTML document, you would specify the paragraph tag (p) within the CSS rule as shown below:

p { color:red; }

The code example below shows you how to specify that all level 1 headings (h1) within an HTML document are to be styled.

h1 { color:red; }

Class Selectors

Class selectors can be used to specify a style for an HTML element or a group of HTML elements which the HTML elements have the corresponding class attributes.

A dot (.) begins a class name selector in the style sheet. The class name is any name that you make up and should be made up of of only letters, numbers and/or hyphens, since this provides the best compatibility with older web browsers. The class name is included in the HTML document with the use of the class attribute.

NOTE: Do Not start a class name with a number. Only Internet Explorer accepts class names that start with a number.

The code example shows you how to use class selectors.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { color:black; } .red { color:red; } </style> <body> <p> This is a paragraph. </p> <p class="red"> The text in this paragraph is red. </p> <p class="red"> The text in this paragraph is red. </p> </body> </html>

In the code example below, the paragraphs and headings with the class name of red are targeted and styled with the class selector .red.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { color:black; } h1 { color:black; } .red { color:red; } </style> <body> <h1> This is a level 1 heading. </h1> <h1 class="red"> This text is red. </h1> <h1 class="red"> This text is red. </h1> <p> This is a paragraph. </p> <p class="red"> The text is red. </p> <p class="red"> The text is red. </p> </body> </html>

In the code example below, only the paragraphs with the class name of red are targeted and styled with the class selector .red.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { color:black; } h1 { color:black; } p.red { color:red; } </style> <body> <h1> This is a level 1 heading. </h1> <h1 class="red"> This is a level 1 heading. </h1> <h1 class="red"> This is a level 1 heading. </h1> <p> This is a paragraph. </p> <p class="red"> The text is red. </p> <p class="red"> The text is red. </p> </body> </html>

Combining Type and Class Selectors

You can combine type and class selectors.

The code example below shows you how to combine type and class selectors.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { color:black; } p.red { color:red; } </style> <body> <p> This is a paragraph. </p> <p class="red"> The text is red. </p> <p class="red"> The text is red. </p> </body> </html>

Combining Multiple Classes

Multiple classes can be applied to one HTML element.

The code example below shows you how to apply more than one class selector to one HTML element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { color:black; } .color { color:red; } .size { font-size:20px; } </style> <body> <p> This is a paragraph. </p> <p class="color size"> The text is red and has a font size of 20 pixels. </p> <p class="color size"> The text is red and has a font size of 20 pixels. </p> </body> </html>

ID Selectors

The ID selector are similar to class selectors, however, they are meant to specify a single, unique element to style. They are meant to be applied only once per HTML document. In comparison, class selectors are meant to be used however many times that you like within an HTML document.

The ID selector is used to select any HTML element that has the corresponding ID attribute and is defined with a number (#) sign (also called a pound sign).

The code example below shows you how to use ID selectors.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> #header { width:100%; } #content { width:100%; } #footer { width:100%; } p { color:black; font-size:16px; } </style> <body> <div id="header"> <p> This is a paragraph. </p> </div> <div id="content"> <p> This is a paragraph. </p> </div> <div id="footer"> <p> This is a paragraph. </p> </div> </body> </html>

Class Selectors or ID Selectors?

Since class selectors are meant to be used multiple times within HTML documents, you should reserve using ID selectors, for example for the use of ID selectors to style the layout of web pages.

Home

Tutorials

Templates

Free Website Templates

References

CSS References