Johnny Hogenbirk: Artikelen, code-snippets, etc.
Home
Lang leve externe CSS bestanden - 07-02-2020
Inleiding
Iedereen die HTML en CSS kent, weet dat er verschillende mogelijkheden zijn om HTML op te maken.| - | Style toevoegen in de HTML objecten, via style="xxx". Inline genoemd. |
| - | Style in de head declaren, via <style>xxx</style>. In de style kunnen objecten voorzien worden van een stijl, maar het kan ook flexibel, via classes of id's. Ook combi's zijn mogelijk. Intern genoemd. |
| - | Style een extern bestand declareren (normaal gesproken een .css bestand). Die wordt in de head ingelezen. Feitelijk hetzelfde als de vorige, maar dan in een apart bestand getypt. Extern genoemd. |
Alle drie mogelijkheden kunnen trouwens gelijktijdig worden toegepast. Als gelijke stylen voorkomen, geldt de volgende prio: inline, intern, extern.
In dit artikel wordt uitgelegd waarom het beste met CSS bestanden kan worden gewerkt.
Voordelen externe bestanden
Er zijn drie voordelen:| - | Overzichtelijkheid. Als je style inline declareert, zie je niet makkelijk welk element welke style heeft. Als je de style in de head (via elementen, id's en/of classes) wordt je pagina erg lang. Je moet steeds heen en weer scrollen. Als je een apart css bestand hebt, kun je via de tabs van je editor makkelijker heen en weer. Je kunt ook meerdere css bestanden maken, voor de overzichtelijkheid. |
| - | Performance. CSS bestanden worden in de cache van de browser opgeslagen (die kan uit staan, maar staat normaal aan). Als de browser ziet dat het bestand op de server even groot is, zal het de style uit het bestand uit de cache halen. |
| - | Write once, run everywhere. Als je meer HTML bestanden hebt, kun je overal bovenin het externe css bestand inlezen. Je hoeft maar op één plaats je style te definieren. |
In de toelichting zie je ook gelijk wanneer de voordelen opgaan: als je werkt met meerdere HTML bestanden, als je HTML bestanden met een editor maakt en/of als je de browser telkens voorziet van een geheel nieuwe content.
Daarnaast is het werken met externe CSS bestanden niet handig als klanten zelf stijl moeten kunnen aanpassen. Zie evt. Weg met externe CSS bestanden
Meer artikelen hierover lezen? Een paar leuke:
W3schools
Zelf website maken
Opmerkingen? Ze zijn van harte welkom: email@johnnyhogenbirk.nl!