What is CSS?

CSS is the language that makes websites look good. Without it, every page on the internet would just be plain black text on a white background.

The Simple Analogy

Think of building a website like building a house:

🏠 The House Analogy

HTML is the structure — the walls, floors, doors, and windows. It decides what exists on the page.

CSS is the interior design — the paint colour, the carpet, the lighting, the furniture arrangement. It decides how everything looks.

You could live in a house with no interior design (plain grey concrete walls), and it would technically work. But CSS is what makes it a home.

What Does CSS Stand For?

CSS stands for Cascading Style Sheets. That name has three important words:

  • Cascading — styles flow downward through your page. Rules can combine, override each other, and inherit from parent elements. (We'll cover this in detail later.)
  • Style — it controls visual appearance: colours, fonts, sizes, spacing, layout.
  • Sheets — your CSS lives in files (sheets) that are separate from your HTML.

What Can CSS Actually Do?

Here is a non-exhaustive list of what CSS controls:

  • Colours — text colour, background colour, border colour
  • Typography — font family, font size, bold, italic, line spacing
  • Spacing — margin (space outside elements), padding (space inside elements)
  • Sizing — width, height, max-width, min-height
  • Layout — how elements are arranged (side by side, stacked, in a grid)
  • Borders & Shadows — outlines around elements, drop shadows
  • Animations — fade in, slide, spin, pulse — all without JavaScript
  • Responsive design — making pages look good on phones, tablets, and desktops

CSS vs HTML — They Work Together

HTML and CSS are always used together, but they stay in their own lanes. Here is what that looks like in practice:

This HTML creates a heading with no styling at all:

<h1>Hello, world!</h1>

This CSS makes that heading blue, large, and centred:

h1 {
  color: blue;
  font-size: 48px;
  text-align: center;
}

Together, the browser shows a big, centred, blue heading. The HTML said "this is a heading." The CSS said "here is how that heading should look."

📌 Key Insight

CSS and HTML are completely separate languages. CSS never describes content. HTML never describes appearance. This separation is intentional — it keeps your code clean and makes redesigns easy.

Where Does CSS Live?

There are three ways to write CSS:

1. External stylesheet (best — always use this) 

<!-- In your HTML <head> -->
<link rel="stylesheet" href="style.css">

Your CSS lives in a separate .css file. One file can style hundreds of HTML pages. Change it once, everything updates. This is how every real website works.

2. Internal (style tag — okay for quick tests)

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

3. Inline (avoid this)

<h1 style="color: red;">Hello</h1>

CSS written directly on the element using the style attribute. This defeats the whole purpose of CSS — you can't reuse it. Avoid it.

✅ Tip

Always use an external stylesheet for real projects. One style.css file that links to every page. This is the professional standard.

How the Browser Applies CSS

When you load a webpage, here's what happens behind the scenes:

  1. The browser downloads your HTML file and starts reading it top to bottom.
  2. It finds <link rel="stylesheet" href="style.css"> and downloads the CSS file.
  3. It builds a model of the page (called the DOM) from the HTML.
  4. It applies your CSS rules to the DOM — figuring out what each element should look like.
  5. It paints the final result to the screen.

CSS is Forgiving

One beginner-friendly feature of CSS: if you write a rule wrong, the browser doesn't crash or show an error. It just ignores that rule and moves on. 

h1 {
  colour: red;   /* typo — browser ignores this line */
  font-size: 32px; /* this still works fine */
}
⚠️ Watch Out

CSS errors don't show in the browser window. If a style isn't working, open DevTools (right-click → Inspect → Styles panel) to see if the rule has been crossed out or flagged as invalid.

Interview Questions

What does CSS stand for?

Cascading Style Sheets. Cascading means styles flow and override each other in a predictable order. Style controls appearance. Sheets means the rules live in separate files.

What is the difference between HTML and CSS?

HTML describes what content exists on the page (a heading, a paragraph, an image). CSS describes how that content looks (colour, size, spacing, layout). They are separate languages that work together.

What are the three ways to apply CSS and which is best?

External stylesheet (best — reusable across pages), internal style tag (okay for single-page tests), and inline styles (avoid — not reusable and hard to maintain).

🏋️ Exercise

Create an HTML file with a heading, a paragraph, and a link. Then create a style.css file and link it. Try changing the text colour of the heading to any colour you like. Open the page in your browser and confirm it works.

See example

index.html:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>My First Styled Page</h1>
    <p>This is a paragraph.</p>
    <a href="#">A link</a>
  </body>
</html>

style.css:

h1 {
  color: teal;
}

Summary

  • CSS stands for Cascading Style Sheets — it controls how HTML looks.
  • HTML handles structure and content; CSS handles appearance. They are always kept separate.
  • CSS can control colours, fonts, spacing, layout, animations, and responsive behaviour.
  • The best way to use CSS is an external stylesheet linked with <link>.
  • CSS is forgiving — unknown rules are silently ignored rather than crashing the page.
  • Use DevTools (Inspect → Styles) to debug CSS issues.

Related Topics