Vous connaissez déjà les 6 principaux styles.

Maintenant nous allons apprendre à adapter certains styles en fonction de l'appareil qui lira le fichier HTML ! Et, même à ne pas afficher certaines parties d'une page web en fonction de l'appareil. Nous finirons ce mini-cours en apprenant à arrondir les angles ...

@media

Les principaux appareils pouvant lire un fichier HTML sont :

l'ordinateur => screen
le smartphone => handheld
l'imprimante => print

Les principaux autres identifiants d'appareil sont : aural ( navigateur pour les aveugles qui lit le texte ), braille ( navigateur pour les aveugles qui transcrit en braille ), projection ( pour les rétroprojecteurs ), tv ( pour les télévisions ).

Les smartphones ont un écran tactile de petite taille, on peut y lire le texte. Mais, si plusieurs liens sont proches et qu'on tente de cliquer avec son doigt, on risque de cliquer sur l'autre lien ! Pour éviter, il faudrait que le lien grossisse lorsque la souris ( le doigt ) passe sur lui.

Exemple de code CSS pour les smartphones

/* Uniquement pour les smartphones */
@media handheld {

body { margin: 0px; }
a:hover { font-size: 200%; }

}

Lorsque la liste des styles n'est pas contenue entre des accolades précédées par @media suivi de l'identificateur de type d'appareil, cette liste de styles s'adresse à un écran d'ordinateur.

Ici, les styles s'adressent au navigateur d'un smartphone ( handheld ). On supprime les marges ( intérieures du body ) et pour faciliter le clic sur un lien on double la taille du lien.

display

Parfois, on ne souhaite pas que certaines parties de la page s'imprime.

Le style qui permet d'afficher ou non une zone est display.

Les valeurs autorisées pour ce style sont : none, ...

none signifie non. Il existe d'autres valeurs mais nous les verrons pas dans ce cours.

Exemple de code CSS pour l'impression

/* Uniquement pour l'impression */
@media print {{

footer { display: none; }
.no_print {display: none}

* {color: black; background-color: white}

}

Ici, les styles s'adressent à une imprimante. Le pied de page ne s'imprimera pas ainsi que les balises ayant class="no_print". De plus, toutes les balises auront une couleur de texte noire et un fond blanc ( pour éviter de vider une cartouche d'encre avec un fond noir ... ).

* est un sélecteur signifiant toute balise.

Cet exemple illustrera l'incroyable puissance du CSS. Les couleurs vont changer en fonction de la taille de l'écran !
media_screen.htm ( Si la taille de la fenêtre est inférieur à 800px, la page devient blanche ! )


body {color: black; background-color: white}

/* Pour écran normal inférieur à 800px */
@media screen and (min-width: 800px) {

body {color: white; background-color: black}

}

On constate que les couleurs changent lorsque la taille de l'écran devient inférieure ou supérieure à 800px.

Voici un exemple spectaculaire, où le texte apparaît lorsqu'on clique sur un titre !
todo.htm

Ici, le fichier HTML inclut un peu de JavaScript ( que nous étudions plus tard ). Néanmoins, si vous êtes curieux, voici l'explication.

border-radius

Le style qui permet d'arrondir les angles des coins des blocs est border-radius. Ce style est nouveau ( et est propre à la version CSS 3 ).

Les valeurs autorisées s'expriment en pixels, comme pour les styles margin et padding. Elles varient généralement entre 3px et 30px.

Appliquons ce nouveau style au fichier HTML border_radius.htm.

On constate bien que les bords de bloc sont arrondis. Mais, faute d'un padding suffisant le texte déborde parfois.

Où placer le code CSS ?

Le code CSS peut être écrit dans 3 endroits :

dans un fichier .css ( relié au fichier HTML par la balise <link /> )
comme contenu de la balise <style>
comme valeur de l'attribut "style"

Le code peut être réparti dans ces 3 endroits. Le code situé dans l'attribut a priorité sur celui contenu dans la balise qui a priorité sur celui contenu dans le fichier.

Fichier .css

Un fichier .css permet d'obtenir facilement le même style pour toutes les pages web. C'est le cas le plus courant.

<!DOCTYPE html>

<html lang="fr-BE" xmlns="http://www.w3.org/1999/xhtml">
  <head>
     <meta charset="UTF-8" />
     ...
     <link rel="stylesheet" href="cours4.css" />
     <title>Mini-cours de CSS</title>
  </head>

Balise : style

La balise <style> permet de personnaliser une seule page web.

<head>
  ...
  <link rel="stylesheet"  href="cours.css">
  <style>
        body {background-color : grey;}
  </style>
    ...
</head>

Exemple

Attribut : style

L'attribut "style" permet de personnaliser une seule zone.

<div style="background-color: red; color: white">
    <p>Toutefois, il est possible de pousser encore plus loin la personnalisation en fixant
    l'apparence d'une seule zone, via l'attribut "style".</p>
    <p>N'oublions pas qu'une zone peut contenir plusieurs zones. Ici, deux paragraphes.</p>
</div>

Exemple

En résumé,

Grâce au CSS, le fichier HTML peut s'afficher différemment selon la taille de l'écran ou le type d'appareil (smartphone, imprimante, ...)
Le style display permet de ne pas afficher certains contenus de la page web.
Le style boder-radius permet d'arrondir les coins des blocs. Il faut alors généralement utiliser le style padding pour éviter que le texte ne déborde.
Le code CSS se trouve généralement dans un fichier. Cependant, il est possible de personnaliser une page web via la balise <style> ) et même une zone de cette page ( via l'attribut "style" ).

Constatons l'évolution :

Voilà, vous savez tout ce qui nécessaire pour créer de superbes notes.
Vous êtes capable de comprendre le fichier CSS utilisé pour ce mini-cours.

Maintenant, c'est à vous de jouer !

Après avoir fait de jolies pages web, probablement, dans un an, vous aurez envie qu'elles soient un peu plus vivantes grâce au JavaScript