Webontwerp: Het gebruik van CSS, Cascading Stylesheets

Onze hoofdstukken

CSS stylesheets

CSS is een methode om 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. Met andere woorden, als u van een specifieke opmaak een aanpassing doet in uw CSS bestand, dan zal dat automatisch door u 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 MS Internet Explorer, 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. Ikzelf maak (in deze website) volledig gebruik van CSS.

Soms maak ik wel gebruik van images of foto's om die in de HTML pagina te stoppen, maar dat doe ik dan om functionele redenen.

Wilt u een duidelijke uitleg met veel voorbeelden van het gebruik van correct HTML en CSS zien, ga dan eens kijken op deze website, een van de beste (Nederlandse) tutorial websites die ik ken over correct HTML en CSS.

Om een indruk te krijgen hoe websites er prachtig uit kunnen zien met opmaak en content gescheiden, neem eens een kijkje in de ZEN Garden.

Hoe werkt CSS?

(enkele basis voorbeelden)

Voorbeeld 1:

In een CSS bepaal je bijvoorbeeld wat het lettertype, lettergrootte en letterkleur van de H1 stijl is. zoals hier:

H1 {

font-family: Verdana, Arial, sans-serif;

text-align: left;

font-size: 16px;

font-weight: bold;

color : #000000;

margin: 5px;
}

In iedere webpagina dient u deze CSS te koppelen. Wanneer u in de ontwerpmode zit van uw webpagina, selecteert u de tekst die de H1 stijl moet krijgen, vervolgens selecteert u uit de stijlenlijst (zie plaatje) Heading 1 en zult zien dat de tekst verandert in de stijl die u in de CSS hebt bepaald.

Zo kunt u een stijl maken voor zwarte tekst, blauwe tekst, oranje tekst en daarbinnen ook nog eens met verschillende lettergroottes, de hoeveel witruimte rondom een tekst en ga zo maar door.

In een webpagina (in de broncode) zult u zien dat niet het lettertype wordt getoond, maar een zogenaamde 'Class' wordt toegekend. De naam van de Class is de tagnaam die u hier aan gegeven hebt.

Het koppelen van een CSS aan een HTML pagina:

Het koppelen dient u in the HEAD sectie van ieder HTML 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>

Voorbeeld 2

Ik laat u zien hoe de stijl is gedefinieerd van bovenstaande groene tekst (voorbeeld 2) en hoe deze getoond wordt in de HTML broncode.

CSS code:

h3           { font-family: MS Sans Serif;
                  font-size: 14px;
                  color: #96CD33;
                  font-weight: bold;
                  text-align: left;
                  margin: 5px 15px 5px 15px;
}

En zo ziet het eruit nadat ik deze stijl in de(HTML) webpagina heb toegepast:

<h3>Voorbeeld 2</h3>

Zou ik geen CSS gebruikt hebben, dan zou de gehele HTML code voor de woorden: "voorbeeld 2" er als HTML broncode zo uit hebben gezien:

<p align="left" style="margin: 5 15">
<font face="MS Sans Serif" size="4"><b>voorbeeld 2</b></font></p>

U ziet, dat scheelt nogal wat code. U kunt zich voorstellen wanneer u dat door u hele website heen toepast, dat best wel een paar kbytes kan schelen.
Maar belangrijker is, dat wanneer u deze kleur groen zou willen aanpassen, dan hoeft u slechts één regeltje in de CSS te veranderen (de color code) en vervolgens zal de kleur door de hele website automatisch aangepast worden, op die plaatsen waar u deze style class heeft toegepast. En dat scheelt een heleboel werk!

Voorbeeld 3

Het definiëren van een kleuren vlak (dit kan iedere gewenste kleur worden, in dit voorbeeld gebruik ik oranje) met ronde hoeken (zoals onze hoofdnavigatie) als class in een stylesheet:

hier kunt u iedere gewenste tekst, plaatjes of links plaatsen die u wilt

Eerst dient u met een tekenprogramma (bijvoorbeeld Fotoshop) de ronde hoekjes te maken: tl.gif: tr.gif: bl.gif: br.gif: en op te slaan in uw image folder.

Hieronder de CSS code:

/* ronde textbox oranje*/

.bl {background: #e68200 url('CSSimages/bl.gif') no-repeat 0 100%; width: 14em}
.br {background: url('CSSimages/br.gif') no-repeat 100% 100%; }
.tl {background: url('CSSimages/tl.gif') no-repeat 0 0; }
.tr {background: url('CSSimages/tr.gif') no-repeat 100% 0; padding:10px}
.clear {font-size: 1px; height: 1px}

Note: de "width: 14em" mag ook een percentage zijn: "width: 100%"

Hieronder de broncode van de HTML:

<div class="bl"><div class="br"><div class="tl"><div class="tr">
<p class="w12">hier kunt u iedere gewenste tekst, plaatjes of links plaatsen die u wilt</div></div></div></div>

Note: de "class W12" is de class die de tekst 'wit' maakt.

U ziet dat u maar relatief weinig code nodig heeft om in uw HTML pagina te plaatsen.
U kunt deze DIV class in uw HTML pagina overal gebruiken waar u maar wilt, terwijl de CSS code maar één keer voorkomt in een CSS. Zeer efficiënt dus en makkelijk in onderhoud.

Er zijn legio voorbeelden, tutorials en instructies te vinden op het web als u bijvoorbeeld zoekt naar "CSS help" of "CSS codes" of "CSS voorbeelden" maar één bron wil ik u niet onthouden waar de bron van een CSS ligt en dat is het W3C (World Wide Web consortium), hier vindt u alles over HTML en CSS zoals dat bedoeld is te gebruiken.
Vele websites beschouwen zich als W3C compliant.
Bezoek met name het hoofdstuk over CSS