Retour au cours

Lesson 8: Core Selectors: Class Selectors (.)

**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.)*

8. Core Selectors: Class Selectors (.)

Class selectors are the workhorses of modern CSS. They allow you to apply the same style to multiple, arbitrary elements, regardless of their HTML tag type.

Defining and Using a Class

  1. HTML: Add the class attribute to one or more elements. html

    This is an important alert.

    Another warning container.
    Link Button

  2. CSS: Target the class by preceding the class name with a dot (.). css .warning { background-color: yellow; border: 1px solid orange; padding: 10px; }

    .primary-btn { background-color: darkgreen; color: white; padding: 8px 16px; border-radius: 5px; }

Key Characteristics of Classes

  • Reusability: The biggest advantage. A class can be used on any HTML element (div, p, h1, img, etc.).

  • Multiple Classes: An element can have multiple classes applied to it, separated by spaces. html

    Multiple styles apply.

    The browser merges the styles defined by all three classes (text-center, warning, font-large).

Best Practice: Use descriptive, hyphenated class names (e.g., .nav-link, .card-image, .is-active).