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
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

Le code ci-dessus permet d’appliquer la couleur rgb(1, 230, 18) à une partie de la page web.
On étudie ce code :
  • 1 : composante rouge très faible en intensité (proche de 0) ;
  • 230 : composante verte très intense (proche de 255) ;
  • 18 : composante bleue d’intensité faible (proche de 0).
La couleur obtenue est donc verte.
Remarque
Pour obtenir d’autres couleurs, on peut faire varier les nombres dans les paramètres du sélecteur rgb de la manière suivante.
Couleur RGB Color Code
Noir rgb(0, 0, 0)
Rouge rgb(255, 0, 0)
Rouge foncé rgb(128, 0, 0)
Jaune rgb(255, 255, 0)

Comment as-tu trouvé ce cours ?

Évalue ce cours !

 

Question 1/5

La médiane de 6 notes est 13. Cela signifie que :

Question 2/5

On a obtenu la série statistique suivante :

Combien vaut la médiane ?

Question 3/5

On a obtenu la série ci-dessous :

Quelle est la médiane de cette série ?

Question 4/5

On a relevé les tailles en cm des élèves d’une classe :

 

Parmi les propositions suivantes, laquelle est vraie ?

Question 5/5

Les notes en français de deux classes littéraires sont données dans le tableau suivant :

Quelle est la note médiane ?

Vous avez obtenu75%de bonnes réponses !

Recevez l'intégralité des bonnes réponses ainsi que les rappels de cours associés :

Votre adresse e-mail sera exclusivement utilisée pour vous envoyer notre newsletter. Vous pourrez vous désinscrire à tout moment, à travers le lien de désinscription présent dans chaque newsletter. Pour en savoir plus sur la gestion de vos données personnelles et pour exercer vos droits, vous pouvez consulter notre charte.

Une erreur s'est produite, veuillez ré-essayer

Consultez votre boite email, vous y trouverez vos résultats de quiz!

Découvrez le soutien scolaire en ligne avec myMaxicours

Le service propose une plateforme de contenus interactifs, ludiques et variés pour les élèves du CP à la Terminale. Nous proposons des univers adaptés aux tranches d'âge afin de favoriser la concentration, encourager et motiver quel que soit le niveau. Nous souhaitons que chacun se sente bien pour apprendre et progresser en toute sérénité ! 

Fiches de cours les plus recherchées

SNT

Changer la couleur avec des sélecteurs CSS

SNT

L'URL

SNT

La requête HTTP

SNT

Le modèle client/serveur

SNT

Télécharger une page web sur un serveur

SNT

L'usage des réseaux sociaux

SNT

Violence et protection sur les réseaux sociaux

SNT

Principe et économie des réseaux sociaux

SNT

La modélisation des réseaux sociaux

SNT

Les caractéristiques des données structurées