Tutorials
Learn web design and programming with our free video and text tutorials.
Web Designer? Design and market your own professional website with easy-to-use tools.
CSS Selector Tutorials
Universal Selectors
The universal selector is an asterisk (*). It tells the web browser to apply the CSS rules that are specified to all HTML elements in the document. The universal selector applies to everything, including form input fields and tables.
The code below shows you how to use the universal selector.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
* { color:red; }
</style>
</head>
<body>
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading.</h2>
<p>
This is a paragraph.</p>
</body>
</html>
The code above would produce a web page with all of the text within the web page that is red.
Type Selectors
A type selector is the HTML element or tag that you want the web browser to apply CSS styles to.
In the code example below, the type selector is the paragraph (p) 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
p { color:red; }
</style>
</head>
<body>
<h1>This is a level 1 heading</h1>
<h2>This is a level 2 heading.</h2>
<p>
This is a paragraph.</p>
</body>
</html>
Grouping Selectors
CSS allows you to group selectors together in a single rule by placing a comma, followed by a space after each selctor.
The CSS code below will apply a bottom border to all level 1, 2 and 3 headings in the document.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
h1, h2, h3 { border-bottom: 1px solid black; }
</style>
</head>
<body>
<h1>
This is a level 1 heading.
</h1>
<h2>
This is a level 2 heading.
</h2>
<h3>
This is a level 3 heading.
</h3>
<h4>
This is a level 4 heading.
</h4>
<h5>
This is a level 5 heading.
</h5>
<h6>
This is a level 6 heading.
</h6>
</body>
</html>
Class Selectors
A class selector is preceded by a period (.) and is followed by the name of the selector. A class selector can be used more than once per document. The styles following the selector will be given to any HTML element that is assigned the class selector name.
When naming a selector, you should only use letters, numbers and/or hyphens and should begin with either letters or numbers. This is so that the styles comply with older web browsers.
The CSS styles below will style all of the HTML elements that are assigned the class selector ".border".
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
.border { border: 1px solid black; }
</style>
</head>
<body>
<h1>
This is a heading.
</h1>
<h1 class="border">
This is a heading.
</h1>
<p>
This is a paragraph.
</p>
<p class="border">
This is a paragraph.
</p>
</body>
</html>
ID Selectors
Each ID selector is meant to be unique and to be only once per HTML document.
The pound sign (#) precedes the ID name. ID names should only contain letters, numbers and/or hyphens and should begin with either letters or numbers.
The ID is included in the HTML document using the ID attribute within the HTML element or tag that the web browser will apply the styles to.
The code below shows you how this is done.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
#header { height:300px; border-bottom:1px solid black; }
#left-column { float:left; width:250px; }
#right-column { float:right; }
</style>
</head>
<body>
<div id="header">
<h1>
YourWebsite
</h1>
</div><!-- end id header -->
<div id="left-column">
<h2>
Left Column
</h2>
</div≶<!-- end id left-column -->
<div id="right-column">
<h2>
Right Column
</h2>
</div><!-- end id right-column -->
</body>
</html>
The Universal Selectors
The universal selector is an asterisk (*). When used alone, it applies the CSS rule to all elements in the document.
* { border: 1px solid black; }
The CSS style above will give every element in the document a border that is 1 pixel in width, with a solid border style with a black color.
To see the selector in action, copy and paste the code below and save the file with an .html extension and view it in your browser.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
* { border: 1px solid black; }
</style>
</head>
<body>
<h1>
This is a heading.
</h1>
<p>
This is a paragraph.
</p>
<form method="post" action="">
<input type="text" />
</form>
<table>
<tr>
<td>
This is a table.
</td>
</tr>
</table>
</body>
</html>
Descendant Selectors
Descendand selectors apply style based on whether one element is a descendant of another in the document tree. In CSS, descendant refers to an element that is a child, grandchild, etc. of another element in the document tree.
To see the descendant selector in action, copy and paste the code below and save the file with an .html extension and view it in your browser.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WebDevelopmentTutorials.com</title>
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">
h1 { color: red; }
h1 span { color: blue; }
</style>
</head>
<body>
<h1>
This is a heading.
</h1>
<h1>
This <span>is another heading.</span>
</h1>
</body>
</html>
In the style code above, h1 is the referred to as the ancestor and the style span is referred to as the descendant to the ancestor.