CSS Introduction

CSS stands for Cascading Style Sheets. It is the language used to describe the presentation of a web page — including its colors, layout, fonts, and animations. While HTML defines the structure and content of a page, CSS controls how that content looks and feels.

What is CSS?

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work — it can control the layout of multiple web pages all at once
External stylesheets are stored in .css files
CSS3 is the latest standard of CSS

Why Use CSS?

Without CSS, every HTML page would look plain and unstyled — just black text on a white background. CSS gives web designers the power to:

Apply colors, fonts, and spacing
Create multi-column layouts
Build responsive designs for different screen sizes
Add animations and transitions
Keep styling separate from content — making pages easier to maintain

A Simple CSS Example

CSS is applied to HTML elements using rules. A CSS rule consists of a selector and a declaration block:

/* This rule makes all <h1> elements blue and centered */
h1 {
    color: blue;
    text-align: center;
}

Syntax Explained

Part	Example	Description
Selector	`h1`	Points to the HTML element you want to style
Property	`color`	The style attribute you want to change
Value	`blue`	The value assigned to the property
Declaration	`color: blue;`	A property + value pair, ending with a semicolon

Three Ways to Add CSS

There are three ways to insert CSS into an HTML document:

1. External CSS

The most common and recommended method. A separate .css file is linked in the <head> of your HTML:

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

2. Internal CSS

CSS is written inside a <style> tag within the <head> section:

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

3. Inline CSS

CSS is applied directly to a single HTML element using the style attribute:

<p style="color: red; font-size: 18px;">This is a red paragraph.</p>

Note: External CSS is preferred for real projects because it keeps styling centralized and reusable across many pages.

CSS History

Year	Version
1996	CSS1 (W3C Recommendation)
1998	CSS2 (W3C Recommendation)
2011	CSS2.1 (revised standard)
2012+	CSS3 (modular — ongoing)
Present	CSS Living Standard (W3C)

Key Points to Remember

CSS is NOT a programming language — it is a style sheet language
CSS rules consist of a selector and one or more declarations
CSS3 introduced modules — like Flexbox, Grid, Animations, and Variables
CSS is case-insensitive for property names, but values may be case-sensitive
Always link your external stylesheet before any inline styles

Next Lesson »