publié le jeu. 11 janvier 2018
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. Source Wikipedia
Lors de la dernière séance, nous avons vu le langage de de base à la création des pages web, le html. Maintenant nous allons voir comment mettre en forme notre page web avec le css, pour qu'elle soit moins austère qu'avec les styles par défaut utilisés par les navigateurs.
L'utilisation de ces deux langages répond à un principe de séparation du fond et de la forme qui est utilisé depuis longtemps dans le monde de l'édition. D'abord on écrit du contenu(le fond), ensuite, on met en forme le contenu.
Le document html décrit le contenu du document: le fond, et le document css décrit sa forme.
Nous allons d'abord voir comment lier une feuille de styles à notre page html.
Intégration de code css dans une page html
Il existe trois façons d'ajouter des règles css à une page.
1ère méthode(recommandée): Utilisation d'une feuille de style externe
On écrit le code css dans un fichier avec l'extension .css, par exemple style.css et on la lie dans l'en-tête du document(le <head>).
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
C'est la méthode préférée lorsque l'on a un ensemble de pages qui contiennent des styles identiques, cela permet d'alléger l'écriture du code et les requêtes vers le serveur de documents.
2e méthode: Utilisation d'une feuille de style interne
On intègre le code css au sein de balises <style> dans l'entête du document(le
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Méthode pratique lorsque l'on a des documents html d'une seule page ou avec des styles spécifiques.
3e méthode(à éviter): Insertion directe dans les balises html
On utilise alors l'attribut style au sein de la balise ouvrante de l'élément à styler.
<p style="color: red; font-weight: bold;">
Maintenant mon texte est écrit en rouge et en gras.
</p>
RENDU
Maintenant mon texte est écrit en rouge et en gras.
Cette méthode est peu recommandée car on mélange le fond et la forme, et aussi parceque cela rend le code html encore plus illisible qu'il ne l'est!
Syntaxe
Une règle css est constituée d'un sélecteur suivi d'un bloc de déclaration entre accolades. Chaque déclaration se termine par un point-virgule.
Les sélecteurs
Pour pouvoir savoir, quelles balises doivent être mises en forme dans le document html, on utilise des sélecteurs, p.ex:
psélectionnera toutes les balises paragraphep;h1, h3sélectionnera toutes les balisesh1eth3;section psélectionnera tous les paragrahes contenus dans des balisessection.
Le bloc de déclaration
Il s'agit des règles de style à appliquer sur les élements sélectionnés, p.ex:
p {
color: red;
text-align: center;
}
Cette règle permet de colorier en rouge et de centrer tous les paragraphes du document html.
L'ensemble des mots-clés en css est listé sur l'excellent site MDN.
Commentaires
Les commentaires utilisent la syntaxe suivante: /* Un commentaire */
Ordre d'application des règles
Ce n'est pas pour rien qu'on parle de feuilles de styles en cascade, car en fait la difficulté en css est souvent que l'on définit des règles différentes pour des tags identiques, et qu'il faut savoir qu'elle règle va s'appliquer sur notre élément.
Par ordre de priorité croissante:
- Règles par défaut du navigateur
- Feuille de style externe
- Feuille de style interne
- Style au sein d'un élément html.
Sélecteurs plus élaborés
- Il est possible de sélectionner plusieurs balises à la fois pour leur appliquer une règle commune, ces balises doivent alors être séparées par des virgules.
h1, h2, h3 {color: lime;}
- La virgule est très importante, car si on sépare les sélecteurs par des espaces il s'agit d'une sélection par descendence, le code css suivant par exemple ne sélectionne que les paragraphes contenus dans une balise
div(voir mdn pour plus de détails).
div p {background-color: red;}
-
Pour appliquer un même style à plusieurs éléments on peut leur ajouter un attribut
htmlclass="ma-classe", qui pourra être sélectionné encssavec le sélecteur.ma-classe. -
Pour appliquer un style specifique à un unique élément on lui ajoute un attribut
htmlid="mon-id", qui pourra être sélectionné encssavec le sélecteur#mon-id.
Des styles plus élaborés
Références des propriétés css
Cette référence CSS sur MDN liste toutes les propriétés standards CSS.
Tutoriels et exemples en ligne
Le site w3cschools présente des exemples éditables et dynamiques de situations courantes lors du stylage d'une page web, voir notamment les pages suivantes:
- CSS Backgrounds et CSS3 Backgrounds pour les arrières plans
- CSS Text, CSS Fonts et CSS3 Fonts pour la mise en forme du texte
- CSS Lists pour les listes numérotées on non.
- CSS Box Model et CSS3 Borders pour les modèles de boîtes
- CSS3 Transitions et CSS3 Animations pour des effets dynamiques sur vos pages.
Déboguer son code css
Inspecteur de styles du navigateur
Pour savoir qu'elle règle a été utilisée par le navigateur, la console web du navigateur est d'un grand secours. On peut par exemple inspecter un élément et savoir qu'elles règles css s'appliquent et qu'elles règles css ont été supplantés(elles apparaissent barrées dans l'inspecteur de styles).
Pour accéder à la console web, taper CTRL+MAJ+K sur firefox, pour inspecter un élément il suffit de le sélectionner et de faire un clic droit de la souris puis de taper x.
Validateur du W3C
Le site du W3C propose comme pour le language html un (validateur)[http://jigsaw.w3.org/css-validator/#validate_by_input+with_options] de fichier css.
