CSS

Chapitre 3

CSS (Cascading Style Sheets)

Introduction

Les CSS ou feuilles de style en cascade sont un ensemble de règles qui permettent d'attribuer à toutes les balises un certain nombre de propriétés de mise en page, aussi bien pour les couleurs, les caractères qui le positionnement et les images.
Le premier avantage des CSS par rapport aux attributs de style intégrés aux balises est de bien séparer le contenu du contenant. En effet le code HTML structure les informations et la CSS décrit son aspect formel. De plus, si on veut modifier des styles sur un site, on ne modifie que la feuille de style et non pas toutes les pages, cela fait gagner du temps.

Le mot cascade dans feuille de style de cascade exprime bien le principe des CSS : un parent définit le style de ses enfants. Les modifications d'un parent ont une influence sur le style des enfants, comme le montre l'exemple suivant :

CSS :

div>div {font-size:85 %;}

HTML :

 <div>
            Ce paragraphe a la taille par défaut
            <div>
            Le texte est plus petit
            <div>
            Encore plus petit
            <div>
            Encore plus petit
            <div>
            </div></div></div></div></div>

Résultat :

Mais les CSS sont conçues pour que le concepteur du site gère au mieux se style, sans contraintes. Tout d'abord il existe des style par défaut, selon les balises, H1, H2, H3, CITE, LI, A,...

Tout comme le HTML, les feuiles de style ont connu différentes versions. Actuellement, les dernière version est le CSS3.

Écrire en CSS

La syntaxe employée pour écrire en css est la suivante : sélecteur{propriété:valeur;}.

On emploie des accolades, deux points et point virgule.

Le commentaire

On peut placer un commentaire dans sa feuille css, de cette façon : /* mon commentaire*/

Où écrire ses feuilles de styles?

CSS dans le <head>

La feuille se style, lorsqu'elle est courte, et dans le cas d'une newsletter peut se rédiger dans l'en-tête du html, donc entre les deux balises <head></head>

  <head>
  <style>
  body {color:#000000;}
  </style>
  </head>

CSS dans un fichier

Les feuilles de style se rédigent le plus souvent dans un document séparé dont l'extension est : .css. Ce fichier est placé soit à la racine du site, soit dans un dossier script. Il se rédige avec un éditeur de texte ou avec l'aide d'un logiciel comme Dreamweaver (payant), Styliser (payant), Atom (gratuit), KompoZer (gratuit).
Dans le html, entre les balises <head></head>, une ligne de code est inséré pour lier le document html aux css:
<link href="mesCSS.css" rel="stylesheet" type="text/css" />

Appliquer un style

À tous les éléments de la page

Vous pouvez choisir d'appliquer un style à tous les éléments de la page.

Par exemple pour définir la couleur du texte :

* { color:#333333;}

Les élément susceptibles d'avoir une couleur, comme les titres, les paragraphes, seront donc écrit en gris, sauf si je une autre couleur leur est spécifiquement attribuée.

À toutes les instances d'un élément

Si on souhaite que tous les paragraphes soient écrits en bleu, on écrit :

p {color:# 003333;}

À certaines instances d'un élément : emploi de la class

Si on souhaite qu'un paragraphe spécifique soit écrit en vert, on écrit en css:

p.vert {color:# 990000;}

En html, on écrit : blablabla

À l'instance unique d'un élément :emploi de l' id

Si on souhaite qu'un paragraphe précis soit écrit en rouge, on écrit :

p#rouge {color:# FF0000;}

En html, on écrit : blablabla

À une partie de contenu de paragraphe : les balises

Si on souhaite que certains mots d'un paragraphe soient écrit en violet, on écrit :

.violet {color:# 000066;}

En html, on écrit : blablabla blabla blablabla violet blablablabla

Les balises et sont employées pour appliquer un style à une partie du paragraphe et seulement.

À un élément directement ou indirectement contenu dans un autre élément

Si on souhaite le contenu de l'élément em soit en orange seulement dans les titres h4, on définit la règle :

h4 em  {color:# 660000;}

En html, on écrit : <h4>blablatexte orange bla</h4>. Cela fonctionne aussi pour <h4>blablatexte orange bla</h4>

À un élément directement contenu dans un autre élément

Si on souhaite le contenu de l'élément em soit en mauve dans les paragraphes, sauf dans les citations qu'il contient, on écrit:

p>em  {color:# 99CCCC;}

En html, ce s'appliquera à : blablatexte mauve bla

Mais pas à : <q>....</q>

À différents élément en même temps

Pour que tous les titres soient gris-vert, on rédige ainsi :

h1,h2,h3,h4,h5,h6  {color:# 996666;}

Cours HTML