CSS, ou Cascading Style Sheets, est un langage de feuille de styles utilisé pour définir l'apparence des élémants HTML.

Syntaxe CSS

La syntaxe CSS se compose d'un sélecteur suivi d'une ou plusieurs déclarations.

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple CSS</title>
    <style>
        span {
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <span>Texte vert</span>
</body>
</html>

Sélecteurs CSS

Les sélecteurs sont utilisés pour cibler les éléments HTML spécifiques que vous souhaitez styliser.

Sélecteur de balise

Le sélecteur de balise sélectionne tous les éléments correspondant à une balise spécifique.

h1 {
    color: darkblue;
}

Sélecteur de classe

Le sélecteur de classe permet de cibler des éléments ayant un attribut class spécifique.

.rouge {
    color: red;
}

Sélecteur d'identifiant

Le sélecteur d'identifiant cible un élément unique avec un attribut id spécifique.

#jaune {
    background-color: yellow;
}

Sélecteur universel

Le sélecteur universel sélectionne tous les éléments dans le document.

* {
    margin: 0;
    padding: 0;
}

Propriétés de police CSS

font-family

Définit la police utilisée pour le texte.

p {
    font-family: Arial, sans-serif;
}

font-size

Définit la taille de la police.

h2 {
    font-size: 24px;
}

font-weight

Définit la graisse de la police.

.gras {
    font-weight: bold;
}

font-style

Définit le style de la police (italique, oblique).

p {
    font-style: italic;
}

Propriétés de texte CSS

color

Définit la couleur du texte.

div {
    color: #0000FF;
}

text-align

Définit l'alignement horizontal du texte.

h1 {
    text-align: center;
}

text-decoration

Ajoute des effets de décoration au texte (souligné, barré).

a {
    text-decoration: underline;
}

text-indent

Définit le retrait du premier paragraphe.

p {
    text-indent: 1em;
}

line-height

Définit l'interligne.

p {
    line-height: 1.5;
}

Méthodes d'inclusion de CSS

• Style en ligne : Utilisation de l'attribut style directement dans la balise HTML.
• Feuille de style interne : Définition des styles entre les balises <style> dans la section <head>.
• Feuille de style externe : Utilisation de la balise <link> pour inclure un fichier CSS externe.

<link rel="stylesheet" href="styles.css">