Learning Code

ID's and Classes

IDs and classes allow you to target specific areas of your page with more control, without the global constraints of using an element type as a selector.

ID

An id is an unique identifier that can only be used once on each HTML page. There can be multiple ids on a page but they must be unique. Any element, from HTML 5 elements to paragraphs, headings, tables & etc. can have an id. Only one id is permitted for each separate element (ie. every section can have it's own id but they must all use different names).

In CSS

In your style sheet, you can identify an id by a # + the id name. In the case of our earlier html link example, #top is an id where the id name is top. If I add a style to the id, it could look like this:
#top {font: monospace red 30px bold;}

In HTML

In the html page, the id is placed inside the opening tag for the element:
missing

Class

A class is an identifier that can be used as many times as you want on a HTML page. This can be helpful if you want to use the same style with different element types. Like ids, any element can have a class. Multiple classes can be applied to a single element.

In CSS

In your css style sheet, a class is delineated with . + class name. With a style added, a class could look like this:
.top {background-color: #FFFFFF;}

In HTML

Just as with an id, the class is placed inside the opening tag for the element:
missing
To add multiple classes to one element, add a space inbetween the different class names:
missing

Can you use the Try-it Editor to try out these concepts?