Selectors

A CSS selector is the (X)HTML element or elements to which the CSS rules are applied to. In other words, CSS selectors tell the web browser what (X)HTML elements to style.

CSS selectors precede the first curly brace.

h1 /* The level 1 heading is the selector in this CSS rule */ { color: red; }

There are several types of CSS selectors:

  • Universal Selectors
  • Class Selectors
  • ID Selectors
  • Type Selectors
  • Descendant Selectors

Universal Selectors

The "universal" selector is an asterisk (*). The universal selector tells the web browser to apply the CSS rule to all (X)HTML elements in the file.

The code below shows you how to apply the universal selector to an (X)HTML file.

* { color: red; }

Class Selectors

Class selectors tell web browsers to apply the CSS rule to all (X)HTML elements to which the class is assigned to within the (X)HTML portion of the file.

A period (.) begins a class selector name in the style sheet. The class name is any name that you give that particular class selector. It is best to create class names that are made up of only letters, numbers and hyphens and cannot include spaces.

The code below shows you how to apply class selectors to (X)HTML elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .red { color: red; } </style> <html> <body> <h2> This is some text. </h2> <h2 class="red"> This text is red. </h2> <p> This is a paragraph. </p> <p class="red"> This text is red. </p> </body> </html>

The code above would produce a web page similar to the one below.

This is some text.

This text is red.

This is a paragraph.

This text is red.

ID Selectors

ID selectors tell web browsers to apply the CSS rule to all (X)HTML elements to which the "ID" is assigned to within the (X)HTML portion of the file.

In the CSS code, the ID selector is preceded by a pound sign (#). ID selectors are meant to be only once per file, this includes CSS and Javascript and any other occasion in which the id attribute may be used. ID selector names can be any name that you give that particular ID selector. It is best to create ID selector names that are made up of only letters, numbers and hyphens and cannot include spaces.

The code shows you how to apply the ID selector. The CSS rule will give the (X)HTML element a left margin of 80px;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> .left { margin-left: 80px; } </style> <html> <body> <h2> This is some text. </h2> <p> This is a paragraph. </p> <p id="left"> This text is indented. </p> </body> </html>

The code would produce a web page similar to the one below.

This is some text.

This is a paragraph.

This text is indented.

Type Selectors

Type selectors specify (X)HTML elements by tag name are applied to every instance of that (X)HTML element type within the web page.

The code below shows you how to apply type selectors. This CSS rule specifies that every <h2> element within the file should have a left margin of 200 pixels and that every <p> element within the file should have a left margin of 80 pixels.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> h2 { margin-left: 200px; } p { margin-left: 80px; } </style> <html> <body> <h2> This is a heading. </h2> <h2> This is a heading. </h2> <h2> This is a heading. </h2> <p> This is a paragraph. </p> <p> This is a paragraph. </p> <p> This is a paragraph. </p> </body> </html>

The code above would produce a web page similar to the one below.

This is a heading.

This is a heading.

This is a heading.

This is some text.

This is some text.

This is some text.

Descendant Selectors

Descendant selectors specify rules based on whether one element is a descendant of another.

The code below shows you how to target a specific <em> element on a web page, but not all <em> elements on the web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> em { color: yellow; } p em { color: red; } </style> <html> <body> <h2> The text in this <em>heading is yellow</em>. </h2> <h3> The text in this <em>heading is yellow</em>. </h3> <p> The text in this <em>paragraph is red.</em> </p> </body> </html>

The code above would produce a web page similar to the one below.

The text in this heading is yellow.

The text in this heading is yellow.

The text in this heading is red.

Grouping Selectors

CSS allows you to group selectors by seperating with commas (,).

The CSS code below would give the text in all of the (X)HTML elements the color of red.

h1, h2, h3, p { color: red; }

How To Insert Styles

You can apply CSS styles to HTML in one of 3 ways:

  • Inside an HTML element
  • Inside the starting <head> and ending </head> tags of an (X)HTML file
  • In an external CSS file (or multiple files), which is saved with a ".css" extension

Inline Styles

Inline styles should be applied only to single occurrences of an element. Inline styles are created by adding the style attribute to a tag. The style attribute can contain any CSS property.

The code below shows you how to apply inline styles.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> </style> <html> <body> <p style="font-size: 22px;"> This is some text. </p> <p> This is some text. </p> </body> </html>

The code above creates a web page similar to the one below.

This is some text.

This is some text.

Internal Style Sheets

Internal style sheets, (also known as embedded style sheets), are meant to be used when a single (X)HTML file has a unique style. Internal styles are defined in the <head> section of the (X)HTML file by using the starting <style> and ending </style> tags.

The code below shows you how to an embed internal style sheet in an (X)HTML file. The styles give all paragraphs in the (X)HTML file a left margin of 40 pixels and makes all of the text within the paragraphs the color red.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <style type="text/css"> p { color: red; margin-left: 40px; } </style> <html> <body> <p> This is some text. </p> <p> This is some text. </p> </body> </html>

The code above creates a web page similar to the one below.

This is some text.

This is some text.

External Style Sheets

External style sheets should be used when a style is applied to multiple web pages. External style sheets allow you to change the styles of multiple web pages by making changes to only one file.

External style sheets must be linked to from each (X)HTML file using the <link> tag, which is nested within the starting <head> and ending </head> tags.

External style sheets are seperate files that are saved with a ".css" and can be named whatever you like, for example: "mystylesheet.css". External style sheets contain only the specified CSS rules. External style sheets cannot contain any (X)HTML code.

The code below shows you an example of an external style sheet.

Note: Do not leave spaces between the property value and the unit, for example, this is correct: "color:red;", this is not: "color: red;". The reason is that leaving spaces in between the property value and the unit is that Firefox and Opera may not interpret the external style sheet correctly or at all.

* { color: red; } p { margin-left: 60px; }

The code below shows you how to link to an external style sheet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <title>Your Title</title> </head> <link rel="stylesheet" type="text/css" href="mystylesheet.css" /> <style type="text/css"> </style> <html> <body> <h2> This is a level 2 heading. </h2> <p> This is a paragraph. </p> <p> This is a paragraph. </p> </body> </html>

The style sheet and (X)HTML file above would create a page like the one below.

This is a level 2 heading.

This is a paragraph.

This is a paragraph.

Web Hosting Resources

Free Website Templates