CSS bestand

Wat is een CSS bestand en waarvoor wordt het gebruikt?

Een CSS bestand is een stylesheet. Dit bestand specificeert de stijl van een document. En bevat alle opmaak van een website, de lettertypen en de kleuren etc. Een CSS bestand zorgt voor de styling van een pagina of een website. De afkorting CSS staat voor Cascading Style Sheets.

Waarvoor kun je een CSS bestand gebruiken?

Een CSS bestand gebruik je dus voor de styling van een document of een websitepagina. HTML zorgt voor de structuur van een document. Zoals het definiëren van paragrafen en koppen of het invoegen van afbeeldingen. Een CSS bestand zorgt voor de afwerking.

Je kunt een CSS bestand op de volgende manier inladen in een HTML bestand:

Om een webpagina te kunnen stijlen met een CSS bestand, moet deze interageren met de individuele HTML componenten van de pagina. Een paragraaf in HTML ziet er als volgt uit:

Wil je de paragraaf van een kleurtje voorzien of wil je een dik gedrukte letter gebruiken met behulp van een CSS bestand? Dan kan deze er als volgt uitzien:

In het bovenstaande voorbeeld wordt de "p" van paragraaf de "selector" genoemd. Dit betreft een deel van de CSS code die bepaalt welk HTML element de styling beïnvloedt.

In een CSS bestand wordt de selector links van de eerste accolade geschreven. De informatie die zich tussen de accolades bevindt wordt een declaratie genoemd. De eigenschappen en waarden kunnen worden toegepast op de selector.

Onder eigenschappen vallen onder andere de grootte van de letters, de marges en de kleuren. De waarden zijn de instellingen voor deze eigenschappen. In het bovenstaande voorbeeld zijn "color" en "font-weight" de eigenschappen. "brown" en "bold" zijn de waarden.

De volledige set tussen haakjes (accolades) { color:brown; font-weight:bold; } is de declaratie. De "p" is de selector en staat voor de HTML paragraaf. Je kunt dit toepassen voor het veranderen van achtergrondkleuren, lettergroottes, marges en nog veel meer. Zoals bijvoorbeeld:

Met dit CSS bestand zou je de achtergrondkleur van een pagina paars maken.

Hiermee creëer je een paragraaf met een lettergrootte van 18 en blauwe letters.

CSS code toevoegen op 3 manieren

Een CSS code kun je intern, extern of inline toevoegen aan een HTML pagina. CSS wordt geschreven in een platte tekst via een teksteditor. Dat werkt ook zo bij HTML.

1. Externe stylesheets

Externe stylesheets worden opgeslagen als .css-bestanden (zoals hierboven omschreven). Je hebt ze nodig als je het uiterlijk van je website wilt bepalen met één bestand. Je hoeft in dit geval dus geen individuele CSS code toe te voegen aan het HTML element dat je wilt gebruiken. Als je een externe stylesheet wilt gebruiken moeten de .html bestanden een header sectie bevatten. Deze linkt naar de externe stylesheet en ziet er bijvoorbeeld zo uit:

CSS extern inladen is de meest gebruikte manier omdat je hiermee de HTML en CSS volledig van elkaar scheidt. Als je iets aan de opmaak van de website wilt veranderen doe je dat in het stylesheet bestand. En als je iets aan de indeling wilt veranderen kun je dat in een .html bestand doen.

Het verschil tussen een intern en extern bestand is dat het interne bestand op je eigen server of hosting account staat. En het externe bestand ingeladen wordt vanuit een server van iemand anders.

Intern CSS bestand:

Extern CSS bestand:

2. Interne stylesheets

Interne stylesheets zijn CSS codes die direct in de header van een specifieke .html pagina zijn geschreven en worden geladen vanaf je eigen server of hosting account. 

3. Inline stylesheets

Inline style sheets zijn stukjes CSS die direct in de HTML code worden geschreven. Ze zijn alleen van toepassing op een enkele codering.

Het voordeel hiervan is dat alle opmaak die je in de HTML toevoegt direct kan worden geladen en je website dus super snel zichtbaar is. Let er wel op dat je alleen CSS inline plaatst die ook écht op elke pagina van je website gebruikt wordt, zoals bijvoorbeeld het lettertype, achtergrondkleur en kleur van de tekst.

Het bovenste voorbeeld zorgt ervoor dat een specifieke kop op een enkele .html pagina wordt weergegeven in de kleur rood met een lettergrootte van 30.

HTML en CSS als fundering en styling

Externe stylesheets zijn het meest efficiënt als je CSS wilt implementeren op een website. Het is eenvoudig om de stijl van een website bij te houden en te implementeren vanuit een speciaal CSS bestand. Interne en inline style sheets kunnen worden gebruikt als er individuele veranderingen moeten worden gemaakt in de stijl. HTML mag je dus beschouwen als de fundering van een website. Een CSS bestand zorgt voor de aankleding. Zoals de kleuren van de pagina’s, de achtergrond en het lettertype.