Before we start, make sure you understand these two things. If they are new to you, read this section carefully before moving on.

What is HTML?

HTML (HyperText Markup Language) is the language used to build the structure of a webpage. It uses tags like <p>, <h1>, <div>, and <button> to create different kinds of content.

<!-- This is a paragraph in HTML -->
<p>Hello, world!</p>

<!-- This is a heading -->
<h1>Welcome to My Page</h1>

Each of these tags creates an element · a piece of content on the page.

What is CSS?

CSS (Cascading Style Sheets) is the language used to decorate that HTML. It controls colours, fonts, sizes, spacing, and layout.

A CSS rule looks like this:

/* Syntax: selector { property: value; } */
p {
  color: red;
}

• p · the selector (which element to style)
• color · the property (what aspect to change)
• red · the value (what to change it to)
• The whole block { color: red; } is called a declaration block

Analogy: Think of HTML as the skeleton of a body, and CSS as the clothing, makeup, and accessories. The selector is what tells CSS which body part to dress.

A CSS selector is the part of a CSS rule that identifies which HTML element(s) the rule applies to.

h1 {              /* ← This is the selector */
  color: blue;
}

The selector h1 tells the browser: "Find every <h1> element on this page, and make its text blue."

CSS selectors can be divided into five main categories. This lesson focuses on the most fundamental ones · called simple selectors:

1. Element selector · selects by tag name (e.g., p, h1, div)
2. ID selector · selects one unique element by its id attribute
3. Class selector · selects any element with a matching class attribute
4. Universal selector · selects every element on the page
5. Grouping selector · applies the same style to multiple selectors at once

What is it?

The element selector (also called the type selector) selects HTML elements based on their tag name.

Why does it exist?

Suppose you want every single paragraph on your page to use a specific font. Writing a rule for each paragraph individually would be tedious and impractical. The element selector lets you target all paragraphs with one rule.

How it works

Simply write the tag name, followed by your style rules in curly braces:

tagname {
  property: value;
}

Simple Example 1 · Style all paragraphs

HTML:

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>

CSS:

p {
  color: red;
  text-align: center;
}

Expected Output: All three paragraphs will appear with red text, and each will be centred on the page.

Line-by-line explanation:

• p · the selector. This targets every <p> element on the page.
• { · opens the declaration block (the list of styling rules).
• color: red; · sets the text colour to red.
• text-align: center; · aligns the text to the centre of its container.
• } · closes the declaration block.

Thinking Prompt: What would happen if you changed p to h1? Try to predict the answer before testing it.

Simple Example 2 · Style all headings

HTML:

<h1>Main Title</h1>
<h2>Sub-Title</h2>
<p>Some introductory text here.</p>

CSS:

h1 {
  color: navy;
}

Expected Output: Only the <h1> element "Main Title" will turn navy blue. The <h2> and <p> are NOT affected.

Key insight: The element selector is broad but precise at the same time · it targets all elements of that type, but only that type.

Real-World Use Case

In a news website, a developer might write:

p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

This ensures every article paragraph has a comfortable, readable style · without having to repeat the code hundreds of times.

What is it?

The ID selector targets one specific, unique element on the page using its id attribute.

Why does it exist?

Sometimes you have one special element that needs a completely different style from everything else. For example, you might have a hero banner, a top navigation bar, or a modal popup that needs its own unique look.

The id attribute · a quick explanation

In HTML, you can give any element a unique label called an id:

<p id="intro">This is a special paragraph.</p>
<p>This is a normal paragraph.</p>

• id="intro" · gives this element the unique identifier "intro"
• Every id on a page must be unique · no two elements should share the same id

How the ID selector works in CSS

To target an element by its id, write a hash symbol # followed by the id name:

#idname {
  property: value;
}

Simple Example 1 · Style one specific paragraph

HTML:

<p id="para1">This paragraph has a special style.</p>
<p>This paragraph is completely normal.</p>

CSS:

#para1 {
  text-align: center;
  color: red;
}

Expected Output:

• The first paragraph (with id="para1") will be red and centred.
• The second paragraph is completely unaffected · it keeps its default styling.

Line-by-line explanation:

• #para1 · the # symbol signals "this is an ID selector". para1 is the id name to look for.
• text-align: center; · centres the text.
• color: red; · makes the text red.

Simple Example 2 · Style a navigation bar

HTML:

<div id="navbar">Home | About | Contact</div>
<p>Welcome to our website!</p>

