HTML + CSS = 🌟 MAGIE

Apprenez à relier HTML et CSS pour créer des sites magnifiques

👋 Bienvenue dans le monde du CSS !

Le CSS (Cascading Style Sheets) est le langage qui permet de donner du style à vos pages HTML. C'est lui qui transforme une page simple en une création visuelle attrayante !

La connexion essentielle

Pour appliquer du style CSS à votre page HTML, vous devez créer un fichier séparé .css et le lier à votre fichier HTML.

<head>
    <meta charset="utf-8">
    <title>Ma page</title>
    <link href="style.css" rel="stylesheet">
</head>

💡 Comment ça marche ?

La balise <link> indique au navigateur d'aller chercher le fichier CSS nommé "style.css" pour appliquer les styles à la page web.

📄 index.html

⬇️

🎨 style.css

Le fichier HTML appelle le fichier CSS

Les trois éléments clés

Un code CSS se compose de trois éléments principaux :

/* Sélecteur { propriété: valeur; } */
h1 {
color: blue;
}

Élément	Description	Exemple
Sélecteur	La balise HTML à modifier	`h1`, `p`
Propriété	L'effet de style à appliquer	`color`, `font-size`
Valeur	La valeur de la propriété	`blue`, `20px`

⌨️ Comment taper les accolades ?

Sur PC :

Accolade ouvrante { : Alt Gr + 4
Accolade fermante } : Alt Gr + +

Sur Mac :

Accolade ouvrante { : ⌥ + (
Accolade fermante } : ⌥ + )

Exemple en action :

Ce texte est bleu et de taille 24px grâce au CSS !

p {
color: blue;
font-size: 24px;
}

Commentaires en CSS

Comme en HTML, vous pouvez ajouter des commentaires pour expliquer votre code :

p {
    /* Je change la couleur
       de tous les paragraphes */
    color: blue;
}

Sélectionner plusieurs éléments

Pour appliquer le même style à plusieurs balises, séparez-les par une virgule :

/* Au lieu de répéter le code : */
h1 {
    color: blue;
}
p {
    color: blue;
}

/* Utilisez une seule déclaration : */
h1, p {
    color: blue;
}

h1, p, h2, div {
color: blue;
}

Une seule déclaration pour plusieurs sélecteurs

Quand utiliser une classe ?

Les classes permettent de cibler des éléments spécifiques parmi d'autres éléments du même type.

Étape 1 : Marquer l'élément en HTML

<body>
    <h1>Titre principal</h1>
    <p>Premier paragraphe</p>
    <p class="ma-classe">Deuxième paragraphe spécial</p>
    <h2>Sous-titre</h2>
</body>

Étape 2 : Styliser la classe en CSS

/* Le point . indique une classe */
.ma-classe {
color: #663399;
font-weight: bold;
}

Résultat :

Titre principal

Premier paragraphe

Deuxième paragraphe spécial

Sous-titre

🎨 Notation hexadécimale

#663399 est un code couleur en notation hexadécimale qui donne une belle couleur violette !

Les ID : pour les éléments uniques

Les ID s'utilisent pour des éléments uniques dans la page :

<img src="logo.png" id="logo">

/* CSS - le dièse # indique un ID */
#logo {
width: 200px;
height: auto;
}

⚠️ Différence classe vs ID

Class : Peut être utilisée plusieurs fois

ID : Doit être unique dans la page

Les balises universelles

Quand vous voulez styliser seulement une partie d'un texte :

<p>Il existe plus de <span class="important">990 espèces d'oiseaux</span> en Europe.</p>

/* CSS */
.important {
color: red;
font-weight: bold;
}

Balise	Type	Utilisation
`<span>`	Inline	Dans une ligne de texte
`<div>`	Block	Pour des blocs de contenu

Plusieurs propriétés

Vous pouvez appliquer plusieurs propriétés à un même sélecteur :

.ma-classe {
    color: #663399;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

Plusieurs classes

Un élément peut avoir plusieurs classes :

<p class="ma-classe grand-texte">Paragraphe spécial</p>

/* CSS */
.ma-classe {
color: #663399;
}
.grand-texte {
font-size: 30px;
}

Résultat combiné :

Paragraphe spécial

CSS1 + CSS2 + CSS3
=
🎉 STYLE SUPER PUISSANT

La combinaison fait la force !

Exercice pratique Robbie Lens

1 Créez un fichier CSS style.css

2 Appliquez la couleur black à tous les liens

3 Utilisez des div pour grouper le logo et la navigation

4 Utilisez des span pour colorer "professionnalisme" et "passion" en #A5B4FC

❓ Vérifiez vos connaissances

Quelle balise utilise-t-on pour lier un fichier CSS ?

A) <style>

B) <css>

C) <link>

Comment cibler une classe en CSS ?

A) #maclasse

B) .maclasse

C) maclasse

📝 En résumé

CSS permet de styliser les pages HTML
Utilisez <link> pour relier HTML et CSS
Syntaxe : sélecteur { propriété: valeur; }
Classes (.) pour plusieurs éléments, ID (#) pour un élément unique
<span> pour des parties de texte, <div> pour des blocs

🎉 FÉLICITATIONS !
Vous maîtrisez les bases du CSS

Vos pages n'auront plus de secret pour vous !

🎨 Intégrez le CSS dans la page HTML