CSS Tutorial

CSS Introduction

CSS (Cascading Style Sheets) is the language used to describe how HTML elements should look on screen. It separates a page's content from its appearance.

What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language that tells the browser how to display HTML elements: their color, size, position, spacing and much more. HTML says "this is a heading"; CSS says "make that heading blue, large and centered."

The word "cascading" refers to the way styles flow and combine. When several rules could apply to the same element, CSS uses clear priority rules to decide which one wins. You will meet this idea gradually as you learn.

Why was CSS created?

In the early web, styling was mixed directly into HTML, which made pages messy and hard to maintain. CSS was created to separate content (HTML) from presentation (CSS). This separation brings big benefits:

One stylesheet can control the look of an entire website.
You can change a site's design without touching the content.
Pages load faster because styles can be cached and reused.
Code stays clean, shorter and easier to maintain.

How CSS works with HTML

CSS targets HTML elements using selectors and then applies styling rules to them. In the example below, the CSS makes all <h1> headings green and all paragraphs larger and gray. Run it and try changing the colors.

CSS styling HTML elements

Example

<!DOCTYPE html>
<html>
<head>
<style>
  h1 {
    color: green;
  }
  p {
    color: gray;
    font-size: 20px;
  }
</style>
</head>
<body>
  <h1>CSS makes this heading green</h1>
  <p>And this paragraph gray and larger.</p>
</body>
</html>

HTML vs CSS at a glance

	HTML	CSS
Purpose	Structure and content	Appearance and style
Example	<h1>Title</h1>	h1 { color: blue; }
Answers	What is on the page?	How does it look?
File type	.html	.css

ℹ️

You do not need to be an HTML expert to start CSS, but knowing basic tags like <h1>, <p> and <div> will help you follow the examples.

Key points

CSS = Cascading Style Sheets.
It controls how HTML elements look.
It separates content from presentation.
One stylesheet can style an entire website.
CSS and HTML work together: HTML for structure, CSS for style.