ICT Lesson 2.1: CSS

First Quiz on Tuesday Sept 22, 2026

Cascading Style Sheet

is a language used to describe how HTML elements should appear on a webpage. It controls layout, colors, fonts, spacing, and overall design.

Cascading Style Sheet

separates content (HTML) from presentation (style), making websites easier to maintain and more visually appealing.

1. Controls appearance

2. Improves readability

3. Separates content from presentation

4. Allows consistent design across pages

Main Roles of CSS:

1.Controls Appearance

CSS controls how HTML elements look on a webpage.

It can change:

1. Colors  2.Fonts  3. Sizes  4.Backgrounds

5. Borders  6. Spacing  7.Layouts

8. Animations

2. Improves Readability

Readability refers to how easy it is for users to read and understand content.

CSS improves readability by controlling: font size, font family, text - color

3. Separates Content from Presentation

One of the most important purposes of CSS is separating content from design.

1. Easier Maintenance

Benefit: You only change one CSS rule instead of editing every HTML page.

2. Cleaner Code

Benefit: HTML remains organized and focused on content.

3. Faster Updates

A single CSS file can update the appearance of an entire website.

4. Allows Consistent Design Across Pages

Most websites contain many pages:

Home, About, Contact, Services, Blog

Without CSS, each page would need separate formatting.

Every webpage can use the same CSS file: style.css

Selector, Declaration Block, Declaration

A CSS rule consists of:

Selector

identifies the HTML element(s) to style.

Declaration block

contains one or more declarations separated by semicolons.

Declaration

includes a property and a value.

Inline

Written directly inside an HTML tag

Internal

Written inside <style> tags in the HTML file

External

Written in a separate .css file linked to HTML

HTML

Structure, content, headings, and paragraphs

CSS

appearance, design, colors, fonts, layouts

  Element selector: h1, p

  Class selector: .highlight

  ID selector: #main

  Group selector: h1, h2, h3

  Universal selector: *

  Descendant selector: div p

  Element selector: ?

  Class selector: ?

  ID selector: ?

  Group selector: ?

  Universal selector: ?

  Descendant selector: ?