CSS : introduction

Alain Barraud

Mémento informatique

Accueil Logithèque - SE Photo - vidéo Internet - protocoles Site Web PC - Réseau Archives

Introduction au CSS

css : Cascading Style Sheets ou Feuilles de style en cascade
On dit "Feuille de style" car en règle générale, on écrit le code CSS dans un fichier à part (avec l'extension .css au lieu de .html).

Sommaire de la page

Où mettre du CSS ? Appliquer un style à des balises Appliquer un style à plusieurs balises Des commentaires dans du CSS Utiliser les class et id Effets de style Pseudo-formats Astuces

Où mettre du CSS ?

On peut écrire du code CSS dans 3 endroits différents.

Dans un fichier .css

C'est la méthode la plus pratique. Parmi les nombreux avantages que cette solution apporte, il y a la possibilité de pouvoir proposer facilement plusieurs designs différents aux visiteurs.
Méthode :

Créer un fichier .css
Rajouter une ligne dans le fichier .html entre les balises <head> </head>

Code html

La balise <link /> comporte plusieurs attributs. On peut en modifier deux d'entre eux pour le moment :

title : c'est le nom donné à la feuille de style (mettre ce que l'on veut)
href : c'est l'emplacement où se trouvela feuille de style sous forme de lien relatif. Dans cet exemple le CSS se trouve dans le même dossier, mais il est recommandé de le mettre dans un sous-dossier "styles/" par exemple.

Directement dans le header du fichier XHTML

Il est aussi possible de taper du CSS directement à l'intérieur même du fichier XHTML, entre les balises <head> </head>, et ce avec la balise <style> </style>.

Code html

Note : la première solution (utiliser un .css externe) est quand même bien plus pratique, car elle permet de faire changer le design du site en un clin d'oeil. De plus, le fichier ne sera téléchargé qu'une seule fois pour toutes les pages du site, ce qui allègera la taille des fichiers .html et rendra donc le site plus rapide !

La méthode "à l'arrache" dans les balises

C'est la troisième (et la moins recommandée) des méthodes. Elle consiste à ajouter un attribut style sur les balises pour leur appliquer un style particulier. Cet attribut fonctionne sur toutes les balises.

Par exemple sur un titre :

Code html

<h1 style="/* style pour cette balise */">Titre</h1>

Cette méthode a tous les défauts : non seulement le CSS sera peu lisible à l'intérieur des balises, mais en plus ça ne permet pas de profiter de tous les avantages du CSS, comme la possibilité de changer la couleur de tous les titres du site en un clic.

Haut de page

Appliquer un style à des balises

Pour la syntaxe, voir http://www.commentcamarche.net/contents/css/csssyntax.php3 (on y parle entre autres : du sélecteur universel *, du sélecteur d'éléments père-fils selecteur_X > selecteur_Y { /* style; */ }).

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

Les noms de balises dont on veut modifier l'apparence. Par exemple, pour modifier l'apparence de tous les titres <h1>, je dois écrire h1
Les propriétés CSS : les "effets de style" de la page sont rangés dans des propriétés. Par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte, etc…
Les valeurs : pour chaque propriété CSS on doit indiquer une valeur.

Syntaxe type :

Code css

