Icône Mettre en place le CSS

Lire cette page et à la fin faire le QCM et l'exercice. L'objectif est de créer un fichier CSS et de le mettre en place sur les deux fichiers HTML.

Le CSS n'est pas plus compliqué que le HTML. Il vient le compléter pour vous permettre de mettre en forme votre page web.
Le CSS comporte beaucoup de propriétés, qui sont un peu l'équivalent des balises en HTML.
Heureusement, personne ne vous demande de tout retenir par cœur et un aide-mémoire sera à votre disposition en annexe pour vous aider (aide-mémoire dont j'ai moi-même besoin).
Dans ce premier chapitre sur le CSS, nous allons voir la théorie sur le CSS : qu'est-ce que c'est ? À quoi ça ressemble ? Où est-ce qu'on écrit du code CSS ?



Souvenez-vous de ce petit schéma que nous avions vu dès le premier chapitre :

Image utilisateur


Grâce au HTML, nous avons pu rédiger le contenu de notre site, mais c'est brut de décoffrage. Le CSS le complète pour mettre tout cela en forme et donner au contenu l'apparence que l'on souhaite.

Où écrit-on le CSS ?


Sur les pages html ajoutée la ligne <link rel="stylesheet" href="style.css" /> sous la ligne <meta charset="utf-8" /> comme ci-dessous : c'est elle qui indique que vos fichiers HTML vont être associé à un fichier appelé style.css qui va gérer sa mise en forme.


Code : HTML - Sélectionner

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p>Bonjour et bienvenue sur mon site !</p>
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
    </body>
</html>


Ensuite on crée un nouveau fichier style.css (voir image ci-dessous)

Fichiers HTML et CSS dans Notepad++

 

 

Côté pratique



Pour le moment, vous faites vos tests dans un seul fichier HTML. Cependant, votre site sera plus tard constitué de plusieurs pages HTML.
Le code CSS est répété dans chaque fichier HTML : pas pratique !

Comme vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'écrire cette instruction qu'une seule fois pour tout votre site !

Le code CSS est indiqué une fois pour toute dans un fichier CSS
Le code CSS est indiqué une fois pour toutes dans un fichier CSS : c'est plus simple !

Sommaire

 

Appliquer un style : sélectionner une balise

Maintenant que nous savons où placer le code CSS, intéressons-nous à ce code de plus près. Je vais expliquer un premier bout de code CSS :

Code : CSS - Sélectionner
1
2
3
4
p
{
    color: blue;
}



Dans un code CSS comme celui-ci, on trouve 3 é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 paragraphes <p>, je dois écrire p.
  • Des propriétés CSS : les "effets de style" de la page sont rangés dans des propriétés. Il y a 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. Il y a beaucoup de propriétés CSS et, comme je vous l'ai dit, je ne vous demande pas de les connaître toutes par cœur.
  • Les valeurs : à chaque propriété CSS on doit indiquer une valeur. Par exemple, pour la couleur, il faut indiquer le nom de la couleur. Pour la taille, il faut indiquer quelle taille on veut, etc.


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

Code : CSS - Sélectionner
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
balise1
{
   propriete: valeur;
   propriete: valeur;
   propriete: valeur;
}

balise2
{
   propriete: valeur;
   propriete: valeur;
   propriete: valeur;
   propriete: valeur;
}

balise3
{
   propriete: valeur;
}


Vous repérez sur ce schéma les balises, propriétés et valeurs dont je viens de vous parler.

Comme vous le voyez, on écrit le nom de la balise (par exemple h1), et on ouvre des accolades pour y mettre les propriétés et valeurs que l'on veut à l'intérieur. On peut mettre autant de propriétés que l'on veut à l'intérieur des accolades. Chaque propriété est suivie du symbole "deux-points" (:) puis de sa valeur correspondante. Enfin, chaque ligne se termine par un point-virgule (;).

Je vous apprendrai de nombreuses propriétés dans les chapitres suivants. Pour le moment, on va juste changer la couleur pour s'entraîner dans nos exemples.

Le code CSS que nous avons utilisé jusqu'ici :

Code : CSS - Sélectionner
1
2
3
4
p
{
    color: blue;
}


... signifie donc en français : "Je veux que tous mes paragraphes soient écrits en bleu.". Il donne ce résultat à l'écran :

Paragraphes écrits en bleu


Essayez de changer le nom de la balise affectée par le code CSS. Par exemple, si j'écris h1, c'est le titre qui sera écrit en bleu. Modifiez votre fichier style.css comme ceci :

Code : CSS - Sélectionner
1
2
3
4
h1
{
    color: blue;
}


Maintenant, ouvrez à nouveau votre page HTML (souvenez-vous, on ouvre la page HTML dans le navigateur, pas le fichier CSS !) : vous devriez voir son titre s'afficher en bleu !

Titre bleu



Appliquer un style à plusieurs balises



Prenons le code CSS suivant :

Code : CSS - Sélectionner
1
2
3
4
5
6
7
8
9
h1
{
   color: blue;
}

em
{
   color: blue;
}


Il signifie que nos titres <h1> et nos textes importants <em> doivent s'afficher en bleu. Par contre, c'est un peu répétitif, vous ne trouvez pas ?

Heureusement, il existe un moyen en CSS d'aller plus vite si les 2 balises doivent avoir la même présentation. Il suffit de combiner la déclaration en séparant les noms des balises par une virgule comme ceci :

Code : CSS - Sélectionner
1
2
3
4
h1, em
{
   color: blue;
}


Titre et texte important écrits en bleu


Cela signifie : "Je veux que le texte de mes <h1> et <em> soit écrit en bleu".

Vous pouvez indiquer autant de balises à la suite que vous le désirez.

Des commentaires dans du CSS



Comme en HTML, il est possible de mettre des commentaires. Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations pour vous, par exemple pour vous y retrouver dans un long fichier CSS.

D'ailleurs, vous allez vous en rendre compte, en général le fichier HTML est assez petit, et la feuille CSS assez grande (si elle contient tous les éléments de style de votre site, c'est un peu normal). Notez qu'il est possible de créer plusieurs fichiers CSS pour son site si vous ressentez le besoin de séparer un peu votre code CSS (en fonction des différentes sections de votre site par exemple).


