Français

Tutoriel CSS

Tutoriel CSS3

CSS Avancé

Références CSS

CSS Réactif

Tutorial CSS3 : Guide de débutant pour le stylisme Web

Qu'est-ce que le CSS ?

CSS, acronyme de feuilles de style en cascade (Cascading Style Sheets), est un langage de stylisme puissant utilisé pour décrire la présentation d'un document rédigé en HTML ou XML. C'est comme le styliste de la mode dans le monde du web, déterminant comment les éléments doivent être affichés à l'écran, sur papier ou dans d'autres supports.

CSS3 - Tutorial

Imaginez que vous construisez une maison. HTML serait la structure - les murs, le toit et les fondations. Le CSS, quant à lui, est tout ce qui rend la maison belle - la peinture, le papier peint, les rideaux et le mobilier. C'est ce qui transforme une page web dépouillée en une œuvre visuellement attrayante !

Qui devrait apprendre le CSS ?

Toute personne qui souhaite créer des sites web beaux et réactifs devrait apprendre le CSS. Cela inclut :

  1. Les développeurs web
  2. Les designers web
  3. Les designers UI/UX
  4. Les marketeurs numériques
  5. Les blogueurs
  6. Tout un chacun intéressé par les technologies web

Même si vous êtes un débutant complet sans expérience préalable en programmation, ne vous inquiétez pas ! Le CSS est conçu pour être intuitif et facile à apprendre. Avec un peu de pratique, vous styliserez des sites web comme un pro en un rien de temps.

Types de CSS

Il existe trois principaux types de CSS :

  1. CSS inline
  2. CSS interne
  3. CSS externe

Voyons ces différents types avec quelques exemples :

1. CSS inline

Le CSS inline est appliqué directement aux éléments HTML en utilisant l'attribut style.

<p style="color: blue; font-size: 16px;">Ceci est un paragraphe bleu avec une taille de police de 16px.</p>

Cette méthode est rapide mais non recommandée pour les projets plus importants, car elle mélange le contenu avec la présentation.

2. CSS interne

Le CSS interne est placé dans la balise <style> dans la section <head> de l'HTML.

<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>Ce paragraphe sera vert avec une taille de police de 18px.</p>
</body>

Cette méthode est utile pour styliser des pages yks mais devient inefficace pour des sites multipages.

3. CSS externe

Le CSS externe est stocké dans un fichier .css séparé et lié au document HTML.

<!-- Dans votre fichier HTML -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* Dans votre fichier styles.css */
p {
color: red;
font-size: 20px;
}

C'est la méthode la plus efficace pour les projets plus importants, car elle sépare le contenu de la présentation et permet une maintenance facile.

Exemple de code CSS

Plongons dans un exemple plus complet pour voir le CSS en action :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon incroyable site Web</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.highlight {
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Bienvenue sur mon incroyable site Web</h1>
<p>Ceci est un paragraphe avec du texte <span class="highlight">surligné</span>.</p>
</div>
</body>
</html>

Dans cet exemple, nous utilisons le CSS interne pour styliser notre page web. Voici ce que fait chaque partie :

  • Nous définissons la police du body en Arial et lui donnons un arrière-plan gris clair.
  • La classe .container crée une boîte blanche centrée avec un peu de padding et une ombre subtile.
  • Le h1 est centré et de couleur gris foncé.
  • La classe .highlight crée un texte surligné en jaune.

Reasons d'utiliser le CSS

  1. Séparation du contenu et de la présentation
  2. Cohérence sur plusieurs pages
  3. Temps de chargement des pages plus rapides
  4. Maintenance et mises à jour faciles
  5. Capacités de design réactif
  6. Amélioration de l'expérience utilisateur

Prérequis pour apprendre le CSS

Pour commencer avec le CSS, vous aurez besoin :

  1. D'une compréhension de base de HTML
  2. D'un éditeur de texte (comme Visual Studio Code, Sublime Text ou même Notepad)
  3. D'un navigateur web (Chrome, Firefox ou Safari)
  4. D'enthousiasme et de la volonté d'expérimenter !

Démarrer le tutoriel CSS

Maintenant que nous avons couvert les bases, mettons-nous à styliser ! Nous allons créer une page web simple et la styliser étape par étape.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma première page stylisée</title>
<style>
/* Nous ajouterons notre CSS ici */
</style>
</head>
<body>
<header>
<h1>Bienvenue sur mon site</h1>
</header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h2>À propos de moi</h2>
<p>Salut ! J'apprends le CSS et c'est génial !</p>
</main>
<footer>
<p>&copy; 2023 Mon site</p>
</footer>
</body>
</html>

Maintenant, ajoutons un peu de CSS pour qu'il soit superbe !

body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}

header {
background-color: #35424a;
color: white;
text-align: center;
padding: 1rem;
}

nav ul {
background-color: #2c3e50;
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline-block;
margin-right: 10px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 10px;
}

nav ul li a:hover {
background-color: #34495e;
}

main {
padding: 20px;
}

footer {
background-color: #35424a;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}

Ce CSS fait ce qui suit :

  • Définit une police et une hauteur de ligne cohérentes pour toute la page.
  • Crée un en-tête sombre avec un texte centré en blanc.
  • Stylise le menu de navigation avec un arrière-plan sombre et des éléments en ligne.
  • Ajoute un effet de survol aux liens de navigation.
  • Ajoute un padding à la zone de contenu principale.
  • Crée un pied de page fixe en bas de la page.

Propriétés CSS

Le CSS utilise un large éventail de propriétés pour styliser les éléments. Voici un tableau de quelques propriétés courantes :

Propriété Description Exemple
color Définit la couleur du texte color: blue;
background-color Définit la couleur d'arrière-plan background-color: #f0f0f0;
font-size Définit la taille de la police font-size: 16px;
font-family Définit le type de police font-family: Arial, sans-serif;
margin Définit l'espacement extérieur margin: 10px;
padding Définit l'espacement intérieur padding: 5px;
border Définit le style de la bordure border: 1px solid black;
text-align Définit l'alignement du texte text-align: center;
display Définit le type d'affichage display: flex;

CSS avancé

À mesure que vous devenez plus à l'aise avec le CSS, vous pouvez explorer des concepts avancés comme :

  1. Les layouts Flexbox et Grid
  2. Le design réactif avec des requêtes média
  3. Les animations et transitions CSS
  4. Les préprocesseurs CSS comme Sass ou Less
  5. Les frameworks CSS comme Bootstrap ou Tailwind

Souvenez-vous, la clé pour maîtriser le CSS est la pratique. N'ayez pas peur d'expérimenter et de faire des erreurs - c'est ainsi que nous apprenons ! Bonne stylisation !

Credits: Image by storyset

Tutoriel précédent:
CSS - Types de données
Tutoriel suivant:
CSS - Coins arrondis