HTML - Feuille de style : Guide du débutant

Bienvenue, futurs développeurs web ! Aujourd'hui, nous plongeons dans le monde coloré des feuilles de style HTML, également connues sous le nom de CSS (Cascading Style Sheets). Pensez à HTML comme l'ossature de votre page web, et au CSS comme les habits mode qui la rendent époustouflante. Compositez cette aventure passionnante ensemble !

HTML - Style Sheet

Qu'est-ce qu'une Feuille de style ?

Avant de sauter dans le grand bain, comprenons ce qu'est une feuille de style. Une feuille de style est un ensemble de règles de style qui indiquent à un navigateur web comment présenter un document écrit en HTML. C'est comme le guide du styliste de mode pour votre page web !

Exemple de CSS dans un Document HTML

Commençons par un exemple simple pour voir le CSS en action :

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
</style>
</head>
<body>
<h1>Bienvenue sur ma page stylée !</h1>
<p>Ceci est un paragraphe avec le style par défaut.</p>
</body>
</html>

Dans cet exemple, nous avons ajouté une balise <style> dans la section <head> de notre document HTML. À l'intérieur de cette balise, nous avons défini quelques règles CSS :

Nous avons défini la couleur de fond du body en gris clair (#f0f0f0) et changé la police en Arial.
Nous avons stylé la balise h1 pour qu'elle ait une couleur marine et soit centrée sur la page.

Types de CSS

Maintenant que nous avons vu le CSS en action, explorons les trois types de CSS. Pensez à ces derniers comme à des moyens différents d'ajouter du style à votre garde-robe HTML :

1. CSS Inline

Le CSS inline est comme ajouter un chapeau fancy directement à votre tenue. Il est appliqué directement aux éléments HTML en utilisant l'attribut style.

<h1 style="color: red; font-size: 24px;">Ceci est un titre rouge</h1>

Dans cet exemple, nous avons fait en sorte que le titre soit rouge et augmenté sa taille à 24 pixels.

2. CSS Interne

Le CSS interne est comme avoir un styliste personnel pour une seule page web. Il est défini à l'intérieur de la balise <style> dans la section <head> du fichier HTML, comme nous l'avons vu dans notre premier exemple.

3. CSS Externe

Le CSS externe est comme avoir un guide de mode universel pour toutes vos pages web. Il est stocké dans un fichier .css séparé et lié à votre document HTML.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Bienvenue sur ma page stylée !</h1>
<p>Cette page est stylée à l'aide d'un fichier CSS externe.</p>
</body>
</html>

Dans cet exemple, nous avons lié un fichier CSS externe nommé styles.css à notre document HTML.

Exemples d'utilisation de Feuille de style

Explorons quelques exemples de plus pour voir la puissance du CSS :

Styling Text

p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 1.6;
color: #333;
}

Cette règle CSS style tous les paragraphes avec la police Georgia, une taille de police de 16px, une hauteur de ligne de 1.6, et une couleur gris foncé.

Création d'un Bouton

.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

Ce CSS crée un bouton vert stylé. Vous pouvez appliquer cela à n'importe quel élément en lui donnant la classe "button".

Design Réactif

@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
h1 {
font-size: 24px;
}
}

Ce CSS utilise une requête média pour ajuster les tailles de police lorsque la largeur de l'écran est de 600px ou moins, rendant votre site web réactif.

Tableau des Méthodes CSS

Voici un tableau pratique résumant les méthodes CSS que nous avons discutées :

Méthode	Description	Avantages	Inconvénients
CSS Inline	Appliqué directement aux éléments HTML	Rapide pour de petits changements	Non réutilisable, encombre le HTML
CSS Interne	Défini dans la balise `<style>` dans le fichier HTML	S'applique à une seule page	Non réutilisable entre les pages
CSS Externe	Stocké dans un fichier .css séparé	Réutilisable, garde le HTML propre	Nécessite une requête HTTP supplémentaire

Souvenez-vous, jeunes padawans, maîtriser le CSS est comme apprendre à peindre - cela nécessite de la pratique, de la patience et un peu de créativité. N'ayez pas peur d'expérimenter avec différents styles et de voir ce qui fonctionne le mieux pour vos pages web.

Alors, allez-y, stylez avec audace, et que vos pages web soient toujours fabuleuses !

Credits: Image by storyset