Lycée > Seconde > SNT > Le langage CSS et les sélecteurs

Le langage CSS et les sélecteurs

Fiche de cours Quiz Profs en ligne Vidéos Télécharger le pdf

Fiche de cours Quiz Profs en ligne Vidéos Télécharger
le pdf

Objectifs

Savoir que les langages HTML et CSS sont indissociables en développement web.
Savoir ajouter du style aux pages HTML.
Connaitre le langage CSS.
Connaitre les sélecteurs CSS.
Définir le code RVB.

Points clés

Afin de rendre plus agréable la visualisation des pages web, il est possible de modifier le style de la page web en ajoutant des sélecteurs CSS au code HTML.
Le code HTML des couleurs (ou code RVB) permet de choisir n’importe quelle couleur pour le texte ou le fond de la page web, à l’aide d’un nombre que l’on ajoute en tant que paramètre dans les sélecteurs CSS. Ce nombre permet de régler l’intensité lumineuse des trois couleurs principales de la lumière blanche.

Pour bien comprendre

Connaitre le langage HTML

Pour créer une page web, on utilise des balises pour afficher des textes et des images. Il est également possible d’ajouter des styles et des mises en forme sur cette page.

1. Le langage CSS

En surfant sur le web, on peut trouver des pages avec :

un texte ou un fond de page en couleur ;
des polices de caractères et de tailles différentes ;
etc.

Pour modifier la présentation d’un document, il est nécessaire d’apprendre un autre langage, le langage CSS.

Le langage CSS est un langage informatique qui permet de modifier la forme des éléments d’une page HTML en appliquant des styles. L’acronyme CSS signifie « Cascading Style Sheets », c’est-à-dire « feuilles de style en cascade » en français.

Remarque
Les langages CSS et HTML sont bien deux langages différents ; il ne faut pas les confondre, même si on parle tout le temps du duo HTML/CSS lorsqu’on fait du développement web.

Exemples

Balises HTML :
<html></html> ; <head></head> ; <title></title>.
Sélecteurs CSS :
{
color: rgb(xx, xx, xx);
}
{
background-color: rgb(xx, xx, xx);
}

2. Les sélecteurs

Pour appliquer des styles à une page HTML, il faut insérer un sélecteur de code CSS dans le code HTML.

Un sélecteur permet de représenter les éléments pour lesquels on définit un ensemble de règles CSS.

Certains sélecteurs permettent de changer la couleur du texte et d’autres la couleur de fond de la page web.

Tout ce qui se trouve entre les balises <style> et </style> est analysé comme du CSS par le navigateur. Par conséquent, ce qui est en dehors de ces balises est analysé comme du HTML. Pour ajouter des éléments CSS, il faut donc les insérer à l’intérieur des balises <style> et </style>.

Exemple
Le code ci-dessous comporte le sélecteur <color>. Ce sélecteur permet d’appliquer de la couleur à une partie de la page web (tout ce qui se trouve entre les balises <h2> et </h2>), en utilisant le code des couleurs RVB.

Appliquer de la couleur grâce à un sélecteur

Remarque
<color> est l’un des sélecteurs CSS les plus utilisés. Il permet de représenter des couleurs en faisant appel au code RVB.

3. Le code RVB

Le code RVB (ou RGB en anglais) est le code HTML des couleurs. C’est un système de codage informatique des couleurs où les lettres R, G et B signifient respectivement « Red » (rouge), « Green » (vert) et « Blue » (bleu).

Ce code permet de choisir n’importe quelle couleur pour le texte ou le fond de la page web, à l’aide d’un nombre que l’on ajoute en tant que paramètre dans les sélecteurs CSS.

Ce nombre permet de régler l’intensité lumineuse des trois couleurs principales de la lumière blanche ;
Plus les nombres entre parenthèses sont importants, plus l’intensité de la couleur est importante ;
Ce nombre sera compris entre 0 et 255 :
- 0 est l’intensité minimale de la couleur proposée,
- 255 est l’intensité maximale de la couleur proposée.

Exemple