Introduction au CSS
Qu'est-ce que le CSS ?
Le CSS (Cascading Style Sheets) est le langage qui permet de styliser vos pages HTML. Il définit à quoi vos éléments HTML doivent ressembler : les couleurs, les tailles, les polices, et bien plus encore. Avec le CSS, vous pouvez créer des designs simples et professionnels.
Exemple d'une page HTML sans CSS
index.html
<!DOCTYPE html>
<html>
<head>
<title>Ma première page</title>
</head>
<body>
<h1>Bienvenue !</h1>
<p>Ceci est une simple page web.</p>
</body>
</html>
Exemple de la même page avec CSS
index.html
<!DOCTYPE html>
<html>
<head>
<title>Ma première page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="titre">Bienvenue !</h1>
<p class="texte">Ceci est une simple page web.</p>
</body>
</html>
Dans ce second cas, on remarque l'utilisation de l'attribut
class dans le code HTML, ainsi que les valeurs titre et texte.Ces valeurs correspondent à des classes créées dans le fichier style.css et modifient l'apparence du résultat.Bienvenue !
Ceci est une simple page web.
<h1>Bienvenue !</h1>
<p>Ceci est une simple page web.</p>
Bienvenue !
Ceci est une simple page web.
<h1 class="titre">Bienvenue !</h1>
<p class="texte">Ceci est une simple page web.</p>
Comment Utiliser le CSS ?
Ajouter du CSS directement dans le fichier HTML (CSS en ligne)
Vous pouvez écrire du CSS directement dans vos balises HTML, mais cela devient vite compliqué à maintenir.
<h1 style="color: red; text-decoration: underline;">Texte important</h1>
Ajouter du CSS dans une balise <style>
C'est une solution intermédiaire où le CSS reste dans le fichier HTML.
<head>
<style>
h1 {
color: green;
text-transform: uppercase;
}
</style>
</head>
Ajouter du CSS dans un fichier séparé
C'est la meilleure pratique : un fichier CSS séparé.
<link rel="stylesheet" href="style.css">
Conseils pour bien débuter
- Expérimentez ! Modifiez les valeurs des propriétés et observez ce qui change.
- Utilisez les outils de développement : Faites un clic droit sur votre page, choisissez « Inspecter » et manipulez le CSS en direct.
- Gardez vos fichiers organisés : un fichier HTML clair et un fichier CSS bien structuré facilitent la maintenance.