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:

Next: How to Style Multiple Elements with CSS