Cours feuilles de style CSS

Motivations

Comme on l'a vu à la fin du cours sur le langage HTML, les éléments de mise en page (comme FONT par exemple) sont exclus du langage HTML.

Il s'agit d'un paradigme général consistant à dissocier le contenu d'un document de sa forme. Ici, le langage HTML est destiné à décrire sémantiquement et à structurer le contenu, les feuilles de style dont nous allons discuter dans la suite servant elles à décrire la forme du document.

Les intérêts de cette séparation sont nombreux :

un style, appliqué à toutes les pages d'un site, assure la cohérence graphique de ce site ;
la maintenance d'un site en est facilitée, un changement de charte graphique ne portera que sur la feuille de style et la modification sera naturellement propagée à toutes les pages ;
plusieurs mises en forme différentes peuvent être proposées pour un même document sans que celui-ci ne soit répliqué en autant d'exemplaires ;
le code HTML est lisible et facilement modifiable, sans que l'on ait à penser en même temps au contenu et à son apparence ;
les pages, dégagées des balises de mise en forme, sont plus légères, donc plus rapides à circuler sur un réseau (la feuille de style est, le plus souvent, très légère et ne sera chargée qu'une seule fois pour l'ensemble des documents qui l'utilisent) ;
les balises donnent une indication sur la nature du contenu et cette indication pourra être utilisée par un moteur de recherche.

La solution retenue pour décrire des mises en forme se nomme donc feuilles de style ou, en anglais, Cascading Style Sheets (CSS). En cascade signifie que sont prises en compte les feuilles du navigateur, de l'utilisateur, puis de l'auteur du document. Les CSS peuvent être rapprochées des styles et des modèles de document des traitements de texte.

Enfin, précisons que les CSS que nous allons associer à des documents HTML, peuvent aussi être liées à des documents XML, ces derniers deviennent alors visualisables sur des navigateurs web. C'est une raison supplémentaire pour maîtriser le langage CSS.

Application d'un style à un code HTML

Dans une balise ouvrante, avec l'attribut STYLE

<EM style="color:silver;">texte en argenté</EM>

Le style ne vaut alors que pour le contenu balisé.

Dans l'en-tête du document HTML

<STYLE>
  ici des définitions de style
</STYLE>

Les styles définis à cet endroit sont valables pour le contenu de ce document.

Fichier externe

Les styles sont définis dans un fichier texte avec l'extension .css et sans utiliser de balise STYLE.

Puis dans l'en-tête du document HTML, on fait un lien vers ce fichier CSS :

<LINK REL="stylesheet" HREF="bla.css">

Cette fois, les styles sont communs à tous les documents HTML qui pointeront vers ce fichier CSS. Si les deux méthodes précédentes peuvent être utiles, c'est bien cette troisième qu'il faut privilégier sur un site web.

Association d'un style à un élément HTML

Sélecteurs de types

Dans ce cas, on ne précise que les noms des balises concernées par la définition du style :

BODY {
     margin: 0.5cm;
}
    
H1 {
  font-family: Wide Latin;
}

H1, H2, H3 {
  font-family: Wide Latin, Arial Black, Helvetica, sans-serif;
  color: red;
}

P {
  color: blue;
}

Sélecteurs d'attributs (CLASS ou ID)

Il est également possible de proposer des apparences différentes pour une même balise. Nous avons précédemment décrit le style associé de manière générale aux balises P et nous allons maintenant définir un autre style pour certains paragraphes dits ecolo. Cela passe par une distinction dans le code HTML :

<P CLASS="ecolo">
un paragraphe...
</P>

Puis, on utilisera la syntaxe suivante pour décrire les caractéristiques de ces paragraphes particuliers :

P.ecolo {
  color: green;
}

Plus généralement, on peut spécifier l'apparence d'une classe sans préciser d'élément :

.ecolo {
  color: green;
}

Cela aura pour effet de faire apparaître en vert toutes les textes contenus dans balises de classe ecolo :

<H1 CLASS="ecolo">Titre militant</H1>

<P CLASS="ecolo">
un paragraphe qui parle d'écologie...
</P>

Enfin, plutôt que de parler d'une classe, il est possible de ne donner un style que pour une apparition unique d'un élément donné. Pour cela, il faut repérer la balise ouvrante correspondant en lui donnant un identifiant unique :

<P ID="intro">
  bla bla bla bla bla bla
  bla bla bla bla bla bla
  bla bla bla bla bla bla introductif
</P>

Puis de définir le style du paragraphe nommé intro en utilisant la syntaxe suivante :

#intro { color: blue; }

L'unicité ne vaut que dans un document. Ainsi, chaque document de notre site web peut avoir ou non une intro, mais pas plus d'une.

Par contexte

Stylage d'un descendant :

UL LI { font-size: small}

UL LI LI { font-size: x_small} /* stylage des items li descendants eux-mêmes d'un item li */

Stylage d'un descendant direct :

section > h1 { color: red; } /* stylage des titres h1 fils directs d'une section */

Par pseudo-classes et pseudo-éléments

Les pseudo-classes permettent de repérer et de styler certains contenus déjà balisés, comme si l'on leur rajoutait une classe :

A:link
A:hover		/* (passage de souris) */
A:active
A:visited

p.ecolo:link {color: lime }
p.ecolo:visited {color: olive }

Les pseudo-éléments permettent de repérer et de styler certains contenus qui ne sont pas balisés, comme si l'on leur rajoutait des balises autour :

P::first-line
P::first-letter

DIV et SPAN

Il s'agit d'éléments HTML dont le seul rôle est de délimiter une zone associée à un style : DIV pour les blocs de texte (à la manière d'un paragraphe), SPAN pour une suite de mots dans un texte. Sans style, ces balises ne produisent rien de particulier.

Avant d'avoir recours à ces éléments pauvres sémantiquement, il est préférable d'envisager l'utilisation des éléments sémantiques proposés par html5.

Gestion des médias

Association avec un média particulier

Il est possible de préciser le média auquel est dédié une feuille de style. Les médias possibles sont : all, aural, braille, embossed, handheld, print, projection, screen, tty, tv.

La précision du média visé peut se faire dans l'en-tête de la page HTML :

<LINK REL="stylesheet" HREF="site.css"  MEDIA="screen">
<LINK REL="stylesheet" HREF="print.css" MEDIA="print">

ou au sein d'une même feuille de style :

@media print {
   BODY { font-size: 10pt }
}

@media screen {
  BODY { font-size: 12pt }
}

Aujourd'hui les objets connectés permettant de visualiser des pages web sont devenus très divers et ce mécanisme n'est plus suffisant pour traiter toutes les possibilités. En particulier, handheld ne peut pas permettre de spécifier un affichage qui conviendrait à tous les smartphones, tablettes et ordinateurs portables !

Media queries

@media screen and (max-width: 640px) {
  body {
    color           : red;
    background-color: black;
  }
}
@media screen and (min-width: 640px) and (max-width: 1280px) {
  body {
    color           : black;
    background-color: red;
  }
}

@media screen and (orientation:portrait) {
  div.menu {
    display: none; visibility: hidden;
  }
}

Préférence sombre/clair

@media (prefers-color-scheme: light) {
  body {
    color: black;
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: black;
  }
}

Tous les détails : boîtes, propriétés, pseudo-classes

Notion de boîte

La mise en page à l'aide de CSS repose sur la notion de boîtes : il faut imaginer que tout contenu entre une balise ouvrante et une balise fermante est en fait dans une boîte. À l'aide des feuilles de style, on va pouvoir spécifier l'apparence du contenu de la boîte (color, font, background, etc.), les espacements à l'extérieur de la boîte (margin) et les espacements à l'intérieur (padding).

Naturellement, l'imbrication des balises implique une imbrication des boîtes. Ainsi, les éléments <LI> sont vus comme des boîtes contenus dans une boîte représentant la balise <UL>.

Unités de mesure

px, mm, cm, in, pt, pc, em (hauteur des majuscules de la police en cours), en (hauteur des minuscules de la police en cours).

Propriétés de police

font-family : suite de noms de polices (si l'une manque sur la machine du client, on essayera la suivante), terminée par le nom d'une famille de polices (si aucune police n'a été trouvée, on prendra une police dans la famille spécifiée) ; cinq familles sont distinguées :
- serif (Times, etc.)
- sans-serif (Arial, Helvetica, etc.)
- cursive
- monospace (machine à écrire comme Courrier)
- fantasy
font-size
font-style (normal, italic, oblique)
font-variant (normal, small-caps)
font-weight (de 100 à 900, normal, bold)

Mise en forme du texte

white-space (normal, pre, nowrap) ;
word-spacing : l'espace entre les mots ;
letter-spacing : l'espace entre deux lettres au sein d'un même mot ;
text-decoration (none, underline, overline, line-through, blink) ;
text-transform (none, uppercase, lowercase, capitalize) ;
text-shadow.

Pour faire disparaître le soulignement des liens :

  A:hover {
	text-decoration: none;
  }

Agencement du texte

display (block, inline)
text-align (left, center, right, justify)
text-indent (taille du retrait de première ligne)
line-height (hauteur de ligne)
vertical-align (baseline, super, top, text-top, middle, text-bottom, bottom, sub)

Mise en forme de listes

list-style-type (none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, disc, circle, square) : type de numérotation ou de puce ;
list-style-image (none ou url(nom de fichier image)) : permet de spécifier une image servant de puce pour les listes ;
list-style-position (inside, outside) : position de la liste par rapport au reste du texte (décalage vers la droite ou pas) ;
list-style.

Couleurs et arrière-plans

color (rgb(0,0,255)) : couleur du texte ;
background-color : couleur du fond ;
background-image (url, ou uri ?) : image de fond ;
background-repeat (repeat, repeat-x, repeat-y, no-repeat) : mode de réplication de l'image de fond ;
background-attachement (scroll, fixed) : défilement ou non de l'image de fond ;
background-position : position d'ancrage du coin supérieur gauche de l'image de fond dans l'élément stylé ; avec des valeurs négatives et en jouant sur hauteur et largeur de l'élément, on fait des sprites.

Retraits extérieurs et intérieurs

margin, margin-top, margin-bottom, margin-left, margin-right : retraits extérieurs ;
padding, padding-top, padding-bottom, padding-left, padding-right : retraits intérieurs.

Cadres

border, border-top, border-bottom, border-left, border-right ;
border-style, border-style-top, border-style-bottom, border-style-left, border-style-right (solid, double, groove, ridge, inset, outset, dotted, dashed) ;
border-width ;
border-color.

Positionnement absolu des éléments

position (static, absolute, relative)
top
left
width
height
visibility (visible, hidden)
z-index: indique dans quel ordre doivent apparaître des éléments superposés (uniquement pour des éléments positionnés de manière absolue).

Les pseudo-classes et pseudo-éléments

:link, :visited
:hover (passage de souris), :active, :focus
:lang
::first-letter, ::first-line
::after, ::before

site de Fabien Torre

Notes de cours sur les feuilles de style