Introduction to CSS

Understand what CSS is, how it fits into the frontend stack and how to use the examples and challenges in this course.

📘 Theory

The basic idea behind CSS

HTML provides structure. CSS controls presentation.

A selector targets one or more elements, such as a tag, a class or an id. Inside curly braces you write declarations like `color: #2563eb;` or `font-size: 1rem;`.

When more than one rule affects the same element, the browser resolves the conflict through the cascade. That is why reusable classes such as `.btn` or `.card` tend to scale better than scattered one-off styles.

Selector + `{ property: value; }`
The cascade combines order, specificity and importance.
Reusable classes make styling easier to maintain.

How CSS is connected to HTML

The standard approach is an external stylesheet.

The most common setup is a `` inside the HTML head. This keeps structure and presentation separate and allows you to reuse the same stylesheet across multiple pages.

For quick tests, a `` block inside the head is enough. In tools such as CodePen, the CSS panel acts like that external stylesheet.

What you will learn in this course

A clear roadmap helps you build confidence in the right order.

The course starts with tooling, syntax, the cascade and selectors. Then it moves into the box model, units, color, typography, layout systems, responsive design and more advanced architecture topics.

Setup and tools for writing and inspecting CSS.
Syntax, selectors, cascade and specificity.
Box model, spacing, units and color systems.
Typography, responsive design and media queries.
Flexbox, Grid, transforms, animations and scalable patterns.

How to use the examples and challenges

Experiment first, then validate what you learned.

Every lesson includes editable code blocks. Change a selector, tweak a spacing value or switch a layout property and watch what happens in the preview.

Challenges are there to help you prove you understood the concept. Try them before revealing the solution, and compare your result with the recommended answer instead of copying it blindly.