CSS is een methode om visuele stijlen toe te voegen aan webdocumenten. Het gebruik van een extern CSS bestand biedt de volgende twee voornaamste voordelen:
- U legt uw opmaak van uw website vast in een extern bestand. Deze opmaak geldt voor uw hele website. Als u van een specifieke opmaak een aanpassing doet in uw CSS bestand, dan zal dat automatisch door de hele website doorgevoerd worden waar die aangepaste stijl wordt toegepast. Met andere woorden u dient uw website zo te ontwerpen dat opmaak en content van elkaar gescheiden zijn.
- Doordat u vele standaard opmaak definities in een extern bestand vastlegt, zal dat enorm veel code schelen in uw HTML (de webpagina zelf) waardoor deze kleiner blijft (in grootte) en dus sneller geladen wordt. Tevens wordt uw HTML-source ook overzichtelijker, zodat de SE robots makkelijker de relevante tekst kunnen vinden, in plaats van het eerst doorworstelen van overbodige programma code.
- Er zijn meerdere web browsers in omloop, zoals Google Chrome, Edge (van Microsoft), Mozilla Firefox, Apple’s Safari en Opera. Om uw website in alle web browsers goed te kunnen tonen is het gebruik van stylesheets onvermijdelijk. Een voorwaarde is wel dat u de standaard CSS en HTML code hanteert van het W3C (World Wide Web Consortium).
In principe kun je alle opmaak vastleggen in een CSS. Dat betekent ook dat je op een HTML pagina minder flexibel bent als je iets van de standaard opmaak wilt afwijken. Maar dit heeft allemaal te maken met de persoonlijke keuze van een webdeveloper. Als voorbeeld is de opmaak van deze website volledig CSS gestuurd.
Wilt u een uitgebreide uitleg met veel voorbeelden van het gebruik van correct HTML en CSS zien, ga dan simpelweg zoeken op Google of YouTube met de zoekwoorden: CSS voor beginners. U vindt een legio aan interessante bronnen.
Maakt u gebruik van WordPress en heeft u een geschikte template gekozen voor website, dan hoeft u in principe zelf geen CSS te schrijven. Een apart CSS bestand is altijd meegeleverd bij elke WordPress template die u wilt gebruiken. Bovendien heeft vrijwel iedere template de mogelijkheid om zelf enkele styles aan te passen in ‘klare’ taal, zonder dat er enige codering aan te pas komt.
Ik leg met een simpel voorbeeld uit hoe CSS werkt met een HTML pagina.
Belangrijk om te weten is dat iedere pagina van uw website een verwijzing heeft naar 1 of meerdere CSS bestanden. Anders weet de pagina niet welke stijlen het moet toepassen. Nogmaals bij een website gemaakt in WordPress gebeurt dit automatisch en heeft u er geen omkijken naar.
Een eenvoudig voorbeeld met een WordPress pagina/post (voorbeeld is met de klassieke WP editor):
Bent u een pagina/post aan het schrijven in WP, dan heeft u o.a. de keuze met welke lettertype, letterkleur, lettergrootte, letteraccent u wilt gebruiken. Kijk ook naar de referentieplaatjes van de klassieke WP editor.
U ziet hieronder de menu bar van de klassieke WP editor. Als u nu bezig bent met het schrijven van tekst, dan kunt u middels (o.a.) de genummerde formatteringen uw tekst stijlen.
Maar het is niet verstandig deze allemaal te gebruiken! Ik leg u uit waarom.
In uw stylesheet bestand (meestal de naam: style.css) is vastgelegd hoe diverse opmaak eruit moet komen te zien. Bijvoorbeeld, u wilt beginnen met een kopregel (H1) of een sub-kop regel (H2, H3, H4). U kunt dat doen door een kop in te toetsen en vervolgens met lettertype, letterkleur en lettergrootte deze tekst aan te passen. Dat is dus niet de bedoeling! Wat u wel moet doen is de dropdown (1) te klikken en te kiezen welke heading u wilt gebruiken. In de CSS is namelijk beschreven hoe de heading wordt opgemaakt.
In het style.css bestand staat namelijk beschreven hoe (als voorbeeld) de Heading 1 (H1) er uit moet komen te zien.
Style voorbeeld van H1:
H1 {
font-family: Verdana, Arial, sans-serif;
text-align: left;
font-size: 16px;
font-weight: bold;
color : #000000;
margin: 5px;
}
- U ziet hierboven welk font (lettertype) gebruikt wordt voor H1
- U ziet tevens hoe de tekst uitgelijnd moet worden (links)
- U ziet wat de lettertype grootte moet zijn
- U ziet of de tekst vet (bold)gedrukt moet worden
- U ziet de kleur van het lettertype in hexadecimaal getal (#000000 = zwart)
- U ziet wat de wit-ruimte moet zijn rondom deze H1 tekst
Bovenstaande code doet je ook voor alle andere opmaak van de website, dus ook voor de gewone (heet: body text) tekst. Of hoe een opsommingslijst er uit moet komen te zien, of een achtergrond kleur, etc.
Stel je wilt over de gehele site het uiterlijk van de Header 1 (H1) aanpassen. Deze moet bijvoorbeeld een andere kleur krijgen, dan hoeft u alleen maar in het CSS bestand 1 regeltje aan te passen en dat is de regel van: COLOR. Als deze aangepast wordt naar b.v. blauw dan slaat u uw CSS bestand daarna weer weer op. Over de hele site zal dan de H1 blauw gekleurd worden. Al heeft uw websites >100 pagina’s.
Had u de H1 met de ‘hand” aangepast tijdens het intoetsen en bijvoorbeeld de opties 2, 3 en 4 gebruikt (zie bovenste plaatje), dan had u alle pagina’s van uw website met de hand moeten aanpassen!
U werkt met een HTML editor voor uw website?
Het koppelen met de hand van een CSS aan een HTML pagina:
Het koppelen dient u in the HEAD sectie van de bron van ieder HTML pagina te plaatsen:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html lang=”nl”>
<head>
<title>Webontwerp: Het gebruik van CSS, Cascading Stylesheets</title>
<meta name=”description” content=”Bij Seowebontwerp.nl vindt u enkele voorbeelden voor het gebruik van cascading stylesheets, CSS”>
<meta name=”keywords” content=”CSS, stylesheets, website, webdesign, webontwerp, web developing”>
<meta name=”robots” content=”ALL”>
<meta name=”revisit-after” content=”14 Days”>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link rel=”stylesheet” type=”text/css” href=”cssfont.css”>
</head>
