La mise en forme d'une page web avec CSS

Comment créer une feuille de style (CSS) ?

• Le CSS (Cascading Style Sheets, aussi appelées feuille de style) permet de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…).

• Il existe deux méthodes pour ajouter du style dans une page HTML :

Méthode 1 : En plaçant les commandes CSS directement dans la page HTML dans une balise <style> à l’intérieur de l'en-tête <head>.
Cette méthode est simple mais son problème majeur est que pour réutiliser le style il faut le copier à chaque fois dans toutes les pages HTML. Si on crée un site de plusieurs pages et que l'on change une partie du style, il faut alors mettre à jour toutes les pages HTML.

A faire vous-même 1 Nom du fichier : index3-1.html

A faire vous-même 1	Nom du fichier : index3-1.html
Ouvrir Notepad++ et ajouter le code suivant : <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Une page Web avec du CSS</title> <style> h1 { color: red ; } </style> </head> <body> <h1>Ma première page web avec du CSS</h1> <p>Sans CSS cette page n'est pas très jolie. Bientôt elle le sera !</p> </body> </html> Enregistrer le fichier dans le dossier “HTML–CSS” avec pour nom index3-1.html. Le code CSS se trouve entre les balises `<style></style>`. Essayez de comprendre le rôle du code CSS.

Ouvrir Notepad++ et ajouter le code suivant :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
	<title>Une page Web avec du CSS</title>
	<style>
		h1
		{
		    color: red ;
		}
	</style>
    </head>
 
    <body>
        <h1>Ma première page web avec du CSS</h1>
	<p>Sans CSS cette page n'est pas très jolie. Bientôt elle le sera !</p> 
    </body>
</html>

Enregistrer le fichier dans le dossier “HTML–CSS” avec pour nom index3-1.html.
Le code CSS se trouve entre les balises <style></style>. Essayez de comprendre le rôle du code CSS.

Méthode 2 : En plaçant la feuille de style dans un fichier séparé (avec l'extension .css) et à y faire référence dans l'entête du document HTML. Cela permet de réutiliser la même feuille de style dans plusieurs documents.

A faire vous-même 2	index3-2.html	style3-2.css
1) Dans Notepad++, ajouter le code suivant : <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Une page Web avec du CSS</title> <link rel="stylesheet" href = "style3-2.css"/> <!-- ici on fait référence au fichier CSS --> </head> <body> <h1>Ma première page web avec du CSS</h1> <p>Sans CSS cette page n'est pas très jolie. Bientôt elle le sera !</p> </body> </html> Enregistrer ce fichier avec le nom index3-2.html. 2) Créer dans Notepad++ un fichier CSS avec le code suivant : h1{ color: red ; } Enregistrer ce fichier avec pour nom style3-2.css. Vous avez donc un fichier HTML et un fichier CSS. Cliquer sur index3-2.html pour tester.

A faire vous-même 2

index3-2.html

style3-2.css

1) Dans Notepad++, ajouter le code suivant :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
	<title>Une page Web avec du CSS</title>
        <link rel="stylesheet" href = "style3-2.css"/>     <!-- ici on fait référence au fichier CSS -->
 
    </head>
 
    <body>
        <h1>Ma première page web avec du CSS</h1>
	<p>Sans CSS cette page n'est pas très jolie. Bientôt elle le sera !</p> 
    </body>
</html>

Enregistrer ce fichier avec le nom index3-2.html.

2) Créer dans Notepad++ un fichier CSS avec le code suivant :

h1{
    color: red ;
}

Enregistrer ce fichier avec pour nom style3-2.css.

Vous avez donc un fichier HTML et un fichier CSS. Cliquer sur index3-2.html pour tester.

La syntaxe de CSS

Dans un code CSS, on trouve trois éléments différents :

Des noms de balises : on écrit les noms des balises dont on veut modifier l’apparence. Par exemple, si je veux modifier l’apparence de tous les titres <h1> , je dois écrire h1.

