What is CSS? - StackLesson.com

CSS (Cascading Style Sheets) is the language responsible for the visual presentation of HTML documents — controlling colors, fonts, layouts, spacing, and animations. While HTML defines the structure of a page, CSS defines how that structure looks. Without CSS, every website would appear as plain black text on a white background with no visual hierarchy. In this lesson you will learn what CSS is, how it relates to HTML, and the three ways to attach styles to a webpage.

Understanding CSS

A CSS file (or block) is made up of rules. Each rule targets one or more HTML elements and declares how those elements should appear. A rule has two parts: a selector that identifies the target elements, and a declaration block containing one or more property: value pairs.

Anatomy of a CSS Rule

/* selector  {  property : value ; } */
   p         {  color    : navy  ; }

The Three Ways to Add CSS

Method	How It Works	Best Use Case
Inline	Add a `style=""` attribute directly on an HTML element	Quick one-off overrides; avoid in production
Internal	Write CSS inside a `<style>` tag in the HTML `<head>`	Single-page demos or rapid prototypes
External	Write CSS in a separate `.css` file and link it with `<link>`	Every production website — the industry standard

Note: External CSS keeps your presentation layer separate from your HTML structure. This makes code cleaner, more maintainable, and lets the browser cache your styles across multiple pages.

Tip: Always place your <link rel="stylesheet"> inside <head> so styles load before the body renders, preventing a flash of unstyled content (FOUC).

Warning: Inline styles carry very high specificity and override almost all other rules. Overusing them makes your styles impossible to manage at scale.

How the Browser Processes CSS

When a browser loads a webpage it performs three key steps: (1) it parses the HTML into a DOM tree; (2) it parses all CSS into a CSSOM tree; (3) it combines both into a Render Tree and paints pixels on screen.

Basic Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Methods Demo</title>

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

  <!-- METHOD 2: Internal style block -->
  <style>
    h1 {
      color: #2563eb;
      font-size: 2rem;
    }
  </style>
</head>
<body>

  <h1>Hello, CSS!</h1>

  <!-- METHOD 1: Inline style -->
  <p style="color: #16a34a; font-weight: 700;">
    I am styled with an inline style attribute.
  </p>

  <p class="body-text">
    I am styled via a class in the external stylesheet.
  </p>

</body>
</html>

Companion styles.css:

/* External stylesheet */
body {
  margin: 0;
  padding: 24px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
}

.body-text {
  font-size: 1rem;
  line-height: 1.7;
  max-width: 65ch;
}

How It Works

Step 1 — HTML Defines the Structure

The HTML gives semantic meaning: <h1> marks the top heading, <p> marks paragraphs. Without CSS the browser uses its built-in default styles.

Step 2 — External CSS Loads via the Link Tag

The browser fetches styles.css. The body rule resets margins, sets a background color, and applies a modern font to the entire page.

Step 3 — Internal Style Block Targets the Heading

The <style> block makes the heading blue and large. Internal styles are parsed after external ones and can override them at equal specificity.

Step 4 — Class Selector Styles Specific Elements

The second <p> carries class="body-text". The selector .body-text targets exactly that element.

Step 5 — Inline Style Has Highest Priority

The first <p> uses style="color:#16a34a;". Inline styles carry the highest specificity of any authored rule.

Real-World Example: Styled Blog Post Card

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Card</title>
  <link rel="stylesheet" href="card.css">
</head>
<body>
  <article class="card">
    <header class="card-meta">
      <span class="badge">CSS</span>
      <time class="card-date">January 2025</time>
    </header>
    <h2 class="card-title">Getting Started with CSS</h2>
    <p class="card-body">
      Discover how Cascading Style Sheets transform plain HTML into visually
      rich, responsive web experiences that delight users.
    </p>
    <a href="#" class="read-more">Read article &rarr;</a>
  </article>
</body>
</html>

/* card.css */
*, *::before, *::after { box-sizing: border-box; }

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f4ff;
  font-family: system-ui, sans-serif;
  margin: 0;
}

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 32px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.badge {
  background: #4f46e5;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

.card-date { color: #94a3b8; font-size: 0.85rem; }

.card-title {
  font-size: 1.25rem;
  color: #0f172a;
  margin: 0 0 12px;
  line-height: 1.3;
}

.card-body {
  color: #64748b;
  line-height: 1.65;
  font-size: 0.95rem;
  margin: 0 0 20px;
}

.read-more {
  color: #4f46e5;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}
.read-more:hover { text-decoration: underline; }

Common Mistakes

Mistake 1 — Missing `rel="stylesheet"`

❌ Wrong — browser does not apply the file as CSS:

<link href="styles.css">

✅ Correct:

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

Mistake 2 — Missing semicolons between declarations

❌ Wrong — subsequent declarations silently ignored:

p {
  color: red
  font-size: 16px
}

✅ Correct — every declaration ends with a semicolon:

p {
  color: red;
  font-size: 16px;
}

Mistake 3 — Scattering inline styles instead of using classes

❌ Wrong — impossible to update globally:

<p style="color:red; font-size:14px;">First</p>
<p style="color:red; font-size:14px;">Second</p>

✅ Correct — one class controls all matching elements:

.note { color: red; font-size: 14px; }

▶ Try It Yourself

Quick Reference

Concept	Syntax / Example	Notes
CSS Rule	`p { color: red; }`	Selector + declaration block
Declaration	`property: value;`	Always end with semicolon
Inline style	`<p style="color:red;">`	Highest specificity; hard to maintain
Internal style	`<style> p {} </style>`	Page-scoped; good for prototypes
External stylesheet	`<link rel="stylesheet" href="s.css">`	Best practice; cacheable
CSS comment	`/* note */`	Ignored by browser
Class selector	`.classname {}`	Targets all elements with that class

Understanding CSS #

Anatomy of a CSS Rule #

The Three Ways to Add CSS #

How the Browser Processes CSS #

Basic Example #

How It Works #

Step 1 — HTML Defines the Structure #

Step 2 — External CSS Loads via the Link Tag #

Step 3 — Internal Style Block Targets the Heading #

Step 4 — Class Selector Styles Specific Elements #

Step 5 — Inline Style Has Highest Priority #

Real-World Example: Styled Blog Post Card #

Common Mistakes #

Mistake 1 — Missing rel="stylesheet" #

Mistake 2 — Missing semicolons between declarations #

Mistake 3 — Scattering inline styles instead of using classes #

Quick Reference #

🧠 Test Yourself #

📚 More in this Tutorial Series

Understanding CSS

Anatomy of a CSS Rule

The Three Ways to Add CSS

How the Browser Processes CSS

Basic Example

How It Works

Step 1 — HTML Defines the Structure

Step 2 — External CSS Loads via the Link Tag

Step 3 — Internal Style Block Targets the Heading

Step 4 — Class Selector Styles Specific Elements

Step 5 — Inline Style Has Highest Priority

Real-World Example: Styled Blog Post Card

Common Mistakes

Mistake 1 — Missing `rel="stylesheet"`

Mistake 2 — Missing semicolons between declarations

Mistake 3 — Scattering inline styles instead of using classes

Quick Reference

🧠 Test Yourself