Cantau - CSS

Fichier de style CSS (Cascading Style Sheets)

Séparation du style et du contenu

Lorsqu'on crée des pages html, nous devons gérer à la fois le contenu (l'information que je veux donner) et le style (quelles couleurs j'utilise, les marges, le fond ...). L'idée essentielle est de ne pas mélanger contenu et style. Le contenu est écrit en html, le style est mis en place grâce à une feuille de style CSS. Le but de cette séparation est double : Ne se concentrer que sur le contenu quand on crée des pages internet, Pouvoir utiliser la feuille de style pour l'ensemble des pages d'un site et donc économiser énormément de temps.

Remarque : cette séparation du style et du contenu n'est pas la seule solution de procéder, d'ailleurs de nombreux sites ne respectent pas cette règle.

Dans les entêtes de la page html, la référence à la feuille de style est indiquée grâce à la ligne suivante :

La feuille de style est située dans le fichier « style.css ».

Syntaxe du fichier de style

A l'aide d'un éditeur de texte, ouvrir le fichier de style. La syntaxe utilisée dans ce fichier est la suivante (ce n'est pas du html) :

balise {
    propriété1:valeur1;
    propriété2:valeur2;
}

« balise » correspond à une balise html pour laquelle on souhaite donner un style. Les propriétés sont ensuite énumérées (une par ligne de préférence), l'ensemble est placé entre des accolades. Chaque propriété possède une valeur placé après le caractère « : » et la fin de ligne se termine par « ; »

Exemple :

div {
    margin:0;
    padding:0;
    background-color:red;
    font-family:Verdana;
}

Chaque balise html possède un grand nombre de propriétés que vous découvriez progressivement au cours de votre travail.

Sélecteurs class et id

Supposons qu'une balise soit utilisées plusieurs fois dans une même page et que nous souhaitions donner un style particulier à certaines d'entre elles, alors les sélecteurs sont indispensables.

L'exemple suivant permet de comprendre. En ajoutant la propriété suivante à la balise div, les textes placés dans les balises div auront tous une couleur bleue.

div {
    color:blue;
}

Nous souhaitons que certaines balises div n'aient pas un texte bleu mais un texte vert. Si ce cas de figure doit se produire une seule fois sur une page, il faut utiliser le sélecteur « id », si cela doit être utilisé plusieurs fois, on utilise alors le sélecteur « class ». Le sélecteur « id » sert à repérer un élément unique sur la page et prend tout son intérêt en cas d'utilisation de javascript.

Sélecteur class

Dans la page html, l'utilisation d'une classe se fait de la façon suivante :

Un texte en vert.
    ...
Un autre texte en vert.

Et dans le CSS :

.ma_classe_multiple {
    color:blue;
}

Noter que la déclaration débute par un « . »

Sélecteur id

Dans la page html, l'utilisation d'un id se fait de la façon suivante (une seule fois donc) :

Un texte en jaune.

Et dans le CSS :

#mon_id {
    color:yellow;
}

Noter que la déclaration débute par un « # »

Héritage

Le modèle Parent-Enfant(s)

L'héritage des CSS est fondé sur le modèle Parent-Enfant(s) : chaque élément Enfant reçoit en héritage tous les styles de son élément Parent. Exemple :

body {
    color:blue;
}
p {
    margin:0;
}

Les éléments paragraphes p ont tous une couleur de police bleue car les balises p sont toutes des enfants de la balise body.

L'imbrication de balise

div p {
    color:green;
}

Seul les paragraphes situé à l'intérieur d'une balise div auront une couleur verte.

HTML & CSS