Lesson Outcomes

After completing this lesson, learners will be able to:

• Define basic CSS concepts.
• Understand how CSS rules are structured.
• Identify selectors, properties, and values.
• Apply simple CSS rules to HTML elements.
• Explain how CSS controls the appearance of web pages.

Overview

CSS (Cascading Style Sheets) is used to control the visual presentation of HTML elements.

In this lesson, learners will explore the fundamental building blocks of CSS, including how styles are written and applied.

Understanding CSS basics is important because it allows developers to:

• Control the look of web pages
• Apply consistent styling
• Improve user experience

1. CSS Rule Structure

A CSS rule defines how an HTML element should be styled.

Basic Structure

selector {
  property: value;
}

Example

p {
  color: blue;
}

Explanation

• Selector → targets the HTML element (p)
• Property → defines what to change (color)
• Value → specifies the style (blue)

2. CSS Selectors

Selectors are used to target HTML elements.

2.1 Element Selector

Targets all elements of a specific type.

Example:

p {
  color: red;
}

2.2 Class Selector

Targets elements with a specific class.

Example:

.intro {
  color: green;
}

Used in HTML as:

<p class="intro">Text</p>

2.3 ID Selector

Targets a specific element with an ID.

Example:

#main-title {
  color: blue;
}

Used in HTML as:

<h1 id="main-title">Title</h1>

3. CSS Properties and Values

CSS properties define what aspect of the element will be styled.

Common Properties

• color → text colour
• background-color → background colour
• font-size → size of text
• text-align → alignment

Example

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

4. Multiple CSS Rules

You can apply multiple styles to one element.

Example:

p {
  color: black;
  font-size: 14px;
  text-align: left;
}

Key Points

• Each property is separated by a semicolon
• Multiple rules can be applied together

5. Comments in CSS

Comments are used to explain code.

They are ignored by the browser.

Example

/* This is a comment */
p {
  color: red;
}

6. Importance of CSS Basics

Understanding CSS basics helps learners:

• Style web pages effectively
• Write clean and organised code
• Apply consistent design
• Improve readability and usability

Key Notes

• CSS rules consist of selectors, properties, and values.
• Selectors target HTML elements.
• Properties define what is styled.
• Values define how it is styled.
• Class and ID selectors allow more specific styling.
• Multiple properties can be applied to one element.
• Comments help explain CSS code.