Regardless of their version, each adding new features while maintaining backward compatibility with the previous one(s), CSS sticks to the following syntax:

<selector> [sub-selector] [sub-sub-selector] {
    <property>: <value>;
    <another-property>: <value>;
    <yet-another-property>: <value>;
    [...]
}

This translates as follows:

.quiz {
    margin: 5px;
    padding: 5px 10px;
    border: 1px solid black;
    background-color: #dddddd;
    width: 300px;
}

We've seen this code before; it's a class we added in our application's quiz.component.ts file in a previous chapter. It basically says that any HTML element with the quiz CSS class assigned will have a light-gray background color, a black, solid, and pixel-wide border, no margin against the surrounding elements, and a certain amount of padding between its borders and the content. To assign a CSS class to an HTML element, use the class attribute in the following way:

<div class="quiz"> [...some content...] </div>

If the attribute already exists, additional CSS classes can be assigned by separating them with a single space:

<div class="quiz otherClass someOtherClass"> [...some content...] </div>

Simple enough, isn't it?