What is CSS?

Objective

By the end of this lesson, you will:

Understand what CSS is and why it’s essential for web design.
Identify the basic syntax and structure of CSS rules.
Apply CSS to HTML using three different methods.
Create a simple styled webpage using CSS.

Definition

CSS (Cascading Style Sheets): A stylesheet language used to describe the presentation (layout, colors, fonts, spacing) of HTML elements on a webpage.
Style Rule: A set of CSS instructions targeting HTML elements to change their appearance.
Cascade: The order in which conflicting CSS rules are applied—based on specificity, importance, and source.

Introduction

If HTML is the skeleton of a webpage, CSS is the skin, clothes, and colors. It transforms raw structure into a visual experience—deciding how your webpage looks and feels to users.

In this lesson, you’ll discover how CSS separates design from structure, making your websites easier to style, manage, and scale.

Why CSS Matters

✅ Keeps design consistent across pages
✅ Makes pages responsive and visually appealing
✅ Simplifies design updates — change one style rule, update multiple pages
✅ Enables custom branding and animations

Basic CSS Syntax

selector {
  property: value;
}

Example

h1 {
  color: blue;
  font-size: 32px;
}

Selector: Targets the HTML element (h1)
Property: What you want to change (color)
Value: The new style (blue)

Three Ways to Apply CSS

1. Inline CSS

Applied directly inside an HTML tag using the style attribute:

<p style="color: red;">This text is red.</p>

✅ Quick styling
❌ Not reusable or clean for big projects

2. Internal CSS

Placed within a <style> tag inside the HTML <head>:

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

✅ Good for single-page styling
❌ Doesn’t scale well across multiple pages

3. External CSS

Linked via a separate .css file:

<link rel="stylesheet" href="styles.css">

/* styles.css */
body {
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
}

✅ Best practice for large or multi-page sites
✅ Easy to maintain and reuse

Common CSS Properties

Property	Example Value	Description
`color`	`blue`, `#333`	Text color
`background`	`#fff`, `url(...)`	Background color or image
`font-size`	`16px`, `2em`	Text size
`margin`	`10px`	Space outside an element
`padding`	`10px`	Space inside an element
`border`	`1px solid black`	Adds a border
`display`	`block`, `inline`	Controls layout behavior

Suggested Activities

Style Your Resume: Create an HTML resume and apply internal or external CSS to make it visually appealing.
Color Match Challenge: Use CSS to style a webpage with your brand colors, fonts, and spacing.
CSS Refactor: Take an HTML-only page and separate the styles into an external CSS file.
Inspect & Learn: Use your browser’s Developer Tools to inspect a website’s CSS and tweak live styles.

Reflection Questions

Which CSS method (inline, internal, external) fits your current project best—and why?
What are some design changes you could make using only CSS (no HTML changes)?
How can CSS help improve mobile usability?

Lesson Wrap-Up

CSS gives your webpages life—it turns structure into style. Whether you’re building a clean business site or a colorful portfolio, understanding how CSS works is essential to controlling your design vision.

Action Step

Create a simple HTML page with at least:

An external CSS file
A styled header and paragraph
A custom background color or image
At least three CSS properties applied

Then preview it in a browser. ✨

HTML and CSS for Beginners: Code Your Own Site