CSS Tutorial

CSS is the language that controls how a web page looks: its colours, fonts, spacing and layout.

HTML builds the structure of a page. CSS dresses it up. The same HTML page can look plain or beautiful, depending only on its CSS.

This tutorial starts from zero. You only need to know a little HTML. Every lesson is short, uses simple English, and has examples you can change and run.

Why Learn CSS?

• Every website on the internet uses CSS
• It turns a plain page into a page people enjoy using
• One CSS file can style hundreds of pages at once
• It is needed for every web design and front-end job

Try It Yourself

Click Try it Yourself, change the colour #264de4 to tomato or green, and click Run.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Arial, sans-serif;
  background-color: #f4f6fb;
}
h1 {
  color: #264de4;
  text-align: center;
}
p {
  font-size: 18px;
  color: #444444;
}
</style>
</head>
<body>

<h1>Ali's Mobile Shop</h1>
<p>New phones and accessories in Karachi, at fair prices.</p>

</body>
</html>

What You Will Learn

• How CSS rules are written, and the three ways to add CSS to a page
• Selectors, colours, backgrounds, borders and text styling
• The box model: margin, padding, border and size
• Page layout with display, position, Flexbox and Grid
• Responsive design that works on phones and laptops
• Smooth transitions and simple animations

Exercises and Quiz

Most lessons end with a short exercise. The last lesson is a quiz on the whole tutorial.

What to Learn After CSS

When you are comfortable with CSS, learn JavaScript to make pages interactive. To build faster, try a CSS framework like Tailwind CSS or Bootstrap, and learn Sass to write CSS for big projects.