CSS (Cascading Style Sheets ou feuilles de style en cascade) est un langage qui permet d'attacher des styles de présentation à des documents structurés écrits en (X)HTML ou en XML.
Il permet de prendre en charge la mise en page, les couleurs, la typographie, les élements décoratifs.
En séparant le contenu et la mise en forme, l'utilisation de CSS facilite grandement la création de pages web et la maintenance des sites.
Le langage CSS est le compagnon quasi-indispensable des documents (X)HTML écrits en DTD Strict.
CSS est actuellement dans sa version 2 : CSS 2.
Les propriétés CSS sont en grande partie bien supportées par la plupart des navigateurs actuels. Néanmoins l'utilisation de certaines propriétés peut poser problème sur certains navigateurs, notamment Internet Explorer 6. De plus certaines propriétés ne sont gérées par quasiment aucun navigateur. C'est pourquoi un travail de vérification sous des environnements différents est bien souvent nécessaire lors de l'utilisation de styles CSS.
Il y a 3 méthodes pour utiliser des styles CSS :
<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
Et dans le fichier styles.css :
body{
font-size:0.9em;
}
<style type="text/css"> body { font-size:0.9em; } </style>
<body style="font-size:0.9em;">
La première méthode est à privilégier (c'est dans cette utilisation que l'on dispose pleinement de la facilité de création et de maintenance), la troisième à proscrire (plus de séparation entre le document HTML et sa mise en forme). La deuxième peut avoir une utilité particulière, comme par exemple dans le cas d'un message électronique écrit en (X)HTML.
Il est possible de lier plusieurs feuilles de style à un même document. Il est notamment courant d'avoir une feuille de styles pour l'affichage sur écran et une autre pour l'impression. Néanmoins, il convient de n'avoir qu'une feuille de styles d'affichage ou d'impression pour un site donné ; cela n'est pas obligatoire mais facilite l'écriture, la maintenance, l'homogénéité et permet d'éviter les "conflits de style".
En CSS, chaque règle est constituée d'un sélecteur, suivi d'un bloc de déclarations encadrés par des accolades {}. Le sélecteur précise le ou les élements concernés par la règle.
Les principaux types de sélecteurs couramment utilisés (avec des exemples) :
Les pseudos-classes de liens :
Quand une propriété précise une valeur de taille celle-ci s'exprime dans une des unités suivantes :
Il existe également des valeurs absolues (cm, mm, in popur inches, pc pour picas, pt pour points picas), dont l'utilisation convient plutôt à des sorties en impression.
Les éléments héritent des styles de leur parent et de leur ancêtre. Ansi si l'on trouve dans la feuille de style :
body{
color:green;
}
Cela indique que par défaut tout le contenu textuel contenu dans l'élément <body> (donc dans toute la page), sera par défaut de couleur verte.
Si pour un élément plusieurs parent ou ancêtres définissent des règles différentes, l'élément hérite de son ascendant le plus proche. Ainsi si l'on a :
body{
color:green;
}
p{
color:red;
}
Tout le contenu textuel contenu dans l'élément <p> ou dans ses sous-éléments sera de couleur rouge.
Si pour un même élément donné, 2 styles sont spécifiés (par exemple l'un dans un fichier css, l'autre dans la balise <style>), si le sélecteur est identique ou assimilé c'est le dernier style indiqué qui est pris en compte.
Néamoins chaque sélecteur css a un poids défini correspondant notamment à sa nature. En cas de conflit de styles c'est la sélecteur ayant le plus fort poids qui doit l'emporter. A savoir :