Les attributs class et id

L'attribut class

Il permet de cibler plusieurs balises pour leur appliquer un style. En CSS, on fera précéder le nom de l'attribut d'un point (.).

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut neque, similique quo molestias velit perspiciatis pariatur, dolorem a quisquam fugit vero voluptatum architecto consequatur adipisci obcaecati placeat natus debitis corrupti!

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis dignissimos commodi corporis eius aut veniam dolore debitis libero deleniti natus voluptates sit inventore suscipit in quos distinctio vero, sunt adipisci?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores optio quod quis ratione cum dolorum aut perferendis exercitationem. Minima pariatur, quibusdam laborum excepturi similique tempore eligendi autem a dolorem maxime?

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa accusamus aspernatur ex doloribus iusto accusantium fugit possimus blanditiis minima doloremque. Blanditiis laudantium sed reiciendis. Nesciunt ab accusantium exercitationem nulla obcaecati.

L'attribut id

Il fonctionne de manière similaire mais il permet de cibler un seul élément pour :

• lui appliquer un style, en faisant précéder son nom d'un # en CSS
• le manipuler avec JavaScript (sera très utilisé dans le prochain chapitre)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maxime animi nesciunt laborum corrupti sapiente illum accusantium dolorem ipsam quia, neque voluptatibus esse tempore quae minima reiciendis! Nesciunt, amet cum.

Suscipit dolorem, praesentium ipsa molestias ut culpa nobis aperiam debitis nisi dolores magnam voluptatem? Et eius odio maxime, quod dolorem rem, natus, ducimus iste itaque tempora tempore dolores fuga perspiciatis.

Doloribus velit facilis reiciendis soluta qui accusamus, ex repellat ab sunt a quas excepturi nostrum perspiciatis esse minima porro eos animi ipsam libero! Perferendis quas voluptatibus culpa sunt laudantium tempore!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat earum, adipisci sequi perferendis quibusdam similique nulla, corporis quae recusandae dolore tempora quo itaque. Ipsam atque blanditiis facere id, optio aliquid?

Petits défis

Défi n°1

Les titres de niveau 2 "L'attribut class" et "L'attribut id" doivent être centrés et en bleu (mais pas ceux des défis !)

Défi n°2

Les 4 paragraphes précédant la première image doivent être écrits en rouge.

Défi n°3

Le deuxième titre de niveau 1 doit avoir une taille de police égale à 50px (mais pas l'autre !).

Défi n°4

Le dernier paragraphe de chaque partie (celui avant l'image) doit être aligné à droite.

Défi n°5

Seul le premier titre de niveau 2 (à savoir "L'attribut class") doit être écrit en blanc sur fond noir au survol de la souris. On pourra chercher de la documentation sur le pseudo-format :hover.

Défi n°6

La deuxième image uniquement doit être centrée. Vous pourrez chercher de la documentation sur le Web.