Cascading Style Sheets: verschil tussen versies
| (4 tussenliggende versies door 2 gebruikers niet weergegeven) | |||
| Regel 1: | Regel 1: | ||
| + | [[Bestand:Deze_pagina_Zonder_CSS.png|thumb|Zo ziet deze pagina eruit zonder CSS.]] |
||
| − | '''Cascading Style Sheets''' (vaak afgekort tot '''CSS''') is een hulpmiddel om [[webpagina]]'s op een centrale manier [[vormgeving]] te geven. In plaats van door gebruik te maken van style-[[attribuut|attributen]] ([[HTML]]) op de webpagina wordt er |
+ | '''Cascading Style Sheets''' (vaak afgekort tot '''CSS''') is een hulpmiddel om [[webpagina]]'s op een centrale manier [[vormgeving]] te geven. In plaats van door gebruik te maken van style-[[attribuut|attributen]] ([[HTML]]) op de webpagina wordt er gebruikgemaakt van [[stylesheet]]s om webpagina's vorm te geven. Er zijn twee manieren om CSS op een webpagina te gebruiken; door middel van een ''inline stylesheet'' (de CSS wordt in de [[broncode]] van de webpagina zelf geplaatst) of door middel van een ''stylesheet'' (aparte pagina met de [[Bestandsextensie|extensie]] CSS). Bij de laatste manier wordt de webpagina aan de ''stylesheet'' gekoppeld, zodat de webpagina weet welke CSS hij moet gebruiken. |
== Code == |
== Code == |
||
CSS ziet er bijvoorbeeld zo uit: |
CSS ziet er bijvoorbeeld zo uit: |
||
<pre> |
<pre> |
||
| − | header,h1{ |
+ | header, h1 { |
font-size: 12pt; |
font-size: 12pt; |
||
text-align: center; |
text-align: center; |
||
background-color: red; |
background-color: red; |
||
} |
} |
||
| + | |||
| − | h1{ |
+ | h1 { |
| − | color:orange; |
+ | color: orange; |
} |
} |
||
</pre> |
</pre> |
||
| Regel 20: | Regel 22: | ||
<pre> |
<pre> |
||
| − | h1{ |
+ | h1 { |
| − | color:#87d735; /* Dit is groen */ |
+ | color: #87d735; /* Dit is groen */ |
} |
} |
||
</pre> |
</pre> |
||
Huidige versie van 10 jul 2023 om 12:26
Cascading Style Sheets (vaak afgekort tot CSS) is een hulpmiddel om webpagina's op een centrale manier vormgeving te geven. In plaats van door gebruik te maken van style-attributen (HTML) op de webpagina wordt er gebruikgemaakt van stylesheets om webpagina's vorm te geven. Er zijn twee manieren om CSS op een webpagina te gebruiken; door middel van een inline stylesheet (de CSS wordt in de broncode van de webpagina zelf geplaatst) of door middel van een stylesheet (aparte pagina met de extensie CSS). Bij de laatste manier wordt de webpagina aan de stylesheet gekoppeld, zodat de webpagina weet welke CSS hij moet gebruiken.
Code
CSS ziet er bijvoorbeeld zo uit:
header, h1 {
font-size: 12pt;
text-align: center;
background-color: red;
}
h1 {
color: orange;
}
Hierbij wordt voor header en h1 (bovenste deel van een pagina en een titel van niveau 1) de lettertypegrootte op 12 punten ingesteld. De tekst wordt gecentreerd en de achtergrond wordt rood voor header en h1.
Voor h1 alleen wordt de kleur oranje ingesteld. Voor kleuren worden Engelse namen gebruikt. Een alternatief is het gebruiken van een website om een kleurcode te kiezen, zie bijvoorbeeld colorhexa.com
Voorbeeld:
h1 {
color: #87d735; /* Dit is groen */
}
De commentaar staat tussen /* en */.
Versies en ontwikkelaar
CSS is bedacht door W3C, een organisatie die regels maakt voor dit soort dingen.
Er zijn inmiddels al nieuwere versies van CSS
- CSS 1
- CSS 2
- CSS 3
CSS 1 en 2 zijn nog steeds officiële standaarden (vaste regels), 3 nog niet.