[retour à la page principale]
Cliquez ici pour voir le code de cette page

Introduction aux CSS

Nous avons vu comment mettre du texte en gras, ... Nous savons également désormais créer des tableaux, choisir de leur mettre une bordure, ...

Imaginons maintenant que nous ayons mis tous nos tableaux avec une bordure de 1, mais que l'on décide de la passer à 2... Nous devons tous les changer un par un !

Les feuilles de style vont nous permettre de définir des classes que nous appliquerons aux éléments désirés. Nous pourrons choisir dans quel bloc telle ou telle régle s'applique...

Méthode d'utilisation

Nous avons deux possibilités pour utiliser les classes de style :

Utilisation dans une balise

On peut voir un exemple avec l'image suivante qui a une bordure améliorée de même que le tableau qui la contient :

Exemple Code
<img src="../exemple-3/sebeto.jpg" style="border-color: #9ACA9A; border-width: 10px; border-style: outset;" alt="" />


Cependant, même si cela nous ouvre de nouvelles perspectives, cela n'est pas encore suffisant, il vaut mieux déclarer des règles s'appliquant à l'ensemble d'un type de balises, ou encore des classes que l'on appliquera comme on le souhaite.

Utilisation d'une feuille de style externe

Nous allons utiliser une feuille de style externe dans laquelle nous allons définir nos règles et classes. Cette feuille sera liée à nos pages html en rajoutant dans leur entête (section <head></head>) la ligne suivante :

<link type="text/css" media="screen" rel="stylesheet" href="mafeuille.css" />


Nous mettrons donc dans le fichier mafeuille.css toutes les choses qui nous intéressent ! Nous allons distinguer plusieurs définitions de styles :

Truc Code du fichier css Code du fichier html Explications
Balises img
{
   border-color: #9ACA9A;
   border-width: 5px;
   border-style: outset;
} 		<img src="image.jpg" alt=""> S'applique à la balise img : toutes les images de notre page auront par défaut la bordure de l'exemple précédent...
Classe .bordure1
{
   border-color: #9ACA9A;
   border-width: 5px;
   border-style: outset;
} 		<img src="image.jpg" class="bordure1" alt="" /> Les balises où on ajoutera cet attribut class="bordure1" auront automatiquement la bordure définie dans le fichier CSS pour cette classe (on peut très bien l'appliquer à un tableau, ...)
Id #mabordure1
{
   border-color: #9ACA9A;
   border-width: 5px;
   border-style: outset;
} 		<img src="image.jpg" id="mabordure1" alt="" /> Même effet que précédemment, sauf que l'id doit être unique : on ne peut l'appliquer qu'à un élément dans la page (sert par exemple pour les éléments de mise en page qui n'apparaissent qu'une seule fois)
Div .bordure1 img
{
   border-color: #9ACA9A;
   border-width: 5px;
   border-style: outset;
} 		<div class="bordure1">
   ...
   <img src="image.jpg" alt="">
   ...
</div>		 Toutes les images que nous ferons entre ces deux div aurons automatiquement la bordure définie, pas celles en dehors. Les div servent à définir des blocs de contenu, à faire de la mise en page, ...
Span .rougegras
{
   font-weight: bold;
   color: #800000;
} 		<span class="rougegras">message important</span> Le texte va être mis en forme selon la classe invoquée. Cela fonctionne comme pour les div, mais on ne fait pas de mise en page avec, on s'en sert pour formater du texte, ...


Utilisation de CSS interne à la page html

On s'en servira en définissant ainsi :

<style type="text/css">Ici le code CSS</style>


Le code CSS se fait exactement comme dans les feuilles externes, cf. tableau précédent...

Bon, on s'y met ??