Classes, ids and Flexbox

## Classes Use a class to give the same style to many elements. In CSS, write it with a dot (`.`): ```html <style> .star { color: orange; } </style> <p class="star">Special</p> <p>Normal</p> ``` One element can have several classes: `class="a b"`. ## id An `id` is given to **only one** element on the page. In CSS, write it with `#`: ```css #title { font-size: 40px; } ``` ## Flexbox — lining elements up ```html <style> .row { display: flex; justify-content: center; gap: 10px; } </style> <div class="row"> <div>1</div> <div>2</div> <div>3</div> </div> ``` | Property | Job | |---|---| | `display: flex` | Lines up the children in one row | | `justify-content` | Horizontal position: `center`, `space-between`, `flex-end` | | `gap` | Space between them | | `flex-direction: column` | Lines them up from top to bottom | > 🧩 Problems: **HTML/CSS → Level 9, 10**. Pass them all and you can build a real web page! 🎉