Introduction au CSS

Un fichier séparé qui contient les règles CSS pour un site web. Il est généralement lié au fichier HTML à l'aide d'une balise <link> dans l'en-tête.

Une balise HTML qui permet d'inclure un fichier CSS dans une page web.

Il s'agit d'un attribut HTML utilisé pour appliquer des styles CSS directement sur un élément, ce qui n'est pas recommandé car il rend le code HTML moins lisible et plus difficile à maintenir.

Le code CSS permet de contrôler l'aspect d'une page web en définissant des propriétés pour les éléments HTML. Ces propriétés peuvent inclure la couleur, la taille, la police, la position, la forme et bien plus.

Le site web ‘Caniuse.com’ permet de vérifier la compatibilité des navigateurs web avec différentes propriétés et fonctionnalités CSS.

Définit un ensemble de règles CSS appliquées à tous les éléments HTML ayant cet attribut avec une valeur définie.

Un identifiant unique attribué à un élément HTML pour identifier cet élément dans le code CSS.

Ce sélecteur vise à appliquer les règles CSS à tous les éléments HTML avec un attribut 'title' défini.

Un ensemble de règles CSS qui s'appliquent à tous les éléments HTML dont l'attribut 'class' possède la valeur spécifiée.

Définit un ensemble de règles CSS qui s'appliquent à un élément ou à un groupe d'éléments HTML.

Le sélecteur d'éléments adjacents est utilisé pour appliquer un style CSS à un élément qui se trouve immédiatement après un autre élément spécifié. On utilise le signe '+' entre les deux sélecteurs. Par exemple, pour appliquer un style à un élément 'p' qui suit un élément 'h2', on utiliserait 'h2 + p' dans le code CSS.

Les unités les plus couramment utilisées pour la mise en page web sont les pixels (px), les pourcentages (%) et les ems (em). Les 'ems' sont plus flexibles car ils s'adaptent à la taille de la police par défaut.

En CSS, vous pouvez définir une couleur à l'aide d'une valeur nommée (par exemple, 'green'), d'un code hexadécimal (par exemple, '#F4C5A8') ou à l'aide de la fonction 'rgb()'.

Un ensemble de règles qui modifient l'apparence d'un élément HTML.

Élément HTML qui représente un paragraphe de texte.

Propriété CSS qui définit la couleur d'un élément.

Définit comment le CSS est appliqué, soit dans un fichier dédié, soit directement dans le code HTML.

Un dossier qui contient l'ensemble des fichiers et des dossiers qui composent un site web.

Un sélecteur CSS permet d'identifier les éléments HTML dans le code source d'une page web.

Le sélecteur d'élément sert à appliquer un style à tous les éléments d'un même type.

Exemple de code CSS avec un sélecteur d'élément 'p' : 'p { color: blue; }'

Ce code CSS signifie que tous les paragraphes de la page web seront affichés en bleu.

L'attribut 'class' doit être ajouté aux balises que l'on souhaite styliser avec le sélecteur de classe.

Le code HTML avec l'attribut 'class' devient : '

Bonjour et bienvenue sur mon site !

Ce code CSS avec le sélecteur de classe 'intro' : '.intro { font-weight: bold; }' rendra le paragraphe en gras.

Une règle @ est une directive CSS qui permet de contrôler différents aspects du style d'un document, comme l'importation de fichiers CSS externes, la définition de styles pour l'impression ou la création de polices personnalisées.

La directive @import permet d'inclure un fichier CSS externe dans le document.

La directive @import avec la clause 'print' spécifie un fichier CSS à utiliser uniquement pour l'impression.

La directive @page permet de personnaliser l'apparence des pages imprimées, par exemple, en définissant la taille de la page, les marges et l'ajout de marques.

La directive @media permet de définir des styles spécifiques pour différentes conditions, comme la résolution d'écran ou la sortie d'impression.

La directive @font-face permet de définir une nouvelle police de caractères personnalisée à utiliser dans le document.

Les media queries (requêtes de média) sont des fonctionnalités CSS qui permettent d'adapter le style et la présentation d'une page Web en fonction du périphérique de consultation (ordinateur, tablette, téléphone, etc.).

La directive @media 'print' permet de définir des styles spécifiques pour l'impression.