CSS ID Selectors

 SELECTORS

ID

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.

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.

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.