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>

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

More in Programming