Conception Web : introduction à CSS

Utiliser une feuille de style

Pour lier un document XHTML à une feuille de style, il faut insérer la ligne suivante dans la balise head :
Syntaxe à employer
<link rel= »stylesheet » type= »text/css » href= »style.css » />

Structure d’une règle

Rappel
Attention à bien respecter la syntaxe pour que votre feuille de style soit correcte ! !
Ne pas oublier de valider sa page Web !

Intérêt de CSS

Une seule règle pour spécifier l’apparence de tous les éléments de même type (h1, p, li, …).
Séparation forme et fond avec un document XHTML qui ne contient que du texte, et aucun élément de mise en forme.
Exemple
Feuille de style :
Document XHTML :

Les cascades

Une cascade est une combinaison de plusieurs styles qui proviennent de sources différentes et qui sont appliquées à un même document, en fonction de priorités.
Comment résoudre deux instructions qui portent sur le même type de balises ?
h1 color : blue ;
h1 color : green ;
Il y a des règles de cascades :
Trouver toutes les déclarations qui contiennent un sélecteur correspondant à un élément donné.
Trier les déclarations selon leur poids ( !important, style de l’auteur)
Plus une déclaration apparaît tardivement, plus elle aura de poids.

Classes

On peut utiliser l’attribut class sur n’importe quelle balise dans le document XHTML.
Exemple
Dans le document XHTML :
<p class= »introduction »> Pour commencer, nous allons …</p>
Dans la feuille de style :
.introduction {
color : red ;
}

Selecteurs simples, multiples, universels

Un selecteur simple porte sur le nom d’une balise.
Un selecteur multiple porte sur plusieurs sélecteurs simples, séparés par une virgule.
Un selecteur universel : *, qui sélectionne tout.
Exemples
body { background-color : pink ;} indique la couleur du fond d’écran.
h1, h2, h3, h4, h5, h6 { color : red ;} met l’ensemble des titres en rouge.
* { color : blue ;} indique que tous les éléments seront de police bleue.

Sélecteurs de classes

Fonctionne avec l’attribut class apposé à certaines balises du document XHTML.
Vous noterez le nom de la classe préfixée d’un point . . Syntaxe : élément.NomClasse
Exemples
p.personne {color : pink ;} met l’ensemble des balises de classe personne en rose.
Sélecteurs d’identifiants
L’identifiant est défini par l’attribut id d’une balise XHTML.
Le sélecteur d’identifiant correspond au nom, préfixe d’un dièse.
Syntaxe : élément#nomIdentifiant
Exemples
p#introduction { font-size : 120% ; } met la balise p d’identifiant introduction en plus gros.

Sélecteurs contextuels

Il s’agit d’au moins 2 sélecteurs séparés par des espaces. A B sélectionne uniquement les B qui sont contenus dans A.
Exemples
h1 em { color : blue ; } met en bleu les mots en emphase contenus dans un titre h1.

Pseudo-classes

Les pseudo-classes permettent de sélectionner un élément, uniquement dans certains contextes.
Exemples pour les liens
a :link pour les liens hypertextes.
a :visited pour les liens déjà visités.
a :hover pour le comportement des liens quand on les pointe.
a :active pour le comportement des liens que l’on clique.
Pour qu’ils ne soient pas soulignés :
text-decoration : none ;

Les boîtes

Les éléments de type bloc produisent une boîte par défaut qui ne peut avoir aucun élément à ses côtés.
Ces éléments génèrent une « rupture » avant et après la boîte d’élément.
Il devient possible de créer une boîte pour chaque objet (ex. entête, menu, pied de page, etc.).

1 CSS kézako ?
2 Le langage
3 Ne pas oublier de valider sa page Web !