What is CSS?

CSS stands for Cascading Style Sheets. It is the language used to describe the visual presentation of HTML documents — colours, fonts, spacing, layout, animations, and more. While HTML provides structure and meaning, CSS controls how that structure looks.

Separating Content from Presentation

Before CSS, developers applied styles directly in HTML using attributes like color, font, and bgcolor. This mixed content and presentation, making pages hard to maintain. CSS was designed to solve this by separating concerns: HTML handles structure, CSS handles appearance.

This separation means you can:

Change the entire look of a site by editing one CSS file
Apply the same styles to hundreds of pages consistently
Make a page look completely different on mobile vs. desktop

How CSS Works

CSS consists of rules. Each rule has a selector that targets HTML elements and a declaration block containing one or more property-value pairs:

selector {
  property: value;
  property: value;
}

A real example:

h1 {
  color: navy;
  font-size: 2rem;
  margin-bottom: 1rem;
}

This targets all h1 elements and makes them navy, 2rem tall, with a bottom margin of 1rem.

Three Ways to Apply CSS

1. External Stylesheet (Recommended)

Write CSS in a separate .css file and link it from the HTML head:

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

This is the best approach for maintainability. One CSS file can style an entire website.

2. Internal Stylesheet

Write CSS inside a style element in the head:

<head>
  <style>
    body {
      background-color: #f0f0f0;
    }
  </style>
</head>

Useful for single-page prototypes or when you cannot use an external file.

3. Inline Styles

Apply CSS directly on an element using the style attribute:

<p style="color: red; font-weight: bold;">Warning!</p>

Avoid inline styles in production code — they are hard to override and difficult to maintain.

The Cascade

The "Cascading" in CSS refers to how conflicting rules are resolved. CSS applies rules according to three principles:

Specificity — more specific selectors win (an id beats a class beats an element)
Source order — later rules override earlier ones of equal specificity
Inheritance — some properties (like color and font-family) are inherited by child elements automatically

Understanding the cascade is one of the most important skills in CSS. Most CSS bugs are cascade and specificity issues.

What is CSS?

What is CSS?

Separating Content from Presentation

How CSS Works

Three Ways to Apply CSS

1. External Stylesheet (Recommended)

2. Internal Stylesheet

3. Inline Styles

The Cascade

CSS Units

More in Programming