CSS : Présentation et notions
Définition : CSS
Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML.
Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.
Les règles CSS
Les fichiers CSS permettent d'associer une liste de règles de mise en forme aux éléments du fichier HTML.
Pour sélectionner tous les paragraphes, mettre leur texte en jaune et la taille de leur police en 14pt, on pourra écrire :
p { color: yellow;
font-size: 14pt;
}
Les class et les id des éléments HTML permettent de leur appliquer des styles spécifiques.
On utilise donc des div et des span avec des attributs id ou class pour organiser la structure logique du document et pouvoir appliquer des styles en fonction du type d'informations.
div.class { ... }
span.class { ... }
#id { ... }
Complément : Associer une feuille de style CSS à un document X/HTML ou XML
On peut associer à tout fichier X/HTML ou XML des feuilles de style CSS qui se complètent en cascade (ie. Si deux règles différentes sont appliqués sur le même élément dans deux feuilles de styles différentes, c'est la dernière qui prime)
Fondamental : L'attribut media
L'ajout d'un attribut media ayant pour valeur print dans une balise link aura pour effet de définir cette feuille de style comme applicable pour les supports paginés/imprimables.
De la même manière, indiquer une valeur screen définira la feuille de style comme applicable pour les supports de type continu.
Exemple :
Pour compléter la première feuille de style dans le cas d'une impression :
<head><link href='css/mon_CSS1.css' type='text/css' rel='stylesheet' />
<link href='css/mon_CSS2.css' type='text/css' rel='stylesheet' media='print' />
</head>Pour totalement discriminer le style en fonction du support :
<head><link href='css/mon_CSS1.css' type='text/css' rel='stylesheet' media='screen' />
<link href='css/mon_CSS2.css' type='text/css' rel='stylesheet' media='print' />
</head>Complément : Liens utiles
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, W3C Recommendation, 07 June 2011.
CSS Selector reference, w3schools
CSS Reference, w3schools
