4 - Améliorer son site Web

4.1. La balise 'span'

La balise span est un "conteneur". Elle sert à contenir un ou plusieurs mots (ou lettres) d'un texte auxquels on souhaite ajouter un CSS spécifique.

Exemple :

4.2. La balise 'div'

La balise div est un "conteneur". Elle sert à contenir une ou plusieurs balises auxquelles on souhaite ajouter un CSS spécifique.

Exemple :

Codes CSS	HTML et affichage
p{ color: blue; } h2{ color: green; } img{ width: 50px; float: left; } div{ border: 2px solid red; margin-left: 20%; margin-right: 20%; }	<div> <h2>Titre 1</h2> <img src="..." alt="..."> <p>Voici un exemple avec ...</p> </div> <p>Les balises et les ...</p> <img src="..." alt="..."> <div> <div> <p>La balise div</p> <p>peut être utilisées</p> <p>dans une autre ...</p> </div> <h2>Titre 2</h2> <p>Mais il faut éviter ...</p> </div>
	Titre 1 Voici un exemple avec la balise div. Les balises et les éléments dans cette balise sont encadrés en rouge et ont une marge. La balise div peut être utilisée dans une autre balise div. Titre 2 Mais il faut éviter de les utiliser quand il n'y en a pas vraiment besoin !

4.3. L'identifiant d'une balise

Un identifiant est un attribut que n'importe quelle balise peut avoir. Il s'écrit id="..." .

Comme son nom l'indique, il sert à identifier une balise précise pour, par exemple, lui attribuer un CSS spécifique.

L'identifiant est unique, il ne peut pas être utilisé pour plusieurs balises d'une même page Web (sinon l'identifiant ne fonctionnera pas correctement).

Le choix de l'identifiant est libre. Il est tout de même préférable de n'utiliser que des lettres sans accent , des chiffres et des underscores (tirets bas).

Dans le CSS, l'identifiant est indiqué par un "#".

Exemple :

4.4. La classe de ballises

Une classe est un attribut que n'importe quelle balise peut avoir. Elle s'écrit class="..." .

Contrairement à l'identifiant, la classe peut être utilisée pour plusieurs balises d'une même page Web.

Elle sert à identifier des balises précises pour, par exemple, leurs attribuer un même CSS.

Le choix de la classe est libre. Il est tout de même préférable de n'utiliser que des lettres sans accent, des chiffres et des underscores (tirets bas).

Dans le CSS, l'identifiant est indiqué par un ".".

Une balise peut avoir plusieurs classes. Pour ce faire, on note les deux classes séparées par un espace.

Exemple :

Si on veut sélectionner une classe liée uniquement à un type de balises précis, on place le type de balise devant le point dans le CSS.

Exemple :

4.5. Aller plus loin

La cascade

Le C de CSS signifie "Cascade". Il indique que le CSS s'effectue de haut en bas, comme une cascade.

Par exemple, si vous modifiez la couleur d'une balise deux fois, c'est la dernière couleur qui sera prise en compte.

Exemple :

Eviter les doublons de CSS

Si plusieurs balises (nommons-les A1 et B2) doivent avoir le même CSS, on aurait tendance à vouloir faire un copier-coller.

Pas besoin ! Il suffit d'utiliser cette notation :

Exemple :

Cibler des balises se trouvant dans d'autres balises

Si vous voulez appliquer un CSS sur une/des balises A1 présentes dans une/des balises B2, sans modifier les balises A1 hors ds balises B2, il suffit d'utiliser cette notation :

Exemple :