Bases de CSS
Découvrez la mise en forme avec CSS (aperçu facultatif)
Bases de CSS est une leçon HTML for Kids gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML for Kids, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML for Kids comprend 4 leçons au total.
Bases de CSS : introduction à la mise en forme avec CSS
Bienvenue dans l’univers de CSS ! Aujourd’hui, nous apprendrons à utiliser les feuilles de style en cascade (CSS) pour mettre en forme vos pages web et leur donner une apparence remarquable.
Qu’est-ce que CSS ?
CSS signifie feuilles de style en cascade. C’est un langage utilisé pour contrôler l’apparence et le style de vos pages web.
Avec CSS, vous pouvez modifier les couleurs, les polices, la disposition et bien plus encore !
Comment fonctionne CSS
CSS fonctionne en sélectionnant des éléments HTML et en leur appliquant des styles. Vous pouvez utiliser CSS de trois manières :
- Intégrée : ajouter des styles directement à l’intérieur des éléments HTML.
- Interne : ajouter des styles dans une balise
<style>placée dans l’élément<head>. - Externe : utiliser un fichier CSS distinct.
Dans cette leçon, nous nous concentrerons sur les styles internes et externes.
CSS interne
Le CSS interne s’écrit dans une balise <style> placée dans l’élément <head> de votre document HTML.
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
CSS externe
Le CSS externe s’écrit dans un fichier distinct portant l’extension .css. Vous le reliez à votre document HTML à l’aide de la balise <link>.
Exemple :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
Sélecteurs CSS
Les sélecteurs servent à cibler des éléments HTML précis pour les mettre en forme. Les sélecteurs courants comprennent :
- Sélecteur de balise : cible tous les éléments portant une balise précise. Exemple :
p. - Sélecteur de classe : cible les éléments possédant une classe précise. Exemple :
.myClass. - Sélecteur d’ID : cible un élément possédant un ID précis. Exemple :
#myID.
Voyons comment les utiliser !
Sélecteurs de classe et d’ID
Utilisez une classe lorsque vous souhaitez mettre en forme plusieurs éléments. Utilisez un ID pour un élément unique.
Exemple :
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
Essayez vous-même
Créons une page web en utilisant du CSS interne. Voici un exemple pour commencer :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
Excellent travail !
Félicitations ! Vous avez appris les bases de CSS et comment l’utiliser pour mettre en forme vos pages web. CSS donne à vos pages une apparence professionnelle et attrayante. Dans la prochaine leçon, nous approfondirons les couleurs et les arrière-plans afin de rendre vos pages encore plus vivantes. Préparez-vous à libérer votre créativité !
Questions Fréquemment Posées
La leçon « Bases de CSS » est-elle gratuite ?
Oui — le texte complet de « Bases de CSS » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML for Kids, passe à CoddyKit PRO. Le cours HTML for Kids comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Bases de CSS » ?
Découvrez la mise en forme avec CSS (aperçu facultatif) Tu pratiques HTML for Kids avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML for Kids ?
Aucune expérience préalable n'est requise. HTML for Kids sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Bases de CSS » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML for Kids ?
Oui. Chaque leçon HTML for Kids inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.