Cambridge Syllabus Notes

21 Website Authoring

Styles vs Classes

In HTML and CSS, styles and classes are two ways to control how elements look, but they work in different ways. Think of styles as individual outfits you put on a single person, while classes are like team uniforms that many people can wear at once.

Analogy: 🎭
• Style (inline) – You decide the exact colour, size, and font for one element only.
• Class – You create a “uniform” (a set of style rules) that can be applied to any number of elements by giving them the same class name.

When to Use Which?

Inline style (style attribute) – Quick fixes, one‑off changes, or when you need to override other styles.
Class – Reusable, maintainable, and keeps HTML clean. Ideal for consistent design across a site.

Key Differences in a Table

Feature	Inline Style	Class
Selector	Element itself (e.g., `style="color:red;"`)	Class name (e.g., `.highlight`)
Reusability	Only that one element	Any number of elements
Maintainability	Harder to update many elements	Change once in CSS file
Specificity	Highest – overrides class and external CSS	Lower – can be overridden by inline styles

Example Code

Inline style example:

<p style="color:blue; font-weight:bold;">This is a single styled paragraph.</p>

Class example:

<!-- HTML -->
<p class="highlight">This paragraph shares a style with others.</p>
<p class="highlight">Same style applied here too!</p>

<!-- CSS (in a style block or external file) -->
<style>
  .highlight {
    color: #2c3e50;
    font-weight: bold;
  }
</style>

Exam Tips 📚

1. Identify the selector type: If the code uses style="…", it’s an inline style. If it uses class="…", it’s a class.

2. Check reusability: A class will appear multiple times in the HTML. Inline styles will only appear once per element.

3. Pay attention to specificity: Inline styles override class styles. In exam questions, if both are present, the inline style takes precedence.

4. Practice writing both: Create a small page with a paragraph that uses an inline style, then convert it to use a class. Notice how the HTML becomes cleaner.

5. Remember the “uniform” analogy: It helps you recall that classes are reusable, while inline styles are one‑off outfits.

Quick Quiz

Which of the following will apply to <h1> and <h2> elements?
- a) style="font-size:2em;" on each element
- b) .header {font-size:2em;} with class="header" on both
- c) Both a and b are correct, but b is more maintainable
What happens if an element has both an inline style and a class that set the same property?

Know and understand characteristics of a style and a class including the difference between them