What is CSS and How Does it Work? Complete Guide 2026

What is CSS?

CSS stands for Cascading Style Sheets. It is a style sheet language used to describe the presentation - colors, fonts, layout, spacing, and visual effects - of HTML documents. CSS separates content (HTML) from presentation (CSS), making websites easier to maintain and style consistently.

CSS files use the .css extension. A single CSS file can control the appearance of an entire website - change one file and every page updates automatically.

CSS Versions

Version	Year	Key Features
CSS 1	1996	Basic fonts, colors, text alignment
CSS 2	1998	Positioning, z-index, media types
CSS 2.1	2011	Bug fixes and clarifications
CSS 3	2011+	Modules: Flexbox, Grid, Animations, Transitions, Custom Properties, etc.

Why Use CSS?

Separation of concerns - HTML handles structure, CSS handles presentation
Saves time - one stylesheet controls the look of an entire website
Faster loading - external CSS is cached by the browser
Easy maintenance - change one file to update all pages
Responsive design - media queries adapt layouts to any screen size
Rich visual effects - animations, transitions, gradients, shadows without JavaScript

1. Inline CSS

Inline CSS is written directly on an HTML element using the style attribute. It has the highest specificity and overrides all other styles, but it is the hardest to maintain - you have to update every element individually. Avoid for large projects.

Inline CSS - style attribute

<!-- Inline CSS - style attribute directly on element -->
<!-- Highest specificity, hardest to maintain -->

<h1 style="color: blue; text-align: center;">Hello World</h1>
<p style="font-size: 16px; color: #333; margin-bottom: 10px;">
    This paragraph has inline styles applied.
</p>

<!-- Problem: to change the color, you must update every element -->
<p style="color: blue;">Paragraph 1</p>
<p style="color: blue;">Paragraph 2</p>
<p style="color: blue;">Paragraph 3</p>
<!-- Changing to red requires editing all 3 lines -->

2. Internal CSS

Internal CSS is written inside a <style> tag in the <head> section of an HTML document. It applies styles to that page only - not reusable across multiple pages. Good for single-page styles or quick prototyping.

Internal CSS - <style> tag in <head>

<!DOCTYPE html>
<html>
<head>
    <!-- Internal CSS - styles only apply to this page -->
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 16px;
            color: #333;
            line-height: 1.6;
        }
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
    <p>This paragraph uses internal CSS.</p>
    <p class="highlight">This one is highlighted.</p>
</body>
</html>

3. External CSS (Recommended)

External CSS is written in a separate .css file and linked to HTML pages using a <link> tag. This is the recommended approach for all real projects because:

One CSS file controls the look of the entire website
The browser caches the CSS file - pages load faster after the first visit
Easy to maintain - change one file to update all pages
Clean separation of HTML structure and CSS presentation

External CSS - separate .css file (Recommended)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <!-- Link to external CSS file -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello World</h1>
    <p>This page uses an external stylesheet.</p>
    <p class="highlight">This one is highlighted.</p>
</body>
</html>

<!-- Multiple pages can share the same stylesheet -->
<!-- about.html, contact.html, etc. all link to styles.css -->

/* styles.css - shared across all pages */

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
}

.highlight {
    background-color: yellow;
    font-weight: bold;
}

/* Change color here â†' updates every page instantly */

Comparison

Method	Where written	Scope	Reusable	Recommended
Inline	`style=""` attribute	Single element	No	Avoid
Internal	`<style>` in `<head>`	Single page	No	Prototyping only
External	Separate `.css` file	Entire website	Yes	Always

CSS Rule Structure

A CSS rule has two parts: a selector (which elements to style) and a declaration block (what styles to apply).

CSS Rule Anatomy

/*
 * CSS Rule Structure:
 *
 * selector {
 *     property: value;   â†� declaration
 *     property: value;
 * }
 */

/* Element selector */
h1 {
    color: #2c3e50;        /* text color */
    font-size: 2rem;       /* font size */
    text-align: center;    /* alignment */
    margin-bottom: 20px;   /* spacing below */
}

/* Class selector */
.highlight {
    background-color: yellow;
    font-weight: bold;
}

/* ID selector */
#header {
    background-color: #3498db;
    padding: 20px;
}

/* Multiple selectors - same styles */
h1, h2, h3 {
    font-family: 'Arial', sans-serif;
}

/* Comments in CSS */
/* This is a single-line comment */

/*
 * This is a
 * multi-line comment
 */

The Cascade

The "C" in CSS stands for Cascading. When multiple CSS rules target the same element, the browser resolves conflicts using three factors in order: