Guide de style de document HTML

Introduction

La balise HTML <style> est utilisée pour ajouter des styles à vos pages web. Ces styles peuvent modifier l'allure et l'aspect de votre site web de diverses manières. Dans ce laboratoire, vous allez apprendre à utiliser la balise <style> pour créer une feuille de style personnalisée qui peut être utilisée sur toute votre page web.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/templating("HTML Templating") subgraph Lab Skills html/basic_elems -.-> lab-70845{{"Style de document HTML"}} html/head_elems -.-> lab-70845{{"Style de document HTML"}} html/viewport -.-> lab-70845{{"Style de document HTML"}} html/text_head -.-> lab-70845{{"Style de document HTML"}} html/layout -.-> lab-70845{{"Style de document HTML"}} html/doc_flow -.-> lab-70845{{"Style de document HTML"}} html/inter_elems -.-> lab-70845{{"Style de document HTML"}} html/templating -.-> lab-70845{{"Style de document HTML"}} end

Mise en place de la structure HTML

Tout d'abord, mettons en place la structure HTML de base. Dans votre fichier index.html, créez le code HTML suivant :

<!doctype html>
<html>
  <head>
    <title>My Webpage</title>
  </head>

  <body>
    <h1>Welcome to my Webpage</h1>
    <p>This is my first paragraph.</p>
  </body>
</html>

Ce code met en place une structure de page web de base avec un en-tête et un paragraphe.

Ajout de styles en ligne

La première manière d'ajouter des styles à votre page web consiste à les ajouter directement à l'attribut style de l'élément HTML. Dans cette étape, nous allons ajouter un style en ligne au titre h1. Ajoutez les attributs suivants à l'élément h1 :

<h1 style="color: blue; font-size: 36px;">Welcome to my Webpage</h1>

Ce style augmentera la taille de la police et changera la couleur du titre en bleu.

Ajout de styles incorporés

La balise <style> est utilisée pour ajouter des styles incorporés à votre page web. Vous pouvez ajouter plusieurs styles à l'intérieur de cette balise. Dans cette étape, nous allons utiliser un style incorporé pour ajouter des styles à l'élément p. Dans la balise <head>, ajoutez le code suivant :

<style>
  p {
    color: green;
    font-size: 18px;
  }
</style>

Ce style ajoute une couleur verte au paragraphe et réduit la taille de la police à 18 pixels.

Utilisation de classes CSS

Les classes CSS sont utilisées pour appliquer des styles à plusieurs éléments d'un coup. Dans cette étape, nous allons créer une classe pour un message d'avertissement générique qui peut être réutilisé sur toute notre page web. Ajoutez ce code à la balise <style> :

<style>
  .warning {
    color: red;
    background-color: yellow;
    border: 1px solid black;
    padding: 10px;
  }
</style>

Ce code crée un style pour un message d'avertissement qui inclut une couleur de fond jaune, une bordure noire et une couleur de texte rouge.

Ensuite, nous allons appliquer cette classe au titre h1. Modifiez votre élément h1 pour inclure la classe :

<h1 class="warning">Welcome to my Webpage</h1>

Cette étape ajoute un style d'avertissement au titre.

Ajout de feuilles de style externes

Les feuilles de style externes sont utilisées pour séparer la feuille de style du contenu HTML. Dans cette étape, vous allez créer une feuille de style externe qui peut être réutilisée sur plusieurs pages web.

Créez un nouveau fichier nommé style.css. Dans style.css, ajoutez le code suivant :

h1 {
  font-size: 48px;
}

p {
  font-size: 24px;
}

.warning {
  background-color: green;
}

Ce code définit des styles pour les éléments h1 et p, et change la classe warning pour qu'elle ait une couleur de fond verte.

Pour lier cette feuille de style externe à votre page index.html, ajoutez le code suivant à la balise <head> :

<link rel="stylesheet" type="text/css" href="style.css" />

Cette ligne relie le fichier style.css à la page index.html.

Ajout de requêtes média

Les requêtes média sont utilisées pour appliquer différents styles à différentes tailles d'écran. Dans cette étape, nous allons utiliser des requêtes média pour ajuster la taille de police de nos éléments. Ajoutez ce code au fichier style.css :

@media (max-width: 600px) {
  h1 {
    font-size: 36px;
  }

  p {
    font-size: 18px;
  }
}

Ce code ajuste la taille de police de h1 à 36 pixels et la taille de police de p à 18 pixels pour les tailles d'écran inférieures ou égales à 600 pixels de largeur.

Ajout de sélecteurs et d'imbrication

Dans cette étape, nous allons présenter les sélecteurs et l'imbrication, deux concepts avancés de CSS.

Créez un nouveau fichier nommé advanced.css. Dans advanced.css, ajoutez le code suivant :

header h1 {
  color: blue;
  font-style: italic;
}

main p {
  color: red;
}

Ce code sélectionne l'élément h1 à l'intérieur de l'élément header et applique une couleur bleue et un style d'écriture italique. Il sélectionne également l'élément p à l'intérieur de l'élément main et applique une couleur rouge.

Pour lier cette feuille de style externe à votre page index.html, ajoutez le code suivant à la balise <head> :

<link rel="stylesheet" type="text/css" href="advanced.css" />

Cette ligne relie le fichier advanced.css à la page index.html.

Sommaire

Dans ce laboratoire, vous avez appris à utiliser diverses méthodes pour ajouter des styles à votre page web. Vous avez commencé par utiliser des styles en ligne et des styles incorporés, puis vous êtes passé aux classes CSS et aux feuilles de style externes. Vous avez également appris à propos des requêtes média, des sélecteurs et de l'imbrication. En utilisant ces méthodes, vous pouvez créer une feuille de style personnalisée qui peut être utilisée sur toute votre page web et créer un site web moderne et réactif.