Wat is een extern stylesheet?

Een externe stylesheet definieert hoe een webpagina eruitziet. U kunt een stijlblad gebruiken om zaken op te geven zoals de grootte, kleur en lettertype van de tekst, de kleur van knoppen of de positie van menu's en zijbalken.

Code gebruikt in een extern stijlblad

Er zijn twee soorten code die worden gebruikt om een ​​basiswebpagina te maken:

• HyperText-opmaaktaal (HTML): Definieert de inhoud van een webpagina. Het bevat de eigenlijke tekst met een markering die aangeeft of tekstgedeelten alinea's, koppen of lijsten zijn. Het bevat ook links naar afbeeldingen die op de pagina verschijnen en hyperlinks naar externe pagina's.
• Trapsgewijze stijlbladen (CSS): Een codeertaal die wordt gebruikt om aan te geven hoe de inhoud wordt weergegeven. Het definieert hoe elk type tekstelement wordt weergegeven en kan hetzelfde type element anders weergeven als ze tot verschillende klassen behoren of een ander ID hebben. Hierdoor kunnen zaken als menu's en lijsten zich heel anders gedragen binnen de hoofdtekst van een webpagina.

Over het algemeen is het een goed idee om stijl en inhoud te scheiden, omdat je je dan op één ding tegelijk kunt concentreren. Dit wordt nog belangrijker in een team, waardoor specialisten op het gebied van inhoud en presentatie onafhankelijk van de rest kunnen werken. Misschien nog belangrijker, het maakt het ook mogelijk om een ​​enkele set stijlinstructies uniform op een hele website toe te passen.

De visuele presentatie van de website kan dan worden gewijzigd van een enkele stylesheet zonder elke webpagina afzonderlijk te hoeven bewerken. Voor grotere complexe websites kan een aantal stylesheets worden gebruikt om de tekst, menu's en indelingen binnen pagina's te regelen. Deze verzameling stylesheets kan een 'thema' worden genoemd.

Een externe CSS gebruiken om HTML aan CSS te koppelen

Het is mogelijk om een ​​CSS-stijl rechtstreeks in de HTML van een webpagina op te nemen, waarbij CSS wordt gebruikt om elke alinea en kop afzonderlijk op te maken. Dit soort inline-styling is over het algemeen geen goed idee, omdat je alle voordelen verliest van het scheiden van stijl en inhoud. Het meest opvallende is dat u de mogelijkheid verliest om uw hele website consistent bij te werken vanuit een enkel bestand.

De juiste manier om een ​​stijl op een website toe te passen, is door één extern stijlbladbestand te maken voor elk type stijl dat u wilt toepassen, en vervolgens vanuit elk HTML-bestand naar deze bestanden te verwijzen. U hebt bijvoorbeeld de volgende externe stylesheets:

• tekst.css
• menus.css
• layout.css

U kunt wijzigingen aanbrengen in de CSS-code binnen die externe stijlbladen zonder hun bestandsnamen, wat betekent dat de verwijzingen naar die bestanden, in de HTML van al uw webpagina's, niet zijn veranderd.

Voorbeelden van HTML en CSS

Een heel eenvoudige HTML-pagina zou de volgende code kunnen bevatten:

 Alles over mij!

Deze pagina gaat over mij en waarom ik geweldig ben.

Een eenvoudig extern stylesheet kan aan deze pagina worden gekoppeld door de volgende code toe te voegen onder de.

typ = "tekst/css"
href = "mijnstijl.css" />

Maak nog een tekstbestand met de naam myStyle.css, dat zich in dezelfde map als index.html bevindt en dat de volgende code bevat:

h1 {
kleur: #FF7643;
lettertype: Arial'
}
p {
kleur rood;
lettergrootte: 1.5em;
}