Naar www.aaappp.nl/informatica of HTML5 en Webdesign

Webpagina zonder stijl

De webpagina No style bestaat uitsluitend uit HTML5 zonder style of CSS.

HTML5 is bedoeld om een webpagina te structuren en niet om een webpagina op te maken. Een webpagina kan zonder CSS. Dan gebruikt de webbrowser allerlei defaults voor de opmaak.

Webpagina met inline style

Op Inline style staat CSS bij elke tag.

Bij elke HTML-tag kan je CSS opgeven met style=" " en zonder { }. Dat kan handig zijn als je een specifieke tag een unieke stijl wilt geven op een specifieke webpagina. In andere gevallen is dat niet DRY (afkorting van Do'nt Repeat Yourself).

Webpagina met embedded style

Op Embedded style staat CSS in de head-tag.

In de <head> tussen <style> en </style> kan je CSS-regels specificeren compleet met selectors en property: value paren tussen { }. De selectors verwijzen naar HTML-tags in de <body>. Dit is handig voor een specifieke webpagina met een unieke stijl. In andere gevallen is dat niet DRY.

Webpagina met external style

Op External style staat CSS in een CSS-bestand.

Indien je dezelfde CSS wilt gebruiken voor meer webpagina's, moet je de CSS niet steeds kopieëren. Het is handig en DRY om de CSS in een apart CSS-bestand te zetten en vanuit de HTML-bestanden te verwijzen naar het CSS-bestand.

External style combineren met embedded stijl of inline style

Indien je dezelfde CSS wilt gebruiken voor meer webpagina's, moet je de CSS niet steeds kopieëren. Het is handig en DRY om de CSS in een apart CSS-bestand te zetten en vanuit de HTML-bestanden te verwijzen naar het CSS-bestand.

Indien je voor een specifieke webpagina een unieke stijl wilt maken, kan je external style combineren met embedded style. In de external style staat de stijl die geldt voor alle webpagina's en in de embedded style staat wat daarvan afwijkt. In de HTML5 van deze specifieke webpagina staan ze dus allebei: een link naar een apart CSS-bestand en er staan CSS-regels In de <head> tussen <style>. Zie de uitleg hierboven.

Indien je aan een specifieke tag een unieke stijl wilt geven, kan je external style combineren met inline style. In de external style staat de stijl die geldt voor alle webpagina's en in de HTML-tag kan je CSS opgeven met style=" " en zonder { }, die uitsluitend geldt voor deze tag. Zie de uitleg hierboven.

Eventueel kan je in de HTML5 van een webpagina external style, embedded style en inline style combineren. Doe wat het meest praktische is, zodat je HTML of CSS, die hetzelfde is niet op meer plaatsen hoeft te wijzigen. Werk volgens het DRY-principe: Do'nt Repeat Yourself.