033.1 Leçon 1
Certification: |
Web Development Essentials |
---|---|
Version: |
1.0 |
Thème: |
033 Styliser le contenu avec CSS |
Objectif: |
033.1 Bases du CSS |
Leçon: |
1 sur 1 |
Introduction
Tous les navigateurs web affichent les pages HTML en utilisant des règles de présentation par défaut qui sont pratiques et directes, mais pas attrayantes visuellement. Le HTML en lui-même offre peu de fonctionnalités pour écrire des pages élaborées basées sur des concepts modernes d’expérience utilisateur. Après avoir écrit des pages HTML simples, vous avez probablement réalisé qu’elles sont inesthétiques par rapport aux pages bien conçues que l’on trouve sur Internet. En effet, dans le langage HTML moderne, le code de balisage destiné à la structure et à la fonction des éléments du document (c’est-à-dire le contenu sémantique) est séparé des règles qui définissent l’aspect des éléments (la présentation). Les règles de présentation sont écrites dans un langage différent appelé feuilles de style en cascade (CSS : Cascading Style Sheets). Il vous permet de modifier presque tous les aspects visuels du document, tels que les polices, les couleurs et l’emplacement des éléments sur la page.
Les documents HTML ne sont pas, dans la plupart des cas, destinés à être affichés dans une mise en page fixe comme dans un fichier PDF. Au contraire, les pages web basées sur HTML seront probablement affichées sur une grande variété de tailles d’écran, voire imprimées. CSS fournit des options réglables pour garantir que la page web sera affichée comme prévu, en fonction du périphérique ou de l’application qui l’ouvre.
Appliquer des styles
Il existe plusieurs manières d’inclure le CSS dans un document HTML : l’écrire directement dans la balise de l’élément, dans une section distincte du code source de la page, ou dans un fichier externe qui sera référencé par la page HTML.
Attribut style
La méthode la plus simple pour modifier le style d’un élément spécifique est de l’écrire directement dans la balise de l’élément en utilisant l’attribut style
. Tous les éléments HTML visibles autorisent un attribut style
, dont la valeur peut être une ou plusieurs règles CSS, également appelées propriétés. Commençons par un exemple simple, un élément de type paragraphe :
<p>My stylized paragraph</p>
La syntaxe de base d’une propriété CSS personnalisée est property : value
, où property
est l’aspect particulier que vous voulez modifier dans l’élément et value
définit le remplacement de l’option par défaut faite par le navigateur. Certaines propriétés s’appliquent à tous les éléments et d’autres ne s’appliquent qu’à des éléments spécifiques. De même, il existe des valeurs appropriées à utiliser dans chaque propriété.
Pour changer la couleur de notre paragraphe simple, par exemple, nous utilisons la propriété color
. La propriété color
fait référence à la couleur d’avant-plan, c’est-à-dire à la couleur des lettres du paragraphe. La couleur elle-même est placée dans la partie valeur de la règle et peut être spécifiée dans de nombreux formats différents, y compris des noms simples comme red
(rouge), green
(vert), blue
(bleu), yellow
(jaune), etc. Ainsi, pour rendre les lettres du paragraphe violettes (purple
), ajoutez la propriété personnalisée color : purple
à l’attribut style
de l’élément :
<p style="color: purple">My first stylized paragraph</p>
D’autres propriétés personnalisées peuvent être incluses dans la même propriété style
, mais elles doivent être séparées par des points-virgules. Si vous voulez que la taille de la police soit plus grande, par exemple, ajoutez font-size : larger
à la propriété style
:
<p style="color: purple; font-size: larger">My first stylized paragraph</p>
Note
|
Il n’est pas nécessaire d’ajouter des espaces autour des deux points et des points-virgules, mais ils peuvent faciliter la lecture du code CSS. |
Pour voir le résultat de ces modifications, enregistrez le code HTML suivant dans un fichier, puis ouvrez-le dans un navigateur web (les résultats sont montrés dans la Figure 1) :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
</head>
<body>
<p style="color: purple; font-size: larger">My first stylized paragraph</p>
<p style="color: green; font-size: larger">My second stylized paragraph</p>
</body>
</html>
Vous pouvez imaginer chaque élément de la page comme un rectangle ou une boîte dont vous pouvez manipuler les propriétés géométriques et les décorations avec CSS. Le mécanisme de rendu utilise deux concepts standard de base pour le placement des éléments : le placement bloc et le placement en ligne. Les éléments de type bloc occupent tout l’espace horizontal de leur élément parent et sont placés de manière séquentielle, de haut en bas. Leur hauteur (leur dimension verticale, à ne pas confondre avec leur position haute dans la page) dépend généralement de la quantité de contenu qu’ils contiennent. Les éléments en ligne suivent la méthode de gauche à droite similaire à celle des langues écrites occidentales : les éléments sont placés horizontalement, de gauche à droite, jusqu’à ce qu’il n’y ait plus de place sur le côté droit, après quoi l’élément continue sur une nouvelle ligne juste en dessous de la ligne actuelle. Les éléments tels que p
, div
, et section
sont placés en blocs par défaut, alors que les éléments tels que span
, em
, a
, et les lettres simples sont placés en ligne. Ces méthodes de placement de base peuvent être fondamentalement modifiées par les règles CSS.
Le rectangle correspondant à l’élément p
dans le corps du document HTML de l’exemple sera visible si vous ajoutez la propriété background-color
à la règle (Figure 2) :
<p style="color: purple; font-size: larger; background-color: silver">My first stylized paragraph</p>
<p style="color: green; font-size: larger; background-color: silver">My second stylized paragraph</p>
Au fur et à mesure que vous ajoutez de nouvelles propriétés CSS personnalisées à l’attribut style
, vous remarquerez que le code global commence à être encombré. L’écriture d’un trop grand nombre de règles CSS dans l’attribut style
compromet la séparation de la structure (HTML) et de la présentation (CSS). En outre, vous vous rendrez vite compte que de nombreux styles sont partagés entre différents éléments et qu’il n’est pas judicieux de les répéter dans chaque élément.
Règles CSS
Plutôt que de modifier le style des éléments directement dans leurs attributs style
, il est beaucoup plus pratique d’indiquer au navigateur l’ensemble des éléments auxquels s’applique le style personnalisé. Pour ce faire, nous ajoutons un sélecteur (selector) aux propriétés personnalisées, en faisant correspondre les éléments par type, classe, ID unique, position relative, etc. La combinaison d’un sélecteur et des propriétés personnalisées correspondantes — également appelées déclarations — s’appelle une règle CSS. La syntaxe de base d’une règle CSS est selector { property: value }
. Comme dans l’attribut style
, les propriétés séparées par des points-virgules peuvent être regroupées, comme dans p { color : purple ; font-size : larger }
. Cette règle correspond à chaque élément p
de la page et applique les propriétés personnalisées color
et font-size
.
Une règle CSS pour un élément parent correspondra automatiquement à tous ses éléments enfants. Cela signifie que nous pourrions appliquer les propriétés personnalisées à tout le texte de la page, qu’il soit à l’intérieur ou à l’extérieur d’une balise <p>
, en utilisant le sélecteur body
à la place : body { color : purple ; font-size : larger }
. Cette stratégie nous évite de réécrire la même règle pour tous ses enfants, mais il peut être nécessaire d’écrire des règles supplémentaires pour “annuler” ou pour modifier les règles héritées.
Balise style
La balise <style>
nous permet d’écrire des règles CSS à l’intérieur de la page HTML que nous voulons styliser. Elle permet au navigateur de différencier le code CSS du code HTML. La balise <style>
se place dans la section head
du document :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
<style type="text/css">
p { color: purple; font-size: larger }
</style>
</head>
<body>
<p>My first stylized paragraph</p>
<p>My second stylized paragraph</p>
</body>
</html>
L’attribut type
indique au navigateur quel type de contenu se trouve à l’intérieur de la balise <style>
, c’est-à-dire son type MIME. Comme tous les navigateurs qui prennent en charge CSS supposent que le type de la balise <style>
est text/css
par défaut, l’inclusion de l’attribut type
est facultative. Il existe également un attribut media
qui indique le support — écrans d’ordinateur ou impression, par exemple — auquel les règles CSS de la balise <style>
s’appliquent. Par défaut, les règles CSS s’appliquent à tout support sur lequel le document est rendu.
Comme dans le code HTML, les sauts de ligne et l’indentation du code ne modifient pas la manière dont les règles CSS sont interprétées par le navigateur. L’écriture :
<style type="text/css">
p { color: purple; font-size: larger }
</style>
a exactement le même résultat que l’écriture :
<style type="text/css">
p {
color: purple;
font-size: larger;
}
</style>
Les octets supplémentaires utilisés par les espaces et les sauts de ligne font peu de différence dans la taille finale du document et n’ont pas d’impact significatif sur le temps de chargement de la page, le choix de la mise en page est donc une question de goût. Notez le point-virgule après la dernière déclaration (font-size : larger;
) de la règle CSS. Ce point-virgule n’est pas obligatoire, mais sa présence facilite l’ajout d’une autre déclaration dans la ligne suivante sans se soucier des points-virgules manquants.
Le fait d’avoir les déclarations sur des lignes séparées est également utile lorsque vous devez commenter une déclaration. Lorsque vous souhaitez désactiver temporairement une déclaration pour des raisons de dépannage, par exemple, vous pouvez entourer la ligne correspondante avec /*
et */
:
p {
color: purple;
/*
font-size: larger;
*/
}
ou :
p {
color: purple;
/* font-size: larger; */
}
Si elle est écrite de cette façon, la déclaration font-size : larger
sera ignorée par le navigateur. Veillez à ouvrir et fermer correctement les commentaires, sinon le navigateur risque de ne pas être en mesure d’interpréter les règles.
Les commentaires sont également utiles pour écrire des rappels sur les règles :
/* Texts inside <p> are purple and larger */
p {
color: purple;
font-size: larger;
}
Les rappels comme celui de l’exemple sont inutiles dans les feuilles de style contenant un petit nombre de règles, mais ils sont essentiels pour aider à naviguer dans les feuilles de style contenant des centaines (ou plus) de règles.
Même si l’attribut style
et la balise <style>
sont adéquats pour tester des styles personnalisés et utiles dans des situations spécifiques, ils ne sont pas utilisés couramment. Au lieu de cela, les règles CSS sont généralement placées dans un fichier séparé qui peut être référencé à partir du document HTML.
CSS dans des fichiers externes
La méthode recommandée pour associer des définitions CSS à un document HTML consiste à stocker le CSS dans un fichier séparé. Cette méthode offre deux avantages principaux par rapport aux précédentes :
-
Les mêmes règles de style peuvent être partagées entre plusieurs documents distincts.
-
Le fichier CSS est généralement mis en cache par le navigateur, ce qui améliore les temps de chargement futurs.
Les fichiers CSS ont l’extension .css
et, comme les fichiers HTML, ils peuvent être édités par n’importe quel éditeur de texte simple. Contrairement aux fichiers HTML, les fichiers CSS n’ont pas de structure de haut niveau construite avec des balises hiérarchiques telles que <head>
ou <body>
. Le fichier CSS est plutôt une simple liste de règles traitées dans un ordre séquentiel par le navigateur. Les mêmes règles écrites à l’intérieur d’une balise <style>
pourraient plutôt aller dans un fichier CSS.
L’association entre le document HTML et les règles CSS stockées dans un fichier est définie uniquement dans le document HTML. Pour le fichier CSS, il importe peu que des éléments correspondant à ses règles existent, il n’est donc pas nécessaire d’énumérer dans le fichier CSS les documents HTML auxquels il est lié. Du côté HTML, chaque feuille de style liée sera appliquée au document, comme si les règles étaient écrites dans une balise <style>
.
La balise HTML <link>
définit la feuille de style externe à utiliser dans le document actuel et doit être placée dans la section head
du document HTML :
<head>
<meta charset="utf-8" />
<title>CSS Basics</title>
<link href="style.css" rel="stylesheet">
</head>
Vous pouvez maintenant placer la règle pour l’élément p
que nous avons utilisée précédemment dans le fichier style.css
, et les résultats vus par le visiteur de la page Web seront les mêmes. Si le fichier CSS ne se trouve pas dans le même répertoire que le document HTML, indiquez son chemin relatif ou complet dans l’attribut href
. La balise <link>
peut faire référence à différents types de ressources externes, il est donc important d’établir la relation entre la ressource externe et le document actuel. Pour les fichiers CSS externes, la relation est définie dans rel="stylesheet"
.
L’attribut media
peut être utilisé de la même manière que pour la balise <style>
: il indique le support, tel que les écrans d’ordinateur ou l’impression, auquel les règles du fichier externe doivent s’appliquer.
CSS peut modifier complètement un élément, mais il est toujours important d’utiliser l’élément approprié pour les composants de la page. Sinon, les technologies d’assistance telles que les lecteurs d’écran risquent de ne pas pouvoir identifier les sections correctes de la page.
Exercices guidés
-
Quelles méthodes peuvent être utilisées pour modifier l’apparence des éléments HTML à l’aide de CSS ?
-
Pourquoi n’est-il pas recommandé d’utiliser l’attribut
style
de la balise<p>
s’il y a des paragraphes similaires qui doivent avoir la même apparence ? -
Quelle est la politique de placement par défaut pour placer un élément
div
? -
Quel attribut de la balise
<link>
indique l’emplacement d’un fichier CSS externe ? -
Quelle est la section correcte pour insérer l’élément
link
dans un document HTML ?
Exercices d’exploration
-
Pourquoi n’est-il pas recommandé d’utiliser une balise
<div>
pour identifier un mot dans une phrase ordinaire ? -
Que se passe-t-il si vous commencez un commentaire avec
/*
au milieu d’un fichier CSS, mais que vous oubliez de le fermer avec*/
? -
Écrivez une règle CSS pour souligner tous les éléments
em
du document. -
Comment indiquer qu’une feuille de style provenant d’une balise
<style>
ou<link>
ne doit être utilisée que par les synthétiseurs vocaux ?
Résumé
Cette leçon couvre les concepts de base de CSS et la manière de l’intégrer à HTML. Les règles écrites dans les feuilles de style CSS constituent la méthode standard pour modifier l’apparence des documents HTML. CSS nous permet de garder le contenu sémantique séparé des règles de présentation. Cette leçon aborde les concepts et les procédures suivants :
-
Comment modifier les propriétés CSS à l’aide de l’attribut
style
. -
La syntaxe de base des règles CSS.
-
Utilisation de la balise
<style>
pour intégrer des règles CSS dans le document. -
Utilisation de la balise
<link>
pour intégrer des feuilles de style externes au document.
Réponses aux exercices guidés
-
Quelles méthodes peuvent être utilisées pour modifier l’apparence des éléments HTML à l’aide de CSS ?
Trois méthodes basiques : L’écrire directement dans la balise de l’élément, dans une section distincte du code source de la page, ou dans un fichier externe qui sera référencé par la page HTML.
-
Pourquoi n’est-il pas recommandé d’utiliser l’attribut
style
de la balise<p>
s’il y a des paragraphes similaires qui doivent avoir la même apparence ?La déclaration CSS devra être reproduite dans les autres balises
<p>
, ce qui prend du temps, augmente la taille du fichier et est sujet à des erreurs. -
Quelle est la politique de placement par défaut pour placer un élément
div
?L’élément
div
est traité comme un élément de bloc par défaut, il occupera donc tout l’espace horizontal de son élément parent et sa hauteur dépendra de son contenu. -
Quel attribut de la balise
<link>
indique l’emplacement d’un fichier CSS externe ?L’attribut
href
. -
Quelle est la section correcte pour insérer l’élément
link
dans un document HTML ?L’élément
link
doit se trouver dans la sectionhead
du document HTML.
Réponses aux exercices d’exploration
-
Pourquoi n’est-il pas recommandé d’utiliser une balise
<div>
pour identifier un mot dans une phrase ordinaire ?La balise
<div>
fournit une séparation sémantique entre deux sections distinctes du document et interfère avec les outils d’accessibilité lorsqu’elle est utilisée pour des éléments de texte en ligne. -
Que se passe-t-il si vous commencez un commentaire avec
/*
au milieu d’un fichier CSS, mais que vous oubliez de le fermer avec*/
?Toutes les règles qui suivent le commentaire seront ignorées par le navigateur.
-
Écrivez une règle CSS pour souligner tous les éléments
em
du document.em { text-decoration: underline }
ou
em { text-decoration-line: underline }
-
Comment indiquer qu’une feuille de style provenant d’une balise
<style>
ou<link>
ne doit être utilisée que par les synthétiseurs vocaux ?La valeur de son attribut
media
doit êtrespeech
.