NSI Rocks !

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.
Avec ces bases et un peu de pratique, vous serez bientôt capable de donner vie à vos propres designs !