Introduction to CSS
Styling webpages with Cascading Style Sheets
Introduction
CSS (Cascading Style Sheets) is the language used to style HTML content. While HTML provides the structure and meaning of content, CSS controls how that content looks — its colors, fonts, spacing, layout, and animations.
CSS follows a simple rule structure: select which elements to style, then apply property-value pairs. For example, p { color: blue; } makes all paragraph text blue. CSS can be written inline, in the head section, or in separate .css files.
In this chapter, you will learn how CSS works, how to write CSS rules, and the three ways to apply styles to your HTML.
How It Works
CSS rules consist of a Selector (targeting HTML elements) and a declaration block containing property-value pairs. The browser reads all CSS rules, resolves conflicts (the Cascade), and applies the final styles to each element. Styles can come from inline attributes, internal style tags, or External Stylesheet.
Everyday Object Analogy
Think of HTML as the frame of a house (walls, rooms, doors) and CSS as the interior decoration (paint colors, wallpaper patterns, furniture styles). The house structure stays the same, but CSS lets you completely change the look and feel.
CSS Selectors
Element Selector
Targets all elements of a given type. Example: p { } targets every paragraph on the page.
Class Selector
Targets elements with a specific Class attribute. Example: .highlight { } targets all elements with Class="highlight".
ID Selector
Targets a single element with a specific ID. Example: #header { } targets the element with ID="header".
Ways to Apply CSS
External Stylesheet
A separate .css file linked via the link tag in the head. Best practice for maintainability and reusability across multiple pages.
Internal & Inline
Internal CSS uses a style tag in the head. Inline CSS uses the style attribute on individual elements. Useful for quick prototypes or one-off overrides.
Deeper Dive
The Cascade is the "C" in CSS. When multiple rules target the same element, the browser uses Specificity and source order to determine which style wins. Inline styles have the highest Specificity, followed by ID, Class, and finally element Selector. More specific Selector override less specific ones.
Comments in CSS are written between /* and */. They are ignored by the browser but helpful for developers to document their code.
Key Insight
Always prefer External Stylesheet for production websites. They keep your HTML clean, allow browser caching, and enable consistent styling across your entire site.
Advanced
CSS preprocessors like Sass and Less extend CSS with variables, nesting, mixins, and functions, making stylesheets more maintainable. PostCSS tools like Autoprefixer automatically add vendor prefixes (-webkit-, -moz-) for cross-browser compatibility.
CSS custom Property (variables) defined with --name allow you to reuse Value throughout your stylesheet and update them dynamically with JavaScript. Modern CSS also supports nesting (similar to preprocessors) natively in the latest browser versions.
Vocabulary Table
| Term | Definition |
|---|---|
| CSS | Cascading Style Sheets — the language used to style and lay out HTML elements. |
| Selector | The part of a CSS rule that identifies which HTML elements to style. |
| Property | A styling attribute like color, font-size, or margin that defines what aspect to change. |
| Value | The setting applied to a CSS property, such as blue for color or 16px for font-size. |
| Cascade | The algorithm that resolves conflicting CSS rules based on specificity and source order. |
| External Stylesheet | A separate .css file linked to HTML using the link tag for reusable styles. |
| Class | An HTML attribute used to group elements for CSS styling with a dot selector (.classname). |
| ID | A unique HTML identifier used for CSS styling with a hash selector (#idname). |
| Specificity | The measure of how specific a CSS selector is, determining which rule takes precedence. |
| CSS Variable | A custom property defined with --name that stores a reusable value across stylesheets. |
Fun Facts
CSS was first proposed by Hakon Wium Lie in 1994 as a solution to style web documents.
The first browser to fully support CSS was Microsoft Internet Explorer 3.0 in 1996.
CSS can create complex animations and 3D transforms without any JavaScript.
The :hover pseudo-class was introduced in CSS2 and remains one of the most commonly used CSS features.
CSS Grid and Flexbox are two modern layout systems that have revolutionized web design since 2017.
Interactive Diagram
Launch the interactive diagram to see this in action.
Open Interactive DiagramThe interactive diagram for this chapter demonstrates Introduction to CSS. It shows CSS code applied to HTML elements, showing how styling changes appearance in real-time.
What to explore:
- edit CSS properties (color, font-size, margin); watch the page styling update instantly; see the cascade in action
- CSS (Cascading Style Sheets) controls the visual presentation of HTML elements — colors, layout, fonts, and spacing
Knowledge Check
1. What does CSS stand for?
Answer: Cascading Style Sheets
2. Which CSS selector has the highest specificity?
Answer: ID selector (#id)
3. What is the best practice for applying CSS to a production website?
Answer: External stylesheet file