CSS:

#navbar {
  background-color: black;
  color: white;
  padding: 10px;
}

Expected Output: The navigation div will have a black background with white text, while the paragraph is unaffected.

Important Rules for IDs

⚠️ Rules you must follow:

• An id name cannot start with a number. id="1intro" is invalid; id="intro1" is fine.
• An id should not contain spaces. Use hyphens or camelCase instead: id="main-header" or id="mainHeader".
• Each id must be unique on the page. Using the same id on two elements is invalid HTML and causes unpredictable CSS behaviour.

Real-World Use Case

In almost every website, the main page header gets a unique id:

<header id="site-header">
  <h1>My Blog</h1>
</header>

#site-header {
  background-color: #2c3e50;
  color: white;
  padding: 20px 40px;
}

This targets only that one header element · leaving all other elements alone.

What is it?

The class selector targets any element that has been assigned a particular class attribute. Unlike an id (which is unique), many elements can share the same class.

Why does it exist?

Imagine you are building a product catalogue. Some product cards should be highlighted in yellow · maybe the best-sellers. Others are normal. You can assign a class "highlight" to any product that needs the yellow treatment, then write one CSS rule for .highlight.

The class attribute · a quick explanation

<p class="highlight">Best Seller!</p>
<p>Regular product.</p>
<h2 class="highlight">Featured Category</h2>

• class="highlight" · marks these elements as belonging to the "highlight" group
• Multiple elements CAN share the same class · that is the whole point
• An element can have multiple classes: class="highlight bold large"

How the class selector works in CSS

Write a period (dot) . followed by the class name:

.classname {
  property: value;
}

Simple Example 1 · Style a group of elements

HTML:

<h1 class="highlight">Top Product</h1>
<p class="highlight">This item is on sale!</p>
<p>This item is not on sale.</p>

CSS:

.highlight {
  background-color: yellow;
  color: black;
}

Expected Output:

• The <h1> "Top Product" will have a yellow background.
• The first <p> "This item is on sale!" will also have a yellow background.
• The second <p> "This item is not on sale." is completely unaffected.

Line-by-line explanation:

• .highlight · the . signals "this is a class selector". highlight is the class name.
• background-color: yellow; · sets the background colour to yellow.
• color: black; · sets the text colour to black.

Simple Example 2 · Target a specific tag that has a class

You can combine a tag name with a class to be even more specific. This is called a qualified class selector:

p.highlight {
  background-color: yellow;
}

This means: "Only target <p> elements that have the class highlight." A <h1 class="highlight"> would NOT be styled by this rule.

HTML:

<h1 class="highlight">I am a heading with the class.</h1>
<p class="highlight">I am a paragraph with the class.</p>
<p>I have no class at all.</p>

CSS:

p.highlight {
  background-color: yellow;
}

Expected Output:

• Only the <p class="highlight"> gets the yellow background.
• The <h1 class="highlight"> is NOT styled · because the rule is limited to p elements only.

Simple Example 3 · Multiple classes on one element

An element can belong to more than one class at once. Separate class names with a space inside the class attribute:

HTML:

<p class="large bold">This text is large AND bold.</p>

CSS:

.large {
  font-size: 24px;
}

.bold {
  font-weight: bold;
}

Expected Output: The paragraph will be displayed with a 24px font size AND bold weight · because both classes apply to it simultaneously.

Thinking Prompt: What would happen if you wrote class="large bold extra" but there was no .extra rule in your CSS? Would it cause an error? (Answer: No error. CSS simply ignores class names it has no rules for.)

ID vs Class · When to use which?

Analogy: An id is like a national ID card · one person, one number. A class is like a school uniform · many students wear it, and one student can wear multiple items (blazer and tie and school shoes).

What is it?

The universal selector is written as a single asterisk * and it targets every single HTML element on the page · headings, paragraphs, divs, spans, buttons, images, everything.

Why does it exist?

It is most commonly used to apply a global reset or baseline style. For example, some browsers add default padding and margins to elements. Web developers use * to remove all those defaults and start with a clean slate.

How it works

* {
  property: value;
}

Simple Example 1 · Colour everything blue

HTML:

<h1>Heading</h1>
<p>Paragraph</p>
<a href="#">Link</a>

CSS:

* {
  text-align: center;
  color: blue;
}

Expected Output: Every element on the page · the heading, the paragraph, and the link · will have centred, blue text.

Simple Example 2 · The CSS Reset (most common real-world use)

This is the most important practical use of the universal selector:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

What this does:

• margin: 0; · removes all default outer spacing from every element
• padding: 0; · removes all default inner spacing from every element
• box-sizing: border-box; · changes how element sizes are calculated (more predictable)

Real-World Insight: Almost every professional CSS stylesheet starts with a universal reset like this. It eliminates browser inconsistencies so your layout behaves the same in Chrome, Firefox, Safari, and Edge.

⚠️ Performance Note: Because * targets every element, it can slow down very large, complex pages if overused with expensive properties. For simple properties like margin and padding, it is perfectly fine.

The Problem It Solves

Imagine you have three different elements · h1, h2, and p · and you want them all to have the same text colour and alignment. Without the grouping selector, you would write this:

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

This works, but it is repetitive and inefficient. If you later decide to change red to navy, you have to change it in three places. If you miss one, your page will look inconsistent.

What is the Grouping Selector?

The grouping selector lets you apply the same style rules to multiple selectors at once. You simply list the selectors separated by commas.

How it works

selector1, selector2, selector3 {
  property: value;
}

Simple Example 1 · Group three elements

CSS (before grouping · the problem):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

CSS (after grouping · the solution):

h1, h2, p {
  text-align: center;
  color: red;
}

Expected Output: Exactly the same result · all <h1>, <h2>, and <p> elements will have red, centred text · but the code is now much shorter and easier to maintain.

Simple Example 2 · Grouping class and element selectors together

You can group any mix of selector types · elements, ids, and classes · as long as they need the same style:

HTML:

<h1>Main Heading</h1>
<p class="intro">Introduction paragraph.</p>
<span id="tagline">Our tagline here.</span>

CSS:

h1, .intro, #tagline {
  font-family: Arial, sans-serif;
  color: #333;
}

Expected Output: All three elements · the <h1>, the .intro paragraph, and the #tagline span · will use the Arial font with dark grey text.

Real-World Use Case

In real projects, grouping selectors are used extensively to maintain consistent typography across a page:

h1, h2, h3, h4, h5, h6 {
  font-family: 'Georgia', serif;
  color: #1a1a2e;
  line-height: 1.3;
}

This ensures all six heading levels share the same font, colour, and line spacing · a fundamental part of consistent web design.

Here is a complete summary table of everything covered so far:

Mistake 1 · Forgetting the # for IDs

Wrong:

para1 {
  color: red;
}

Why it's wrong: Without #, CSS treats para1 as an element selector · it looks for an HTML tag called <para1>, which doesn't exist. Nothing will be styled.

Correct:

#para1 {
  color: red;
}

Mistake 2 · Forgetting the . for Classes

Wrong:

highlight {
  background-color: yellow;
}

Why it's wrong: CSS will look for an HTML tag called <highlight>, which doesn't exist.

Correct:

.highlight {
  background-color: yellow;
}

Mistake 3 · Using Spaces in Class Names in CSS

Wrong:

.my class {    /* THIS IS TWO SELECTORS, NOT ONE! */
  color: red;
}

Why it's wrong: A space in CSS between two selectors means "an element INSIDE another element" · this is called a descendant combinator. .my class means "a class element inside something with class my."

Correct:

.my-class {
  color: red;
}

In HTML, use a hyphen in the class name: class="my-class".

Mistake 4 · Repeating the Same Styles Instead of Grouping

Wrong (repetitive):

h1 { color: navy; }
h2 { color: navy; }
h3 { color: navy; }

Correct (grouped):

h1, h2, h3 {
  color: navy;
}

Mistake 5 · Using the Same ID Twice

Wrong:

<div id="box">First</div>
<div id="box">Second</div>  <!-- INVALID HTML! -->

Why it's wrong: HTML IDs must be unique. If you use the same id twice, your CSS may only style the first one (browser behaviour is unpredictable), and your HTML fails validation.

Correct: Use a class instead when multiple elements need the same style:

<div class="box">First</div>
<div class="box">Second</div>

Mistake 6 · Missing the Comma in Grouping Selectors

Wrong:

h1 h2 {    /* This means: h2 INSIDE an h1 — probably not what you want! */
  color: red;
}

Why it's wrong: Without the comma, h1 h2 becomes a descendant selector · it means "any h2 that is nested inside an h1."

Correct:

h1, h2 {    /* Comma = grouping = BOTH h1 AND h2 get styled */
  color: red;
}