Introductie tot Cascading Stylesheets

An article, posted more than 23 years ago filed in web, design, html, css, px, lettertypes, basis, cursus, introductie & tutorial.

Inleiding

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.

Soorten stylesheets

Er zijn drie verschillende soorten stylesheets te onderscheiden, nl.:

external stylesheets
internal stylesheets
inline stylesheets

External stylesheets

External stylesheets zijn stylesheets die niet in het document zelf zijn verwerkt, maar in een apart text bestand, meestal met de extensie .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.

Internal stylesheets

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: wanneer hier de stijl wordt aangepast, wordt de hele stijl binnen het document doorgevoerd. Bij aanwezigheid van een inline-stylesheet zal deze inline stylesheet de opmaak voornamelijk bepalen. De beschrijving van de stijl bevind zich binnen de -tags

Inline Stylesheets

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 met behulp van specifieke ids)

Positionering

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.

De werking

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:

het lettertype wordt schreefloos (sans-serif), als b.v. arial)
De kleur wordt donkergrijs (#333333)
het wordt 20 pixels (20px) meer naar rechts uitgelijnd als volgens de standaardmarge
De dikte van de letter is dun (100)
De achtergrond kleur is lichtgrijs (#eeeeee)
het lettertype wordt cursief (italic)
het lettertype wordt cursief (italic)
plaats het blok 0 pixels naar boven / beneden gezien de lijn

Als we overigens deze stijl inline zouden willen toepassen zouden wij iedere kop van niveau 1 er zo uit moeten laten zien

Regels

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:

Tag eigenschappen worden bepaald door eerst de naam van de tag te benoemen (b.v. h1) en vervolgens een tussen de accolades ({…}) de eigenschappen met waarde.
Na iedere benoeming van een eigenschap volgt een dubbele punt (:) en daarna volgt de waarde van die eigenschap. Het ‘einde waarde moment wordt aangegeven door een puntkomma (;).
Wanneer een eigenschap een waarde heeft die uit meerdere onderdelen bestaat, worden deze onderdelen gescheiden door een komma (,). Dit doet zich bijvoorbeeld voor wanneer er alternatieve lettertypes gedefinieerd moeten worden, b.v.: font-family: raar lettertype, arial, sans-serif
Bij positionering is het gebruik van maateenheden van groot belang (want 10px (pixels) naar, is niet hetzelfde als 10% van de huidige breedte naar links)