Introduction

Learn what CSS is and how it styles HTML documents.

Syntaxselector { property: value; }

CSS stands for Cascading Style Sheets. It describes how HTML elements should be displayed on screen, on paper, or in other media.

What CSS can do

  • Control colors, fonts, and spacing.
  • Lay out entire pages with Flexbox and Grid.
  • Add animations, transitions, and responsive behavior.

HTML gives a page its structure; CSS gives it its style. Separating the two keeps your code clean and easy to maintain.

Example

Try it yourself
Loading editor…
Press Run to see the result.

When to use it

  • A developer links a single external CSS file to every page of a news site so changing one color variable updates the entire brand instantly.
  • A designer uses CSS to make a plain HTML resume look polished with typography, spacing, and color without touching the HTML structure.
  • A team separates CSS from HTML so the front-end designer can restyle pages while the back-end developer changes content simultaneously.

More examples

Style a heading with CSS

Applies color, font family, and size to every h1 element using a single CSS rule.

Example · css
h1 {
  color: #2965f1;
  font-family: Arial, sans-serif;
  font-size: 2rem;
}

Style multiple HTML elements

Shows separate rules for headings, paragraphs, and links to demonstrate CSS targeting different HTML elements.

Example · css
h1 { color: #2965f1; }
p  { color: #444; line-height: 1.6; }
a  { text-decoration: none; color: #e05c00; }

Link external stylesheet in HTML

Demonstrates linking an external CSS file so one stylesheet controls an entire multi-page website.

Example · html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Site</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Styled via external CSS</h1>
</body>
</html>

Related

css syntaxcss how to

Discussion

  • Be the first to comment on this lesson.