Een introduktie over CSS stylesheets

Posted by on Aug 18, 2010 in SEO en Web Nieuws

Een introduktie over CSS stylesheets

CSS stylesheets

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:

  1. 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 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.

  2. 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.

  3. Er zijn meerdere web browsers in omloop, zoals Google Chrome, 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. De opmaak van deze website is volledig CSS gestuurd.

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

Voorbeeld om een H3 tekst te tonen in een bepaald lettertype, lettergrootte, kleur en alignment 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 kilobytes 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 zullen alle gebruikte H3 teksten door de hele website automatisch aangepast worden.  En dat scheelt een heleboel werk!

  

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