1.4: External CSS
Ook hier zegt de naam al een beetje waar het deze keer over gaat, external betekent hier namelijk iets als extern/buitenaf.
Met external CSS ga je namelijk een apart bestand in je webpagina laden, die er dan voor zorgt dat de opmaak van je site aangepast wordt.
Om external CSS toe te passen op je webpagina moet je eerst wel zo'n apart bestand maken. Dit doen we door het op te slaan als .css, net zoals we een beginpagina van een website opslaan als index.html. Zo slaan we een externe CSS op als bijvoorbeeld stylesheet.css (de naam mag je natuurlijk zelf kiezen).
Vervolgens kunnen we dit bestand in onze webpagina laden door weer tussen de <head> en </head>. Dit keer niet via de <style></style>, maar door de code:
<link href="stylesheet.css" rel="stylesheet">. Hierbij geef je dus eerst een verwijzing naar je bestand op d.m.v. href="" (net zoals bij links). Daarna moet je een rel="stylesheet" meegeven, let op: dit heeft niks met de bestandsnaam te maken! Vervolgens een type, net zoals bij embedded CSS is dat text/css. En als laatste geven een media="all" mee. Het begin van een webpagina ziet er dan alsvolgt uit:
<head>
<title>Titel van website</title>
<link href="stylesheet.css" rel="stylesheet">
</head>
<body>...
Het voordeel van een external CSS bestand ten opzichte van de embedded CSS, die we hiervoor besproken hebben, is dat we nu maar op één plaats dingen hoeven aan te passen. Maar ze veranderen nu wel op elke pagina waaraan je de stylesheet hebt toegekend.
Nu weten we dus hoe we embedded CSS of external CSS kunnen gebruiken op een webpagina, maar nu moeten we nog weten hoe we de style-opties hierin kunnen gebruiken. Dit komt in het volgende hoofdstuk aan de orde.