Een stylesheet is eigenlijk een filter die over een pagina gelegd wordt die de pagina opmaakt. Stylesheets zijn in grote mate te vergelijken met Stijlen uit WordPerfect en Opmaakprofielen uit Word. Het mooie aan stylesheets is dat ze, met uitzondering van de zogenaamde inline stylesheets, de opmaak en inhoud van elkaar scheiden. Een stylesheet verteld hoe de inhoud gepresenteerd moet worden en kan in deze presentatie een perfecte continuiteit bieden. Een ander voordeel is dat stylesheets nog het meest crossbrowser compatible zijn. Ten slotte is het met stylesheets mogelijk om verschillende blokken op elkaar te stapelen en te positioneren.
Er zijn drie verschillende soorten stylesheets te onderscheiden, nl.:
External stylesheets zijn stylesheets die niet in het document zelf zijn verwerkt, in een apart text bestand, meestal met de extentie .css, staat de complete ‘stijl’ beschreven. Verschillende documenten kunnen naar dit bestand verwijzen. Het voordeel hiervan is dat als het stylesheet-bestand wordt aangepast, alle pagina’s die voor de opmaak verwijzen naar die ene stylesheet de veranderde opmaak ‘doorvoeren’. Wanneer in een document een internal of inline stylesheet aanwezig is zullen deze de opmaak bepalen, en niet de external stylesheet.
Er is sprake van een internal stylesheet als de opmaak wel in het document wordt verwerkt. Het verschil met inline stylesheets is dat internal stylesheets nog binnen the ‘head’-tags van het document wordt verwerkt. Internal Stylesheets bepalen dus te stijl van één document. Er is nog steeds het voordeel dat als hier de stijl wordt aangepast, de hele stijl binnen het document wordt doorgevoerd. Bij aanwezigheid van een inline-stylesheet zal deze inline stylesheet de opmaak bepalen. De beschrijving van de stijl bevind zich binnen de -tags
Inline stylesheets bepalen de stijl voor één tag. Het heeft niet meer de grote voordelen van vooral external stylesheets, maar kan gebruikt worden voor iets afwijkends, b.v. de plaatsbepaling van bepaalde stukken tekst (iets wat overigens ook vanuit een external stylesheet gedaan kan worden)
Een latere toevoeging, maar zeker geen overbodige, is de mogelijkheid objecten te positioneren. Dit positioneren gaat in drie dimensies. Een demonstratie is op de islink site zelf te zien, de objecten die op en onder het ‘papier’ liggen zijn doormiddel van CSS-positioning geplaatst. Er dient overigens wel rekening mee gehouden te worden dat deze feature van css pas sinds versie 2.0 is toegevoegd. Oudere browsers, als de 4.x versie van Netscape ondersteund dit slecht. Over de ondersteuning zal ook meer terug te vinden zijn in onze CSS-tabel
Eerst even een klein voorbeeltje hoe stylesheets nou precies werken (m.u.v. inline stylesheets):
h1 {
font-family: sans-serif;
color: #555555;
margin-left: 20px;
font-weight: 100;
background: #eeeeee;
font-style: italic;
padding-top: 0px;
top: 0px;
}
Bovenstaande code maakt dat alles tussen twee <h1>-tags de volgende eigenschappen meekrijgt:
Als we overigens deze stijl inline zouden willen toepassen zouden wij iedere kop van niveau 1 er zo uit moeten laten zien
Stylesheets zitten eigenlijk heel logisch in elkaar. Om bij iedere eigenschap een voorbeeld van iedere mogelijke waarde te geven heeft weinig zin, de mogelijkheden zijn legio. Wat wel van belang is, is dat er aan bepaalde regels wordt voldaan. Een opsomming van de regels:
</div>
Vond je dit leuk, volg me op Twitter, voeg die RSS, euh ATOM feed toe aan je feedreader, of schrijf je hieronder in op mijn nieuwsbrief.
Dit artikel van murblog van Maarten Brouwers (murb) is in licentie gegeven volgens een Creative Commons Naamsvermelding 3.0 Nederland licentie .