0Pricing
HTML for Kids · Leçon

Styles en ligne

Modifiez directement l’apparence de vos éléments en HTML

Styles en ligne est une leçon HTML for Kids gratuite sur CoddyKit. Ceci est la leçon 1 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.

Ajouter une couleur d’arrière-plan

Vous pouvez faire ressortir vos éléments en utilisant la propriété background-color.

Exemple :

<p style="background-color: yellow;">This text has a yellow background.</p>

Styles intégrés&nbsp;: ajouter une mise en forme simple à votre HTML

Bienvenue dans cette leçon consacrée aux styles intégrés ! Aujourd’hui, vous apprendrez à mettre directement en forme des éléments de votre HTML à l’aide de l’attribut style.

Styles en ligne — illustration 2

Que sont les styles intégrés&nbsp;?

Les styles intégrés vous permettent d’ajouter directement du CSS à une balise HTML à l’aide de l’attribut style. C’est la manière la plus simple de mettre en forme votre page.

Exemple :

<p style="color: red;">This is red text!</p>

color: red; modifie la couleur du texte pour la rendre rouge.

Modifier la taille de la police

Utilisez la propriété font-size pour modifier la taille de votre texte.

Exemple :

<p style="font-size: 24px;">This text is 24 pixels large.</p>

Combiner plusieurs styles

Les styles intégrés vous permettent de combiner plusieurs propriétés CSS. Séparez chaque propriété par un point-virgule ;.

Exemple :

<p style="color: white; background-color: black; font-size: 18px;">
  This text has multiple styles!
</p>

Mettre en forme d’autres éléments

Les styles intégrés fonctionnent avec tous les éléments HTML, notamment les titres, les boutons et les images.

Exemple :

<h1 style="color: green;">Styled Heading</h1>
<button style="background-color: coral; color: white; padding: 10px;">
  Styled Button
</button>

Essayez vous-même

Créons une page web en utilisant des styles intégrés. Voici un exemple pour commencer :

<!DOCTYPE html>
<html>
  <head>
    <title>Inline Styles Example</title>
  </head>
  <body>
    <h1 style="color: purple;">Welcome to My Styled Page</h1>
    <p style="color: gray; font-size: 16px;">
      This is an example of inline styling.
    </p>
    <button style="background-color: lightblue; padding: 10px; border: none;">
      Click Me!
    </button>
  </body>
</html>

Excellent travail&nbsp;!

Félicitations ! Vous avez appris à utiliser les styles intégrés pour ajouter une mise en forme simple et efficace à vos éléments HTML. Les styles intégrés sont pratiques pour effectuer rapidement des modifications, mais à mesure que votre page web s’agrandit, vous aurez besoin de techniques de mise en forme plus avancées. Dans la prochaine leçon, nous découvrirons les bases de CSS. Préparez-vous à concevoir des pages web professionnelles !

Styles en ligne — illustration 8

Utiliser l’attribut style

Que sont les styles intégrés ?

Les styles intégrés vous permettent d’ajouter directement du CSS à une balise HTML à l’aide de l’attribut style. C’est la manière la plus simple de mettre en forme votre page.

Exemple :

<p style="color: red;">This is red text!</p>

color: red; modifie la couleur du texte pour la rendre rouge.

<p style="color: red;">This is red text.</p>

Questions Fréquemment Posées

La leçon « Styles en ligne » est-elle gratuite ?

Oui — le texte complet de « Styles en ligne » 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 « Styles en ligne » ?

Modifiez directement l’apparence de vos éléments en HTML 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 1 sur 4.

Combien de temps prend la leçon « Styles en ligne » ?

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.

Toutes les leçons de ce cours

  1. Styles en ligne
  2. Bases de CSS
  3. Couleurs et arrière-plans
  4. Mise en forme du texte
← Retour à HTML for Kids