Comment créer une feuille de style CSS simple à l'aide du Bloc-notes?

Adrien Lessard
Adrien Lessard
• 6 min de lecture
Puis tapez et appuyez sur ↵ Entrée
Tapez et appuyez sur Entrée, puis tapez et appuyez sur ↵ Entrée.

Ce guide vous apprend à utiliser l'application Bloc-notes de Windows pour stocker des informations pour une page Web écrite en HTML et CSS. HTML est le langage de programmation utilisé pour créer votre page Web, tandis que CSS est le langage qui détermine le style, la police, etc. des éléments HTML de la page Web.

Partie 1 sur 3: créer une page HTML

  1. 1
    Ouvrez le bloc-notes. Ouvrez Démarrer, saisissez notepad et cliquez sur l' application Bloc-notes bleue en haut de la fenêtre Démarrer.
  2. 2
    Indiquez le type de document. Tapez <!DOCTYPE html> dans le Bloc-notes, puis appuyez sur ↵ Enterpour commencer une nouvelle ligne.
  3. 3
    Ajoutez la balise HTML. Tapez <html> et appuyez sur ↵ Enter.
  4. 4
    Entrez la balise BODY. Tapez <body> et appuyez sur ↵ Enter. Vous pouvez maintenant commencer à saisir les informations de votre page Web.
  5. 5
    Ajoutez un en-tête. Tapez <h1>TEXT</h1>, en veillant à remplacer «TEXTE» par votre titre de page préféré, et appuyez sur ↵ Enter.
    • Par exemple, pour créer un en-tête de page indiquant «Bienvenue!», vous devez taper <h1>Welcome!</h1> dans le Bloc-notes.
    Tapez dans le Bloc-notes
    Tapez dans le Bloc-notes, puis appuyez sur ↵ Entrée pour commencer une nouvelle ligne.
  6. 6
    Ajoutez du texte sous l'en-tête. Tapez <p1>TEXT</p1>, en veillant à remplacer «TEXTE» par votre message préféré, et appuyez sur ↵ Enter.
    • Par exemple, pour ajouter un texte qui dit "Je suis un iguane", vous devez entrer <p1>I am an iguana</p1> dans le Bloc-notes.
  7. 7
    Ajoutez plus d'en-têtes et de paragraphes. Chaque en-tête et paragraphe suivants doivent avoir un numéro croissant; par exemple, votre deuxième en-tête sera entouré de <h2></h2> balises et le deuxième paragraphe aura des <p2></p2> balises.
    • Assurez-vous de continuer à appuyer ↵ Enteraprès chaque ligne de code.
  8. 8
    Fermez les balises BODY et HTML. Une fois que vous avez entré votre dernière ligne de code, tapez </body> sur sa propre ligne et appuyez sur ↵ Enter, puis tapez </html>. Votre document est maintenant prêt à être stylisé avec CSS.

Partie 2 sur 3: ajout de css

  1. 1
    Comprendre le fonctionnement du CSS. Vous utilisez CSS pour modifier l'apparence d'un élément HTML (par exemple, un paragraphe). CSS est généralement écrit dans le format ligne par ligne suivant:
    • element tag {(par exemple, p {)
    • modifier: property;(par exemple, font-size: 20px;)
    • modifier: property;(par exemple, color: black;)
    • }
  2. 2
    Placez un espace entre les balises <html>et <body>. Ceux-ci devraient être près du haut de la page.
  3. 3
    Saisissez une balise HEAD. Tapez <head> et appuyez sur ↵ Enter.
  4. 4
    Ajoutez une balise STYLE. Tapez <style> et appuyez sur ↵ Enter.
  5. 5
    Modifiez la couleur d'arrière-plan de votre page Web. Faire cela:
    • Tapez body { et appuyez sur ↵ Enter.
    • Tapez background-color: lightblue; et appuyez sur ↵ Enter.
      • Vous pouvez utiliser n'importe quelle couleur prise en charge ici, ainsi que des modificateurs "clair" ou "foncé".
    • Tapez } et appuyez sur ↵ Enter.
  6. 6
    Stylisez votre premier en-tête. Saisissez h1 { et appuyez sur ↵ Enter, ajoutez un modificateur et appuyez sur ↵ Enter, puis saisissez } et appuyez sur ↵ Enter. Vous pouvez ajouter plusieurs modificateurs à un élément tant que chaque modificateur est sur sa propre ligne. Les modificateurs courants sont les suivants:
    • Taille du texte - Saisissez font-size: 30px; pour définir votre texte en tant que police de 30 points. Remplacez n'importe quel numéro que vous souhaitez utiliser.
    • Couleur du texte - Tapez color: black; pour faire du texte en noir. Remplacez la couleur que vous souhaitez utiliser.
    • Alignement du texte - Tapez text-align: center; pour centrer le texte. Vous pouvez également taper left ou right aligner le texte de manière appropriée.
    • Police utilisée - Tapez font-family: times new roman; pour définir votre police comme Times New Roman. Vous pouvez également utiliser des polices comme verdana ou georgia.
    En veillant à remplacer "TEXTE" par votre en-tête de page préféré
    Tapez TEXTE, en veillant à remplacer "TEXTE" par votre en-tête de page préféré, et appuyez sur ↵ Entrée.
  7. 7
    Stylisez votre premier paragraphe. Saisissez p1 { et appuyez sur ↵ Enter, ajoutez un modificateur et appuyez sur ↵ Enter, puis saisissez } et appuyez sur ↵ Enter.
    • Les modificateurs que vous pouvez utiliser ici sont identiques à ceux utilisés pour l'en-tête.
  8. 8
    Stylisez le reste de votre document. Vous pouvez styliser n'importe quel élément en référençant le texte de sa balise et en plaçant une accolade ouverte ({), en ajoutant des modificateurs, puis en fermant l'accolade (}).
  9. 9
    Fermez les balises STYLE et HEAD. Sur une nouvelle ligne sous votre dernier texte de style, saisissez </style> et appuyez sur ↵ Enter, puis saisissez </head> et appuyez sur ↵ Enter. Votre feuille CSS est terminée, ce qui signifie que vous pouvez maintenant la consulter et l'enregistrer.

