CSS bewerken
Aangezien Nvu de webstandaarden van het W3C goed volgt, wordt er ook ondersteuning geboden voor CSS.
Hieronder wordt de basis uitgelegd van hoe in Nvu met CSS gewerkt kan worden.
Beginnen met CSS
Laten we beginnen met 1 pagina met behulp van CSS op te maken. Hiervoor gaan we eerst naar het menu Extra en kiezen daar voor CSS bewerken.
De basis van CSS
CSS staat voor Cascading Style Sheets, waarbij je het woord cascading heel letterlijk moet nemen. Als je eerst een regel opneemt en daarna een andere regel voor hetzelfde element dan gaat de laatste regel boven de eerste.
Je kunt diverse soorten CSS-regels aanmaken:
- de ingebouwde HTML-elementen (bijvoorbeeld: a, table, h1, etc)
- zelfbedachte namen voor klassen (in CSS aangeduid met een .)
- zelfbedachte ID's voor elementen (in CSS aangeduid met een #)
Deze soorten regels kun je gezamenlijk gebruiken binnen 1 stylesheet. Ook daar kun je gebruik maken van de gelaagdheid in stylesheets. Zo kun je eerst een algemene regel toevoegen (bijvoorbeeld voor het a-element) en vervolgens een meer bijzondere regel (bijvoorbeeld a.menu).
Een CSS-regel toevoegen
Het is eerst het eenvoudigst om de ingebouwde elementnamen van de HTML-standaard te gebruiken. Stel dat we ervoor willen zorgen dat een verwijzing naar een andere website standaard niet wordt onderstreept en dat deze een rode kleur krijgt.
Als je daarvoor in Nvu een regel wilt toevoegen dan doe je dat als volgt:
- klik op de knop Regel (de knop met het palet linksboven)
- kies aan de rechterkant stijl toegepast op alle elementen van een type (type beneden invullen)
- vul daaronder een a in, want daarmee maak je in HTML-code een verwijzing naar een andere website
- klik op de knop Stijlregel aanmaken
- dan klik je op het tabblad Tekst
- daar kies je een (rode) Kleur met de knop die daarnaast staat
- bij Tekstversiering kies je Geen (zodat de link niet wordt onderstreept)
Vervolgens klik je op Sluiten en daarmee wordt de gemaakte CSS-regel in de webpagina toegevoegd. Elke verwijzing die je nu toevoegt aan deze pagina krijgt nu een rode kleur.
Op eenzelfde manier is het mogelijk om CSS-regels op te stellen voor bepaalde elementen op de pagina, maar dan kies je aan de rechterkant voor een ander soort CSS-regel voordat je klikt op Stijlregel aanmaken.
CSS-regels exporteren naar een apart (extern) CSS-bestand
Nu heb je CSS-regels opgesteld voor 1 pagina. Die wil je nu eigenlijk in alle pagina's van de website gebruiken. Daarvoor is het handig om deze regels naar een apart bestand te exporteren. Daarvoor ga je in Nvu/Kompozer naar het menu Extra > CSS bewerken (F11). Vervolgens klik je op de knop Stijlblad aanmaken en ernaar overschakelen. Dan kun je in een nieuw venster een bestandsnaam (en locatie) voor dit CSS-bestand opgeven. Laten we het voor het gemak stijl.css noemen en in dezelfde map plaatsen als de website. Als je dit bevestigt dan zie je dat daarna het CSS-scherm van Nvu/Kompozer is veranderd en dat nu aan de linkerkant een stijl.css staat met aan de rechterkant de verwijzing naar het externe bestand.
Nu staat de CSS-code niet meer in dat ene HTML-bestand, maar in een apart CSS-bestand. Zo kun je er ook in andere pagina's weer gebruik van maken. Als je nu wijzigingen in de CSS-regels aanbrengt dan hebben die effect op elke pagina waaraan dit CSS-bestand is gekoppeld.
Extern CSS-bestand koppelen aan een pagina
Het doel van een CSS-bestand is vooral dat je het later opnieuw kunt gebruiken. Als je eenmaal een goed CSS-bestand hebt, dan wil je dit ook gebruiken in meerdere pagina's.
- Daarvoor ga je in Nvu/Kompozer naar het menu Extra > CSS bewerken (F11).
- Vervolgens klik je op het pijltje naast de knop met het kleurenpalet (in de werkbalk bovenin het schermpje).
- Uit het menu wat dan verschijnt kies je voor Link elt. om aan te geven dat je in de HTML-code een Link-element wilt toevoegen.
- Aan de rechterkant krijg je dan de mogelijkheid om een extern CSS-bestand te selecteren (via de knop Bestand kiezen).
- Daarna kun je klikken op de knop Stijlblad aanmaken.
Als je dat gedaan hebt dan kan het zijn dat je de opmaak van het CSS-bestand al in de onderliggende webpagina ziet verschijnen.
- Vervolgens kun je op OK klikken om de webpagina verder te bewerken.
Nu heb je een extern CSS-bestand aan je HTML-bestand gekoppeld.
In de broncode van je webpagina is dan bijvoorbeeld deze code toegevoegd:
<link rel="stylesheet" href="stijl.css" type="text/css">