Les feuilles de style CSS
séparation entre contenu et mise en forme
Avec HTML 5, il est nécessaire de dissocier le contenu d'un
document de sa forme:
• le langage HTML sera destiné à décrire le contenu,
• les feuilles de style serviront à décrire la forme du document.
2
Pourquoi cette dissociation?
• Assurer la cohérence graphique de ce site ;
• La maintenance d'un site en est facilitée
• Plusieurs mises en forme différentes peuvent être appliquées à un
même document
• Le code HTML est lisible et facilement modifiable,
• Les pages sont plus légères, donc plus rapides à circuler sur un
réseau (la feuille de style ne sera chargée qu'une seule fois)
3
Qu’est-ce qu’une feuille de style?
• Les feuilles de style CSS (pour Cascading Style Sheets),
sont écrites dans un langage spécifique (format textuel,
extension.css)
• Spécification du W3C
• Les feuilles de styles décrivent l'apparence des divers
éléments d'une page web par le biais de couples
propriété / valeur.
4
Comment appliquer un style?
a) L'utilisation de l'attribut style dans une balise
Exemple: <h2 style="color: blue">
Inconvénient : mêler des informations sur la présentation d'un
document (le style), et la structure de ce dernier.
• Utile uniquement pour une définition de style ponctuelle ( pour un
seul élément).
5
Feuille de style interne
<html>
<head>
<title>mon document</title>
<style> (……ma feuille de style…..) </style>
</head>
<body> (...) </body>
</html>
• Valable pour un seul document.
6
Feuille de style externe
• Définition des styles dans un fichier externe.
• L'appel se fait via la balise <link>, placée dans l'entête du document HTML.
• href=URL de la feuille de style externe
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body> (...) </body>
</html>
7
Importer un style
• Les styles communs peuvent être écrits dans un fichier externe et
inclus dans l’élément <style> au moyen de la directive @import.
• Syntaxe :
@import url(fichier.css);
• Cette directive doit figurer avant les autres définitions de style.
• Elle peut être suivie de la désignation du média auquel les styles
importés doivent s’appliquer spécifiquement.
Structure générale
• Une feuille de style = suite de règles.
• Une règle = sélecteur + déclaration
• Un sélecteur indique l'élément concerné par le style;
• Une déclaration est une suite de paires "propriété : valeur" séparées
par « ; » le tout placé entre { }.
Exemple:
H2 { text-align: center; color : black; }
9
Les sélecteurs CSS
Les sélecteurs
• Une des grandes richesses de CSS est la multiplicité des
possibilités de sélection des éléments auxquels on veut attribuer un
style donné.
• La combinaison de plusieurs sélecteurs dans la même déclaration
permet de répondre à tous les besoins, même les plus complexes.
Sélectionner un seul élément
• le sélecteur est constitué du nom de l’élément sans les caractères de
début < et de fin de balise />.
Exemple : p {color : yellow;}
• Nous pouvons appliquer le même style à plusieurs éléments
différents en les énumérant et en les séparant par une virgule dans
le sélecteur.
Exemple:
h1,div,p {color : black ; background-color : red;}
12
Le sélecteur universel
• Pour appliquer un style à tous les éléments, nous utiliserons le
sélecteur universel *
Exemple: *{background-color : yellow;}
• On peut modifier cette propriété pour un élément particulier, en la
redéfinissant uniquement pour celui-ci, par exemple :
*{background-color : yellow;}
p{background-color : green;}
Définir une Classe
• L’attribut « class » permet d’appliquer un style à une classe
définie d’éléments.
• Pour créer une classe, le sélecteur est constitué du nom choisi
pour la classe précédé d’un point (.)
• Exemple: .rouge {color : red;}
• Pour mettre un paragraphe précis de la page avec un texte rouge,
nous devons écrire dans le code HTML :
<p class= "rouge">Texte contenu du paragraphe</p>
Autre utilisation des classes
• Nous pouvons définir une classe en la déclarant applicable
seulement à un élément en faisant précéder son nom de celui de
l’élément.
Exemple:
div.jaune {color : yellow;}
Classes abstraites
• Il est possible de définir d’abord une classe abstraite, puis de la
particulariser en ajoutant une autre propriété pour un élément qui
utilisera la même classe.
exemple:
Code CSS: .rouge {color : red;}
div.rouge {background–color : blue;}
code HTML : <div class="rouge">Texte contenu de la division
</div>
Appliquer plusieurs classes au même élément
• Pour utiliser plusieurs classes dans le même élément HTML, il faut
donner à son attribut class la liste des noms des classes en les
séparant par un espace comme ceci :
<div class="classe1 classe2"> Ceci est un texte avec la classe 1 et 2
</div>
