CSS Classes and Ids

Assignment 008

IDs can only be used once per page.

Classes can be used many times per page.

This is an h2 header - class name is "red"

This is an h2 header - class name is "blue"

This is an h2 header - class name is "green"

This is an h2 header - class name is "red"

This is an h2 header - class name is "blue"

This is an h2 header - class name is "green"

This is an h2 header - class name is "red"

This is an h2 header - class name is "blue"

This is an h2 header - class name is "green"

This is an h2 header - Id name is "purple"

CSS classes allow you to create multiple styles for the same HTML tag (element) in your Web page. For example, you can create a class of H2 tags and use it many times. Above are three classes of H2 tags, each with its own class name. I have used each class several times. It is important to understand that classes can be used more than once on a given Web page.

In order to do this, create a style for the H2 element and add a dot (.) and the class name. For example:

h2.red
{
color: red;
font-size: 20pt;
background-color: white;
}

CSS Ids are different. CSS Ids allow you to create one style for an HTML tag (element) in your Web page. For example, you can create an Id for an H2 tag that is meant to be used once. Above there is one Id style for an H2 tag. It is important to understand that Ids can be used only once on a given Web page.

In order to do create an Id, create a style for the H2 element and add a pound (#) and the Id name. For example:

h2#purple
{
color: purple;
background-color: gold;
}

Displaying

To display your new class, just add class="red" to your HTML tag.

<h2 class="red" >This is an h2 header - class name is "red"</h2>

To display your new Id, just add id="purple" to your HTML tag.

<h2 id="purple" >This is an h2 header - class name is "purple"</h2>