Il existe deux moyens d'ajouter du style dans une page HTML:

En plaçant les commandes CSS directement dans la page HTML.
En créant un fichier séparé que la page HTML référence.

La première méthode est plus 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.

Voici un exemple complet avec la première méthode qui change la couleur des titres :

<html>
<head>
<style type="text/css">
h1 { color: red; }
h2 { color: blue; }
h3 { color: green; }
h4 { color: purple; }
</style>
</head>
<body>
<h1>Titre de niveau 1</h1>
<p>Paragraphe 1.</p>
<h2>Titre de niveau 2</h2>
<p>Paragraphe 2.</p>
<h3>Titre de niveau 3</h3>
<p>Paragraphe 3.</p>
<h4>Titre de niveau 4</h4>
<p>Paragraphe 4.</p>
</body>
</html>

Exercice 1¶

Tester le code html précédent, puis modifier le code CSS pour que les titres soient en rouge et les paragraphes en bleu.

En dehors de cet exercice 1, tout le code CSS sera écrit dans une feuille de style externe.

Syntaxe ¶

La syntaxe de CSS est très différente de celle d'HTML. On place d'abord le nom de la balise HTML dont on veut modifier le style, puis on le fait suivre d'un bloc entre accolades. Ce bloc permet de spécifier les attributs de style. Ces attributs sont définis par un nom, suivi de deux points, puis de la valeur donnée à cet attribut suivie d'un point virgule:

baliseHTML { attribut: valeur; }

Il est possible de spécifier plusieurs attributs à la fois:

baliseHTML { attribut1: valeur1; attribut2: valeur2; }

Nous avons vu un premier attribut de style nommé color qui permet de changer la couleur du texte. Les valeurs qu'il peut prendre sont toutes les couleurs.

Feuille de style externe ¶

Lorsque l'on veut partager le style entre plusieurs pages HTML, il devient plus pratique de créer un fichier de style séparé. L'exemple suivant montre deux fichiers.

Le fichier page.html contient la structure du texte :

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Titre</h1>
<p>Paragraphe...</p>
</body>
</html>

Le fichier style.css contient le style de la page HTML :

body { background-color: black; color: white; }
h1 { color: red; }

Exercice 2¶

Créer les deux fichiers précédents (HTML et CSS) dans un dossier à votre nom.

Style local à une balise ¶

Les feuilles de style que nous avons vu changent le style d'un type de balise pour toute la page HTML. Par exemple, si on change le style de la balise h1, tous les titres de niveau 1 seront affichés dans ce style.

Il est possible d’appliquer des styles à certaines balises uniquement soit en identifiant les balises concernées par un attribut id commun, et on utilisera alors #valeur_id comme nom de balise dans le fichier CSS, ou grâce à l’attribut class et on utilisera alors .valeur_class comme nom de balise dans le fichier CSS.

Exemple avec id

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Premier titre normal</h1>
<p>Paragraphe...</p>
<h1 id="different">Deuxième titre différent</h1>
<p>Paragraphe...</p>
</body>
</html>

Le fichier style.css contient le style de la page HTML :

body { background-color: black; color: white; }
h1 { color: red; }
#different {color :purple ;}

Quelques attributs de style ¶

CSS définit un ensemble très important d'attributs de style, et il serait vain de vouloir tous les lister ici. Voici cependant les principales catégories.

Polices : - L'attribut CSS font-family permet de changer la police, par exemple, font-family: fantasy; - La taille de la police peut aussi être changée avec l'attribut font-size, par exemple font-size: 64; - Pour placer du texte en gras, on utilise font-weight: bold; et pour le placer en italique, font-style :italic ; .

Formatage de texte : On peut modifier l'espacement des caractères ou l'espacement des mots avec letter-spacing et word-spacing ainsi:

letter-spacing: 10px;
font-weight: bold;

De même il est possible de décorer le texte par exemple en le soulignant grâce à text-decoration: underline;

Formatage de paragraphes :

Il est possible d'ajouter une indentation sur la première ligne d'un paragraphe grâce à text-indent,de spécifier la distance entre les lignes grâce à line-height, ainsi que définir l'alignement du texte par rapport aux marges avec text-align.

Les marges sont définies par l'attribut margin qui prend en argument quatre valeurs séparéespar des espaces, dans l'ordre: haut, gauche, bas, droit. Par exemple: margin: 10 20 30 40; place un espace de 10 pixels en haut, 20 à gauche, 30 en bas et 40 à droite.

Voici un paragraphe formaté avec une indentation de 20 pixels, une hauteur de ligne de 140% (40% de plus que la normale) et justifié (aligné le long des deux marges). Les marges sont de 20% de la page à gauche et à droite. Le paragraphe a un fond jaune, et est encadré d'une ligne rouge de 3 pixels.

p {text-indent: 20px;
line-height: 140%;
text-align: justify;
margin: 0 20% 0 20%;
padding: 5% 5% 5% 5%;
background-color: yellow;
border-style: solid;
border-width: 3px;
border-color: red;}

Exercice 3¶

Créez un site de votre choix. Le site créé doit se composer de plusieurs pages, être navigable à l'aide de liens et contenir des images.