|
Wat is een stylesheet en hoe gebruik ik het op mijn site?
 Cascading Style Sheets of CSS afgekort is een handige manier om de elementen op je internet pagina verschillende eigenschappen mee te geven. Deze eigenschappen zijn bijvoorbeeld de achtergrondkleur van de pagina of het gebruikte font. De elementen waar je deze eigenschappen aan kunt toekennen zijn voor een deel tags die al sinds de eerste versies van HTML bestaan. Je zou bijvoorbeeld aan de <P> tag een stijl kunnen toekennen die ervoor zorgt dat alle tekst tussen de openings en sluit </P> door de browser in een blauw Arial font wordt weergegeven met een paarse achtergrond. Hiervoor zou je de volgende definitie gebruiken:
p { font-family: Arial; color: blue; background-color: purple; }
Om deze definitie vervolgens te gebruiken zet je hem in de stylesheet welke je weer in de HEAD van je HTML document plaatst tussen <STYLE> tags, of in een externe stylesheet.
In theorie kan je aan bijna iedere tag een nieuwe stijl toekennen en bijvoorbeeld de tekst tussen bold tags als italic laten weergeven en andersom. Dat is alleen niet zo handig. Je maakt beter gebruik van stylesheets als je bijvoorbeeld de <P> en <SPAN> tags gebruikt en daar een class aan toekent. Je kan deze class een logische naam geven en hij laat de natuurlijke waarden van je tags intact. Als je de bovenstaande stijl zou willen gebruiken maak je simpelweg een class aan die je 'uglyText' doopt en laat je de <P> tag hiernaar verwijzen. Je class zal er dan ongeveer zo uit gaan zien;
.uglyText { font-family: Arial; color: blue; background-color: purple; }
En in je pagina verwijs je er vervolgens zo naar;
<P CLASS="uglyText"> Deze tekst is dan blauw Arial met paarse achtergrond. <P>
Jammergenoeg hebben Internet Explorer en Netscape hele andere ideeën over hoe ze met CSS om moeten gaan waardoor zelfs het simpele voorbeeldje hierboven er in beide browsers verschillend uit ziet. Maar dan nog, de voordelen van niet honderden of duizenden font tags te hoeven aanpassen als je besluit dat rode tekst op een zwarte achtergrond gewoon niet cool meer is wegen absoluut op tegen een tijdje stoeien met je classes om uit te vinden wat wel en niet in beide browsers werkt.
terug
Implementeren van een StyleSheet
Er zijn drie methoden om een stijl te definiëren;
Inline
<P STYLE="font-family: Arial; color: blue;"> Je kan de stijl direct in de tag zetten. </P>
Of embedded...
<HEAD> <STYLE TYPE="text/css"> .uglyText { font-family: Arial; color: blue; } </STYLE> </HEAD> <BODY> <P CLASS="uglyText"> ... in de HEAD van je document. </P> </BODY>
Of linked...
<HEAD> <LINK REL="stylesheet" HREF="style.css" Type="text/css"> </HEAD> <BODY> <P CLASS="uglyText"> Je zet nu de class definitie ( .uglyText {etc.} ) in een text bestandje wat je opslaat met de .css uitgang. (in dit geval zou je hem style.css noemen) </P> </BODY> Alledrie de mogelijkheden hebben hun eigen voor en nadelen maar algemeen genomen raad ik de eerste methode af en zou ik zoveel mogelijk de derde (linked) methode gebruiken. Je hebt dan een bestandje wat je in de hele site kan hergebruiken door simpelweg een linkje toe te voegen. De tweede (embedded) methode is dan ook vooral geschikt om stijlen te definiëren die slechts in één pagina voorkomen. [tip]
De inline methode geeft vooral veel problemen in Netscape. Binnen een geneste layer werkt het bijvoorbeeld niet, maar ook in een simpele layer werken een aantal attributen zoals bijv. background-image: niet in Netscape.
terug
CSS Bouwstenen
Als je eenmaal weet waar je de stylesheet gaat neerzetten zijn er ook nog drie manieren om hem op te vullen. Die overigens door elkaar heen gebruikt kunnen worden. Je kan een stijl aan een specifieke tag toekennen (bijv. <P>, of <TD>), je kan een class definiëren die je samen met verschillende tags/objecten op je pagina kunt gebruiken, of je kan een ID definieren die je in principe ook met iedere tag kan gebruiken maar die eigenlijk bedoeld is voor bij de <DIV> tag.
De volgende voorbeelden tonen de verschillende opties;
p {color: blue;}
in je stylesheet maakt alle tekst tussen <P> tags blauw.
.className {font-size: 12px;}
Geeft alle tekst tussen tags waar de CLASS="className" een grootte van 12 pixels.
#idName {top: 20px;}
Positioneert een layer met de ID="idName" 20 pixels van de bovenkant van je (browser) scherm.
Al ben je vrij om de bovenstaande mogelijkheden op elke mogelijke manier toe te passen zijn er wel een aantal officieuze richtlijnen. De eerste techniek gebruik je meestal om de standaard font grootte en soort aan te geven zoals die over de hele site gebruikt wordt, de tweede gebruik je om uitzonderingen aan te geven en de laatste gebruik je vooral om posities van layers, borders, en achtergrondkleuren aan te geven.
Er zijn ook een aantal combinatie tactieken mogelijk, je kan bijvoorbeeld een class gelijk aan een hele rits tags toekennen;
p,li,td { font-family: Arial; color: blue; }
Of je kan een tag en een class naam combineren;
p.title { font-family: Arial; color: blue; }
In het laatste voorbeeld is deze class specifiek voor de p tag wat je vrijlaat om nog andere .title classes aan te maken met andere waarden.
[tip]
Netscape Navigator (NN) is de meest buggy browser wat betreft stylesheets, hij ondersteund het minst en heeft met het meeste problemen. De meeste problemen worden veroorzaakt door de manier waarop NN overerving regelt. Dit houdt in dat NN het het heel belangrijk vindt dat alle tags netjes worden afgesloten en dat hij stijlen niet zomaar doorgeeft aan 'dieper gelegen' elementen. Een <LI> binnen een <P> met een bepaalde class bijvoorbeeld krijgt de class van de <P> tag gewoon mee in Internet Explorer (IE). NN vereist echter dat je voor de <LI> een aparte verwijzing aanmaakt in je stylesheet. Sommige CSS waarden hebben meer problemen dan andere maar het is over het algemeen een goed idee om in ieder geval de font-family en color voor iedere class te herhalen.
terug |