Donc, pour faire un commentaire, c'est facile ! Tapez /*, suivi de votre commentaire, puis */ pour terminer votre commentaire.
Vos commentaires peuvent être écrits sur une ou plusieurs lignes. Par exemple :

Code : CSS - Sélectionner
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/*
style.css
---------
 
Par Mathieu Nebra
*/
 
p
{
   color: blue; /* Les paragraphes seront bleus */
}



Il est possible que j'utilise les commentaires dans la suite du cours pour vous donner des explications à l'intérieur même des fichiers .css.

Sommaire

Appliquer un style : class et id

Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes soient écrits par exemple en bleu.

Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :
  • L'attribut class
  • L'attribut id

Que les choses soient claires dès le début : les attributs class et id sont quasiment identiques. Il y a seulement une petite différence que je vous dévoilerai plus bas.
Pour le moment et pour faire simple, on ne va s'intéresser qu'à l'attribut class.

Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc.

Code : HTML - Sélectionner
1
2
3
<h1 class=""> </h1>
<p class=""></p>
<img class="" />

Oui mais que met-on comme valeur à l'attribut class ?

En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que vous voulez, tant que le nom commence par une lettre.

Par exemple, je vais donner la classe introduction à mon premier paragraphe :

Code : HTML - Sélectionner
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p class="introduction">Bonjour et bienvenue sur mon site !</p>
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
    </body>
</html>


Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom : introduction. Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : "Je veux que seules les balises qui ont comme nom introduction soient affichées en bleu".

Pour faire ça en CSS, indiquez le nom de votre classe en commençant par un point, comme ceci :

Code : CSS - Sélectionner
1
2
3
4
.introduction
{
   color: blue;
}


Testez le résultat : seul votre paragraphe appelé "introduction" va s'afficher en bleu !

Seul le premier paragraphe s'affiche en bleu


Et l'attribut id alors ?


Lui, il fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé qu'une fois dans le code.

Quel intérêt ? Il y en a assez peu pour tout vous dire, cela vous sera utile si vous faites du Javascript plus tard pour reconnaître certaines balises. D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens (pour réaliser des ancres).

En pratique, nous ne mettrons des id que sur des éléments qui sont uniques sur votre page, comme par exemple le logo :

Code : HTML - Sélectionner
1
<img src="images/logo.png" alt="Logo du site" id="logo" />


Si vous utilisez des id, dans le CSS il faudra faire précéder le nom de l'id par un dièse (#) :

Code : CSS - Sélectionner
1
2
3
4
#logo
{
    /* Indiquez les propriétés CSS ici */
}


