CSS Type Selector Tutorial
What is a CSS Type Selector?
A type selector specifies one HTML element to which to apply a style rule(s) to.
In the CSS code below, all paragraphs in the document will be aligned to the right.
<style type="text/css">
p { text-align: right; }
</style>
The example below shows you the type selector in action. Notice that only the paragraphs are aligned to the right.
<!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 { text-align: right; }
</style>
</head>
<body>
<p>
This is a paragraph
</p>
<p>
This is a paragraph.
</p>
<h3>
This is a heading.
</h3>
<h3>
This is a heading
</h3>
</body>
</html>
The code above creates the examples below.
This is a paragraph.
This is a paragraph.
This is a heading.
This is a heading.
Use the text editor below to practice what you have learned.
In the CSS code below, the styles are applied to the paragraph and level 3 heading tags.
p { text-align: right; }
h3 { text-align: right; }
The example below shows the code 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">
p { text-align: right; }
h3 { text-align: right; }
</style>
</head>
<body>
<p>
This is a paragraph
</p>
<p>
This is a paragraph.
</p>
<h3>
This is a heading.
</h3>
<h3>
This is a heading
</h3>
</body>
</html>
The above code would make the following paragraphs and headings.
This is a paragraph.
This is a paragraph.
This is a heading.
This is a heading.
Combining Type Selectors
You can combine type selectors in the CSS style by following the HTML tag or HTML element with a comma, followed by a space and then the next HTML tag or HTML element that the type selector style applies to.
p, h3 { text-align: right; }
The example below shows the code 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">
p, h3 { text-align: right; }
</style>
</head>
<body>
<p>
This is a paragraph
</p>
<p>
This is a paragraph.
</p>
<h3>
This is a heading.
</h3>
<h3>
This is a heading
</h3>
</body>
</html>
The above code would make the following paragraphs and headings.
This is a paragraph.
This is a paragraph.