Lesson 4: More CSS

Using Classes

Sometimes you don't want to change all the buttons on a page; you just want to change one. We do this using a class. In HTML, you give the element a class name. In CSS, you use a period (.) to select it.

/* CSS Code */
.gold-button {
background-color: #ffc72c;
}

The Box Model: Margin & Padding

Every element on a website is technically inside an invisible box. We use CSS to add space inside and outside of that box.

Padding: Space inside the box (like stuffing inside a pillow).
Margin: Space outside the box (like the distance between two pillows).

Test Your Knowledge!

Challenge 1: Target the Class

If you have a paragraph with the class name "highlight", how do you write the CSS selector to make its background yellow?

Click here to reveal the answer

You must use a period before the class name!

.highlight {
background-color: yellow;
}