Télécharger le PDF du cours
Dans cette nouvelle partie, nous allons passer en revue les notions de base du CSS en comprenant notamment les grands principes de fonctionnement de ce langage et en apprenant à cibler des contenus de manière précise pour pouvoir leur appliquer des styles.
Les sélecteurs CSS : définition
Pour pouvoir appliquer un style à un contenu, il va déjà falloir le cibler, c’est-à-dire trouver un moyen d’indiquer qu’on souhaite appliquer tel style à un contenu en particulier.
Pour cela, nous allons utiliser des sélecteurs. Les sélecteurs sont l’un des éléments fondamentaux du CSS.
De manière très schématique et très simplifiée, nous allons utiliser nos sélecteurs en CSS pour cibler des contenus HTML et leur appliquer des styles.
Il existe différents types de sélecteurs en CSS : certains sélecteurs vont s’appuyer sur le nom des éléments, comme le sélecteur CSS p par exemple qui va servir à cibler tous les éléments p d’une page. Ce type de sélecteurs est appelé « sélecteur d’éléments » tout simplement car ils vont être identiques aux éléments HTML sélectionnés ou encore « sélecteurs simples ».
D’autres sélecteurs, en revanche, vont être plus complexes et nous permettre de sélectionner un élément HTML en particulier ou un jeu d’éléments HTML en fonction de leurs attributs ou même de leur état : on va ainsi pouvoir appliquer des styles à un élément uniquement lorsque la souris de l’utilisateur passe dessus par exemple.
See the Pen Cours HTML CSS 3.1.1 by Pierre (@pierregiraud) on CodePen.
N’essayez pas forcément de comprendre immédiatement le code ci-dessus : le but n’est ici que de vous fournir un exemple concret de ce qu’on va pouvoir faire en CSS. Nous allons apprendre à utiliser la majorité des sélecteurs CSS et notamment les plus courants et les plus utiles dans la suite de ce cours.
Les propriétés CSS : définition
Les propriétés vont nous permettre de choisir quel(s) aspect(s) (ou “styles”) d’un élément HTML on souhaite modifier.
Par exemple, nous allons pouvoir modifier la couleur d’un texte et lui appliquer la couleur que l’on souhaite grâce à la propriété color (« couleur », en français).
Une propriété va être accompagnée d’une ou plusieurs valeurs qui vont définir le comportement de cette propriété.
Par exemple, la propriété color peut prendre le nom d’une couleur (en anglais). Si l’on donne la valeur red (rouge) à notre propriété color, les textes au sein des éléments HTML auxquels on applique cette propriété s’afficheront en rouge.
Les déclarations CSS : premier exemple pratique
Prenons immédiatement un premier exemple ensemble en expliquant bien à quoi correspond chaque élément du code afin d’illustrer ce que nous venons de dire et de bien voir comment le CSS fonctionne.
Je vous demande pour le moment de ne pas vous soucier des questions pratiques concernant la liaison entre les codes HTML et CSS mais simplement de vous concentrer sur le code CSS présenté.
Détaillons le code CSS ci-dessus. Ici, nous utilisons le sélecteur CSS simple p pour cibler tous les paragraphes de nos pages HTML. Ensuite, nous ouvrons une paire d’accolades. Entre ces accolades, nous allons préciser les différents styles que l’on souhaite appliquer à nos éléments p.
En l’occurrence, on définit une couleur, bordure et une marge interne personnalisées pour tous nos paragraphes grâce aux propriétés CSS color, border et padding.
Le texte de nos paragraphes va donc s’afficher en bleu et nos paragraphes auront des bordures solides oranges de 2px d’épaisseur et des marges internes de 5px.
Le couple « propriété : valeur » est appelée « déclaration » en CSS. Chaque déclaration doit se terminer par un point-virgule.
On va pouvoir écrire autant de déclarations que l’on souhaite à l’intérieur du couple d’accolades qui suit un sélecteur en CSS et ainsi pouvoir définir le comportement de plusieurs propriétés facilement.
See the Pen Cours HTML CSS 3.1.2 by Pierre (@pierregiraud) on CodePen.
