Syntaxe et utilité
Dans cette session de formation, nous allons apprendre ce que c’est le CSS.
Nous allons découvrir :
- la syntaxe,
- quelques termes clé du langage,
- et comment applique le CSS à un document HTML
À quoi sert CSS ?
Dans la partie Bien démarrer avec HTML, nous avons présenté le langage HTML afin de rédiger des documents structurés et consultables par un navigateur ou un moteur de recherche.
Par défaut :
- Les titres apparaîtront dans une police plus grande que le corps de texte,
- la rupture entre deux paragraphes sera marquée par un saut de ligne.
- Les liens seront soulignés et colorés pour les distinguer du reste du texte.
L’image que vous voyez montre comment un navigateur affiche un document HTML sans CSS. La mise en forme par défaut garantit un minimum de lisibilité, même si l’auteur de la page n’a spécifié aucune règle de style.
Affichage d’une page HTML sans CSS
Le Web serait d’un ennui terrible si tous les sites ressemblaient à la page de notre exemple.
Grâce à CSS, vous pouvez contrôler et paramétrer l’affichage de chaque élément HTML dans le navigateur et présenter vos documents HTML avec la mise en forme de votre choix.
Affichage d’une page HTML avec CSS
Syntaxe et règle css
CSS est un langage basé sur des règles. On définit des règles de styles destinées à des éléments ou des groupes d’éléments particuliers dans la page.
Par exemple “Je veux que le titre principal de ma page s’affiche en rouge”
Dans le code suivant, une règle CSS élémentaire réalise cette mise en forme peut être insérer dans un élément nommé style à déposer à l’intérieur de l’élément head :
1
2
3
4
5
6
7
8
9
<head>
<style>
h1{
color:red
}
</style>
</head>
<body>
<h1>Qu'est-ce que l'ordinateur</h1>
Regardons un peu plus en détails ce que nous avons écrit en CSS :
- La règle commence par un sélecteur, qui détermine l’élément HTML mis en forme. Ici le style s’applique aux titres de niveau 1 (
<h1>). - Ensuite, une paire d’accolades
{ }à l’intérieur lesquelles on trouve une ou plusieurs déclarations, sous la forme d’une paire propriété : valeur. - Chaque paire précise une propriété de l’élément sélectionné, suivie de la valeur choisie pour cette propriété ; la propriété et la valeur sont séparées par deux points.
- Chaque déclaration se termine par un point-virgule.
- À chaque propriété définie par CSS correspondent différentes valeurs possibles.
Dans l’exemple, la propriété color peut prendre différentes valeurs de type color.
Une feuille de style CSS peut être constituée d’une succession de telles règles :
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<style>
h1{
color: red
}
p {
color: grey;
}
</style>
</head>
Feuille de style interne
Les règles CSS peuvent être écrites directement dans l’en-tête HTML <head> dans l’élément <style>. On parle alors de feuille de style interne.
Le code HTML suivant illustre cette technique :
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<style>
h1{
color:red
}
</style>
</head>
<body> ... </body>
</html>
Dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.
Pratique : Feuille de style interne
Objectifs
- Apprendre la syntaxe de css
- Création de notre première règle css
- Apprendre à utiliser les feuilles de style interne
Code source
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<meta charset="UTF-8">
<style>
h1{
color:red
}
p {
color: grey;
}
</style>
</head>
<body>
<h1>Qu'est-ce que l'ordinateur</h1>
<p>
Un ordinateur est un appareil électronique capable de
réaliser rapidement des opérations mathématiques,
logiques, des manipulations de chaînes de caractères
ou des recherches. Il est composé de deux grandes parties :
</p>
</body>
</html>
Feuille de style externe
Dans le cas d’une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l’extension .css. Un élément HTML fait référence à ce fichier.
C’est la méthode la plus utile pour appliquer CSS à un document : dans la plupart des cas, les différentes pages d’un site ont un peu près la même apparence, on peut donc utiliser le même jeu de règles pour l’apparence de base.
Il est dans ce cas commode d’écrire ces règles une seule fois dans une feuille de style commune à toutes les pages.
1
2
3
4
5
6
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body> .. </body>
</html>
L’attribut href de l’élément <link> doit pointer vers un fichier dans votre système de fichiers.
Le fichier CSS devrait ressembler à cela :
1
2
3
4
5
6
h1{
color:red
}
p {
color: grey;
}
Dans notre exemple, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple :
- Dans un sous-répertoire nommé styles dans le répertoire courant
- Dans un sous-répertoire nommé general, lui-même dans un sous-répertoire nommé styles, dans le répertoire courant
- Dans un sous-répertoire nommé styles, un niveau plus haut
1
2
3
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/general/style.css">
<link rel="stylesheet" href="../styles/style.css">
Pratique : Feuille de style externe
Objectifs
- découvrir les feuilles de style externe.
Code source
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Qu'est-ce que l'ordinateur</h1>
<p>
Un ordinateur est un appareil électronique capable de
réaliser rapidement des opérations mathématiques,
logiques, des manipulations de chaînes de caractères
ou des recherches. Il est composé de deux grandes parties :
</p>
</body>
</html>
Styles en ligne
Les styles en ligne sont des déclarations CSS qui n’affectent qu’un seul élément, elles sont déclarées grâce à l’attribut style:
1
2
3
4
5
6
<html>
<head></head>
<body>
<h1 style="color: red;">Qu'est-ce que l'ordinateur</h1>
</body>
</html>
Cette approche est vraiment à éviter ! Le code produit n’est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !).
Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d’une meilleure lisibilité du code, séparer le fond de la forme rend le travail d’équipe plus facile.
Il existe quelques endroits où les styles en ligne sont utils, voire recommandés. Vous les verrez beaucoup utilisés dans les e-mails HTML afin d’être compatibles avec autant de clients de messagerie que possible.
Pratique : Styles en ligne
Objectifs
- Découvrir les style en ligne
Code source
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 style="color: red;">Qu'est-ce que l'ordinateur</h1>
<p style="color: red;">
Un ordinateur est un appareil électronique capable de
réaliser rapidement des opérations mathématiques,
logiques, des manipulations de chaînes de caractères
ou des recherches. Il est composé de deux grandes parties :
</p>
</body>
</html>
Commentaire
Les commentaire peut être ajouté au code CSS en utilisant /* et */
1
2
3
4
/* Exemple d'une règle CSS */
h1{
color:red
}