Je ne vous propose pas de le tester, ça fonctionne exactement comme class.

Si vous vous emmêlez les pinceaux entre class et id retenez que 2 balises peuvent avoir le même nom avec l'attribut class. Un nom d'id doit en revanche être unique dans la page HTML.


Les balises universelles



Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains mots qui ne sont pas à l'origine entourés par des balises.

En effet, le problème de class, c'est qu'il s'agit d'un attribut. Vous ne pouvez donc en mettre que sur une balise. Par exemple, si je veux modifier uniquement "bienvenue" dans le paragraphe suivant :

Code : HTML - Sélectionner
1
<p>Bonjour et bienvenue sur mon site !</p>


Ça serait facile à faire s'il y avait une balise autour de "bienvenue", malheureusement il n'y en a pas. Heureusement, on a inventé... la balise-qui-sert-à-rien.

En fait, on a inventé 2 balises dites universelles qui n'ont aucune signification particulière (elles n'indiquent pas que le mot est important par exemple). Il y a une petite (mais importante !) différence entre ces deux balises :

  • <span> </span> : c'est une balise de type inline. C'est une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe, et c'est celle dont nous allons nous servir pour colorer "bienvenue".
  • <div> </div> : c'est une balise de type block qui entoure un bloc de texte. Les balises de la même famille sont <p>, <h1>, etc. Ces balises ont quelque chose en commun : elles créent un nouveau "bloc" dans la page, et provoquent donc obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d'un design, comme nous le verrons plus tard.


Pour le moment donc, nous allons utiliser plutôt la balise <span>. On la met autour de "bienvenue", on lui rajoute une classe (du nom qu'on veut), on crée le CSS et c'est gagné ! :D

Code : HTML - Sélectionner
1
<p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>


Code : CSS - Sélectionner
1
2
3
4
.salutations
{
   color: blue;
}


Le mot bienvenue est écrit en bleu

Sommaire

Appliquer un style : les sélecteurs avancés

En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on dit "sélectionner") les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. Vous en avez déjà utilisé un peu plus tôt dans ce chapitre, résumons-les pour commencer.

Les sélecteurs que vous connaissez déjà



Ces sélecteurs, que nous avons vus précédemment, sont de loin les plus couramment utilisés. Il faut les connaître par coeur. Commençons par la base de la base :

Code : CSS - Sélectionner
1
2
3
4
p
{

}


... signifie "Je veux affecter tous les paragraphes". Après, c'est à vous de dire ce que vous faites à ces paragraphes (vous les écrivez en bleu par exemple).

Nous avons aussi vu :

Code : CSS - Sélectionner
1
2
3
4
h1, em
{

}


... qui signifie "Tous les titres et textes importants". Nous avons sélectionné deux balises d'un coup.

Et enfin, nous avons vu comment sélectionner des balises précises à qui nous avons donné un nom grâce aux attributs class et id :

Code : CSS - Sélectionner
1
2
3
4
5
6
7
8
9
.class
{

}

#id
{

}


Vous savez quoi ? Il existe des dizaines d'autres façons de cibler des balises en CSS ! Nous n'allons pas toutes les voir, car il y en a beaucoup et certaines sont complexes, mais voici déjà de quoi vous permettre d'être plus efficaces en CSS !

Les sélecteurs avancés



* : sélecteur universel



Code : CSS - Sélectionner
1
2
3
4
*
{

}


Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.

A B : une balise contenue dans une autre



Code : CSS - Sélectionner
1
2
3
4
h3 em
{

}


Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Notez qu'il n'y a pas de virgule entre les deux noms de balise.

Exemple de code HTML correspondant :

Code : HTML - Sélectionner
1
<h3>Titre avec <em>texte important</em></h3>



A + B : une balise qui en suit une autre



Code : CSS - Sélectionner
1
2
3
4
h3 + p
{

}


Sélectionne la première balise <p> située après un titre <h3>.

Exemple :

Code : HTML - Sélectionner
1
2
3
<h3>Titre</h3>

<p>Paragraphe</p>



D’autres sélecteurs existent !



Je ne vous ai présenté qu'une partie des sélecteurs CSS ici, mais sachez qu'il en existe beaucoup d'autres. Si vous voulez une liste complète, vous pouvez vous renseigner directement à la source : sur le site du W3C ! C'est très complet.

Sachez que nous découvrirons certains de ces autres sélecteurs dans la suite de ce cours !

Sommaire