Français

Tutoriel CSS

Tutoriel CSS3

CSS Avancé

Références CSS

CSS Réactif

Tutoriel CSS : Un guide pour débutants sur le stylisme web

Qu'est-ce que le CSS ?

Salut là, futurs designers web ! Mettons-nous en route pour un voyage passionnant dans le monde des Feuilles de styles en cascade, ou CSS pour faire court. Imagine que tu construis une maison. HTML serait la structure - les murs, le toit et les fondations. Le CSS ? Eh bien, c'est tout le peintre, le papier peint et les décorations qui rendent ta maison belle et unique !

CSS - Home

Le CSS est un langage de stylisme qui indique aux navigateurs web comment présenter les éléments HTML. C'est comme un pinceau magique qui transforme des pages web ternes et ennuyeuses en designs vibrants et accrocheurs. Avec le CSS, tu peux contrôler les couleurs, les polices, les mises en page et même ajouter des animations sympas à tes pages web.

Qui devrait apprendre le CSS ?

Si tu lis ceci, il y a de fortes chances que le CSS soit fait pour toi ! Mais analysons ça :

  1. Les designers et développeurs web (ça va de soi !)
  2. Les blogueurs qui veulent personnaliser leurs sites
  3. Les professionnels du marketing créant des pages d'atterrissage
  4. Tout le monde qui s'intéresse à rendre les choses jolies sur internet !

Fais-moi confiance, j'ai vu des étudiants de tous horizons s'illuminer lorsqu'ils réalisent la puissance du CSS. C'est comme regarder un enfant découvrir qu'il peut colorier en dehors des lignes - pure joie !

Types de CSS

Il y a trois principales méthodes pour ajouter du CSS à ton HTML. Jetons un œil à chacune :

  1. CSS en ligne
  2. CSS interne
  3. CSS externe

Voici un tableau pratique pour les comparer :

Type Comment il est ajouté Meilleur pour
En ligne Directement dans les balises HTML Modifications rapides et spécifiques
Interne Dans la balise <head> de HTML Styliser une seule page
Externe Fichier .css séparé Styliser des sites entiers

Exemple de code CSS

Mettons-nous dans un exemple simple pour voir le CSS en action :

<!DOCTYPE html>
<html>
<head>
<style>
/* Cela est du CSS interne */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
text-align: center;
}
</style>
</head>
<body>
<h1>Bienvenue dans le CSS !</h1>
<p style="color: blue;">Ceci est un paragraphe avec du CSS en ligne.</p>
</body>
</html>

Dans cet exemple, nous utilisons à la fois du CSS interne et en ligne. Le CSS interne dans la balise <style> définit la couleur de fond et la police pour toute la page, et style l'élément <h1>. Le CSS en ligne sur la balise <p> rend ce paragraphe spécifique bleu.

Reasons de utiliser le CSS

Pourquoi se soucier du CSS ? Oh, laisse-moi compter les manières :

  1. Séparation des préoccupations : Garde ton contenu (HTML) et ta présentation (CSS) séparés.
  2. Consistance : Applique le même style sur plusieurs pages facilement.
  3. Flexibilité : Change l'apparence d'un site entier en modifiant un fichier.
  4. Efficacité : Réduit la répétition du code et la taille des fichiers.
  5. Réactivité : Crée des mises en page qui s'adaptent à différentes tailles d'écran.

Prérequis pour apprendre le CSS

Avant de plonger dans le CSS, il est utile d'avoir :

  1. Une compréhension de base de HTML
  2. Un éditeur de texte (je recommande Visual Studio Code)
  3. Un navigateur web moderne (Chrome, Firefox ou Edge)
  4. De la curiosité et une volonté d'expérimenter !

Ne t'inquiète pas si tu n'es pas encore un expert en HTML. Nous couvrirons les bases au fur et à mesure.

Commencer le tutoriel CSS

Prêt à commencer ? Super ! Mettons en place ton espace de travail :

  1. Crée un nouveau dossier pour ton projet.
  2. À l'intérieur de ce dossier, crée un fichier HTML (par exemple, index.html) et un fichier CSS (par exemple, styles.css).
  3. Ouvre ton fichier HTML et ajoute cette structure de base :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title.Ma Aventure CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Bienvenue dans mon aventure CSS !</h1>
</body>
</html>

Note la balise <link> dans la <head> ? C'est ainsi que nous connectons notre HTML à notre fichier CSS externe.

Bases du CSS

Maintenant, ajoutons un peu de style ! Ouvre ton fichier styles.css et écrivons notre première règle CSS :

body {
background-color: #e6f3ff;
font-family: Arial, sans-serif;
}

h1 {
color: #333333;
text-align: center;
text-shadow: 2px 2px 4px #cccccc;
}

Voici ce qui se passe :

  • Nous stylisons l'élément <body> avec un arrière-plan bleu clair et une police.
  • Le <h1> est centré, de couleur gris foncé et a une légère ombre de texte.

Enregistre les deux fichiers et ouvre ton HTML dans un navigateur. Voilà ! Tu viens de styliser ta première page web !

Propriétés CSS

Le CSS dispose d'un large éventail de propriétés à manipuler. Voici quelques-unes des plus courantes :

Propriété Ce qu'elle fait Exemple
color Définit la couleur du texte color: #ff0000;
font-size Change la taille du texte font-size: 16px;
margin Définit l'espace extérieur des éléments margin: 10px;
padding Définit l'espace intérieur des éléments padding: 5px 10px;
border Ajoute une bordure border: 1px solid black;

Ajoutons un paragraphe et stylisons-le :

<p class="intro">Le CSS est incroyable ! Il nous permet de styliser nos pages web de manière infinie.</p>

Dans ton fichier CSS :

.intro {
font-size: 18px;
color: #4a4a4a;
line-height: 1.6;
margin: 20px;
padding: 15px;
border: 2px dashed #7caed6;
border-radius: 10px;
}

Cela crée un paragraphe stylisé avec une bordure en pointillés et des coins arrondis. Génial, non ?

CSS avancé

À mesure que tu progresses, tu découvriras des concepts CSS plus avancés comme :

  1. Flexbox et Grid : Pour créer des mises en page complexes
  2. Media Queries : Pour rendre ton site réactif
  3. Transitions et Animations : Pour ajouter du mouvement et de l'interactivité
  4. Pseudo-classes : Pour styliser des états spécifiques (comme les effets de survol)

Voici un exemple d'effet de survol :

.intro:hover {
background-color: #f0f8ff;
transform: scale(1.05);
transition: all 0.3s ease;
}

Cela rend notre paragraphe légèrement plus grand et change sa couleur d'arrière-plan lorsque tu le survoles. Sympa !

Souviens-toi, le CSS est tout à fait expérimental. N'aie pas peur d'essayer de nouvelles choses, de casser des choses et d'apprendre de tes erreurs. C'est ainsi que tous les excellents designers web ont commencé !

Dans mes années d'enseignement, j'ai vu des centaines d'étudiants passer de néophytes en CSS à des magiciens du design. Avec de la pratique et de la patience, tu y parviendras aussi. Alors, vas-y, commence à styliser et regarde tes pages web prennent vie !

Credits: Image by storyset

 
Tutoriel suivant:
CSS - Introduction