CSS, ou Cascading Style Sheets, est un langage utilisé pour décrire la présentation d'un document écrit en HTML. Il permet de séparer le contenu de la présentation, ce qui rend les pages web plus faciles à maintenir et à mettre à jour. Voici une introduction aux concepts de base de CSS.

Introduction aux styles CSS

CSS est utilisé pour appliquer des styles aux éléments HTML. Avec CSS, vous pouvez contrôler la couleur, la taille, la police, l'espacement, et bien d'autres aspects de la présentation des éléments sur une page web. Voici un exemple simple de la façon dont CSS peut être utilisé pour styliser une page HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple CSS</title>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>Ceci est un paragraphe stylisé avec CSS.</p>
</body>
</html>

Dans cet exemple, la balise <style> dans la section <head> contient des règles CSS qui s'appliquent à tous les paragraphes (<p>) de la page, les rendant bleus et définissant leur taille de police à 16 pixels.

Sélecteurs CSS

Les sélecteurs CSS sont utilisés pour cibler les éléments HTML auxquels vous souhaitez appliquer des styles. Voici quelques types de sélecteurs couramment utilisés :

  • Sélecteur par balise : Cible tous les éléments d'un type spécifique. Par exemple, p cible tous les paragraphes.

    • p { color: blue; }

    • Sélecteur par classe : Cible tous les éléments qui ont un attribut class spécifique. Les noms de classe sont précédés d'un point (.).

      .texte-important { font-weight: bold; }

    • Sélecteur par ID : Cible un élément spécifique qui a un attribut id unique. Les noms d'ID sont précédés d'un dièse (#).

      #titre-principal { font-size: 24px; }

    Propriétés CSS courantes

    Voici quelques propriétés CSS couramment utilisées pour styliser les éléments :

    • color : Définit la couleur du texte.

      p { color: red; }

    • background-color : Définit la couleur de fond d'un élément.

      div { background-color: #f0f0f0; }

    • margin : Définit l'espace extérieur autour d'un élément.

      div { margin: 20px; }

    • padding : Définit l'espace intérieur autour du contenu d'un élément.

      div { padding: 10px; }

    • border : Définit la bordure autour d'un élément.

      div { border: 1px solid black; }

    • font-size : Définit la taille de la police du texte.

      p { font-size: 16px; }

    Utilisation de Flexbox et Grid pour la mise en page

    Flexbox et Grid sont deux techniques de mise en page CSS modernes qui permettent de créer des designs complexes et responsifs avec facilité.

    • Flexbox : Flexbox est un modèle de mise en page unidimensionnel qui permet de distribuer l'espace entre les éléments d'un conteneur et de les aligner. Il est particulièrement utile pour les mises en page qui nécessitent un alignement et une distribution flexibles des éléments.

      .conteneur { display: flex; justify-content: center; /* Aligne les éléments horizontalement au centre */ align-items: center; /* Aligne les éléments verticalement au centre */ }

    • Grid : Grid est un modèle de mise en page bidimensionnel qui permet de créer des grilles complexes avec des lignes et des colonnes. Il est idéal pour les mises en page qui nécessitent un contrôle précis sur l'emplacement des éléments.

      .conteneur { display: grid; grid-template-columns: repeat(3, 1fr); /* Crée trois colonnes de taille égale */ gap: 10px; /* Définit l'espace entre les éléments de la grille */ }

    En utilisant ces concepts de base de CSS, vous pouvez créer des pages web attrayantes et bien structurées qui s'adaptent à différents appareils et tailles d'écran. CSS est un outil puissant pour le développement web, et maîtriser ses bases vous permettra de créer des designs professionnels et efficaces.

Modifié le: samedi 7 juin 2025, 08:04