Introduction
Les feuilles de style, qu'est ce que c'est ?
Ce sont des instructions de mise en page qui vont nous permettre :
- d'améliorer la présentation de nos pages web
- de travailler de manière plus pratique et plus logique
Feuilles de style ou CSS, quelle différence ?
Aucune, il s'agit de la même chose !
CSS est l'accronyme de Cascading Style Sheets qui se traduit ainsi :
Feuilles de style en cascade.
Les feuilles de style, pourquoi faire ?
Les lacunes du HTML
En HTML, pour mettre en forme un titre nous utilisons la balise <font>.
Par exemple :
<h2><font size="+1" color="#333366" face="Verdana, Arial, sans-serif">Mon titre ici</font></h2>
Ce qui donne le résultat suivant :
Mon titre ici
Imaginons que nous ayons 6 titres dans la même page, avec la même présentation, nous répéterions 6 fois notre balise <font> avec tous ses attributs. Ceci donnerai un code bavard et nous obligerai à de multiples modifications le jour ou l'on souhaite modifier la couleur de nos titres.
La solution, séparer le code et la présentation avec les CSS
Avec les feuilles de style, nous allons regrouper les informations de présentation une fois pour toute pour notre page.
Nous allons pour cela utiliser une balise <style> que nous placerons dans les entêtes de notre page web, c'est à dire quelque part entre les balises <head> et </head>.
Nos instructions de style seront placées entre les balises <style> et </style>.
Exemple :
<style type="text/css">
h2 { color:#333366; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px;}
</style>
Et notre code HTML sera alors réduit :
<h2>Mon titre ici</h2>
Ce qui donne le même résultat :
Mon titre ici
Des styles similaires pour plusieurs pages
Il est également possible deregrouper les informations de présentation dans un fichier à part qui pourra être appelé par plusieurs pages.
Ceci est même vivement conseillé afin de garder une cohérence visuelle d'une page à l'autre.
Nous allons pour cela utiliser une balise <link> que nous placerons dans les entêtes de notre page web et pour laquelle nous préciserons le chemin vers la feuille de style.
Ce fichier feuille de style sera un simple fichier texte contenant nos instructions, que l'on renommera avec l'extension «.css»
Exemple, je créé un fichier "style.css" avec les instructions suivantes :
h1 { color:#000066; font-family:Verdana, Arial, sans-serif; font-size:18px;}
h2 { color:#333366; font-family:Verdana, Arial, sans-serif; font-size:14px;}
Et dans ma page, j'appelle ce fichier ainsi :
<link rel="stylesheet" href="style.css" type="text/css" />
La syntaxe des CSS
Pour définir un style dans notre CSS, nous précisons l'élément que nous modifions, puis, entre 2 accolades, nous précisons les propriétés modifiées.
Exemple :
mon_element { liste des propriétés ici }
Nous verrons ci-desous que mon_element peut être le nom d'une balise, le nom d'une classe, ou un identifiant.
Pour chaque propriété, nous saisisons toujours le nom de la propriété, suivi du signe «:» (2 points), suivi de la valeur de la propriété. Nous terminons chaque propriétés avec le signe «;» (point-virgule).
Exemple :
mon_element { ma_propriété:valeur_de_ma_propriété; ma_propriété_2:valeur_de_ma_propriété_2; }
La disposition des sauts de lignes et des espaces autour des ":" ou des ";" n'a pas d'importance. On aurait le même résultat avec l'exemple suivant :
mon_element {
ma_propriété : valeur_de_ma_propriété;
ma_propriété_2 : valeur_de_ma_propriété_2;
}
Une liste des propriétés et les valeurs possibles sont définies ici : mettre en forme un texte, mettre en forme un bloc.
L'exemple concret suivant rédéfinit l'élément img pour supprimer ses bordures (border) et rédéfinit l'élément body pour supprimer ses marges (margin) et ses enrobements (padding):
img {border:0}
body {margin:0; padding:0}
3 façons de définir des styles
1) Re-définir une balise
Pour cela, nous utiliserons simplement le nom de la balise dont nous souhaitons modifier l'apparence.
Par exemple, nous modifions la couleur du texte (color) et la couleur de fond (background-color) de nos titres h3 ainsi :
h3 { color:#fff; background-color:red;}
2) Définir une classe
Si l'on veut utiliser plusieurs fois la même balise dans notre page Web avec des affichages différents, nous utiliserons des classes. Cela revient à donner un nom de style à un élément HTML et a préciser les propriétés de style pour ce nom dans notre feuille de style.
Cela se fait donc en 2 temps :
- Dans notre page HTML, nous allons ajouter un attribut class="nom_de_ma_classe" aux élements que nous souhaitons modifier
- Dans notre feuille de style, nous allons définir cette classe ainsi :
.nom_de_ma_classe { liste des propriétés ici }.
Le "." (point) avant le nom de la classe est très important. Il permet aux navigateur de distinguer la définition d'une classe, de la définition d'une balise HTML.
Exemple, dans ma feuille de style, je mets le code suivant :
.introduction { color:#336699; font-weight:bold; }
Et dans ma page HTML, je mets le code suivant :
<p class="introduction">Mon texte d'introduction ici.</p>
<p>Un paragraphe normal ici.</p>
Ce qui donne dans votre navigateur :
Mon texte d'introduction ici.
Un paragraphe normal ici.
Vous pouvez choisir le nom de classe que vous souhaitez.
Pensez cependant :
- A ne pas y mettre d'espace ni de caractères spéciaux autre que le tiret
- A utiliser des noms de classes logiques, qui vous permettent de vous y retrouver !
3) Définir un id, identifiant unique
Les id s'utilisent de la même manière que les classes. On ajoute un attribut à notre balise HTML et on définit les styles pour cet id dans la CSS :
- Dans notre page HTML, nous allons ajouter un attribut id="nom_de_mon_id" à l'élement que nous souhaitons modifier
- Dans notre feuille de style, nous allons définir ses propriétés ainsi :
#nom_de_mon_id { liste des propriétés ici }.
Le "#" (dièze) avant le nom de l'id est très important. Il permet aux navigateur de distinguer la définition d'un id de celle d'une classe ou d'une balise HTML.
La principale différence avec les classes est qu'un id doit être unique dans une page web ! Par exemple, si vous avez 2 fois id="haut" dans votre page, votre code ne sera pas valide. On préfera donc utiliser un id à une classe pour un élément dont on sait qu'il sera une seule fois dans la page (par exemple, le pied de page)
Exemple, dans ma feuille de style, je mets le code suivant :
#pieddepage { text-align:center; font-size:10px; }
Et dans ma page HTML, je mets le code suivant :
<div id="pieddepage">
<p>Mon pied de page ici.</p>
</div>
Ce qui donne dans votre navigateur :
Mon pied de page ici.
Nous allons découvrir ici les principales propriétés de styles qui nous permettent de mettre en forme de manière complète nos textes.
| color / exemple : color:#33FF66; | ||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Modifie la couleur du texte
| ||||||||||||||||||||||
| font-family / exemple : font-family:"Times New Roman", Times, serif; | ||||||||||||||||||||||
Modifie la police de caractère du texte. On peut mettre plusieurs polices séparées par des virgules, dans ce cas le navigateur affiche la première qui est disponible sur la machine du visiteur.
| ||||||||||||||||||||||
| font-size / exemple : font-size:16px; | ||||||||||||||||||||||
Modifie la taille du texte
| ||||||||||||||||||||||
| font-style / exemple : font-style:oblique; | ||||||||||||||||||||||
Modifie l'inclinaison du texte
| ||||||||||||||||||||||
| font-weight / exemple : font-weight:bold; | ||||||||||||||||||||||
Modifie l'épaisseur du texte
| ||||||||||||||||||||||
| letter-spacing / exemple : letter-spacing:3px; | ||||||||||||||||||||||
Modifie l'espace entre les lettres
| ||||||||||||||||||||||
| line-height / exemple : line-height:15px; | ||||||||||||||||||||||
Modifie l'espace entre les lignes
| ||||||||||||||||||||||
| text-align / exemple : text-align:center; | ||||||||||||||||||||||
Modifie l'alignement horizontal du texte
| ||||||||||||||||||||||
| text-decoration / exemple : text-decoration:underline; | ||||||||||||||||||||||
Modifie la «decoration» du texte
| ||||||||||||||||||||||
| text-transform / exemple : text-transform:uppercase; | ||||||||||||||||||||||
Modifie la casse du texte
| ||||||||||||||||||||||
| text-align / exemple : text-align:center; | ||||||||||||||||||||||
Modifie l'alignement horizontal du texte
| ||||||||||||||||||||||
| vertical-align / exemple : vertical-align:top; | ||||||||||||||||||||||
Modifie l'alignement vertical du texte
| ||||||||||||||||||||||
| list-style / exemple : list-style:square; | ||||||||||||||||||||||
Modifie l'aspect d'une puce. Utilisé pour les balises ul, ol et li.
|
Nous allons découvrir ici les principales propriétés de styles qui nous permettent de mettre en forme de manière trés précise nos éléments HTML.
| border / exemple : border:2px solid #ff0000; | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Ajoute une bordure de chaque côté du bloc. On précise à chaque fois une épaisseur de trait, un style de trait et une couleur de trait.
| ||||||||||||
| border-top / exemple : border-top:2px solid #ff0000; | ||||||||||||
Ajoute une bordure en haut du bloc.
| ||||||||||||
| border-bottom / exemple : border-bottom:2px solid #ff0000; | ||||||||||||
Ajoute une bordure en bas du bloc.
| ||||||||||||
| border-left / exemple : border-left:2px solid #ff0000; | ||||||||||||
Ajoute une bordure à gauche du bloc.
| ||||||||||||
| border-right / exemple : border-right:2px solid #ff0000; | ||||||||||||
Ajoute une bordure à droite du bloc.
| ||||||||||||
| background-color / exemple : background-color:#6699cc; | ||||||||||||
Ajoute une couleur de fond au bloc.
| ||||||||||||
| background-image / exemple : background-image:url(i/cours/bg.gif);; | ||||||||||||
Ajoute une image au fond du bloc.
| ||||||||||||
| background-repeat / exemple : background-repeat:repeat-x; | ||||||||||||
Précise la manière dont l'image de fond va se répéter.
| ||||||||||||
| background-position / exemple : background-position:left bottom; | ||||||||||||
Précise la position de l'image de fond du bloc. On précise d'abord la position horizontale, puis la position verticale.
| ||||||||||||
| width / exemple : width:250px; | ||||||||||||
Précise la largeur du bloc en pixels ou en pourcentage du bloc parent (c'est à dire du bloc qui le contient).
| ||||||||||||
| height / exemple : height:40px; | ||||||||||||
Précise la hauteur du bloc.
| ||||||||||||
| margin / exemple : margin:10px; | ||||||||||||
| Spécifie l'espace tout autour du bloc généralement en pixels (Dans les exemples ci-dessous, nous ajoutons une bordure pour bien voir ou sont les limites de notre bloc). Notez bien que certaines balises HTML ont des marges définies par défaut. C'est le cas par exemples des titres (h1, h2, h3...), des paragraphes (p), des balises de liste (ul, ol, li), et même du corps de notre page (body). Les feuilles de style et la propriété «margin» permettent de supprimer ces marges par défaut et/ou d'en préciser de nouveaux.
| ||||||||||||
| margin-top / exemple : margin-top:15px; | ||||||||||||
Spécifie l'espace au dessus du bloc.
| ||||||||||||
| margin-bottom / exemple : margin-bottom:15px; | ||||||||||||
Spécifie l'espace en dessous du bloc.
| ||||||||||||
| margin-left / exemple : margin-left:30px; | ||||||||||||
Spécifie l'espace à gauche du bloc.
| ||||||||||||
| margin-right / exemple : margin-right:30px; | ||||||||||||
Spécifie l'espace à droite du bloc.
| ||||||||||||
| padding / exemple : padding:10px; | ||||||||||||
| Spécifie l'enrobage tout autour du bloc généralement en pixels. A la différence du "margin", le "padding" spécifie l'espace entre le contenu du bloc et son contour (par exemple, entre le texte du bloc et sa couleur de fond). Dans les exemples ci-dessous, nous ajoutons une bordure pour bien voir ou sont les limites de notre bloc. Notez bien que certaines balises HTML ont des enrobages définis par défaut. C'est le cas par exemples des titres (h1, h2, h3...), des paragraphes (p), des balises de liste (ul, ol, li), et même du corps de notre page (body). Les feuilles de style et la propriété «padding» permettent de supprimer ces espaces par défaut et/ou d'en préciser de nouveaux.
| ||||||||||||
| padding-top / exemple : padding-top:15px; | ||||||||||||
Spécifie l'enrobage au dessus du bloc.
| ||||||||||||
| padding-bottom / exemple : padding-bottom:15px; | ||||||||||||
Spécifie l'enrobage en dessous du bloc.
| ||||||||||||
| padding-left / exemple : padding-left:30px; | ||||||||||||
Spécifie l'enrobage à gauche du bloc.
| ||||||||||||
| padding-right / exemple : padding-right:30px; | ||||||||||||
Spécifie l'enrobage à droite du bloc.
|
Deux comportements d'affichage différents
Chaque balise donne un résultat différent. Nous pouvons cependant distinguer 2 grands types d'affichage :
- Les balises s'affichant en "block" (bloc) : elles prennent toute la largeur disponible et s'affichent avec un saut de ligne avant et après.
- Les balises s'affichant en "inline" (dans la ligne) : elles prennent uniquement la largeur dont elles ont besoin, sans ajouter de saut de ligne.
Exemples de balises HTML qui s'affichent naturellement en block
- <div> (cf plus bas)
- Les balises de titre : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
- La balise paragraphe : <p>
- Les balises de liste : <ul>, <ol>, <li>
- La balise de citation : <blockquote>
- Les balises de tableaux : <table>
- ...
Exemples de balises HTML qui s'affichent naturellement en inline
- <span> (cf plus bas)
- <a> (lien)
- <strong> (gras), <em> (italic), <u> (souligné)
- <img> (image)
Exemples
Par exemple, étudier la différence de comportement entre une balise <p> et <strong> :
Mon texte
<p style="background-color:#ffcc00;">Cette balise s'affiche comme en "block".</p>
Mon texte 2
<strong style="background-color:#00ccff;">Cette balise s'affiche en "inline".</strong>
Mon texte 3
Ce qui donne dans votre navigateur :
Cette balise s'affiche comme un bloc.
Mon texte 2 Cette balise s'affiche en "inline". Mon texte 3Important ! Certains styles ne fonctionne correctement uniquement sur les balises se comportant en "Block" ! Par exemple : width, height, padding, margin… En effet, ces propriétés sont contraires à la notion d'affichage "dans la ligne" ("inline").
Par exemple, dans le code suivant je donne les mêmes hauteurs et largeur à ma balise "<p>" et à ma balise "<strong>" :
Mon texte
<p style="background-color:#ffcc00; width:200px; height:60px; padding:5px;">mon bloc</p>
Mon texte 2
<strong style="background-color:#00ccff; width:200px; height:60px; padding:5px;">mon affichage "inline".</strong>
Mon texte 3
Mais dans votre navigateur, le résultat est bien différent :
mon bloc
Mon texte 2 mon affichage "inline". Mon texte 3La propriété display
Nous pouvons modifier ce comportement d'affichage "block" / "inline" en feuille de style avec la propriété «display».
Ainsi nous pouvons par exemple afficher une balise <strong> comme un bloc ou une balise <p> en inline.
La propriété display permet également de masquer un élément si on lui donne la valeur "none" ("aucun" en français).
| display / exemple : display:block; | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
Modifie le comportement d'affichage d'un élément
|
Reprenons notre exemple précédent : cette fois nous allons forcer notre balise "strong" à s'afficher comme un bloc…
Mon texte
<p style="background-color:#ffcc00; width:200px; height:60px; padding:5px;">mon bloc</p>
Mon texte 2
<strong style="display:block; background-color:#00ccff; width:200px; height:60px; padding:5px;">mon affichage "inline".</strong>
Mon texte 3
Du coup, les styles "width" et "height" sont désormais respectés :
mon bloc
Mon texte 2 mon affichage "inline". Mon texte 3Les balises DIV et SPAN
Voici 2 nouvelles balises ! Nous ne les avions pas vues à ce jour, car elles ne sont utiles qu'avec les feuilles de style :
- La balise "<div>" ("division") : c'est la plus simple des balises s'affichant en "block" ; elle crée simplement un nouveau bloc sans marges ni enrobement (padding). Elle est cependant très utiles pour créer des sections dans son code HTML.
- La balise "<span>" : c'est la plus simple des balises s'affichant en "inline". Seule, elle n'a aucun effet sur le rendu du code html. Cependant, elle devient très utile lorsqu'on lui attribut des styles.
Par exemple, étudier ce code; :
Mon texte <div>contenu du div</div> Mon texte 2 <span>contenu du span</span> Mon texte 3
Ce qui donne dans votre navigateur :
Maintenant, en ajoutant des styles :
<style type="text/css">
div {color:green; padding:5px; background-color:yellow;}
span {color:red; font-style:oblique;}
</style>
Mon texte <div>contenu du div</div> Mon texte 2 <span>contenu du span</span> Mon texte 3
Ce qui donne dans votre navigateur :
