Back to Unit 6

Unit 6 Website Development - Tutorial 2

2.4 Understand when to use classes instead of styling every element separately

Use classes when only some elements need a special style.

What You Are Adding

Element selectors are useful for general defaults, but classes are better when only some elements need a special style. For example, every section should not look like a warning box, so a class such as .notice is more precise.

CSS To Add To css/style.css

Add or adapt this CSS in the stylesheet you created in Tutorial 1. Keep the HTML structure from Tutorial 1 and use CSS to improve the presentation.

.notice {
    padding: 16px;
    border-left: 8px solid #dca311;
    background-color: #fff9df;
}

Expected Output

Normal paragraph text stays simple.

Only the notice paragraph gets the special style.

Build It Yourself

  1. Open the same unit-6-website folder from Tutorial 1.
  2. Add or update the relevant HTML class names if this page uses classes.
  3. Add the CSS shown above to css/style.css.
  4. Save the stylesheet and refresh the website in the browser.
  5. Compare your page with the expected output preview.

Common Mistakes

Success Checklist