HTML <style> -tag
Voorbeeld
Gebruik van het <style>-element om een eenvoudig stijlblad toe te passen op een HTML-document:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De <style>tag wordt gebruikt om stijlinformatie (CSS) voor een document te definiëren.
Binnen het <style>element specificeert u hoe HTML-elementen moeten worden weergegeven in een browser.
Tips en opmerkingen
Opmerking: wanneer een browser een stylesheet leest, zal deze het HTML-document opmaken volgens de informatie in de stylesheet. Als er eigenschappen zijn gedefinieerd voor dezelfde selector (element) in verschillende stylesheets, wordt de waarde uit het laatst gelezen stylesheet gebruikt (zie onderstaand voorbeeld)!
Tip: Gebruik de tag <link> om naar een externe stylesheet te linken.
Tip: lees onze CSS-zelfstudie voor meer informatie over stylesheets .
Browserondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <style> | Yes | Yes | Yes | Yes | Yes |
attributen
| Attribute | Value | Description |
|---|---|---|
| media | media_query | Specifies what media/device the media resource is optimized for |
| type | text/css | Specifies the media type of the <style> tag |
Algemene kenmerken
De <style>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <style>tag ondersteunt ook de Event Attributes in HTML .
Meer voorbeelden
Voorbeeld
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>This is a heading</h1>
<p>This
is a paragraph.</p>
</body>
</html>
Gerelateerde pagina's
HTML-zelfstudie: HTML CSS
CSS-zelfstudie: CSS-zelfstudie
HTML DOM-referentie: Stijlobject
Standaard CSS-instellingen
De meeste browsers geven het <style>element weer met de volgende standaardwaarden:
style {
display: none;
}