CSS - Introduction

Lucas D. -

Qu'est-ce que le CSS ?

CSS signifie Cascading Style Sheets (Feuilles de style en cascade). C'est un langage de feuilles de style utilisé pour décrire la présentation d'un document écrit dans un langage de balisage, tel que HTML ou XML. Le CSS vous permet de styliser et de mettre en page des pages web en spécifiant comment les éléments doivent être rendus à l'écran, sur papier ou dans d'autres médias.

Le CSS fonctionne avec HTML. Alors que HTML est responsable de la structure et du contenu d'une page web, CSS se concentre sur la présentation visuelle et la mise en page. Il vous permet de contrôler divers aspects de l'apparence de la page web, tels que les couleurs, les polices, l'espacement et le positionnement.

Avec CSS, vous pouvez appliquer des styles à des éléments HTML spécifiques ou à des groupes d'éléments.

Conseil: CSS Styles for HTML Elements

h1 {
    font-family: Arial;
    font-size: 24px;
    color: blue;
}

div {
    background-color: lightgray;
    padding: 10px;
}

En utilisant CSS :

  • Vous pouvez séparer la logique de présentation du contenu structurel de vos pages web.
  • Cette séparation améliore la maintenabilité et la réutilisabilité.
  • Vous pouvez définir des styles dans un fichier CSS externe et le lier à plusieurs pages HTML.

Conseil: Linking an External CSS File

<link rel="stylesheet" type="text/css" href="styles.css">

CSS vous permet également de créer des designs réactifs qui s'adaptent à différentes tailles d'écran et appareils.

Conseil: CSS Media Queries

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Dans l'ensemble, CSS est un outil important pour les développeurs et les designers web. Il vous donne le contrôle sur l'apparence de vos pages web sur différents appareils et écrans.

Pourquoi utiliser le CSS ?

Le CSS est un outil pour le développement web. Il y a plusieurs raisons pour lesquelles vous devriez utiliser le CSS dans vos projets web :

Le CSS sépare la présentation d'une page web de sa structure et de son contenu. Cela signifie que vous pouvez définir les styles visuels de votre page web séparément du balisage HTML. En gardant la logique de présentation dans un fichier CSS distinct, votre code HTML devient plus clair et plus axé sur la structure et le contenu de la page. Cette séparation rend votre code plus facile à mettre à jour à l'avenir.

L'utilisation du CSS vous permet d'avoir plus de contrôle sur l'apparence de vos pages web. Avec le CSS, vous pouvez spécifier diverses propriétés visuelles pour les éléments HTML, telles que les couleurs, les polices, l'espacement, les bordures et les arrière-plans. Vous pouvez appliquer différents styles à des éléments spécifiques ou à des groupes d'éléments, vous donnant un contrôle précis sur l'apparence de votre page web.

Le CSS réduit la complexité et la répétition dans le contenu structurel de vos pages web. Sans CSS, vous devriez appliquer les mêmes styles à chaque élément HTML séparément, ce qui peut conduire à beaucoup de répétitions et à un code volumineux. Avec le CSS, vous pouvez définir des styles une seule fois et les appliquer à plusieurs éléments en utilisant des sélecteurs. Cela réduit la duplication de code et rend votre HTML plus concis.

Une fonctionnalité puissante du CSS est le partage du formatage entre plusieurs pages web. En définissant des styles dans un fichier CSS externe, vous pouvez lier ce fichier à plusieurs pages HTML. Cela signifie que vous pouvez apporter des modifications globales en modifiant un seul fichier CSS au lieu de mettre à jour les styles de chaque page individuelle.

Comment fonctionne le CSS ?

Le CSS fonctionne en appliquant des styles aux éléments HTML d'une page web. Les styles sont définis à l'aide de règles CSS, qui se composent de sélecteurs et de blocs de déclaration.

Les règles CSS peuvent être définies dans un fichier séparé avec une extension .css, ou elles peuvent être intégrées dans le document HTML à l'aide de la balise <style>. Lorsque vous utilisez un fichier CSS externe, vous devez le lier à votre document HTML en utilisant la balise <link> dans la section <head>.

Lier un fichier CSS externe

Conseil: Lier un fichier CSS externe

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Chaque règle CSS se compose d'un sélecteur et d'un bloc de déclaration. Le sélecteur pointe vers l'élément ou les éléments HTML que vous souhaitez styliser. Il peut s'agir d'un sélecteur d'élément (par exemple, p pour les paragraphes), d'un sélecteur de classe (par exemple, .highlight pour les éléments avec la classe "highlight"), ou d'un sélecteur d'ID (par exemple, #header pour l'élément avec l'ID "header").

Syntaxe d'une règle CSS

Conseil: Syntaxe d'une règle CSS

selecteur {
    propriete1: valeur1;
    propriete2: valeur2;
}

Le bloc de déclaration est encadré par des accolades {} et contient une ou plusieurs déclarations. Chaque déclaration spécifie une propriété CSS et sa valeur correspondante, séparées par deux points :. Les déclarations multiples dans un bloc sont séparées par des points-virgules ;.

Bloc de déclaration CSS

Conseil: Bloc de déclaration CSS

h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

Lorsqu'un navigateur web charge une page web, il lit à la fois les fichiers HTML et CSS. Le navigateur applique ensuite ces règles aux éléments HTML correspondants selon les propriétés et les valeurs déclarées. Ce processus s'appelle le rendu.

Le CSS permet également la cascade et l'héritage. Si plusieurs règles s'appliquent à un élément, la règle avec la spécificité la plus élevée prend la priorité. Certaines propriétés sont héritées par les éléments enfants de leurs éléments parents.

Dans l'ensemble, le CSS définit des règles qui ciblent les éléments HTML et spécifient leurs propriétés visuelles afin que vous puissiez contrôler l'apparence de vos pages web.