Mettre en place le CSS

3 manières d’insérer du CSS:
  1. Créer un fichier CSS externe et de l’appeler sur le fichier HMTL dans le Head
  2. Utiliser une balise fermante <style> dans le Head et insérer le CSS à l’intérieur
  3. Directement sur une balise grâce à l’attribut style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Premiers tests du CSS</title>
<style>
p
{
color: blue;
}
</style>

</head>
<body>
<h1 style="color: red;">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>

Appliquer un style : sélectionner une balise

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 obligerai pas à les connaître toutes par cœur.

Les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color, il faut indiquer le nom de la couleur. Pour font-size, il faut indiquer quelle taille on veut, etc.
balise1
{
propriete1: valeur1;
propriete2: valeur2;
propriete3: valeur3;
}

balise2
{
propriete1: valeur1;
propriete2: valeur2;
propriete3: valeur3;
propriete4: valeur4;
}

balise3
{
propriete1: valeur1;
}
Si les deux 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. Cela signifie : « Je veux que le texte de mes <h1> et <em> soit écrit en bleu ».
h1, em
{
color: blue;
}

Tapez /*, suivi de votre commentaire, puis */pour terminer votre commentaire.
/*
style.css
---------

Par Mathieu Nebra
*/

p
{
color: blue; /* Les paragraphes seront 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. L’id fonctionne exactement de la même manière que class, il vous sera utile si vous faites du JavaScript.
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. Indiquez le nom de votre classe en commençant par un point, comme ci-dessous :
.introduction
{
color: blue;
}
  • <span> </span>: c'est une balise de type inline, c'est-à-dire 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<p>,<h1>, etc. sont de la même famille. 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 cibler (on dit « sélectionner ») les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs.

* : sélecteur universel
*
{

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

A B : une balise contenue dans une autre
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 balises.
Exemple de code HTML correspondant :
<h3>Titre avec <em>texte important</em></h3>


A + B : une balise qui en suit une autre
h3 + p
{

}
Sélectionne la première balise<p>située après un titre<h3>.
Exemple :
<h3>Titre</h3>

<p>Paragraphe</p>


A[attribut] : une balise qui possède un attribut
a[title]
{

}
Sélectionne tous les liens <a> qui possèdent un attribut title.
Exemple :
<a href="http://site.com" title="Infobulle">


A[attribut="Valeur"] : une balise, un attribut et une valeur exacte
a[title="Cliquez ici"]
{

}
Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici ».
Exemple :
<a href="http://site.com" title="Cliquez ici">


A[attribut*="Valeur"] : une balise, un attribut et une valeur
a[title*="ici"]
{

}
Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).
Exemple :
<a href="http://site.com" title="Quelque part par ici">
D'autres sélecteurs existent !
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 balises.
  • CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page web.
  • Il faut être vigilant sur la compatibilité des navigateurs avec certaines fonctionnalités récentes de CSS3. Quand un navigateur ne connaît pas une instruction de mise en forme, il l'ignore simplement.
  • On peut écrire le code CSS à plusieurs endroits différents, le plus conseillé étant de créer un fichier séparé portant l'extension.css(exemple :style.css).
  • En CSS, on sélectionne quelles portions de la page HTML on veut modifier et on change leur présentation avec des propriétés CSS : balise1
    {
    propriete1: valeur1;
    propriete2: valeur2;
    }
  • Il existe de nombreuses façons de sélectionner la portion de la page que l'on veut mettre en forme. Par exemple, on peut viser :
    • Toutes les balises d'un même type, en écrivant simplement leur nom (h1par exemple) ;
    • Certaines balises spécifiques, auxquelles on a donné des noms à l'aide des attributs class ou id(.nomclasse ou #nomid) ;
    • Uniquement les balises qui se trouvent à l'intérieur d'autres balises (h3 em).
    • etc.