Course Index

CSS · Module 13 · Lesson 1 of 48

What is CSS?

What is CSS?

Imagine you have built a house. You have the brick walls, the window frames, and the doors (this is your HTML structure). But currently, the walls are raw grey concrete, the windows have no glass, and everything looks drab and unfinished. You need to paint the walls, choose the wood finish for the doors, and hang curtains.

In the digital world, CSS (Cascading Style Sheets) is your paint, your interior design, and your layout manager. It is a styling language used to describe how HTML elements should look and be positioned on the screen. CSS works by targeting specific HTML elements and applying rules to change their colors, sizes, fonts, spacing, and layouts.

Why does it matter?

Without CSS, every website on the internet would look exactly the same: a plain white page with black Times New Roman text and blue underlined links. CSS turns raw, structured text into beautiful, engaging user interfaces. It allows you to build brand identities, make layouts responsive on mobile phones, and create smooth hover animations.

Syntax Breakdown

A CSS rule is made of two main parts: a selector and a declaration block. Let's break down h1 { color: red; }:
  • Selector (h1): Tells the browser *which* HTML elements to style. In this case, we are targeting all heading level 1 tags.
  • Declaration Block (everything inside { }): Contains one or more declarations separated by semicolons.
  • Property (color): The styling feature you want to change (e.g., color, font-size, margin).
  • Value (red): The setting you want to apply to that property.
  • Declaration (color: red;): The combination of property and value, separated by a colon, ending with a semicolon.

    • h1 { color: red; }
    Styled Header

    Common Mistakes

  • Missing semicolons: Forgetting to write a semicolon ; at the end of a declaration is the number one cause of broken CSS. If you write color: red font-size: 20px;, the browser won't understand either rule!
  • Forgetting curly braces: Every set of rules must be wrapped in curly braces { }, not parentheses ( ) or square brackets [ ].

    • Quick Reference

  • Selector — Targets the HTML tag to style.
  • Property — The style attribute to change.
  • Value — The styling value to apply.
  • Declaration — Consists of a property and a value, separated by a colon and ended with a semicolon.
    • Your Task
    Inside the `<style>` tag, set the `color` property of the `h1` selector to `red`.
    index.html
    Type code above to start the lesson.
    Live Preview