What is CSS?

CSS stands for Cascading Style Sheets. It is the language that controls how a web page looks. HTML builds the structure of a page, and CSS styles that structure with color, font, spacing, and layout. When you see a site with clean text, rounded buttons, and a consistent color scheme, CSS is doing that work. You can write the same HTML and restyle it a dozen different ways without touching the markup.

The word Cascading describes how the browser decides which style wins when several rules target the same element. Rules can come from the page, from a linked stylesheet, and from the browser defaults. The browser sorts them by specificity and source order, then applies the winner. That sounds complex, but in practice you will mostly deal with one rule at a time. Understand the cascade and CSS stops feeling like magic.

How a CSS rule works

A rule has two parts. The selector names the element or group to style. The declaration block, inside curly braces, lists the styles. Each declaration is a property, a colon, and a value, with a semicolon after every declaration except the last. Miss a semicolon between two declarations and the browser stops reading at that point, so the second style silently never applies.

h1 {
  color: teal;
  font-size: 28px;
}

Why it is called Cascading

Styles can come from three places: the browser defaults, your stylesheet, and inline style attributes. When rules conflict, the browser picks a winner by specificity first, then source order. A class beats a tag selector, and an id beats a class. When two rules match equally, the later one in the file wins. That is the cascade: rules pile up, and the strongest wins.

p { color: #334155; }

/* same specificity, later in the file: this one wins */
p { color: #b91c1c; }

Where CSS lives

Three ways to add CSS to a page: a separate stylesheet linked in the head, a style block in the page, or inline style attributes on individual elements. The linked stylesheet is best for real sites because one file styles many pages. Inline styles are handy for quick tests, but they beat every other rule and are hard to maintain, so use them sparingly.

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

Syntax

h1 {
  color: #0891b2;
  font-size: 32px;
}

/* missing */ <meta name="viewport" content="width=device-width, initial-scale=1">