Partie 3 sur 3: enregistrer le document

  1. 1
    Passez en revue votre feuille de style CSS. Votre document CSS variera légèrement, mais il devrait ressembler à ceci:
    • <!DOCTYPE html>
    • <html>
    • <head>
    • <style>
    • body {
    • background-color: lightblue;
    • }
    • h1 {
    • font-size: 45px;
    • }
    • p1 {
    • color: black;
    • }
    • </style>
    • </head>
    • <body>
    • <h1>Hi!</h1>
    • <p1>I am an iguana </p1>
    • </body>
    • </html>
  2. 2
    Cliquez sur Fichier. C'est dans le coin supérieur gauche de la fenêtre du Bloc-notes. Un menu déroulant apparaîtra.
  3. 3
    Cliquez sur Enregistrer sous.... Vous le verrez près du bas du menu déroulant. En cliquant dessus, une fenêtre s'ouvre.
  4. 4
    Sélectionnez un emplacement de sauvegarde. Cliquez sur un dossier (par exemple, Bureau) sur le côté gauche de la fenêtre.
  5. 5
    Cliquez sur la liste déroulante «enregistrer sous le type». Un menu déroulant apparaîtra.
  6. 6
    Cliquez sur Tous les fichiers. C'est dans le menu déroulant.
    Tapez sur sa propre ligne et appuyez sur ↵ Entrée
    Une fois que vous avez entré votre dernière ligne de code, tapez sur sa propre ligne et appuyez sur ↵ Entrée, puis tapez.
  7. 7
    Nommez votre fichier avec une extension ".html". Dans le champ de texte "Nom de fichier", saisissez le nom de votre document préféré (par exemple, "Mon CSS") suivi de .html.
    • Par exemple, si vous nommez votre fichier "Mon CSS", vous saisissez my css.html dans le champ.
    • Si vous utilisez un programme qui peut exécuter des fichiers ".css", vous pouvez utiliser à la .css place d' .html ici.
  8. 8
    Cliquez sur Enregistrer. Il se trouve en bas à droite de la fenêtre "Enregistrer sous". Cela enregistrera votre feuille CSS dans un format exécutable, ce qui signifie que vous pourrez l'ouvrir dans votre navigateur ou éditeur HTML préféré plutôt que dans le Bloc-notes.

Conseils

  • Lors du codage en HTML ou CSS, le nombre d'espaces entre les lignes de code n'a pas vraiment d'importance; vous pouvez appuyer ↵ Enterplusieurs fois après chaque ligne sans changer la fonction du programme.
  • Essayez de mettre en retrait différentes parties de votre feuille de style CSS pour faciliter la recherche d'éléments. Par exemple, vous pouvez mettre en retrait le code d'en-tête une fois et le code de paragraphe deux fois.

Mises en garde

  • Testez toujours votre code avant de le télécharger sur un site Web ou de le partager avec d'autres personnes.
Lisez aussi: Comment sélectionner des classes et des identifiants en CSS?

Questions et réponses

  • Comment créer un compte?
    Les fichiers du bloc-notes seront enregistrés sur votre ordinateur lui-même, donc aucun compte n'est nécessaire.
  • Comment exécuter le fichier CSS?
    Les fichiers CSS sont des feuilles de style qui étendent les pages HTML avec des styles. Ils ne peuvent pas être exécutés, mais doivent être spécifiés en tant que liens dans une balise.
  • Quelle est la procédure pour compiler à l'aide d'un fichier CSS?
    Les fichiers CSS n'ont pas besoin d'être compilés. Vous pouvez simplement le lier à votre en-tête.html.

Lisez aussi:

  1. Comment commenter en CSS?
  2. Comment créer une page Web simple à l'aide du bloc-notes?
  3. Comment apprendre le code CSS?
En parallèle
  1. Comment définir un style de classe CSS?René Lelievre
  2. Comment ajouter un fichier CSS au HTML?Ilias Borremans
  3. Comment commenter en CSS?René Lelievre
  4. Comment changer la police et la couleur d'un texte de page Web à l'aide de CSS?Tom Michaux
  5. Comment utiliser le remplissage en CSS?Ilias Borremans
  6. Comment créer une feuille de style en cascade liée (CSS)?Ilias Borremans
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail