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> 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"> ) 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"> ook nog bijvoorbeeld <link href="donker.css" rel="stylesheet"> 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

Kort gezegd is (X)HTML de weergavetaal voor webpagina's. 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 algemene streven is dat moderne webpagina's - in (X)HTML5 - een strikte scheiding kennen tussen het HTML-niveau en CSS-niveau. In mijn webpagina gebruik ik bij voorkeur alleen (X)HTML en geen CSS-opmaakregels. De opmaak staat in zelfstandige Stylesheet-bestanden met de extensie '.css'. De opmaak uit de stylesheet-bestanden wordt dan bijvoorbeeld via de zogenaamde Selector class opgeroepen.
In de praktijk komt het echter geregeld voor dat je voor dat ene specifieke stukje opmaak een CSS-opmaakregel in bijvoorbeeld een p-tag plaatst: <p style="color: gold"> [ tekst ] </p>. Dat is de derde manier om opmaak te noteren.

Opmerking 2. Pagina's in AMP (Accelerated Mobile Pages) van Google werken daarentegen alleen als de opmaakcode 'inline' (in het style-element binnen de head-sectie staat.
Het laat een trend zien van interne opmaakcode ('inline') naar externe opmaakcode (in een apart stylesheetbestand) en weer terug.

Standaarden W3C

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

De eerste standaard stond bekend als CSS1. De opvolger was CSS2.1. De huidige versie is CSS3.
Versie 3 onderscheidt zich wezenlijk van z'n eerdere versies. Versie 1 en 2 waren louter statisch, terwijl 3 statisch (kleur, grootte) én dynamisch (beweging en vervorming) is.

Info elders

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

Andere adressen met informatie over CSS zijn Handleiding HTML - Introductie stylesheets en CSS3.info.

Voorbeelden CSS(3)

Op de volgende webpagina biedt W3schools een tutorial en voorbeelden rond CSS(3): W3schools: CSS Tutorial en W3schools: CSS Examples.

Opmerking 3. W3schools.com omschrijft CSS3 als CSS (idem aan HTML5 als HTML). Ik geef er de voorkeur aan om van CSS3 te spreken. Deze laatste versie verschilt wezenlijk van de vorige CSS-versies. Zie de beschrijving hierboven. Versie 3 zie ik als een (technisch) ijkpunt.
Bovendien zijn er speculaties, discussies over een eventuele opvolger cq. aanpassing van CSS3: CSS-TRICKS: CSS4, QuirksMode: What is CSS4?.

Voorbeelden met layout in CSS(3)

Een overzicht met layout-voorbeelden in CSS(3) zoals een voorbeeld met variabelen en kleurcoderingen.

Joost De WebMaker
2002-2024 © Joost van Meeteren
Laatste update website: vrijdag 20 december 2024