CSS

Introduction

Comme dit sur le tuto HTML, le HTML est pensé pour séparer le fond de la forme.

En particulier, tout le décorum de la page: la taile du texte, les couleurs, le placement non-linéaire des différents composants ne doit pas être fait par les balises HTML, mais laissé au ''Cascading Style Sheets'' (CSS), les feuilles de style en cascade.

Cela présente un certain nombre d'avantages:

séparation des préoccupations
lisibilité de l'un et de l'autre
changement très facile de la forme d'un document
réutilisation d'un même style pour plusieurs document (et donc cohérence de présentation d'un site complet)
interopérabilité : affichage sur le web, sur papier, etc.
durabilité : les techniques liées à la forme évolueront, le document perdurera

La documentation complète de CSS 2.1 se trouve sur http://www.w3.org/TR/CSS21/

Une démo de ce qui est possible:

          http://www.csszengarden.com/

une page HTML, de multiples CSS (Control-U pour voir le code source de la page)

Concept

Une feuille de style CSS est une table d'association associant des règles de présentation à des sélecteurs:

Chaque règle est appliquée aux éléments (aux balises) satisfaisant le sélecteur. Il y a trois sortes principales de sélecteurs:

Le nom de la balise: toutes les balises avec ce nom se verront appliquées la règle
Une valeur d'attribut id: seule la balise avec cet ID se verra appliquée la règle
Une valeur d'attribut class: toutes les balises avec cette valeur dans leur attribut class se verront appliquées la règle.

Exemples de sélecteurs

* tout élément (sélecteur universel)
h1 tout élément de type h1
h1 em tout élément em situé dans un élément h1 (descendant)
h1 > em tout élément em situé directement dans un h1 (fils)
p:first-child tout élément p qui est le premier enfant de son parent
p[lang] tout élément p dont l'attribut lang est défini
p[lang="fr"] tout élément p dont l'attribut lang vaut fr
p.toto tout élément p dont l'attribut class vaut toto. Équivalent à p[class="toto"]
.toto tout élément dont l'attribut class vaut toto
h1#intro l'élément h1 dont l'attribut id vaut intro

Exemples de règles

Une règle est le plus souvent sous la forme proprièté: valeur; (Notez le point virgule) On associe des règles à un sélecteur comme suit:

sélecteur {
  règle1;
  ...
  règleN;
}

Si est longue, on peut noter néanmoins les exemples parlant d'eux-même:

border: 2px solid red;
border-radius: 10px;
margin: 1em;
padding: 2px;
font-size: 12px;
font-weight: bold;
font-style: italic;
font-family: Arial, sans-serif;

On peut aussi mettre de la couleur:

background-color: #FFC0CB;
color: blue;

Les couleurs peuvent être données par leur nom ou leur code hexadécimal. Si tout code hexadécimal est de fait une couleur valide, certaines sont plus compatibles que d'autres avec tous les media graphiques.

On peut aussi mettre des images:

background-image: url(fichier-image)
background-repeat: repeat / no-repeat / repeat-x/y
background-attachment: scroll / fixed
background-position: ...

Prise en compte des règles

Si plusieurs règles contradictoires, laquelle est prise en compte ? On applique alors une "cascade", d'où le nom de ces feuilles de style:

Trouver toutes les règles qui s'appliquent à l'élément, pour le média donné
Les classer ainsi (ordre de priorité croissant) :
- règles de base définies par le navigateur
- règles définies par l'utilisateur
- règles définies par l'auteur de la page web
- règles définies par l'auteur et marquées !important
- règles définies par l'utilisateur et marquées !important
Si ex-aquo, les règles issues des sélecteurs les plus spécifiques l'emportent
Si encore des ex-aequo, on utilise l'ordre d'apparition

Placement des feuilles de style CSS

Dans un fichier externe

Dans l'en-tête, ajouter :

<link rel="stylesheet" type="text/css" href="fichier.css"/>

Dans l'en-tête du document :

<style type="text/css">
...
</style>

Directement sur les balises (déconseillé)

Avec l'attribut style="...". Dans ce case, on ne met que des règles, pas de sélecteur.

<p style="color: red; border: 2px solid red;">blabla</p>

Type de média

Il est possible de définir plusieurs feuilles de style, selon le support utilisé pour "rendre" la page: outre les différentes tailles d'écrans d'ordinateur, une page internet peut être appelée d'une tablette, d'un téléphone, d'un navigateur texte, d'une imprimante, d'une télévision (donc avec une qualité d'image potentiellement médiocre). La page peut aussi être "lue" par un navigateur spécifique pour mal-vvoyant, mal-entendant, ...

On a donc différents « médias » : all, aural, braille, embossed, handheld, print, projection, screen, tty, tv

Dans la feuille de style, on utilisera

@media print {...}
@media screen {...}

@import "style-print.css" print;
@import "style-screen.css" screen;

Depuis une page HTML:

<link rel="stylesheet" href="screen.css" media="screen, handheld" />
<link rel="stylesheet" href="handheld.css" media="handheld" />

Comme iOS et Android savent faire le même rendu qu'un navigateur de PC, ils obéissent au média screen et non handheld...

Depuis la version 3 de CSS, une extension des médias permets d'interroger la taille de l'écran, si on y tient vraiment:

@media only screen and (max-device-width: 480px) { ...  }

Formatage: notion de boite

Tout élément textuel constitue une boîte

Tout élément textuel constitue une boîte. Il y a deux types de boites :

les blocs (display: block)
- les un au-dessus des autres en flux normal
- peuvent flotter
les éléments en ligne (display: inline)
- mis les uns au bout des autres
- contenus dans des blocs

Mise en forme des boites

Positionnement

Il est possible de spécifier très précisemment comment et où placer chaque blocs, avec la règle position. Ceci dit, en général ''c'est une mauvaise idée'' de l'utiliser, et donc je vous laisserai lire quels sont ses valeurs possibles et comment faire sans. En bref, fixer soit-même sa présentation est difficile avec la variété des tailles et des rendus ds navigateur: cela (peut) casser la compatibilité de la page avec certains terminaux. En priorité, il vaut mieux jouer sur les marges, paddings, text-align, ...

Parlant de positionnement, on peut par contre spécifier un positionnement flottant avec la règle float qui peut prendre comme valeur left ou right: La boîte est sortie du flux de la page et estconsidérée comme un bloc alignée à gauche (float: left) ou à droite (float: right).

Les boîtes du flux normal coulent autour du flottant
Une boîte peut indiquer qu'elle ne veut pas de flottants
- à sa gauche ou à sa droite (clear: left ou clear: right)
- ou des deux côtés (clear: both)

Par exemple, pour faire une mise en page à deux colonnes, on peut faire

une colonne de droite flottante, de largeur fixe
ou une colonne de gauche en flux normal, mais avec une marge de droite égale à la largeur de la colonne de droite

Notion de Layout

Si on veut faire des choses un peu plus compliquées, il existe aussi en CSS ce qui s'appelle des layouts. En voici deux présentés sur css-tricks, que je vous laisse le soin d'expérimenter:

Derniers conseils

Voila ce qu'il ne faut PAS faire:

Utiliser des tables pour agencer sa page. Les tables sont faites pour faire... des tableaux.
Utiliser position à tort et à travers
Saupoudrez du CSS partout dans sa page
Utiliser des noms de classe et d'ID parlant de style plutôt que de contenu. On utilisera comme nom de classe highlighted plutôt que red. Ou encore descriptionproduit plutôt que douzepointsarial