CSS3

CSS (Cascading Style Sheets) est le langage utilisé pour décrire la présentation visuelle des pages web.

Voir les discussions
CSS3

Prérequis

HTML image
HTML

HTML (HyperText Markup Language) est le...

Prochaine étape

Tailwind CSS image
Tailwind CSS

Tailwind CSS est un framework CSS utilit...

SASS image
SASS

SASS (Syntactically Awesome Style Sheets...

À propos de CSS3

CSS (Cascading Style Sheets) est un langage complémentaire à HTML. Alors que HTML structure le contenu d’une page, CSS définit son style et son aspect visuel. Il sépare la mise en forme de la structure, ce qui rend le code plus clair, plus facile à maintenir et plus flexible.

Grâce à CSS, il est possible de personnaliser chaque détail d’un site web : disposition des éléments, couleurs, typographie, transitions, effets visuels, et même la gestion du mode sombre.

Utilisation et intégration

CSS peut être utilisé de trois manières principales :

  1. En ligne : directement dans une balise HTML avec l’attribut style.
  2. Interne : à l’intérieur d’une balise <style> dans le fichier HTML.
  3. Externe : dans un fichier séparé (style.css), relié via la balise <link>.

Exemple d’intégration externe :

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

Exemple de base en CSS

 1body {
 2    background-color: #f5f5f5;
 3    font-family: Arial, sans-serif;
 4    color: #333;
 5}
 6 
 7h1 {
 8    color: #007BFF;
 9    text-align: center;
10}
11 
12p {
13    line-height: 1.6;
14}

Ce code applique un fond gris clair, définit la police du texte, et colore les titres en bleu.

Exemple complet avec HTML

 1<!DOCTYPE html>
 2<html lang="fr">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Exemple CSS</title>
 7    <link rel="stylesheet" href="style.css">
 8</head>
 9<body>
10    <h1>Bienvenue sur mon site</h1>
11    <p>Ce paragraphe est stylisé grâce au CSS.</p>
12</body>
13</html>

Mise en page avec Flexbox

Flexbox est une méthode moderne de disposition des éléments :

 1.container {
 2    display: flex;
 3    justify-content: center;
 4    align-items: center;
 5    height: 100vh;
 6}
 7 
 8.box {
 9    background-color: #4CAF50;
10    color: white;
11    padding: 20px;
12    border-radius: 8px;
13}

Ce code centre une boîte horizontalement et verticalement dans la page.

Animations simples en CSS

CSS permet aussi d’ajouter des animations légères :

1@keyframes fadeIn {
2    from { opacity: 0; }
3    to { opacity: 1; }
4}
5 
6h1 {
7    animation: fadeIn 2s ease-in-out;
8}

Bonnes pratiques et outils

  • Organisation : séparez les styles dans des fichiers dédiés (main.css, layout.css, components.css).
  • Nommage clair : utilisez une convention comme BEM (.menu__item--active).
  • Compatibilité : testez vos styles sur plusieurs navigateurs.
  • Outils modernes : utilisez des préprocesseurs comme Sass ou PostCSS pour automatiser certaines tâches.
  • Responsive design : adaptez vos sites aux écrans mobiles à l’aide des media queries.

Exemple :

1@media (max-width: 768px) {
2    body {
3        font-size: 14px;
4    }
5}

CSS est indispensable à toute création web moderne. Il transforme des pages HTML brutes en interfaces esthétiques, harmonieuses et adaptées à tous les supports. Grâce à ses capacités avancées (Flexbox, Grid, animations, variables, etc.), CSS permet de concevoir des designs professionnels sans recourir à JavaScript pour la mise en forme.