8. Cascading StyleSheets
De opmaak van HTML-pagina’s wordt gemaakt door waardes toe te kennen aan de HTML tags en hun attributen (zoals kleur, achtergrondkleur en uitlijning). Je hebt gezien dat door de Property Inspector te gebruiken bijna ieder element op een pagina vorm kan worden gegeven. Met de Property Inspector worden de waardes van de tags en de attributen veranderd.
Na enige tijd zul je merken dat sommige handelingen steeds opnieuw uitgevoerd worden met de Property Inspector. Iedere keer de achtergrond van een tabel aanpassen. Iedere keer de naam van je bedrijf vet en rood maken. Hoe prettig de Property Inspector ook werkt. Dat gaat een keer irriteren. Daarom zijn Cascading StyleSheets (CSS) uitgevonden. Met Cascading StyleSheets kun je opmaak die toegekend is aan tekst door middel van tags, in één keer wijzigen.
Met StylesSheets kun je aangeven hoe tags en attributen eruit moeten zien. Het is ook mogelijk met StylesSheets zelf tags te definiëren. Je hoeft dan niet meer aan te geven hoe de elementen eruit moeten zien. Dat staat al in de StylesSheets.
8.1 Wat zijn StylesSheets?
Met StylesSheets kan de vormgeving van (veelvoorkomende) pagina elementen worden vastgelegd. Je definieert hoe bepaalde pagina onderdelen (tags) er uit moeten zien. Een StylesSheet is dus eigenlijk een opmaakdefinitie.
Het handige van StylesSheets is, dat je één centrale plaats hebt waar je de opmaak van je website onderdelen vastlegt. Dat betekent dat alle opmaak van al die onderdelen maar één keer gewijzigd hoeft te worden. Namelijk in de StylesSheets. De wijzigingen kunnen dan automatisch doorgevoerd worden in alle pagina’s. Ideaal dus voor luie webdesigners, zoals wij.
Er zijn twee soorten StylesSheets, interne en externe StylesSheets. Interne StylesSheets geven alleen maar de opmaak aan van die betreffende pagina. Externe StylesSheets worden vanuit de pagina gelinkt naar een extern StylesSheets document. De externe StylesSheets hebben als voordeel dat je één bestand hebt, dat gekoppeld kan zijn aan meerdere pagina’s. Als je dat ene StylesSheet bestand aanpast, dan worden de wijzigingen doorgevoerd in alle gekoppelde pagina’s.
8.2 StylesSheets in Dreamweaver
Je vraagt je inmiddels misschien af wat dit alles met de cursus Dreamweaver te maken heeft. Alles! Je kunt met de Cascading StyleSheets van Dreamweaver de opmaak van je site flexibel in de hand houden. De ingebouwde StylesSheets bewerker is van ongekende klasse. Ook hier geldt: je hoeft geen regel code te kennen, om iets te kunnen.
We gaan beginnen met het maken van een StylesSheets document. Daarna gaan we verder in de op de theorie achter de StylesSheets.
Figuur 8.1: Venster voor aanmaken van een nieuwe StylesSheet.
Oefening 8.1 aanmaken StylesSheets
- Open de index.htm pagina in Dreamweaver.
- Je zou nu met de Property Inspector alle onderdelen vorm kunnen geven, maar dat doen we niet. In plaats daarvan gaan we een StylesSheet maken die de opmaak definieert.
- Kies in de menubalk de menu optie Text.
- Kies de optie CSS Styles, New.
- Het New CSS Styles venster opent.
Hier kun je aangeven wat voor een soort StylesSheet je wilt maken, en waarop de style die je gaat maken van toepassing is. De onderdelen van dit venster zullen we zo direct doorlopen.- Kies voor Tag: Body.
- Kies voor Selector Type: Tag.
- Kies voor Define in: this document only.
- Er opent zich het CSS Style Definition venster. In dit geval voor de body tag.
- Kies de volgende opmaak:
- Font: Courier new, Courier, Mono
- Size: 12 pixels
- Color: #000099
- Druk vervolgens op Apply. Je ziet dat de tekst op de pagina verandert. Je kunt vervolgens in het zijmenu category, Background selecteren.
- Background Color: #CCFFFF.
- Druk opnieuw op Apply. Je ziet nu ook de achtergrondkleur veranderen.
- Druk vervolgens op OK.
- Kies in de menublak de menuoptie Text, CSS Styles.
- Kies de optie New.
- Kies voor tag:a en klik op OK.
- Verander de waardes voor Type en Background.
- Font: Geneva, Arial, Helvetica, sans-serif
- Size: 18 pixels
- Color: #000066
- Background Color: #FFFFFF
- Kies Apply en OK. Bekijk je pagina. Je ziet dat de achtergrond van alle hyperlinks nu ook is veranderd.
8.2.1 Nog een beetje theorie
We hebben zojuist een StylesSheet aangemaakt. Je hebt gezien dat we dat document alleen op het huidige document van toepassing wil laten zijn. In de praktijk zul je zien dat je zelden een StylesSheet aanmaakt dat van toepassing is op slechts één document. De kracht van StylesSheets zit ‘m juist in het feit dat je StylesSheets kunt linken naar meerdere documenten. Om je StylesSheet te kunnen linken, moet je een apart bestand aanmaken. Je kunt je pagina’s dan vervolgens linken naar dat bestand. Alle opmaak definities die je tot dan toe hebt gemaakt, zijn dan in één keer van toepassing op alle documenten waarnaar je de StylesSheets hebt gelinkt.
Figuur 8.2: Gegevens voor het opslaan van een nieuwe StylesSheet in een extern document.
Oefening 8.2 Opslaan StylesSheet in een extern document
- Kies in de menubalk de menuoptie Text, CSS Styles.
- Kies de optie New.
- Selecteer bij Tag: body.
- Kies bij Define in: New Style Sheet File uit het dropdown menu.
- Druk vervolgens op OK.
- Er opent zich een venster waar je wordt gevraagd het StylesSheet document op te slaan.
- Voer de volgende opmaak in:
- Category: Type
- Font: Century Gothic, Arial, Century
- Size: 14 pixels
- Style: normal
- Color: #000066
- Category: Background
- Background Image: trommel.jpg (in de map images, Cursus Dreamweaver)
- Repeat: repeat-y
- Horizontal position: left
- Vertical position: center
- Geef deze StylesSheet de naam body.
- Druk op OK.
Het StylesSheet document kun je vervolgens aanpassen zoals we eerder hebben gezien. Het externe document moet gelinkt worden aan de verschillende pagina’s binnen je website. Alle wijzigingen die je daarna doorvoert in de StylesSheet, worden automatisch doorgevoerd waaraan het gelinkt is.
Figuur 8.3: Externe Stylessheet koppelen aan een pagina.
Oefening 8.3 Linken van een externe StylesSheet aan een pagina.
- Open de pagina wereldmuziek.htm.
- Kies in de menubalk de menuoptie Text, CSS Styles.
- Kies de optie Manage Styles.
- Selecteer body en druk op Attach.
- Je krijgt het scherm Attach External Style Sheet te zien.
- Druk op Browse en selecter het bestand body.css in de map StylesSheets.
- Je kunt kiezen of je de StylesSheet importeert of dat je de StylesSheet linkt. We kiezen voor gelinkt, want we willen dat de verbinding met het originele document blijft bestaan.
- Druk eerst op OK en daarna op Done.
Vanaf nu worden alle aanpassingen die je doet in het StylesSheet bestand doorgevoerd in deze pagina. En niet alleen in deze pagina, maar in alle pagina’s die je naar de StylesSheet hebt gelinkt.
8.3 Werken met StylesSheets
We hebben net snel kennis gemaakt met een aantal mogelijkheden van StylesSheets. Je hebt toen een bestaand document, min of meer, opgemaakt. Je hebt toen een lettertype en een achtergrondkleur aangeven voor de Body tag en de A tag.
StylesSheets kunnen dus de vormgeving van de bestaande HTML tags aanpassen. Maar je kunt meer met StylesSheets.
- Je kunt je eigen opmaakklassen maken
- Je kunt die opmaakklassen later in je webpagina’s gebruiken om elementen vorm te geven. Je kunt bijvoorbeeld een klasse maken die copyrighttekst heet. Als je nu een element selecteert, dan kun je door de klasse te koppelen, de opmaak daarvan meegeven.
- Je kunt de CSS selector gebruiken:
- Om hyperlinks vorm te geven. Hyperlinks kennen verschillende stadia waarin ze zich kunnen bevinden. In rust, als er met een muis overheen bewogen wordt, bezochte links en actieve links. Met de CSS selector kun je de vormgeving voor elk staduim vastleggen.
- Om bepaalde combinaties van Tags vorm te geven. Het kan voorkomen dat je bepaalde combinaties van Tags een specifieke vormgeving wilt meegeven. Met de CSS selector kun je die combinaties opgeven. De vormgeving is dan alleen van toepassing als de door jouw opgegeven combinatie geldt.
Het werken met de verschillende vormen van StylesSheets verandert eigenlijk niets aan de werkwijze die we eerder hebben gehanteerd. Alleen de uiteindelijke toepassing van de verschillende vormen is anders.
8.4 Het maken en toepassen van een Custom Class
Een Custom Class is één van de meest voorkomende toepassingen van StylesSheets. Custom Classes geven je de mogelijkheid om terugkerende elementen te benoemen en vorm te geven. Je kunt dan zelf een tagnaam bedenken en die geef je dan vorm net zoals je eerder hebt gedaan voor de gewone tags. Vervolgens link je die tag naam aan een onderdeel of een pagina element. De Vormgeving uit je StylesSheet wordt vervolgens doorgevoerd. Het maken van een Custom Class gaat als volgt.
Figuur 8.4: Custom Class aanmaken.
Oefening 8.4 Maken van een Custom Class.
- Open het New Style Sheet venster.
- Selecteer als Selector Type: Class (can apply to any tag).
- Voer in het vak achter Name: paragraph in, in plaats van de naam Unnamed1.
- Maak een nieuwe StylesSheet aan.
- Druk op OK.
- Geef de Stylessheet de File naam paragraph en druk op OK.
- Het CSS Style Definition venster wordt geopend.
- Voeg de volgende opmaak in:
- Font: Arial, Arial Narrow, Times New Roman
- Size: 12 pixels
- Style: italic
- Klik op OK, de Custom Class is nu aangemaakt.
Nadat je een Custom Class hebt gemaakt, zie je in principe nog niets op je pagina(‘s). Dat komt omdat je de elementen nog moet aangeven waarop de Custom Class van toepassing is. Dat doe je als volgt.
Oefening 8.5 Linken van een Custom Class.
- Open het bestand Wereldmuziek.htm.
- Selecteer de alinea onder de subkop geschiedenis.
- Kies in de menubalk de menuoptie Text, CSS StylesSheets.
- Kies de optie Manage Styles.
- Selecteer paragraph.css en druk op Attach.
- Het venster Attach External Style Sheet wordt geopend.
- Selecteer de StylesSheet paragraph.css en druk op OK.
- Kies de optie link en druk daarna op OK en Done.
- Nu deze StylesSheet gelinkt is aan deze pagina kun je deze gebruiken.
- Kies in de menubalk de optie Text, CSS StylesSheets en selecteer de stijl paragraph.
- De alinea wordt nu schuingedrukt weergegeven.
8.5 Het gebruik van de CSS Selector
De CSS Selector wordt op twee manieren gebruikt. Je kunt er hyperlinks mee vormgeven en je kunt er bepaalde combinaties van tags mee vormgeven. Allereerst wordt behandeld hoe de CSS Selector optie kan worden gebruikt om het uiterlijk van Hyperlinks vorm te geven.
Figuur 8.5: Venster voor aanmaken van een hyperlink met de CSS Selector
Oefening 8.6 Hyperlinks opmaken met de CSS Selector.
- Open de pagina jazz.htm.
- Kies in de menubalk de menuoptie Text, CSS Styles, New.
- Kies Selector Type Advanced.
- Uit het dropdown menu van de Selector kun je kiezen uit
- a:link (ruststadium)
- a:hover (als je met de muis erover beweegt)
- a:active (actieve link)
- a:visited (reeds bezocht)
- Maak nu voor a:hover de volgende style aan, door te kiezen voor a:hover uit het dropdown menu en op OK te klikken. Als je wilt dat de lijntjes onder de links weg gaan, dan moet je bij de categorie type aangeven dat je geen (NONE) decoratie wilt.
- Geef de StylesSheet de file naam hovertag.
- Met de volgende opmaak:
- Font: Arial, Helvetica, sans-serif
- Size: larger
- Style: italic
- Color: #FFCC00
- Druk op Apply en daarna op OK.
- Maak de volgende style aan voor de a tag, geef deze de naam atag.
- Font: Georgia, Times New Roman, Times, Serif
- Size: larger
- Style: normal
- Color: #FFFF99
- Druk op Apply en daarna op OK.
Als je in de browser kijkt, dan zie je dat het uiterlijk van de hyperlinks is aangepast. Maar dat is niet het enige. Als je met je muisaanwijzer over de hyperlink beweegt, dan zie je als het goed is een verandering. De Style definitie voor a:hover verschijnt dan namelijk.
Als je op internet rondkijkt, dan zie je dat er bijna geen websites meer zijn, die deze manier van StylesSheets gebruik niet toepassen. Het vervangt de lelijke standaard oplossingen van HTML en zorgt ervoor dat je als webdesigner meer controle hebt dan ooit tevoren. Helaas is het niet zo dat iedereen gecharmeerd is van alle flitsende links die StylesSheets voor ons mogelijk maken. De ouderwetse blauwonderlijnde links zijn namelijk een herkenbaar punt in websites. Zeker voor de minder ervaren surfers. Natuurlijk is het zo, dat mensen steeds meer gewend zijn, maar hou er dus rekening mee dat hyperlinks verwarring kunnen veroorzaken.
En dan nu over tot de orde van de dag. Hyperlinks blits en snel maken is niet het enige dat de CSS Selector kan. Je kunt met de CSS Selector namelijk ook combinaties van stijlen vormgeven. Je kunt bijvoorbeeld alle paragrafen eenvoudig blauw maken. Alle paragrafen die in een tabel staan, kun je vervolgens grijs maken.
Oefening 8.7 Combinaties van stijlen vormgeven.
- Maak een nieuwe StylesSheet aan.
- Maak een nieuwe style aan voor de P tag. De P staat voor paragraaf.
- Geef de nieuwe paragraaf de volgende opmaak:
- Tekstkleur: #FFFFCC
- Achtergrondkleur: #663333
- Maak nu een nieuwe CSS Selector tag aan. Omdat we een nieuwe style willen definiëren voor alle paragrafen, die in een tabel staan typen we in het CSS selector vakje: Table_P.
- Klik vervolgens op OK en specificeer de style als volgt:
- Tekstkleur: #FFFF00
- Achtergrondkleur: #663333
- Druk vervolgens op OK.
8.6 Browser en Stylen
Je zult misschien al hebben gemerkt dat niet ieder kenmerk van StylesSheets goed weergegeven wordt in sommige browsers. Dat komt omdat niet alle browsers StylesSheets ondersteunen. Toch is het zo dat je StylesSheets kunt toepassen op je pagina’s. Browsers die StylesSheets niet ondersteunen geven de gedefinieerde inhoud niet weer. De browsers die dat zijn, zijn de oudere browsers met een versienummer van 3.0 en lager.
8.6.1 Het CSS Style Definition venster
Je hebt inmiddels kennis gemaakt met StylesSheets. Je weet hoe je ze kunt maken en welke soorten er zijn. Je kent het verschil tussen gelinkte en geïmporteerde StylesSheets, maar we hebben nog niet goed gekeken naar het CSS Style Definition venster.
| Tabel 8.1: Uitleg van de categorieën in het CSS Style Definition venster. | |
|---|---|
| Type | Voor het definiëren van alle tekst attributen. Je kunt de lettertypes, groottes, kleur en decoratie van de tekst aangeven. |
| Background | Hier kun je de achtergrond definiëren. Je kunt aangeven welke kleur de achtergrond moet krijgen, maar ook welk plaatje er als achtergrond gebruikt moet worden. |
| Block | Voor definiëren van de ruimte en uitlijning van Tags en attributen. |
| Box | Hiermee geef je de plaatsing aan van elementen. |
| Border | Voor het aangeven of er een rand moet komen en hoe die er uit moet zien. |
| List | Hiermee geef je de vormgeving van lijstjes aan. |
| Positioning | Hiermee geef je aan hoe een box op de pagina moet worden geplaatst. |
| Extensions | Hier kunnen attributen aangegeven worden voor pagina eindes, filters voor speciale effecten en cursorwisselingen. De meeste elementen worden niet ondersteund door browsers. |
We hebben in dit hoofdstuk kennis gemaakt met StylesSheets. StylesSheets zijn hele krachtige hulpmiddelen om de vormgeving van je website mee vast te leggen. Dreamweaver biedt een zeer handige StylesSheets Editor, waarmee je op een visuele wijze StylesSheets kunt maken.
StylesSheets zijn helaas wel browser afhankelijk. Niet alle browsers ondersteunen StylesSheets op dezelfde manier. Gelukkig is dat een niet al te groot probleem. Als een browser de taal van StylesSheets niet spreekt wordt het gewoon genegeerd.
8.7 Eindopdracht
Open de bestanden index.htm en house.htm.
- Voeg aan de pagina index.htm de hyperlinks toe voor de andere pagina’s:
- Klassieke muziek (klassieke_muziek.htm)
- Jazz (jazz.htm)
- House (house.htm)
- Wereldmuziek (wereldmuziek.htm)
- Maak voor de pagina index.htm een interne style sheet aan voor de tag: body:
- Category: Type
- Font: Century Gothic, Arial, century
- Size: 12 pixels
- Style: normal
- Color: #FFFFFF
- Category: Background
- Background Color: #660000
- Maak een nieuwe externe style sheet en geef deze bijvoorbeeld de naam externe_style_sheet, kies als Selector Type: Class en bij define in: new Style Sheet File.
- Category: Type
- Lettertype: Georgia, Times New Roman, Times, Serif
- Size: 24 pixels
- Weight: Bold
- Kleur: #FFCCCC
- Category: Background
- Background Image: djs-background.jpg
- Repeat: repeat
- Horizontal position: center
- Vertical Position: center
- Link deze externe style sheet aan de index.htm en de house.htm pagina
Disclaimer: The free online courses have been put to your disposal and have been developed by the Learnit company. This course is free but should not be used for any commercial purposes. This work is copyright protected; copyright is in the keeping of Learnit.