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:
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:
To add multiple classes to one element, add a space inbetween the different class names: