W3Docs

Apparence

Français

Styles HTML - CSS ​

CSS est utilisé pour styliser HTML. Il détermine l’apparence des éléments HTML à l’écran, sur papier ou dans d’autres médias.

CSS permet d’économiser beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages à la fois.

Vous pouvez ajouter du CSS aux éléments HTML de 3 façons :

  • En ligne, où l’attribut style est utilisé dans les éléments HTML.
  • Interne, où l’élément <style> est utilisé dans la section <head>.
  • Externe, où un fichier CSS externe est utilisé.

Voyons chaque méthode.

CSS en ligne ​

Un CSS en ligne applique un style particulier à un seul élément HTML. Ici, l’attribut style d’un élément HTML est utilisé.

Dans l’exemple ci-dessous, la couleur du texte de l’élément <p> est rouge :

Exemple de CSS en ligne : ​

Exemple de CSS en ligne

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Usage of the inline CSS</h1>
    <p style="color:red;">The paragraph is red.</p>
  </body>
</html>
Try it Yourself »

CSS interne ​

Un CSS interne spécifie un style pour une seule page HTML. Il est défini dans l’élément <code><head></code> d’une page HTML, à l’intérieur d’une balise <code><style></code> :

Exemple de CSS interne : ​

Exemple de CSS interne

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: yellow;
      }
      h1 {
        font-size: 30px;
      }
      p {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

CSS externe ​

Une feuille de style externe spécifie le style pour plusieurs pages HTML. Elle peut modifier l’apparence de tout le site web en changeant un seul fichier.

Pour utiliser une feuille de style externe, vous devez ajouter un lien vers celle-ci à l’intérieur de l’élément <code><head></code> de la page HTML : ### Exemple de feuille CSS externe :

Exemple de feuille CSS externe

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Le fichier ne peut contenir aucun code HTML et doit être enregistré avec une extension .css.

Polices CSS ​

La propriété CSS color décrit la couleur du contenu du texte.

La propriété CSS font-family définit la police du contenu du texte.

La propriété CSS font-size définit la taille du texte.

Exemple de polices CSS : ​

Exemple de polices CSS

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: #008000;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 200%;
      }
      p {
        color: #666666;
        font-family: 'New Roman', serif;
        font-size: 150%;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Bordure CSS ​

La propriété CSS border définit des valeurs pour les quatre côtés d’un élément.

Exemple de la propriété CSS border : ​

Exemple de la propriété CSS border

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dotted red;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Rembourrage CSS ​

La propriété CSS padding spécifie le rembourrage (espace) entre le texte et la bordure.

Exemple de la propriété CSS padding : ​

Exemple de la propriété CSS padding

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dashed #008022;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Marge CSS ​

La propriété CSS margin crée de l’espace autour de l’élément.

Exemple de la propriété CSS margin : ​

Exemple de la propriété CSS margin

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dashed #090fce;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

L’attribut id ​

L’attribut id attribute spécifie un style particulier pour un élément.

Exemple de l’attribut id : ​

Exemple de l’attribut id

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #large-text {
        border: 8px groove powderblue;
        font-size: 24px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p id="large-text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

L’attribut class : ​

L’attribut class attribute est utilisé pour spécifier un style pour des types particuliers d’éléments.

Exemple de l’attribut class : ​

Exemple de l’attribut class

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        border: 8px inset powderblue;
        font-size: 20px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p class="text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p class="text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Pratique ​

What are the ways to add CSS styles to an HTML document according to the article from w3docs?

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.