CSS Class Selector Tutorial
What is a Class Selector?
A class selector let's you define styles for one or more HTML element of the same type.
A dot (.) begins class name selector in a stylesheet, followed by the name of the of the class itself. The code below is an example of a class selector style.
Note: Class names should be made up of letters, numbers or hyphens and should not begin with a number. Class names that begin with a number will not work in Mozilla/Firefox browsers.
A dot (.) begins a class name selector which is followed by the class name itself. The style of the class selector will be applied to every HTML element with the class selector name "right".
In the CSS code below, the class selector has the name of "right" and every HTML element that has this class selector applied to it will have the text aligned to the right.
<style type="text/css">
.right { text-align: right; }
</style>
Then the ".right" is added to the HTML element(s) that we want to adopt this style.
<p class="right">This is another paragraph.</p>
<h3 class="right">This is another heading</h3>
The code below shows you the example above in action.
<!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>
<title>Web Development Tutorials.com</title>
<style type="text/css">
.right { text-align: right; }
</style>
</head>
<body>
<p>
This is a paragraph
</p>
<p class="right">
This is another paragraph.
</p>
<h3>
This is a heading.
</h3>
<h3 class="right">
This is another heading
</h3>
</body>
</html>
The code above creates the examples below.
This is a paragraph.
This is another paragraph.
This is a heading.
This is another heading.
Use the text editor below to practice what you have learned.
Note: you can also apply more than one class for every given HTML element, simply list those classes in the class attribute and be sure to include a blank space between them.
The code below shows you how to apply more than one class selector to an HTML element. Notice that the last paragraph in the code has 2 classes selectors applied to it, both seperated by a blank space.
<!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>
<title>Web Development Tutorials.com</title>
<style type="text/css">
p.bold { font-weight: bold; }
p.right { text-align: right; }
</style>
</head>
<body>
<p>
This is a paragraph
</p>
<p class="bold">
This is a paragraph.
</p>
<p class="bold">
This is a paragraph.
</p>
<p class="right">
This is another paragraph.
</p>
<p class="bold right">
This is yet another paragraph.
</p>
</body>
</html>
The code above creates the paragraphs below.
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is another paragraph.
This is yet another paragraph.