Learn

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

1.

On line 11 of index.html, inside the h1 opening tag and after the class attribute, add an id with the value article-title.

2.

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.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?