CSS Tutorial

CSS Home

Welcome to our free CSS tutorial. CSS is the language that turns plain HTML into beautiful, colorful, well-organized web pages, and this guide teaches it from the very first line.

What is CSS?

CSS stands for Cascading Style Sheets. While HTML gives a web page its structure (headings, paragraphs, links, images), CSS controls how that structure looks: the colors, the fonts, the spacing, the borders and the overall layout. Without CSS, every website would look like a plain black-and-white document.

Think of it this way: HTML is the skeleton of a page, and CSS is the skin, clothes and style. The same HTML page can look completely different just by changing its CSS.

A quick taste of CSS

Here is a tiny example. The CSS inside the <style> block changes the page background, centers the heading and gives it a color. Click "Try it Yourself" to run it.

Your first styled page

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: #f0f4ff;
    font-family: Arial, sans-serif;
  }
  h1 {
    color: #2b5cff;
    text-align: center;
  }
  p {
    color: #444;
    text-align: center;
  }
</style>
</head>
<body>
  <h1>Hello, CSS!</h1>
  <p>This paragraph is styled with CSS.</p>
</body>
</html>

What this tutorial covers

You will move from the basics to practical styling skills, one short lesson at a time. Along the way you will learn:

How CSS works and the three ways to add it to a page
CSS syntax, selectors and comments
Colors and backgrounds
The box model: margins, padding, borders, height and width
Styling text and choosing fonts
How to find and fix common CSS mistakes

Why learn CSS?

CSS is one of the three core skills of web development, alongside HTML and JavaScript. Whether you want to build your own website, land a front-end internship, or simply understand how the web is designed, CSS is essential and beginner-friendly.

It is required for almost every web and front-end job.
It is easy to start with and gives instant, visible results.
You can practice it right in your browser with no setup.
It pairs perfectly with HTML, which you may already know.

How to use the live editor

Every runnable example in this tutorial has a "Try it Yourself" editor. You can change the code and instantly see how the page updates. The best way to learn CSS is to experiment: change a color, adjust a number, and watch what happens.

💡

Learning tip: do not just read the examples, run and edit them. Changing values yourself is the fastest way to understand what each CSS property really does.

Key points

CSS = Cascading Style Sheets, the language that styles web pages.
HTML provides structure; CSS provides appearance.
The same HTML can look completely different with different CSS.
This tutorial teaches CSS step by step, with runnable examples.
Use the live editor to experiment and learn faster.