CSS · Lesson 1 of 7

CSS introduction

What CSS does, the rule syntax and three ways to add it.

CSS controls how HTML looks. A rule has a selector and declarations:

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

Add CSS three ways: a linked file (<link rel="stylesheet" href="style.css">, best for real sites), a <style> block in the head, or an inline style="" attribute (avoid for anything reusable).

The cascade

When rules conflict, the more specific selector wins; if specificity is equal, the later rule wins.

Try it yourself

Code editor

Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.

Key points

selector { property: value; }
Prefer external stylesheets.
Specificity, then order, decides conflicts.

Quick check

Which is the correct CSS syntax?

p = color: red p { color: red; } <p color=red> p: {color red}

Practice task

Style the page so headings use a dark colour and paragraphs have 1.6 line-height and a different font size.

Interview corner

What does 'cascading' mean in CSS?

When several rules target the same element, the browser decides which wins by origin and importance, then specificity, then source order.

Why prefer external stylesheets?

One file can style many pages, the browser can cache it, and HTML stays clean.