• Home
  • CSS – Facile

CSS – Facile

  • Course level: Intermédiaire

Description

Sélecteurs et propriétés CSS

Le CSS est un langage inventé pour styliser le contenu de nos pages en leur appliquant des styles.

Dans cette formation, nous examinerons les bases du CSS en incluant les grands principes de fonctionnement de ce langage et en apprenant à cibler le contenu de la manière la plus exacte possible pour leur appliquer au mieux des styles.

Les sélecteurs CSS : définition

Afin de pouvoir appliquer un style à un élément, vous devez le cibler pour le cibler, c’est-à-dire trouver un moyen d’appliquer ce style à un contenu particulier.

Pour cela, nous utiliserons un sélecteur.

Le sélecteur est l’un des fondements fondamentaux de CSS.

De manière très schématique et très simple, nous utiliserons nos sélecteurs en CSS pour cibler le contenu HTML afin de leur appliquer des styles.

Il existe différents types de sélecteurs en CSS: le sélecteur sera basé sur les noms des éléments, comme le sélecteur CSS p qui sera utilisé pour tous les p éléments d’une page.

Ce type de sélecteur est appelé un “sélecteur d’élément” tout simplement car ils seront identiques aux éléments sélectionnés, voire un “simple sélecteur”.

Par contre, d’autres sélecteurs seront plus complexes et permettront de sélectionner un élément HTML spécifique ou un ensemble d’éléments HTML en fonction de leurs attributs ou état: on ne pourra donc appliquer les styles pour un élément que lorsque la souris est survolé, par exemple.
Nous apprendrons à utiliser la majorité des sélecteurs, et en particulier les plus populaires et les plus utiles, plus loin dans ce cours.

Les propriétés CSS : définition

Les attributs nous permettront de choisir quel aspect de l’élément HTML nous voulons modifier.
Par exemple, nous pourrons modifier la couleur d’un texte et lui appliquer la couleur souhaitée grâce à la propriété color.
Un attribut sera accompagné d’une ou plusieurs valeurs qui détermineront le comportement de cette propriété.
Par exemple, la propriété color peut obtenir la couleur du nom.
Si nous fournissons une valeur rouge pour notre propriété, le texte de l’élément HTML avec cet attribut sera affiché en rouge.

Les déclarations CSS : premier exemple pratique

Prenons un premier exemple d’explication de chaque élément du code correspondant pour illustrer ce que nous venons de dire et voir comment fonctionne le CSS.
Je vous demande pour l’instant de ne pas vous soucier des problèmes pratiques liés à la liaison entre HTML et CSS, mais de vous concentrer uniquement sur le code CSS présenté.

Détaillons le code CSS ci-dessus.
Ici, nous utilisons le sélecteur CSS simple p pour tous les paragraphes de notre page HTML.
Ensuite, nous ouvrons une paire d’accolades.
Entre ces accolades, nous spécifierons les différents styles (CSS) que nous voulons appliquer à nos p éléments.
Dans ce cas, nous définissons une couleur personnalisée, une bordure et une marge interne pour tous nos paragraphes grâce aux propriétés de couleur, de bordure et de remplissage.
Le texte de tous nos paragraphes va alors s’afficher en bleu et nos paragraphes auront des bordures solides oranges avec 2px d’épaisseur et des marges internes de 5px.
La paire «propriété: valeur» est appelée «déclaration» en CSS.
Chaque déclaration doit se terminer par un point-virgule.
Nous pourrons écrire autant de déclarations que nous voulons à l’intérieur d’accolades qui suivent un sélecteur CSS et ainsi définir le comportement de certaines déclarations avec facilité.

Sujets pour ce cours

4 Leçons

CSS – Facile

Ou écrire le code CSS ?
Commentaires et indentation en CSS
Sélecteurs CSS simples et combinateurs
Introduction aux sélecteurs CSS complexes et combinateurs

À propos du formateur/de la formatrice

0 (0 notations)

12 Cours

1 apprenants

Gratuit