balise1
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
balise2
{
propriete: valeur;
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
balise3
{
propriete: valeur;
}

On trouve le nom des balises auxquelles on veut affecter un style. Pour chaque balise, on ouvre des accolades pour y mettre les propriétés et valeurs souhaitées. (autant qu'on en veut)
Chaque propriété est suivie du symbole "deux-points" (:) puis de sa valeur correspondante. Enfin, chaque ligne se termine par un point-virgule (;)

Note : le point-virgule n'est pas obligatoire s'il n'y a qu'une seule propriété pour la balise (comme c'est le cas pour la balise 3). Toutefois, mieux vaut prendre l'habitude de le mettre tout le temps, c'est plus sûr

Application

Je veux modifier tous mes paragraphes qui sont entre les balises <p> </p> pour avoir une police de couleur bleue avec une taille de 18 pixels.

1/ Créer le code css

Code css

p
{
color: blue;
font-size: 18px;
}

Note :
- ne jamais mettre d'espace entre 18 et px, sinon le code css ne fonctionnera pas.
- de même, ne pas oublier de mettre les unités

Enregistrer ce code CSS dans un fichier "essai1.css"

2/ Créer un fichier xhtml quelconque pour tester ce code css. C'est la balise <link/> qui sert pour indiquer où se trouve le fichier css

Code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Page d'exemple pour tester le CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai1.css" />
</head>
<body>
<h1>Découverte du css</h1>
<p>
Bonjour !<br/>
Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour comprendre le fonctionnement du css.
</p>
<h2>Ce n'est que du blabla</h2>
<p>
Comme il faut un second paragraphe, pourquoi ne pas écrire n'importe quoi.
</p>
</body>
</html>

Enregistrer ce fichier : "ex1.html"

3/ Résultat

Haut de page

Appliquer un style à plusieurs balises

Exemple : on veut les titres h1 et h2 en rouge

Code css

h1
{
color: red;
}
h2
{
color: red;
}

Mais, cette façon d'écrire le code est répétitive. En css, pour appliquer le même style à des balises différentes, il suffit de séparer leurs noms par une virgule et mettre les propriétés à la suite.
Il est plus rationnel d'écrire ce code de cette manière :

Code css

h1, h2
{
color: red;
}

De même, par exemple, si on veut les titres, les liens et les citations en rouge, il faut saisir : h1, h2, a, q

Haut de page

Des commentaires dans du CSS

Comme pour le xhtml, il est possible d'insérer des commentaires dans du css. Celà peut-être utile pour s'y retrouver dans un long fichier css.
Les fichiers css sont assez longs. Il est recommandé d'en créer plusieurs. Un pour le design, un autre pour le menu, etc…
pour insérer un commentaire, on tape /*, on saisit le commentaire, puis */ pour terminer le commentaire.

Code css

h1, h2
{
color: red; /* Les paragraphes seront rouges*/
}

Haut de page

Utiliser les class et id

En codifiant comme précédemment, tous les titres sont identiques. Si on veut écrire certains titres différemment, on va utiliser des attributs spéciaux qui fonctionnent sur toutes les balises :

L'attribut class
L'attribut id

On va voir successivement :

Ce que sont les class et id et comment s'en servir
Les balises dites "universelles" et leur utilité
Les imbrications de balises

Class et id

Les attributs class et id sont quasiment identiques.

Attribut class
L'attribut class : peut-être mis sur n'importe quelle balise (paragraphe, titre, image, etc…)
<h1 class=""> </h1>
<p class=""></p>
<img class="" />
L'attribut class aura comme valeur un nom (celui que l'on veut). Ce nom permet de personnaliser un style.

Exemple : on veut définir un style appelé "important" qui écrive en rouge / 18 pixels. On mettra l'attribut class="important" à chacune des balises que l'on veut modifier.

Code css

.important
{
color: red; /* Les paragraphes seront rouges*/
font-size: 18px; /* taille de la police 18 pixels*/
}

Enregistrer ce code CSS dans un fichier "essai2.css"
Note : au lieu de mettre le nom de la balise avant les accolades, on met le nom de la class précédé d'un point.

Exemple d'un fichier xhtml avec cet attribut class

Code html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Page d'exemple pour tester le CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Essai 2" href="essai2.css" />
</head>
<body>
<h1>Découverte du css</h1>
<p>
Bonjour !<br/>
Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour comprendre le fonctionnement du css.
</p>
<h2>Ce n'est que du blabla</h2>
<p class="important">
Comme il faut un second paragraphe, pourquoi ne pas écrire n'importe quoi.
</p>
</body>
</html>

Enregistrer ce fichier : "ex2.html"

Résultat

Attribut id
Fonctionne exactement comme class à un détail prêt : il ne peut-être utilisé qu'une fois.
L'intérêt ? sert pour le Javascript pour reconnaître certaines balises. L'attribut id sert pour réaliser des ancres.
En pratique "id" se mettra sur des éléments qui sont uniques sur une page comme par exemple le logo :
<img src="images/logo.png" alt="Logo du site" id="logo" />

Dans le code du css, différemment de class, ce n'est pas un point qui précède le nom de id mais un dièse (#).

Code css

#logo
{
/* Mettre les propriétés css ici */
}

Note :si on hésite entre class et id, on peut toujours utiliser class, car ça marche toujours.

Les balises universelles

On peut avoir besoin d'appliquer une class (ou un id mais c'est plus rare) à certains mots qui ne sont pas entourés par des balises.
En effet, le problème des class c'est qu'il s'agit d'un attribut, on ne peut donc en mettre que sur une balise.

Exemple : si je veux modifier uniquement successeur pour le mettre en bleu dans la phrase suivante

Code html

<p>Le xhtml est le successeur du html…</p>

Comme il n'y a pas de balise autour de successeur, le css utilise la balise-qui-ne-sert-à-rien
En fait, il y en a 2. Rappel car déjà vu avec xhtml, paragraphe sur balises universelles :

<span> </span> : balise de type inline (qui se met à l'intérieur d'un paragraphe)
<div> </div> : balise de type block (qui crée un nouveau bloc dans la page)

Application

Code css

.bleu /* Nom donné à la class */
{
color: blue;
}

Enregistrer dans un fichier "bleu.css"

Reprendre le fichier html

Code html

<p>Le xhtml est le <span class="bleu">successeur</span> du html…</p>

Résultat

Imbrications de balises

Une notion importante, c'est l'ordre d'imbrication des balises.

Exemple : définir un style uniquement pour les balises </em> qui se trouvent à l'intérieur d'un titre </h3>. Le code css s'écrit :

Code css

h3 em /* => tous les em situés à l'intérieur d'un h3 */
{
color: blue;
}

Enregistrer dans un fichier "essai4.css"
Note :on sépare juste le nom des 2 balises par un espace. Celà permet d'indiquer dans le css, dans quel ordre sont imbriquées les balises.

Application dans un fichier xhtml

Code html

<h3>L'imbrication, c'est <em>pratique</em></h3>
<p>Cet exemple montre comment fonctionne l'imbrication.<br />Le mot "pratique" dans le titre sera écrit en bleu, mais pas celui-ci : <em>pratique</em>.</p>

Enregistrer ce fichier : "ex4.html"

Résultat

On peut mélanger balises et class.
Exemple : blockquote p strong, h1 .important
Attention : la virgule "coupe" la ligne en deux. Elle signifie "ET".
Mettons en couleur pour mieux comprendre :
blockquote p strong, h1 .important
Ce qui veut dire : "Toutes les balises <strong> contenues dans un <p> elles-mêmes contenues dans un <blockquote> ET toutes les class "important" contenues dans un titre <h1>"

Haut de page

Effets de style

Se rapporter à Liste des propriétés

2 notions importantes sur les propriétés

Héritage : toute balise incluse dans une autre balise hérite de ses propriétés, à moins qu'on spécifie une propriété particilière et dans ce cas c'est cette propriété particilière qui sera appliquée
Lorsque l'on met une adresse dans un fichier css (pour image de fond, background-image où il faut indiquer son url), c'est l'url par rapport au fichier css qu'il faut indiquer et non celle par rapport au fichier xhtml sur lequel on applique le fichier css

Haut de page

Pseudo-formats

Les pseudos-formats servent en css pour appliquer des propriétés à un endroit ou un moment précis.
Ne fonctionnent que très peu avec IE

Quelques pseudos-formats compatibles avec IE et limités à certaines balises.

Modifier l'apparence des liens

hover : lorsque le visiteur pointe dessus avec la souris.
active : lorsque le visiteur clique dessus.
visited : lorsque le visiteur a déjà vu la page.

Voir quelques applications en regardant le code css de cette page pour les liens et sur des modèles de boutons

Première lettre et première ligne

first-letter : première lettre.
first-line : première ligne.

Haut de page