Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is the language used to style HTML. While HTML describes the structure of a page — headings, paragraphs, links — CSS describes how that structure should look: colors, spacing, fonts, layout, and even animation.

Without CSS, every web page would look like plain black text on a white background. CSS is what turns that plain structure into the polished, colorful pages you see on the web every day.

Why "Cascading"? Styles can come from multiple places — the browser's defaults, an external stylesheet, an internal style block, and inline styles — and CSS has clear rules for which one "wins" when they conflict. That set of rules is the cascade, and we'll cover it properly later in this course.

CSS Syntax

A CSS rule has two parts: a selector (what to style) and a declaration block (how to style it), wrapped in curly braces.

selector {
  property: value;
  property: value;
}

Example:

p {
  color: blue;
  font-size: 18px;
}

p is the selector — it targets every <p> element on the page
color and font-size are properties
blue and 18px are their values
Each declaration ends with a semicolon ;

Three Ways to Add CSS

There are three ways to apply CSS to an HTML page, and it's important to know when to use each.

1. Inline CSS — written directly on an element using the style attribute. Good for one-off overrides, but hard to maintain at scale.

<p style="color: red; font-size: 20px;">Hello</p>

2. Internal CSS — written inside a <style> tag in the document's <head>. Useful for styles specific to a single page.

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

3. External CSS — written in a separate .css file and linked from the HTML <head>. This is the most common and recommended method — one stylesheet can style an entire website, and the browser caches it for faster page loads.

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

styles.css:

p {
  color: red;
}

CSS Comments

Comments are ignored by the browser and are useful for leaving notes in your stylesheet:

/* This is a comment */
p {
  color: green; /* this sets the text color */
}

/* Comments
   can also
   span multiple lines */

Selectors →