print.gif

 

Wat is CSS?

CSS staat voor Cascading Style Sheets. Ook de term "Style Sheets" wordt wel gebruikt. Met CSS kunt u in hoge mate de weergave van uw pagina bepalen en kunt u effecten bereiken die met HTML tags alleen niet mogelijk zijn. U kunt bijvoorbeeld bepalen dat alle

tags 18 points groot moeten zijn in de kleur rood en met het lettertype Arial

Het is dus veel flexibeler dan HTML wat de vormgeving betreft. CSS stelt u in staat om alle stijlelementen van een website in één document onder te brengen. Dat wil zeggen dat u maar één document hoeft te veranderen om alle pagina's van uw site aan te passen. Wilt u bijvoorbeeld de kleur van alle Headings veranderen of het lettertype in de paragrafen? Dan verandert u het CSS document en alle pagina's nemen deze veranderingen over. Met HTML zou u al die wijzigingen in alle pagina's moeten aanbrengen en dat is veel meer werk. Een voordeel is ook dat de pagina's van uw site kleiner worden. U gebruikt immers veel minder code. Hierdoor zal uw site sneller laden. CSS code is browser-vriendelijk en wordt ondersteund door de meeste moderne browsers. Oude browsers negeren CSS waardoor het daar niet voor problemen zorgt.

Voor het maken van stylesheets kunt u gebruik maken van de volgende gratis programma's

Topstyle-lite.php
Topstyle van Bradbury Software bestaat in twee versies: Pro en Lite. De Pro-versie is in de loop van de tijd ontwikkeld van pure CSS-editor naar een volledig pakket voor het coderen van complete websites. De Lite-versie is gratis en is in te stellen als standaard CSS-editor voor FrontPage.
Pspad.com
PSPad is een opgetuigde teksteditor, maar goed opgetuigd. Het programma is gemaakt als ontwikkelomgeving voor allerlei programmeertalen en is een HTML-editor met ondersteuning voor CSS en XHTML, inclusief validatiefuncties. TopStyle Lite is geïntegreerd.
EclipseStyle
EclipseStyle biedt vanuit het hoofdvenster toegang tot alle CSS-eigenschappen, die onder knoppen op categorie zijn gerangschikt. Zowel de code als een voorvertoning worden in een venster getoond. Er is ook de mogelijkheid om stijlbladen uit bestaande webpagina's te importeren.
1st Page 2000
1st Page 2000 is een complete HTML-editor met uitgebreide ondersteuning voor CSS. Het is geen Dreamweaver, maar het komt in de buurt.

Voor wie een aantal euro's wil besteden aan een cadeau, hier één commerciële editor: westciv.com

Hoe bouwt u een css bestand op?

Maak een opsomming van de stijlen die u aan het document wilt meegeven, bijvoorbeeld voor het element <body>,< p> en <a>. In CSS-code schrijft u dat zo op:

BODY
{
background-color:#94739C;
font-family: Verdana,arial;
font-size: 12px;
color: #ffffff;
}
P
{
text-align: center
}
A
{
text-decoration: none;
font-weight: bold;
color:#ffffff;
font-size: 12px;
}

De browser leest de style definities en bouwt het document.

Verwijzen naar Style Sheets

Als u stijlregels wilt opstellen voor uw pagina's, dan zullen die pagina's moeten verwijzen, oftewel linken, naar de betreffende Style Sheet. Dat wordt ook wel aangeduid als het implementeren van Style Sheets in HTML.

Het verwijzen naar Style Sheets in een HTML pagina kan op drie manieren:

De Inline Style Sheet

In een inline Style Sheet worden de stijlelementen direct toegevoegd aan de HTML tag. Bij deze manier moet u de stijlelementen bij iedere tag opnieuw intypen.

Voorbeeld van een Inline Style Sheet:

(de CSS code in het voorbeeld wordt weergegeven in deze roodbruine tekst)

<html>
<head>
<title>De titel van de pagina.</title>
</head>
<body>
<p style="color:sienna;margin-left:20px">­Dit is een alinea.</p>
</p>
</body>
</html>

Gebruik de inline Style Sheet alleen als u een unieke stijl aan een enkele tag wilt geven, niet als u de stijl op meerdere pagina's wilt toepassen. Gebruik dan één van de andere twee methodes.

De Internal (of embedded) Style Sheet

Dit is de meest voorkomende Style Sheet. Bij de internal Style Sheet schrijft u de stijlinformatie tussen de <head> en </head> tags. De stijlinformatie in deze Style Sheet wordt dan alleen toegepast op dit ene document. De internal Style Sheet is daarmee goed bruikbaar voor sites die maar een paar pagina's groot zijn, of voor afzonderlijke pagina's die een aparte stijl moeten hebben ten opzichte van de rest van de site.

Voorbeeld van een Internal (embedded) Style Sheet:

(de CSS code in het voorbeeld wordt weergegeven in deze roodbruine tekst)

<html>
<head>
<title>De titel van de pagina.</title>
<style type="text/css">
<!--
body { background-color:#94739C;
font-family: Verdana,arial;
font-size: 12px;
color: #ffffff;
}

hr {color:sienna;}
p {margin-left:20px;}

-->
</style>
</head>
<body>
Hier komt de inhoud van uw pagina.
</body>
</html>

let opZiet u de tekens: <!-- en --> ? Die staan er niet zomaar. Dit zijn de commentaartekens van HTML die ervoor zorgen dat de stijlinformatie niet op het scherm getoond wordt, wanneer een (oude) browser geen CSS ondersteunt. U kunt dus het beste altijd de stijlregels tussen <!-- en --> plaatsen, zoals hierboven. Verder moet u erop letten dat u nooit HTML tags in de stijlregels gebruikt, anders werkt het niet. Dus daar geen < en > gebruiken.

De External Style Sheet

De Style Sheet staat in een apart document met de extensie .css. Er wordt gelinkt naar dit .css document met de link-tag, zie het voorbeeld hieronder. External Style Sheets zijn nuttig voor grote sites met veel pagina's, omdat de stijlinformatie van alle pagina's in een document gezet kan worden. Wilt u de stijl van uw pagina's veranderen, dan hoeft u slechts het stijldocument te veranderen om alle pagina's aan te passen. Dit scheelt veel tijd.
Ook deze website maakt gebruik van External Style Sheets.

Voorbeeld van een verwijzing naar een External Style Sheet:

<html>
<head>
<title>De titel van de pagina.</title>
<link href="bestands­naam.css" rel="stylesheet" type="text/css" />
</head>
<body>
Hier komt de inhoud van uw pagina.
</body>
</html>

letop.png Als u een External Style Sheet gebruikt, moet u zorgen dat dit externe bestand een .css extensie heeft, dus bijv. bestandsnaam.css.