Qu'est-ce que CSS ?
CSS signifie C ascading S tyle Sheets _
CSS décrit comment les éléments HTML doivent être affichés
Exemple CSS
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
Cliquez sur le bouton "Essayez-le vous-même" pour voir comment cela fonctionne.
Syntaxe CSS
Une règle CSS se compose d'un sélecteur et d'un bloc de déclaration :
Le sélecteur pointe sur l'élément HTML à styler (h1).
Le bloc de déclaration (entre accolades) contient une ou plusieurs déclarations séparées par des points-virgules.
Chaque déclaration comprend un nom de propriété CSS et une valeur, séparés par deux points.
Dans l'exemple suivant, tous les éléments <p> seront centrés, rouges et auront une taille de police de 32 pixels :
Exemple
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
Le même exemple peut également être écrit comme ceci :
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
Feuille de style externe
Une feuille de style CSS peut être stockée dans un fichier externe :
monstyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
Les feuilles de style externes sont liées aux pages HTML avec des balises <link> :
Exemple
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
Style en ligne
Exemple
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
Ordre en cascade
Si différents styles sont spécifiés pour les éléments HTML, les styles se décomposeront en nouveaux styles avec la priorité suivante :
- Priorité 1 : Styles en ligne
- Priorité 2 : Feuilles de style externes et internes
- Priorité 3 : Navigateur par défaut
- Si différents styles sont définis sur le même niveau de priorité, le dernier a la priorité la plus élevée.
Exemple
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
Démo CSS - Une page HTML - Plusieurs styles !
Ici, nous allons montrer une page HTML affichée avec 4 feuilles de style différentes.
Cliquez sur les boutons Feuille de style (1-4) pour voir la page affichée avec différents styles.
Tutoriel CSS complet
Ceci a été une courte description de CSS.
Pour un didacticiel CSS complet, accédez au didacticiel CSS de W3Schools .
Pour une référence CSS complète, accédez à W3Schools CSS Reference .