Balise HTML style : comment définir l’apparence des éléments

La balise HTML « style » permet de définir les feuilles de styles d’un site Web. La balise style est placée en HTML dans l’en-tête et avant d’éventuels scripts, et intègre des styles CSS globaux. Elle est à cet effet compatible avec différents attributs HTML.

À quoi sert la balise HTML style ?

La balise HTML style vous permet d’adapter l’apparence et le style de l’ensemble d’un document. L’objectif de l’attribut style est d’une part de définir précisément l’apparence des différents éléments pour un site Web et de les rendre ainsi uniformes. D’autre part, cette méthode peut être utilisée avec les attributs HTML afin d’optimiser la page d’accueil pour certains appareils. La balise style permet de placer du CSS dans une page HTML. Au sein de l’élément, il est également possible de définir la manière dont le contenu du site Web doit être rendu. La construction dans le navigateur Web est ainsi nettement plus rapide, puisque l’ensemble du fichier CSS ne doit pas être immédiatement chargé.

Comment la balise de style est-elle structurée en HTML ?

La balise de style est utilisée en HTML à l’intérieur de l’élément head. Il est également possible de placer plusieurs éléments avec la balise HTML style dans un site Web. Pour une construction aussi rapide que possible et afin de faciliter l’affichage pour le navigateur concerné, la balise style est placée en HTML avant les éventuels scripts pour la page d’accueil. Depuis l’introduction de HTML 5, l’utilisation de l’attribut <style type="text/css"> n’est plus obligatoire. Le contenu est cependant toujours placé entre la balise de début <style> et la balise de fin </style>. Voici un exemple :

<!DOCTYPE html>
<html>
<head>
<title>Exemple d’utilisation de la balise HTML style</title>
<style>
h1 { color: #000000; }
p { color: #0A06EF; }
</style>
</head>
<body>
<h1>Exemple de titre pour votre site Web</h1>
<p>Exemple de texte pour le premier paragraphe</p>
</body>
</html>

Ici, la balise HTML style permet d’afficher dans le document correspondant le titre « Exemple de titre pour votre site Web » en noir et le premier paragraphe (« Exemple de texte pour le premier paragraphe ») en bleu marine. En plus de la couleur, la taille ou la police peuvent également être définies de cette manière.

Quels attributs sont compatibles avec la balise HTML style ?

Certains attributs peuvent être utilisés avec la balise HTML style. Les attributs les plus courants pour la balise style en HTML sont les suivants :

Attribut Valeurs Description
Dir auto, rtl, ltr L’attribut universel dir indique le sens d’écriture du texte
Height Pixel L’attribut height indique la longueur d’un élément
Id Une chaîne de caractères qui ne doit pas contenir d’espace vide Id permet de définir un identifiant unique pour un élément HTML
Lang Abréviation de la langue L’attribut universel lang permet de définir la langue au sein du document ou de l’élément
Media all, aural, braille, handheld, projection, print, screen, tty, tv L’attribut media définit pour quel appareil le document correspondant doit être optimisé
Width Pixel L’attribut width permet de définir la largeur d’un élément
xml:space preserve, default L’attribut xml:space permet de définir la manière dont les espaces doivent être interprétés dans le texte source.

Les attributs scoped et type ne sont plus utilisés.

Voici un exemple d’association d’une balise HTML style à un attribut :

<style media="écran">
h1 { color: #000000; }
p { color: #0A06EF; }
body { background-color: #FFFFFF; }
</style>

Ce code définit que pour tous les écrans, l’en-tête est affiché en noir, le texte du paragraphe en bleu marine et le fond en blanc.

Balise HTML style : un outil utile pour tout site Web

Que vous créiez des sites Web depuis longtemps ou que vous commenciez juste à apprendre les CSS, l’attribut style est un outil simple et utile pour définir l’apparence d’un document HTML et de ses différents éléments. Il vous sera ainsi plus facile de construire un site Web de manière ordonnée et bien structurée. Si vous souhaitez également utiliser des fichiers CSS externes, utilisez la balise link.

Conseil

Un site Web entièrement à votre image ? Pas de problème ! IONOS vous offre tout ce dont vous avez besoin avec l’outil de création de site Web de IONOS. Créez votre propre site Web ou laissez-vous guider par nos experts.

Cet article vous a-t-il été utile ?