CSS

introductie

Joost van Meeteren

Cascading Style Sheets / CSS

CSS-Stylesheets (Cascading Style Sheets / CSS) is een methode om webpagina's van opmaak te voorzien. De CSS-vormgevingsregels kunnen in de head-sectie ( <style type="text/css"> body { background-color: #ffffff; } </style> ) van de webpagina geplaatst worden of ze staan in een extern document dat via een aparte tag ( <link href="stylesheet.css" rel="stylesheet" type="text/css" /> ) wordt geïmporteerd. Zo'n zelfstandig geïmporteerd document wordt ook wel stylesheet (bijvoorbeeld stylesheet.css) genoemd.

Een groot voordeel van aparte stylesheets is dat de opmaak van webpagina's centraal aangestuurd wordt, zodat een verandering in de opmaak vanuit één bestand in de gehele website automatisch zichtbaar wordt. Zouden de opmaak-regels in elke individuele webpagina geplaatst zijn, dan moeten alle webpagina's aangepast worden voor misschien wel één kleine aanpassing in de stylesheet-code.

Opmerking 1. Het is toegestaan om meer dan één stylesheet-tag in de head-sectie te plaatsen.
Zo kun je naast de standaard CSS-link <link href="standaard.css" rel="stylesheet" type="text/css" /> ook nog bijvoorbeeld <link href="donker.css" rel="stylesheet" type="text/css" /> hebben staan, wanneer je ook nog een andere (met een donkere achtergrond en een lichte letter) layout als oproepbare optie hebt ingebouwd in de site.

CSS en (X)HTML

Opgemerkt dient te worden dat (X)HTML de weergavetaal is voor webpagina's. En CSS is de opmaaktaal voor webpagina's.

Met weergave wordt bedoeld hoe tekst in (de body-sectie) in alinea's en numerieke data in tabellen worden ingedeeld, enzovoorts. Binnen een tekst kan een hyperlink of een afbeelding worden geplaatst.

Onder opmaak vallen lettertypen, lettergroottes, letterkleuren, achtergrondkleuren, maar ook inspringingen van regels, randen om tabellen, en de opmaak van hyperlinks en afbeeldingen.

Het streven is dat webpagina's, zeker als die geschreven zijn in XHTML 1.0 / 1.1 en HTML 5, een strikte scheiding kennen tussen het HTML-niveau en CSS-niveau. In de webpagina zelf wordt alleen nog (X)HTML gebruikt en geen CSS-opmaakregels meer. In de praktijk zal het echter nog wel eens voorkomen dat je voor dat ene specifieke stukje opmaak een CSS-opmaakregel in bijvoorbeeld een p-tag plaatst.

Standaarden W3C

Het World Wide Web Consortium (W3C) heeft standaarden vastgelegd voor CSS-stylesheets.

De eerste standaard staat bekend als CSS1. Momenteel is CSS2.1 de standaard en wordt door alle typen browsers - Firefox, Chrome, Opera en Safari - ondersteund.

CSS3, de nieuwste officiële standaard, is nog volop in ontwikkeling. CSS3 wordt inmiddels door Firefox 125.0.2 (64-bits), Google Chrome 124.0.6367.79 (64-bits) en Safari volledig ondersteund. Opera 109.0.5097.45 (64-bits) en Internet Explorer doen dat (nog) niet in zijn geheel.

Info elders

Voor meer (achtergrond)informatie kunt u kijken op de website van Wikipedia: Wikipedia Cascading Style Sheets.

Andere adressen met informatie over CSS zijn De lijst - StyleSheets: een inleiding, Handleiding HTML - Introductie stylesheets en CSS Cursus.

Informatie over het nieuwe CSS3 is onder andere te vinden op: CSS3.info.

Voorbeelden CSS3

Op de volgende webpagina worden voorbeelden met een CSS3-opmaak aangeboden: Voorbeelden met CSS3.

Opmerking 2. Voor bezoekers die Internet Explorer en Opera gebruiken zullen de meeste voorbeelden niet in de gewenste opmaak worden weergegeven, aangezien deze browsers CSS3 (nog) niet of slechts ten dele / fragmentarisch ondersteunen.

Deze website maakt overigens gebruik van door het W3C gevalideerde stylesheets CSS versie 2.1.

Joost van Meeteren Websites
2002-2024 © Joost van Meeteren, Bennekom NL
Laatste update website: vrijdag 26 april 2024