Cours 9¶

Propriétés typographiques¶

font-family¶

Définit la police utilisée.

body {
  font-family: Arial, Helvetica, sans-serif;
}

Bonnes pratiques : • Utiliser une pile de polices (fallbacks) • Préférer des polices Web-safe ou utiliser Google Fonts

font-size¶

Taille du texte.

h1 {
  font-size: 2em;
}

Unités communes : • px : pixels fixes • em / rem : relatives (accessibilité recommandée)

font-weight¶

Épaisseur de la police.

a {
  font-weight: bold; /* ou 700 */
}

line-height**¶

Espacement entre les lignes.

p {
  line-height: 1.5;
}

Alignements et décorations¶

text-align¶

Alignement horizontal :

p {
  text-align: center;
}

text-decoration¶

Ajoute une ligne :

a {
  text-decoration: underline;
}

Autres valeurs : none, overline, line-through

text-transform¶

Transforme la casse :

h1 {
  text-transform: uppercase;
}

Couleurs et unités¶

Couleurs CSS • Mots-clés : black, white, red, etc. • Hexadécimal : #ff0000 • RGB / RGBA : rgb(255, 0, 0), rgba(255, 0, 0, 0.5) • HSL / HSLA : hsl(0, 100%, 50%)

Bonnes pratiques : • Contraste suffisant pour l’accessibilité • Cohérence visuelle (charte graphique)

Unités CSS¶

Unité	Signification	Exemple
px	pixels (absolue)	font-size: 16px;
%	pourcentage par rapport au parent	width: 80%;
em	relatif à la taille du parent	font-size: 1.2em;
rem	relatif à la taille du html root	font-size: 1rem;

États interactifs CSS¶

Les pseudo-classes permettent de styliser les éléments en interaction.

:hover¶

Quand la souris survole :

a:hover {
  color: orange;
}

:active¶

Quand on clique :

button:active {
  transform: scale(0.98);
}

:focus¶

Quand un élément est sélectionné (formulaire par exemple) :

input:focus {
  outline: 2px solid blue;
}

Dimensions et bordures¶

width / height

img {
  width: 300px;
  height: auto;
}

border

p {
  border: 1px solid #ccc;
}

Permet de dessiner un contour :

Options : • Epaisseur (1px) • Style (solid, dashed, dotted) • Couleur

Bordures arrondies

div {
  border-radius: 10px;
}