Vous savez maintenant que chaque code comporte le nom de la partie que l'on souhaite changer, mais il faut aussi un point de repère dans la source pour que les robots des navigateurs sachent quelles parties il faut afficher avec les styles que vous avez définis.

Et la source ? C'est quoi ?
La source : c'est le fichier qui contient tout le codage HTML qui permet d'afficher le texte du site sur le navigateur.

Et comment voir la source ?
Pour afficher la source de n'importe quel site, il suffit d'ouvrir votre menu contextuel (clic droit de votre souris), puis de choisir "afficher la source" ou "code source de la page" (différent selon le navigateur que vous utilisez).

Si vous n'êtes pas le fondateur du site
Vous vous dites, mais qu'est ce que c'est que ce charabia !

Ne vous occupez pas de ça pour l'instant, on est juste la pour voir comment marche le css, je vais juste vous montrez ce que vous avez besoin de savoir.

Donc, ces fameux repères ! Pour que ces codes puissent afficher le style, on place des "repères".
D'abord, certaines parties ne nécessitent pas de repères, (ah bin, v'la autre chose, il faut des repères ou pas ?) oui j'ai omis de vous dire que vous pouvez appliquer un style directement aux balises HTML.
Voici quelques exemples de balises html : <a>, <body>, <div>, <td>, <input>, <html>...

Voici un exemple de style donné à une balise HTML :

a {
text-decoration:none;
}

Dans l'exemple cité, on indique un style aux balises <a>, ce qui veut dire que tous les textes contenus dans ces balises auront le même style.
La balise <a> est une balise de lien, donc vous l'aurez compris, tous les liens auront le même style, mais rassurez vous il est possible de définir un style différent pour chaque lien de votre site.

Tout ça pour vous amenez sur l'héritage des classes !
Mais qu'est ce donc encore ça, l'héritage des classes ?
C'est pas bien compliqué à comprendre ! Disons qu'au départ on applique un style à l'ensemble du site, en général à la balise <body> , ce qui peut donner par exemple dans votre feuille de style CSS :

body {
background:#ffffff;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

La balise <body> enveloppe tout le texte du site. (pour faire simple!), et donc, de ce fait toutes parties du site qui n'aura pas de style définis dans un code CSS personnalisé héritera de cette class que je viens de vous montrer.

Voici donc comment appliquer un style à certaines balises.

Bon ! ça y est du coup, je vais vous parler de ces repères !

Pour donner une apparence à un élément de notre site, on va alors créer un point de repère pour dire aux robots des navigateurs que l'on veut que tel ou tel partie de notre site doit s'afficher avec les styles que l'on souhaite.
Pour cela on utilise des attributs, il y en a plusieurs, mais on va s'occuper pour l'instant de l'attribut class .

Cet attribut est ajouté à une balise que l'on souhaite modifier. Je vais prendre un exemple :

<p>Chaque jour de plus est un jour de moins.</p>

Voici une citation dont je souhaite changer l'apparence.
Nous retrouvons donc notre attribut class que j'ai nommé citation, vous remarquez que l'attribut est placé dans une balise de paragraphe : <p>

Très important ! Pour que ce style reste uniquement à cette citation, il faut absolument une balise de fin qui sera la balise dans laquelle est mis notre attribut. (la balise de fin dans le cas présent est </p> on l'identifie grace au slash ( / )

Vous pouvez nommer votre class comme vous le souhaitez! Le nom doit obligatoirement se trouver après le signe égale ( = ) et entre les guillemets ( " " ).

Voila, ça c'est pour notre repère dans notre fichier html, notre texte est indiqué avec la class citation.
Occupons nous maintenant de notre code CSS, puisque nous avons nommé notre texte avec la class citation, nous allons obligatoirement nommé notre code CSS avec le même nom.


Une chose importante : Une class doit obligatoirement comporter un point avant le nom dans le code CSS, c'est ce qui la différencie d'une balise.

Voici donc ce que ça donne en CSS :

.citation {
font-family:arial,sans-serif;
border:1px solid #b92b2b;
font-size:15px;
color:#366aff;
background:#cccccc;
padding:10px;
}

J'indique dans ce code, que je veux que mon texte soit bleu avec une taille de police de 15px, une famille arial, des marges interne de 10px, un fond gris avec une bordure rouge.

Et voici ce que cela donnera sur votre site :

Chaque jour de plus est un jour de moins.


Bon, nous avons vu comment est donné un style à une balise HTML, ensuite nous savons comment est donné un style à un élément grâce à l'attribut class.
Maintenant, je vais vous parler de l'autre attribut utilisé, il s'agit de l'attribut id.

L'attribut id marche de la même façon que l'attribut class, mais on ne peut l'utiliser qu'une seule fois, on s'en sert pour un élément unique dans la page.

Donc cet attribut est indiqué comme suit dans la source, exemple :

<p id="citation">Chaque jour de plus est un jour de moins.</p>

L'attribut id est marqué avec un dièse dans la feuille de style CSS.( # )
Voici un exemple :

#citation {
font-family:arial,sans-serif;
border:1px solid #b92b2b;
font-size:15px;
color:#366aff;
background:#cccccc;
padding:10px;
}

Ce qui donnera exactement la même apparence qu'avec une class sur votre site

Voyez par vous même !

Chaque jour de plus est un jour de moins.