CSS

Définition

CSS signifie « Cascading Style Sheets », ce qui peut se traduire par « feuilles de style en cascade » en français. Il s’agit de fichiers contenant des instructions relatives à la mise en forme des pages web. Ces fichiers sont munis d’une extension .css (d’où leur nom). Les CSS sont basés sur des standards définis par le W3C. La standard actuel est CSS3.

Liens avec le html

Comme nous l’avons vu dans cette définition du html, le html permet de structurer le contenu d’une page web en « balisant » ce dernier, qui est très utiliser dans le domaine du Développement Web & Mobile. Par exemple, le code html <h1>Mon titre</h1> signifie que « Mon titre » est le titre principal de la page.En revanche, cela ne dit pas au navigateur comment ce titre doit être mis en forme : taille de la police, présence d’une puce, espacement entre les caractères, marges, etc.En spécifiant, dans un fichier CSS, des instructions de mise en forme de « Mon titre », on va ainsi expliquer au navigateur comment « Mon titre » doit être affiché.

Exemple

Gardons l’exemple « Mon titre ». Imaginons que la page d’accueil de mon site s’appelle « index.html »Le fichier index.html contiendra des lignes comme :

<head>...</head><body><h1>Mon titre</h1><h2>Sous-titre</h2>...</body>

On lui associe un fichier « Affichage.css » contenant l’instruction :

h1 {font-size:16px; font-weight:bold; color:red;}

ce qui reviendra à dire au navigateur : « pour afficher le titre principal de la page (h1), tu utiliseras une police de 16 pixels de haut, en gras et de couleur rouge ».font-size, font-weight et color sont des propriétés. 16px, bold, et red sont des attributs.Il existe ainsi de nombreuses propriétés CSS permettant de définir l’apparence d’un site.

Où placer les fichiers CSS ?

Il existe plusieurs façons d’incorporer les fichiers CSS dans un site web :

Ils peuvent être « liés » dans l’entête de la page html. On ajoutera par exemple : <link rel= »stylesheet » type= »text/css » href= »/Affichage.css » /> avant la fermeture de la balise </head>.
On peut incorporer les instructions CSS dans la page entre des balises <style>.
Il est également possible d’utiliser des instructions CSS directement dans un attribut style associé à une balise. Pour mettre en forme notre titre (voir ci-dessus), on écrira alors directement :
- <h1 style= »font-size:16px; font-weight:bold; color:red; »>Mon titre</h1>

Pour aller plus loin, nous vous invitons à découvrir notre agence developpement web et à télécharger notre livre blanc « Les 11 commandements d’un site internet qui convertit vos visiteurs en clients »