CSS Tutorial

This CSS tutorial teaches you how to make web pages look good. CSS stands for Cascading Style Sheets, and it is the language browsers use to decide colors, fonts, spacing, layout and animation for every element on a page.

HTML describes what content is (a heading, a paragraph, a button). CSS describes how that content looks. Keeping the two separate means you can restyle an entire website by editing one stylesheet, without touching the HTML at all.

Your First CSS Example

The example below is a normal HTML page with a <style> block in the head. Each rule picks some elements and gives them a look. Click "Try it Yourself", change a color, and run it again.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body {
  font-family: system-ui, sans-serif;
  background: #f4f7fb;
  padding: 24px;
}
h1 {
  color: #2563eb;
}
p {
  color: #374151;
  font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This paragraph is styled by a CSS rule.</p>
</body>
</html>

Why Learn CSS?

• Every website uses CSS, so it is a core skill for any front-end or full-stack developer
• Modern CSS (Flexbox, Grid, custom properties) builds complex layouts with very little code
• Responsive design with media queries makes one page work on phones, tablets and desktops
• Transitions and animations add polish without any JavaScript
• Frameworks such as Tailwind and Bootstrap are easier to use once you understand plain CSS

What This CSS Tutorial Covers

The lessons go in the usual learning order. You start with syntax, selectors and the three ways to add CSS. Then you learn colors, backgrounds, the box model, text and units. After that come layout topics: display, positioning, Flexbox and Grid. The tutorial ends with responsive design, pseudo-classes, transitions, animations, CSS variables and a small project that combines everything.

Every example is a complete HTML document, so what you see in the editor is exactly what the browser renders.

What You Need

You only need a browser and a text editor. It helps to know basic HTML first (elements, attributes, headings and paragraphs), because CSS always styles HTML. If you are brand new, read the HTML tutorial on this site first and come back.

Frequently asked questions

Is CSS hard to learn?

The basics of CSS are easy: you can change colors and fonts within an hour. Layout and the cascade take more practice, but Flexbox and Grid have made it much simpler than it used to be.

Is CSS a programming language?

CSS is a style sheet language, not a general-purpose programming language. It has no loops or ordinary functions for logic, but it does have variables, calculations and conditional rules such as media queries.

Should I learn HTML or CSS first?

Learn the basics of HTML first, since CSS needs HTML elements to style. Most people then learn the two side by side.

How long does it take to learn CSS?

Most beginners can build simple styled pages in a week or two of practice. Getting comfortable with responsive layouts usually takes a few months of real projects.