Id & Classes

The id and class attributes give elements names, so you can find them with CSS and JavaScript.

idAttribute: "A Unique Name"

Syntax:

<h1 id="main-title">Welcome</h1>

• An id must be unique: only one element on the page can have it.
• In CSS you select it with a hash: #main-title.
• It can also be used for links that jump to a part of the page: <a href="#main-title">.

classAttribute: "A Reusable Group Name"

Syntax:

<p class="note">First note</p>
<p class="note">Second note</p>
<p class="note important">A note with two classes</p>

• Many elements can share the same class.
• One element can have several classes, separated by spaces.
• In CSS you select it with a dot: .note.

Using them in CSS

#main-title { color: navy; }
.note { background: lightyellow; padding: 10px; }
.important { font-weight: bold; }