Apprendre le CSS
Écrit par : L'équipe de WebSimple
Définition
Le CSS (Cascading Style Sheets ou en français : feuille de styles) est un langage permettant de gérer la présentation d'un document Web ainsi que de séparer la partie balisage (le XHTML) de la partie visuelle (CSS). Le CSS permet de personnaliser plusieurs éléments du XHTML tels les polices, l'alignement, les marges, etc. Bien qu'il soit possible de styliser son document directement à partir du XHTML, il est beaucoup plus pratique d'utiliser le CSS lié en fichier externe au XHTML et ainsi pouvoir changer facilement tous les styles des pages lié à la même feuille de style.
Les premiers pas
Voici un exemple de code CSS :
h1
{
color : deeppink ; /* Colore tous les h1 */
text-align : left ; /* Aligne le texte du gauche */
font-size : 90% ; /* Réduit la taille du texte */
}
Avant l'ajout de code CSS:
Après l'ajout de code CSS:
Comment ça fonctionne ? Voici une explication d'un bloc de déclaration typique.
Le h1 représente le sélecteur, tous les styles appliqués à l'élément h1 sont inclus à l'intérieur des accolades (dans le bloc de déclarations). Celles-ci peuvent contenir qu'une seule valeur ou plusieurs, l'important est qu'il y ait un point virgule après chaque déclaration de style afin de les séparer. Chaque bloc de déclarations est constitué d'une propriété ainsi qu'une valeur apportée à celle-ci.
Intégration du CSS
Il y a trois principales façons d'intégrer le CSS à vos documents destinés au Web. La plus pratique est de lier la feuille de style en fichier externe. Ainsi, on peut facilement changer toutes les propriétés des pages rapidement et ainsi le code XHTML est beaucoup moins lourd.
Exemple de code pour inclure une feuille de style externe :
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
La deuxième façon est d'insérer le CSS directement dans l'en-tête de la page. Cette façon est surtout utilisée lorsqu' une partie est propre à une page. Mais comme expliqué précédemment, cela ajoute beaucoup au poids du fichier de la page XHTML tout dépendant de la longueur du code.
Exemple de code incluant le code CSS à l'intérieur d'une page :
<style type=”text/css”>
h1 {color: deeppink;}
</style>
La troisième façon est d'inclure directement le CSS à l'intérieur d'une balise XHTML. Cette méthode sert surtout lorsqu'on veut définir des règles uniques à cette balise dans une page précise, donc nous n'avons pas besoin de «class » ou de « id ».
Exemple de code incluant le code CSS à l'intérieur des balises XHTML :
<p style="text-align: center;">Blablablabla</p>
Tutoriel
Premièrement, il faut créer notre code de base XHTML.
<html>
<head>
<title>CSS</title>
</head>
<body>
<h1>Apprendre le CSS</h1>
</body>
</html>
Résultat :
Après, il faut placer les règles CSS dans le document XHTML. Nous utiliserons ici la technique incluant le CSS dans le « head » de la page, car c'est la méthode la plus appropriée à cette démonstration.
<html>
<head>
<title>CSS</title>
<style type=”text/css”>
</style>
</head>
<body>
<h1>Apprendre le CSS</h1>
</body>
</html>
Il faut ensuite styliser le h1, afin d'appliquer une couleur à cette balise, il faut donc ajouter entre les balises <style> le code suivant :
<html>
<head>
<title>CSS</title>
<style type=”text/css”>
h1{
color: deeppink;
}
</style>
</head>
<body>
<h1>Apprendre le CSS</h1>
</body>
</html>
* la couleur peut aussi être définie en code hexadécimal.
Résultat :
Ensuite, ajustons la grandeur de la police. Par défaut, la taille d'une balise h1 est définie à 24pt, nous allons donc la réduire à 16pt.
<html>
<head>
<title>CSS</title>
<style type=”text/css”>
h1
{
color: deeppink;
font-size: 16pt;
}
</style>
</head>
<body>
<h1>Apprendre le CSS</h1>
</body>
</html>
Résultat final:
Références
http://www.netalya.com/fr/css-1.asp
http://www.commentcamarche.net/css/cssintro.php3
http://www.futura-sciences.com/comprendre/g/definition-css-cascading-style-sheet-feuille_4050.php
http://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade
