TP CSS

Page simple avec les concepts principaux du TP.

Exercice 1 : Selecteurs et specificite

Exemples de selecteurs :

.main-nav a
.main-nav a.active
.post.featured
article p:first-of-type
li:nth-child(even)

Premier paragraphe

Contenu normal

Premier paragraphe

Contenu normal

Specificite croissante : p < .text < p.text < #main < #main .text p

content-box : largeur totale = 350px

Box content-box

border-box : largeur totale = 300px

Box border-box

*,
*::before,
*::after {
  box-sizing: border-box;
}

Element centre horizontalement

Centre avec Flexbox

Contenu court.

Lien

Contenu plus long pour voir que le lien reste en bas.

Lien

Contenu moyen.

Lien

Carte 1

Carte 2

Carte 3

Carte 4

Carte 5

Carte 6

Main

Contenu principal

Mobile first : on commence par le style mobile puis on ajoute les media queries avec min-width.

Theme clair

Theme sombre