What is CSS and How Does it Work?

What is CSS?

CSS (Cascading Style Sheets) controls how HTML looks — colors, fonts, spacing, layout, and animations. HTML is the structure; CSS is the styling.

Basic Syntax

selector {
  property: value;
}

h1 {
  color: blue;
  font-size: 32px;
  margin-bottom: 16px;
}

Three Ways to Add CSS

<!-- 1. Inline -->
<p style="color:red">Text</p>

<!-- 2. Internal -->
<style> p { color: red; } </style>

<!-- 3. External (best) -->
<link rel="stylesheet" href="styles.css">

Selectors

Selector	Targets
.class	Elements with class
#id	Element with ID
element	All such tags
a:hover	Hover state

What "Cascading" Means

When multiple rules target an element, CSS resolves conflicts by specificity and order — the more specific or later rule wins.

FAQs

CSS vs HTML?

HTML = content/structure, CSS = appearance. More in our CSS guides.

What's the best way to add CSS?

External stylesheets — reusable and cacheable.