CSS insluiten in HTML 5 - zo is het gedaan
U kunt CSS eenvoudig integreren in HTML 5. Want als u uw HTML- en XML-documenten grafisch aantrekkelijker wilt maken, is Cascading Style Sheets (CSS) een goede keuze. De opmaaktaal biedt u tal van opties om uw websites visueel te verbeteren. Er zijn in principe drie verschillende manieren om CSS te integreren in HTML 5. We zullen u dit laten zien in deze praktische tip.
CSS in HTML 5: Optie 1 - CSS-bestand uitbesteden
De eerste optie is om de CSS naar een apart bestand te verplaatsen. Dit biedt tal van voordelen: de stylesheets hebben niet alleen invloed op een enkele pagina, maar worden automatisch gebruikt in elke HTML5-pagina. Het belangrijkste voordeel is de centrale administratie. U kunt snel wijzigingen op alle pagina's doorvoeren. Hoe een CSS-bestand in HTML 5 in te sluiten:
- Maak een nieuw CSS-bestand.
- Raadpleeg uw CSS-bestand in het hoofdgedeelte. In dit geval kreeg het bestand de stijl style.css - maar de naamgeving is natuurlijk individueel:
- U moet het bestand style.css opslaan in de hoofddirectory van de webserver.
- U hebt uw CSS-bestand met succes geïntegreerd in HTML 5.
CSS aan het begin van uw HTML 5-bestand
Als u geen uitbesteed CSS-bestand wilt maken, kunt u ook de CSS-eigenschappen in de kop van uw HTML 5-document instellen. Deze hebben dan alleen invloed op dit HTML 5-bestand, niet op alle HTML 5-pagina's.
- Open uw HTML 5-document
- Voer de volgende opdracht in het hoofdgebied in:
- Definieer nu de gewenste eigenschappen: dit kan bijvoorbeeld de grootte van de koppen zijn, de kleur van de tekst, enz. Gebruik hiervoor de bekende CSS-opdrachten.
- Sluit de opdracht na het invoeren van de eigenschappen met.
- De opgegeven eigenschappen worden overgenomen voor dit HTML 5-document.
CSS inline-stijl: gebruik opdrachten direct
De laatste manier om CSS te integreren in HTML 5 is inline-stijl. Dit betekent dat u uw opdrachten rechtstreeks in de broncode invoert.
- Ga naar het punt waar u de grafische weergave wilt wijzigen.
- Voer de CSS-opdrachten rechtstreeks in. Dit kan er bijvoorbeeld zo uitzien:
Een blauwe ondertitel
- De eigenschap wordt alleen voor deze opdracht gebruikt.