What Is CSS and How Browsers Use It

7 min read

What Is CSS?

CSS stands for Cascading Style Sheets. It is the language that controls how HTML elements look on screen — their colors, spacing, fonts, and layout. Without CSS, every web page would look like a plain text document with blue underlined links.

The browser reads your HTML to build a DOM tree, then reads your CSS and matches rules to elements. The result is a render tree that the browser paints to the screen. Understanding this pipeline helps you reason about why styles sometimes appear, disappear, or override each other.

Three Ways to Include CSS

External stylesheet — a .css file linked with <link rel="stylesheet" href="styles.css"> inside <head>. This is the recommended approach for any real project.
Internal (embedded) styles — a <style> block inside <head>. Useful for quick experiments or single-page documents.
Inline styles — the style attribute on an element, e.g. <p style="color:red">. Highest specificity but hardest to maintain; avoid in production.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- External stylesheet (preferred) -->
  <link rel="stylesheet" href="styles.css">

  <!-- Internal styles (occasional use) -->
  <style>
    body { background: #fafafa; }
  </style>
</head>
<body>
  <!-- Inline style (last resort) -->
  <p style="color: crimson;">Hello CSS!</p>
</body>
</html>

Always prefer an external stylesheet for projects with more than one page. It keeps your HTML clean and lets browsers cache the CSS file across page loads.

Ready to test yourself?

Practice CSS— quiz & coding exercises