Feuilles de style CSS (Cascading Style Sheets)
Page 2: Comment intègre-t-on du code CSS?
Toutes les pages 
Feuilles de style CSS (Cascading Style Sheets)
Page 2
Comment intègre-t-on du code CSS?
Comment intègre-t-on du code CSS?
La syntaxe CSS à quoi ressemble-t-elle?
La syntaxe CSS est tellement simple et intuitive que le simple fait de lire le code nous donne une idée sur ce qu'il peut faire même si nous étions des novices. Il faut savoir qu'il y a plusieurs façons d'intégrer un style CSS. Dans l'exemple qui suit je vais vous montrer à quoi ressemble du code CSS en génaral:form{
margin:0;
padding:0;
}
input{
outline:none;
}
input[name="trecherche"]{
border:none;
font-family:eras, "Century Gothic", verdana, sans-serif;
font-size:14pt;
margin-bottom:3px;
margin-left:3px;
}
#tdrecherche{
background-image:url("../images/recherche_02.png");
width:161px;
background-repeat:no-repeat;
}
Il s'agit d'un extrait de code CSS utilisé dans ce site. Il est encore tôt pour expliquer ce qu'il donne, mais sachez que c'est vraiment simple et facile en même temps.
margin:0;
padding:0;
}
input{
outline:none;
}
input[name="trecherche"]{
border:none;
font-family:eras, "Century Gothic", verdana, sans-serif;
font-size:14pt;
margin-bottom:3px;
margin-left:3px;
}
#tdrecherche{
background-image:url("../images/recherche_02.png");
width:161px;
background-repeat:no-repeat;
}
Comment déclarer un style CSS?
Attribut de style local
Pour faire simple, prenons le code suivant:<font color="red" face="verdana" size="3">
Bonjour à tous!
</font>
Rien de sorcier là dedans. C'est sensé donner celà:
Bonjour à tous!
</font>
Bonjour à tous!
Pourtant, il existe une autre syntaxe qui permet de réussir exactement le même affichage. La voilà:
<font style="color:red; font-family:verdana; font-size:12pt">
Bonjour à tous!
</font>
Pour en avoir le cœur net, voilà ce que cela donne:
Bonjour à tous!
</font>
Bonjour à tous!
Bon. Vous avez certainement remarqué la différence entre les deux codes. Tout d'abord, les attributs HTML color, face et size ont disparu et ils ont été remplacés par un seul et unique attribut; il s'agit de style. Comme valeur, il reçoit une séquence d'instructions qui sont respectivement: color:red qui désigne la couleur rouge, font-family:verdana qui signifie la police verdana et en fin, font-size:12pt qui spécifie la taille de police 12pt (équivalente en HTML à size="3"). La séquence d'instructions qui représente la valeur de l'attribut style est en fait, du CSS.
L'attribut HTML style qu'on a appliqué à la balise <font> s'appelle attribut de style local. En effet, le style CSS faisant office de sa valeur s'applique exclusivement à la balise locale sur laquelle il est déclaré qui est la balise <font>.
Remarquez aussi que nous avons défini trois propriétés CSS: color, font-family et font-size suivie chacune par le caractère deux points (:) suivi des valeurs associées (respectivement red, verdana et 12pt).
En règle générale, une instruction CSS est déclarée sous la forme: propriété:valeur. Il y a aussi le point virgule (;) qui sert à séparer deux instructions CSS.
Style global à la page
Un style déclaré par le biais d'un attribut de style local présente un inconvénient majeur. En effet, il ne s'applique qu'à la balise sur laquelle il est déclaré. Or, sur une page Web, il existe plusieurs éléments qui se ressemblent (décrits par la même balise en général). Il est donc judicieux que ces éléments aient le même style, et par conséquent on serait obligé de redéclarer le même style local autant de fois qu'il y a d'éléments similaires. Fastidieux non?Heureusement, il existe une deuxième méthode pour déclarer du CSS, il s'agit d'un style global à la page Web. Voilà comment cela fonctionne:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
font{
color:red;
font-family:verdana;
font-size:12pt;
}
</style>
</head>
<body>
<font>
Bonjour à tous!
</font>
</body>
</html>
Le résultat escompté ne change pas:
<html>
<head>
<meta charset="UTF-8" />
<style>
font{
color:red;
font-family:verdana;
font-size:12pt;
}
</style>
</head>
<body>
<font>
Bonjour à tous!
</font>
</body>
</html>
Bonjour à tous!
Je crois que c'est claire, au lieu de déclarer les styles sur la balise <font>, on les a regroupé à l'entête du document (balise <head>), mais pas n'importe où dans l'entête. Vous avez certainement remarqué la nouvelle venue: balise <style>. Cette balise se déclare toujours dans la balise <head> et contient donc exclusivement de la syntaxe CSS. Vous avez donc compris qu'un document HTML peut contenir du code HTML et du code CSS. Il suffit d'indiquer au navigateur où commence le CSS et où finit-il. C'est le rôle de la balise <style>.
Je crois que les propriétés sont claires maintenant, donc nous allons plutôt faire le point sur le mot font et les accolades ({ et }).
Puisque les styles sont exportés loin de la balise, alors comment le navigateur saurait-il si on souhaitait l'appliquer sur telle ou telle balise? C'est le rôle du sélecteur de balise représenté cette fois par le mot font. Attentions, il ne s'agit pas d'une balise car il ne contient pas les chevrons ouvrant et fermant, il s'agit juste d'un sélecteur qui a le même nom que la balise ciblée.
Les accolades sont là pour englober l'ensemble des styles à appliquer sur les balises présentes dans le document et qui portent le même nom que le sélecteur déclaré (balises <font> dans ce cas).
Dans ces exemples j'ai utilisé la balise <font> car elle vous est familière. Mais sachez qu'elle est devenue obsolète en HTML5. Alors vaut mieux ne pas vous en servir dans vos projets.
La feuille de style en cascade
Si la première méthode sert à définir un style en local sur la balise concernée, et la deuxième permet d'englober les styles pour qu'ils s’appliquent sur tous les éléments semblables dans le document, il existe une troisième méthode qui est la plus pratique et la plus utilisée. D'ailleurs le nom du langage fait allusion à cette méthode, il s'agit de la feuille de style en cascade.La feuille de style en cascade permet de définir des styles qui s'appliqueront, non pas sur le contenu d'un seul document, mais sur le contenu de tous les documents qui constituent votre projet Web (site ou application Web). Cette technique permet d'uniformiser le design sur toutes les pages en gratifiant les éléments similaires du même style. Ainsi, si le grand titre d'une page était bleu, il le serait aussi sur les autres pages.
La feuille de style est un fichier texte qui contient uniquement du code CSS. Par conséquent il a l'extension ".css".
Pour mieux comprendre comment cela fonctionne, supposons que nous disposons d'une feuille de style du nom de style.css, et qui contient le code suivant:
font{
color:red;
font-family:verdana;
font-size:12pt;
}
h1{
color:blue;
}
Vous avez compris que nous avons déclaré deux sélecteurs de balises font et h1, chacun avec un style qui s'appliquera sur les balises correspondantes. Maintenant on veut appliquer ces styles à une page Web. On va donc faire appel à la feuille de style au sein de la page Web souhaitée dont le code ressemblerait à ceci:
color:red;
font-family:verdana;
font-size:12pt;
}
h1{
color:blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Exemple de CSS</h1>
<font>
Voici à quoi ressemble l'effet de la feuille de style sur ce document.
</font>
</body>
</html>
Avez-vous remarqué la nouvelle balise? Oui, il s'agit bien de la balise <link>. C'est une balise orpheline et c'est elle qui se charge d'associer la feuille de style au document HTML. Examinons ses attributs:
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Exemple de CSS</h1>
<font>
Voici à quoi ressemble l'effet de la feuille de style sur ce document.
</font>
</body>
</html>
- Attribut rel: permet de définir le type de ressource à intégrer au document. Dans ce cas nous avons spécifié stylesheet, c'est à dire feuille de style. Vous avez probablement compris que si nous avons spécifié cette valeur pour indiquer une feuille de style, c'est que la balise <link> peut aussi intégrer d'autres types de ressources, notamment les icone (connus sous le nom favicon).
- Attribut type: c'est un attribut facultatif qui permet de spécifier le type et le MIME de la ressource à intégrer. Dans ce cas il s'agit de text/css qui désigne: document texte écrit en CSS.
- Attribut href: cet attribut permet de spécifier le chemin (relatif ou absolu) de la feuille de style à appliquer. Dans l'exemple, nous avons supposé que le document HTML et la feuille de style sont dans le même emplacement.
L’exécution des codes précédents donne:
Exemple de CSS
Voici à quoi ressemble l'effet de la feuille de style sur ce document.Dans la suite de ce cours nous allons découvrir les différentes propriétés CSS à appliquer à nos objets HTML. Quelque soit la méthode que vous avez choisi parmi les trois qu'on a vu, la syntaxe que nous allons voir sera pratiquement la même.
Comment intégrer du code CSS en vidéo
Page 2
Comment intègre-t-on du code CSS?
Comment intègre-t-on du code CSS?
Quiz 
