Classes and ids

A class is a label you put on elements, <p class="note">, and select with a dot, .note { ... }. Any number of elements can share a class, and an element can have several, separated by spaces. An id is unique to one element, <p id="intro">, selected with a hash, #intro { ... }. Use classes for styling; ids are for things that must be unique, like link targets and form labels.

Selectors combine: p.note is a paragraph with that class, .card .note is a .note somewhere inside a .card, and h1, h2 applies one rule to both.

.warning { color: rgb(179, 38, 30); }
#intro { font-weight: 700; }

Your task

Give the second paragraph the class note and make .note have the background color rgb(232, 239, 255). Give the first paragraph the id intro and make #intro bold (font-weight: 700). The other paragraph must stay normal weight.

<!doctype html>
<html>
<head>
<style>
.note { background-color: rgb(232, 239, 255); }
#intro { font-weight: 700; }
</style>
</head>
<body>
<h1>Classes and ids</h1>
<p id="intro">This is the introduction.</p>
<p class="note">This is a note.</p>
<p>This is a plain paragraph.</p>
</body>
</html>