Introduction to CSS

CSS — Cascading Style Sheets — is the language that controls how HTML elements look on screen. While HTML defines the structure and content of a web page, CSS defines its presentation — colours, fonts, spacing, layout, animations, and more. Without CSS, every website would look like a plain text document.

What Is CSS?

CSS is a declarative, rule-based language. You write rules that describe how specific HTML elements should be styled:

h1 {
  color: navy;
  font-size: 2rem;
  text-align: center;
}

This rule says: "Make all <h1> elements navy, 2rem in size, and centred."

How to Add CSS to HTML

There are three ways to include CSS in your HTML document:

1. External Stylesheet (Recommended)

Create a separate .css file and link it from the HTML <head>:

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

/* styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

2. Internal Stylesheet

Embed CSS directly in the HTML <head> using a <style> element:

<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }
  </style>
</head>

3. Inline Styles

Apply styles directly to an element using the style attribute:

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

Comparison

Method	Reusability	Maintainability	Specificity	Best For
External	High — one file for many pages	Easy to maintain	Normal	Production websites
Internal	Medium — one page only	Moderate	Normal	Single-page demos
Inline	None — one element only	Hard to maintain	Highest	Quick overrides, email HTML

Best practice: Always use external stylesheets for real projects. They separate concerns, enable caching, and keep your HTML clean.

CSS Syntax

A CSS rule consists of a selector and a declaration block:

selector {
  property: value;
  property: value;
}

p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 1rem;
}

Part	Description	Example
Selector	Targets the HTML element(s) to style	`p`, `.card`, `#header`
Property	The aspect to change	`color`, `font-size`, `margin`
Value	The setting to apply	`red`, `16px`, `2rem`
Declaration	A property-value pair	`color: red;`
Declaration block	All declarations between `{}`	`{ color: red; font-size: 16px; }`

Introduction to CSS

Introduction to CSS

What Is CSS?

How to Add CSS to HTML

1. External Stylesheet (Recommended)

2. Internal Stylesheet

3. Inline Styles

Comparison

CSS Syntax

Common CSS Properties

Text Properties

More in Programming