How to Style a Single Element with CSS

In HTML, we can give an element an ID:

<div id="banana">Banana</div>

If you assign an ID to an element, it should be unique on the page (e.g. above, there shouldn't be any other element on the page with the ID of banana).

To style the element above, we can put this in our CSS file:

#banana {
    background-color: yellow;
    font-size: 30px;
    font-weight: bold;
    font-family: Arial;
}

The # helps us select an element by ID.

The result:

Bold large text: Banana with a yellow background

Next: How to Style Multiple Elements with CSS

Comments

Leave a comment

What color are brown eyes? (spam prevention)
Submit
Code under MIT License unless otherwise indicated.
© 2020, Downranked, LLC.