Photoshop Templates

Featured Photoshop templates - professional ready to use designs for your next project.

View all templates

CSS element id - CSS tutorial

This tutorial explains how CSS is handling specific elements by id's.

Category: CSS tutorials - Difficulty:

To identify a particular element, the attribute id is being used.

You might already have learned about id in the previous lessons. id is a special attribute because it is like regulating repetition. No two elements in the same document can have the same id. One id should be different from the other. Just like a person’s id is unique to one person.

Here is an example of how id can be used:

<h1>Chapter 1</h1>
...
<h2>Chapter 1.1</h2>
...
<h2>Chapter 1.2</h2>
...
<h1>Chapter 2</h1>
...
<h2>Chapter 2.1</h2>
...
<h3>Chapter 2.1.2</h3>
...

The examples above could be headings of different chapters or paragraphs. id can be assigned to each chapter like this:

<h1 id="c1">Chapter 1</h1>
...
<h2 id="c1-1">Chapter 1.1</h2>
...
<h2 id="c1-2">Chapter 1.2</h2>
...
<h1 id="c2">Chapter 2</h1>
...
<h2 id="c2-1">Chapter 2.1</h2>
...
<h3 id="c2-1-2">Chapter 2.1.2</h3>
...

With CSS, say you want the headline for chapter 1.1 to be orange, you can do it by typing this syntax:

#c1-1 {
color: orange;
}

From the example give above, you will notice that the id selector is defined as a number sign (#).

Additional example:

In case, you want to assign alignment. You have two paragraphs, you want one to be aligned to the right, and the other one to the left, here is what you do:

p.right {text-align: right}
p.center {text-align: center}

To use the class attribute to your document, you code it like this:

<p class="right">
This paragraph will be right-aligned.
</p>

<p class="center">
This paragraph will be center-aligned.
</p>

Now, you have learned that with the class and id selector, you can apply different styles in one HTML document. You can manipulate just how you exactly want your website to appear in the browser. You will learn more in the next lesson.