HTML <style> tag

Definitie en gebruik

<style> tag wordt gebruikt om de stijlinformatie van het document te definiëren (CSS).

In <style> In elementen, kunt u de weergave van HTML-elementen in de browser specificeren.

Let op, de style-elementen definiëren de ingesloten CSS-stijlen van het HTML-document, terwijl de link-elementen worden gebruikt om stijlen uit externe stijltabellen te importeren.

De style-elementen kunnen in verschillende delen van een HTML-document voorkomen. Een document kan meerdere style-elementen bevatten, dus het hoeft niet alle stijldefinities in het head-deel te bevatten. Deze eigenschap is zeer nuttig in situaties waarin een template engine wordt gebruikt om pagina's te genereren, omdat op die manier specifieke stijlen voor de pagina kunnen worden toegevoegd aan de stijlen die door het template zijn gedefinieerd.

Zie ook:

HTML tutorial:HTML CSS

CSS tutorial:CSS tutorial

HTML DOM referentiehandleiding:Style object

Voorbeeld

Voorbeeld 1

Gebruik <style> Elementen die een eenvoudige stijltafel toepassen op het HTML-document:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>
<h1>Dit is een titel</h1>
<p>Dit is een paragraaf.</p>
</body>
</html>

Probeer het zelf uit

Voorbeeld 2

Meerdere stijlen voor dezelfde elementen:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>
<h1>Dit is een titel</h1>
<p>Dit is een paragraaf.</p>
</body>
</html>

Probeer het zelf uit

Tips en opmerkingen

Let op:Wanneer de browser de stijltafel leest, formatteert hij het HTML-document op basis van de informatie in de stijltafel. Als er voor dezelfde selector (element) verschillende eigenschappen zijn gedefinieerd in verschillende stijltabellen, wordt de waarde van de laatst gelezen stijltafel gebruikt (zie het bovenstaande voorbeeld)!

Tip:To link to an external stylesheet, use <link> tag.

Tip:To learn more about style sheets, please read our CSS tutorial.

Attribute

Attribute Value Description
media Media queries Specifies the media used by the style.
type text/css Specifies the media type of the <style> tag.

Global attributes

<style> The tag also supports Global attributes in HTML.

event attributes

<style> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display with the following default values <style> Element:

style {
  display: none;
}

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support