Retour au cours

Lesson 1: What is CSS and Why Do We Need It?

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

1. What is CSS and Why Do We Need It?

CSS stands for Cascading Style Sheets. It is the language we use to style an HTML document. While HTML provides the structure (the bones), CSS provides the appearance (the skin, clothes, and makeup).

The Separation of Concerns

In modern web development, we strive for the 'Separation of Concerns':

  1. HTML: Structure and content.
  2. CSS: Presentation and style.
  3. JavaScript: Behavior and interactivity.

Without CSS, a webpage is just black text on a white background, appearing monotonous and unstructured. CSS allows you to define colors, fonts, layouts, animations, and much more.

Key CSS Features

  • Layout Control: Positioning elements precisely (e.g., using Flexbox or Grid).
  • Aesthetics: Defining colors, backgrounds, borders, and shadows.
  • Responsiveness: Adapting the layout based on the user's screen size (e.g., mobile, tablet, desktop).

A Simple Example

Imagine you have a heading in HTML:

html

Welcome to CSS

Using CSS, you can make it look like this:

css h1 { color: blue; /* Property: Value */ font-size: 24px; }

We will dive into the anatomy of these rulesets in the next lesson!