CSS ID Selector Tutorial

What is an ID Selector?

An id selector allows you to apply styles to only one HTML element within a document. An id selector begins with the pound sign (#), followed by the id name which should be made up of letters, numbers or hyphens and should not begin with a number.

Note: ID selector names that begin with a number will not work in Mozilla/Firefox browsers.

In the CSS code below, the id selector has the id name "one".

<style type="text/css">

#border { border: 1px solid #000; }

</style>

Note: in practice, I recommend that you only use the id selector at times such as when you are designing a website template, which you can learn how to do later with our website template tutorials.

Note: web browsers allow the use of multiple id names per document when they are used only in the style sheets, but problems can occur when the same id name is used for another application of the id name. For example, when using the same id name as an HTML link anchor or within Javascript. If this is the case, the web browser will not know which id name to use as the reference point and will have to guess which one to use.

The example below shows you the id selector 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">

#border { border: 1px solid #000; }

</style>

</head>
<body>
<p>
This is a paragraph
</p>
<div id="border">
<p>
This is a paragraph.
</p>
<h3>
This is a heading.
</h3>
</div>
<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.

Free Website Templates

Free Web Tools

Recommended Websites