What is CSS?

Understand what CSS is, how it works alongside HTML, and why it is the styling language of the web.

Overview

CSS stands for Cascading Style Sheets. It is the language used to control the visual appearance of HTML content on the web. While HTML defines what content is (a heading, a paragraph, an image), CSS defines how that content looks: its colors, fonts, spacing, layout, and more. Without CSS, every web page would be plain black text on a white background with no visual distinction between elements. CSS transforms raw structure into designed, readable, and visually engaging pages. The word "Cascading" is central to how CSS works. When multiple style rules apply to the same element, CSS uses a well-defined priority system (the cascade) to decide which rule wins. Understanding this system is key to writing predictable styles. CSS works by selecting HTML elements and applying declarations to them. A declaration is a property-value pair like `color: red` or `font-size: 16px`. You group declarations inside a ruleset, targeting one or more elements with a selector.

Key Points

•CSS = Cascading Style Sheets the language that controls the visual presentation of HTML
•HTML provides structure and meaning; CSS provides appearance and layout
•CSS rules consist of a selector and a block of property-value declarations
•The "cascade" resolves conflicts when multiple rules target the same element
•CSS is a separate file (or block) from HTML keeping concerns separate
•Modern CSS handles color, typography, layout, animation, and responsive design

Examples

A basic CSS ruleset

/* Selector targets all <h1> elements */
h1 {
  color: navy;       /* property: value */
  font-size: 32px;
  text-align: center;
}

Everything inside the curly braces is a declaration. Each declaration ends with a semicolon.

Linking a CSS file to an HTML page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Styled Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, CSS!</h1>
  <p>This paragraph is styled by CSS.</p>
</body>
</html>

The <link> tag in the <head> connects your HTML to your stylesheet.

CSS changes appearance without touching HTML

body {
  background-color: #f5f5f5;
  font-family: Arial, sans-serif;
}
p {
  color: #333;
  line-height: 1.6;
}

Common Mistakes

Editing CSS inside an HTML attribute (inline style) for everything hard to maintain
Forgetting the semicolon after a CSS declaration later rules in the block may break
Confusing CSS with HTML: CSS cannot create content, it can only style existing HTML elements

Note

Open any web page in your browser, right-click an element, and choose "Inspect". The Styles panel shows every CSS rule applied to that element a great way to learn from real sites.

What is CSS?

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

What does CSS stand for?