CSS 101 : Web Styling

This article contains AI generated content verified by a human.

Le rendu réel peut varier selon les navigateurs, donc il est recommandé d'utiliser des outils comme Firefox Developer ou Chrome DevTools pour vérifier.

Créer un fichier CSS

Dans votre projet web :

touch style.css

Puis reliez-le à votre fichier HTML principal :

<link rel="stylesheet" href="style.css">

Assurez-vous que le fichier style.css se trouve dans le même dossier que votre fichier HTML ou ajustez le chemin.

Sélecteurs de base

Les sélecteurs permettent de cibler les éléments HTML à styliser.

/* Sélection par balise */
h1 {
  color: blue;
}

/* Sélection par classe */
.title {
  font-size: 2rem;
}

/* Sélection par ID */
#main {
  padding: 20px;
}

/* Sélection imbriquée et descendant */
article p {
  font-style: italic;
}

/* Sélecteurs d’attribut */
input[type="email"] {
  border-color: #4a90e2;
}

Utilisez les classes pour les styles réutilisables, les IDs pour les éléments uniques. Préférez les sélecteurs simples pour éviter les conflits de spécificité.

Propriétés essentielles

Quelques propriétés CSS courantes pour démarrer :

html {
  box-sizing: border-box;
  font-size: 16px;
}

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

body {
  background-color: #f5f5f5;
  color: #333;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

p {
  margin-bottom: 1em;
}

• box-sizing : contrôle la façon dont la largeur/hauteur incluent bordures et padding
• font-family : police de caractères
• line-height : interligne
• margin, padding : espacement externe/interne
• color, background-color : couleurs du texte et du fond

Modèle de boîte (Box Model)

Comprendre largeur, bordure, padding et marge :

.card {
  width: 300px;
  padding: 16px;
  border: 1px solid #ddd;
  margin: 12px auto;
  border-radius: 8px;
  background: #fff;
}

• border : contour
• border-radius : angles arrondis
• box-shadow : ombre portée

.card.elevated {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

Unités et tailles

Choix des unités pour un design cohérent :

.title {
  font-size: 2rem;          /* relatif à la taille de police racine */
}

.content {
  max-width: 60ch;          /* largeur en nombre de caractères */
  padding: 1.5rem;
}

.button {
  padding: 0.5em 1em;       /* relatif à la taille de police de l’élément */
}

.image {
  width: min(100%, 480px);  /* fonction CSS moderne */
}

Mise en page : Flexbox

Pour créer des mises en page dynamiques :

.nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

.nav a {
  text-decoration: none;
  color: #333;
}

• display: flex : active le flux flexible
• gap : espace entre les enfants
• justify-content : alignement horizontal
• align-items : alignement vertical

Flexbox est idéal pour les barres de navigation, les cartes et les composants alignés.

Mise en page : CSS Grid

Pour des grilles complexes et responsives :

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.grid > .col-4 {
  grid-column: span 4;
}

.grid > .col-8 {
  grid-column: span 8;
}

• grid-template-columns : définition des colonnes
• grid-column : positionnement et span des éléments

Responsive design (Media queries)

Adapter le style selon la taille d’écran :

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    align-items: stretch;
  }

  .grid {
    grid-template-columns: 1fr;
  }
}

Testez avec les outils de développement pour simuler différents appareils. Utilisez min()/max()/clamp() pour des tailles fluides.

.title {
  font-size: clamp(1.25rem, 2vw + 1rem, 2rem);
}

Variables CSS (Custom properties)

Centraliser les couleurs et tailles :

:root {
  --color-primary: #0a84ff;
  --color-text: #1e1e1e;
  --radius: 10px;
  --space: 1rem;
}

.button {
  background: var(--color-primary);
  color: #fff;
  padding: var(--space) calc(var(--space) * 1.5);
  border-radius: var(--radius);
}

États, transitions et animations

Ajoutez du mouvement et des retours visuels :

.button {
  transition: background-color 0.25s ease, transform 0.15s ease-out;
}

.button:hover {
  background-color: #0666cc;
  transform: translateY(-1px);
}

@keyframes pulse {
  from { box-shadow: 0 0 0 0 rgba(10,132,255,0.4); }
  to   { box-shadow: 0 0 0 8px rgba(10,132,255,0); }
}

.badge.attention {
  animation: pulse 1.2s ease-out infinite;
}

Accessibilité de base

Assurer lisibilité et focus visibles :

:focus {
  outline: 3px solid #0a84ff;
  outline-offset: 2px;
}

body {
  color: #222;            /* contraste suffisant */
  background: #fff;
}

Ne désactivez pas l’outline des éléments focus sans alternative accessible.

Debug et test

Utilisez les outils intégrés du navigateur :

# Raccourci clavier
Ctrl + Shift + I  # Windows/Linux
Cmd + Option + I  # macOS

Astuce pour visualiser les boîtes :

* {
  outline: 1px solid rgba(0, 0, 0, 0.08);
}

Vous pouvez modifier le CSS en direct dans DevTools et observer cascade/spécificité avec le panneau Styles.

Structure conseillée des fichiers

Organisation simple pour petits projets :

index.html
style.css
components/
  buttons.css
  card.css
pages/
  home.css

Importer avec @import (petits projets uniquement) :

@import url("./components/buttons.css");
@import url("./components/card.css");

Pour la performance en production, préférez un bundler (ou un fichier CSS unique minifié) plutôt que plusieurs @import.

En savoir plus

• MDN Web Docs — CSS
• CSS Tricks
• Flexbox Froggy (apprentissage interactif)
• Grid Garden (apprentissage interactif)