Typographie, Couleurs et Bonnes Pratiques CSS

Finaliser vos projets web

Séance 7 - DSP - USAL33

Rappel séance 6

Ce que nous avons vu

CSS Grid

  • display: grid pour créer des grilles

  • grid-template-columns pour définir les colonnes

  • repeat() et auto-fit pour des grilles responsives

Responsive

  • Media queries avec @media (min-width: XXXpx)

  • Approche mobile-first

Aujourd’hui :

  • Typographie

  • Couleurs et effets visuels

1. Typographie

Les propriétés essentielles

Propriété

Rôle

Exemple

font-family

Choix de la police

Arial, sans-serif

font-size

Taille du texte

16px, 2rem

font-weight

Graisse

normal, bold, 700

line-height

Interligne

1.6

text-align

Alignement

left, center, right

Polices système et Google Fonts

Polices sûres :

font-family: Arial, sans-serif;
font-family: Georgia, serif;

Google Fonts :

  1. Aller sur https://fonts.google.com

  2. Copier le lien dans le <head>

  3. Utiliser dans le CSS

body {
    font-family: 'Roboto', sans-serif;
}

Maximum 2-3 polices par site

Tailles et interligne

Tailles recommandées :

body { font-size: 16px; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }

Interligne pour la lisibilité :

p {
    line-height: 1.6;  /* Texte courant */
}

h1 {
    line-height: 1.2;  /* Titres */
}

2. Couleurs et Effets

Formats de couleurs

Hexadécimal :

color: #ff0000;  /* Rouge */
color: #333;     /* Gris foncé */

RGB et RGBA :

color: rgb(255, 0, 0);        /* Rouge */
background: rgba(0, 0, 0, 0.5); /* Noir à 50% */

RGBA permet la transparence (de 0 à 1)

Dégradés

/* Dégradé simple */
background: linear-gradient(to right, #667eea, #764ba2);

/* Dégradé diagonal */
background: linear-gradient(135deg, #667eea, #764ba2);

/* Plusieurs couleurs */
background: linear-gradient(to right, red, yellow, green);

Ombres

Ombre d’élément :

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

Ombre de texte :

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

Valeurs : horizontal, vertical, flou, couleur

Variables CSS

Définir des variables :

:root {
    --primary: #3498db;
    --secondary: #2ecc71;
    --text: #2c3e50;
}

Utiliser :

.button {
    background-color: var(--primary);
    color: white;
}

Changer une couleur partout en un seul endroit

3. Bonnes Pratiques

Organisation du CSS

/* Reset et variables */
* { box-sizing: border-box; }
:root { --primary: #3498db; }

/* Éléments de base */
body { font-family: Arial, sans-serif; }

/* Layout */
.container { max-width: 1200px; }

/* Composants */
.button { padding: 10px 20px; }

/* Media queries */
@media (min-width: 768px) { }

Nommage des classes

Descriptif et clair :

/* Mauvais */
.btn1 { }
.box { }

/* Bon */
.button-primary { }
.product-card { }

En minuscules avec tirets :

.main-navigation { }

Méthodologie BEM

Block Element Modifier

.card { }                /* Block */
.card__title { }         /* Element */
.card--featured { }      /* Modifier */

<div class="card card--featured">
    <h3 class="card__title">Titre</h3>
</div>

Accessibilité et validation

Contraste minimum :

  • Texte normal : ratio 4.5:1

  • Tester sur https://webaim.org/resources/contrastchecker/

Taille minimum :

  • 16px pour le texte principal

Validation W3C :

  • https://jigsaw.w3.org/css-validator/

Questions ?