Oftentimes it’s important to select a single element with CSS to give it its own unique style. If an HTML element needs to be styled uniquely, we can give it an ID using the id
attribute.
<h1 id='large-title'> ... </h1>
In contrast to class
which accepts multiple values, and can be used broadly throughout an HTML document, an element’s id
can only have a single value, and only be used once per page.
To select an element’s ID with CSS, we prepend the id
name with a number sign (#
). For instance, if we wanted to select the HTML element in the example above, it would look like this:
#large-title { }
The id
name is large-title
, therefore the CSS selector for it is #large-title
.
Instructions
On line 11 of index.html, inside the h1
opening tag and after the class attribute, add an id
with the value article-title
.
Navigate to style.css. Add a ruleset using the ID selector to target the article-title
ID. Inside of its curly braces, write the declaration:
font-family: cursive;
You’ll see the title change to a cursive font bringing some beauty and elegance to the page! Okay, maybe not so much. But the font does change.