CSS Selector Tutorial

CSS ID Selector Tutorial

An id selector can be used to tell web browsers to apply a CSS rule to a single HTML element in a document.

ID selectors are similar to class selectors, except ID selectors are meant to be used only once per document. An id selector is preceded by a hash mark (pound sign), followed by the id name. The hash mark appearing before the class name in the CSS rule tells CSS that you are referencing the id selector.The id name is typically comprised of letters, numbers and hyphens only, since this provides the best compatibility with older web browsers. ID names cannot include spaces.

NOTE: Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

The CSS and XHTML example is an example of an 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">
#aligncenter {text-align: center;}
#alignright {text-align: right;}
</style>

</head>
<body>
<div id="aligncenter">
The text in this div will be aligned in the center.
</div>
<div id="alignright">
The text in this div will be aligned to the right.
</div>
</body>
</html>

The code above creates the 2 divs below.

The text in this div will be aligned in the center.

The text in this div will be aligned to the right.

Use the text editor below to practice what you have learned.