Des propriétés CSS : Il y a par exemple la propriété color qui permet d’indiquer la couleur du texte. Chaque propriété est suivi du symbole « deux-points » ( : ).

Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color, il faut indiquer le nom de la couleur. Chaque ligne se termine par un point-virgule ( ;).

Schématiquement, une feuille de style CSS ressemble donc à cela :

Pour appliquer un style à une seule balise :

Balise1
{
    Propriété1 : valeur1 ;
    Propriété2 : valeur2 ;
}

Pour appliquer un style à plusieurs balises :

Balise1, Balise2, Balise3
{
    Propriété1 : valeur1 ;
    Propriété2 : valeur2 ;
}

Exemple :

p, h1
{
    color: blue;
}

Ajouter un commentaire dans le CSS

Il est possible d’ajouter des commentaires dans un fichier CSS. Les commentaires ne seront pas affichés.
Syntaxe :

/* mettre un commentaire ici */

Appliquer un style en utilisant les attributs « class » et « id » du HTML

Si sur une page, j'ai deux paragraphes dont je souhaite modifier la couleur, je pourrai utiliser les codes HTML et CSS suivants :

Le code HTML :

<body>
    <p>Ce paragraphe est en rouge.</p>
    <p>Ce paragraphe est en vert.</p>
</body>

Le code CSS :

p
{
    color:red;
}

Le problème est qu'avec le code précédent, il est impossible de mettre un paragraphe en rouge, l'autre en vert !

Pour donner un style différent aux paragraphes, on peut utiliser des attributs spéciaux permettant de nommer les paragraphes :

L’attribut class ;
L’attribut id.

La seule différence entre ces deux attributs est que id ne peut être utilisé qu’une seule fois dans le code.
Ces attributs spéciaux fonctionnent sur toutes les balises.

Pour éviter toute confusion, nous n'utiliserons principalement que l'attribut class cette année.

A faire vous-même 3	index3-3.html	style3-3.css
1) Enregistrer le code HTML suivant dans un fichier nommé index3-3.html. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Une page Web avec du CSS</title> <link rel="stylesheet" href = "style3-3.css"/> <!-- ici on fait référence au fichier CSS --> </head> <body> <p class="en-rouge">Ce paragraphe est en rouge.</p> <p id="en-vert">Ce paragraphe est en vert.</p> </body> </html> 2) Créer dans Notepad++ un fichier CSS avec le code suivant : .en-rouge { color: red ; } #en-vert { color: green ; } Enregistrer ce fichier avec pour nom style3-3.css. Cliquer sur index3-3.html pour tester et analyser ce code.

A faire vous-même 3

index3-3.html

style3-3.css

1) Enregistrer le code HTML suivant dans un fichier nommé index3-3.html.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
	<title>Une page Web avec du CSS</title>
        <link rel="stylesheet" href = "style3-3.css"/>     <!-- ici on fait référence au fichier CSS -->
 
    </head>
 
    <body>
        <p class="en-rouge">Ce paragraphe est en rouge.</p>
        <p id="en-vert">Ce paragraphe est en vert.</p>
    </body>
</html>

2) Créer dans Notepad++ un fichier CSS avec le code suivant :

.en-rouge
{
    color: red ;
}
#en-vert
{
    color: green ;
}

Enregistrer ce fichier avec pour nom style3-3.css.

Cliquer sur index3-3.html pour tester et analyser ce code.

Dans le fichier CSS, pour mettre en rouge uniquement le paragraphe « en-rouge », il faut indiquer le nom de la class en commençant par un point (.) .

Lors de l’utilisation des id, il faut faire précéder le nom de l’id par un dièse (#).

Les valeurs indiquées pour les attributs id et class ne doivent contenir ni caractères spéciaux ni espaces et commencer par une lettre.

Autres sélecteurs CSS

Il existe d’autres façons de cibler des balises CSS :

Sélecteur universel « * »

*
{
    color: blue;
}

Sélectionner une balise contenue dans une autre :

.maclasse *
{
    color: blue;
}

Il existe encore d’autres sélecteurs que je vous laisse découvrir en tapant « sélecteurs css » dans un moteur de recherche.
Quelques liens :