Wat is CSS? Hoe werkt het?

Cascading Style Sheets, afgekort CSS is een programeertaal die zorgt voor de opmaak van HTML bestanden.

Wat is CSS?
Hoe werkt het?

Cascading Style Sheets, afgekort CSS is een programeertaal die zorgt voor de opmaak van HTML bestanden.
instagram logo
CSS

CSS staat voor Cascading Style Sheets

Cascading Style Sheets, afgekort CSS is een programeertaal die zorgt voor de opmaak van HTML bestanden.

Aan de basis van elke pagina op een website zit een HTML bestand, dat zorgt voor alle inhoud die je te zien krijgt (tekst, afbeeldingen, links..) . Je denkt nu misschien, waarom heb ik CSS dan nodig? CSS zorgt er namelijk voor dat je die HTML code vorm kan geven.

Het toepassen van een CSS bestand

Stel je hebt een website gemaakt met HTML, zonder dat er een CSS bestand aan gekoppeld is. Hoe denk je dat dit er zal uitzien? Laten we kijken hoe een html bestand zonder en met css eruit ziet.

HTML bestand zonder CSS

Wanneer je geen stylesheet (css) toewijst aan je html bestand, zal de browser een standaard styling toepassen, men noemt dit een 'user agent stylesheet' meer informatie vind je hier.

macbook met website dat geen css gebruikt

HTML bestand met CSS

Wanneer je wel een stylesheet (css) toewijst aan je html bestand, dan zal de browser de styling overnemen van de css die je hebt gelinkt aan dat html bestand.
macbook met website dat css gebruikt

Hoe werkt CSS precies?

CSS zorgt dus voor de opmaak, maar om elementen verschillend op te maken moet er natuurlijk wel een manier zijn om je op specifieke elementen te richten. Je kunt dit doen door de HTML codes die gebruikt worden.

Elk HTML element is via CSS apart vorm te geven. Daarnaast worden vaak ook classes (class=) en identificeerders (id=) gebruikt om verschillende secties vorm te geven met CSS. Zo kun je dezelfde HTML elementen op verschillende manieren vormgeven, afhankelijk van waar het op de website staat.

Hieronder vind je een voorbeeld van CSS:

css voorbeeld code

De body geeft eigenlijk altijd het standaard lettertype en grootte weer op een website. In dit geval zie je bij font-family dat Proxima-nova als standaard lettertype wordt gebruikt. Mocht er iets zijn waardoor het niet weergegeven kan worden, dan wordt er overgeschakeld op Helvetica, dan sans-serif. De grootte van het lettertype dat wordt aangehouden is 16 pixels.

Weer iets heel anders is de “a” die je ziet staan. Hiermee kun je je richten op de links die op de website worden weergegeven. In dit geval wordt aangegeven welke kleur een link moet hebben en in welke kleur de link moet veranderen wanneer iemand er met zijn of haar muis overheen gaat (hover effect).

De voordelen van CSS gebruiken

Je stelt jezelf misschien de vraag 'Moet ik dan voor elk html bestand van mijn website een css bestand aanmaken?' Het antwoord is nee. Je kan doormiddel van CSS de opmaak en vormgeving vanuit één bestand regelen voor de hele website. Dit betekent dat je vanuit een style sheet niet alleen bijvoorbeeld de kleur en het lettertype van de tekst kunt bepalen, maar de vormgeving, opmaak en presentatie van de totale website. Kortom, de code nodig voor het design van de website kan volledig gescheiden worden van de HTML-code.

Maar er zitten nog meer voordelen aan het gebruiken van CSS:

  • Doormiddel van CSS kan het design van de pagina en plaatsing van de pagina elementen tot op de pixel nauwkeurig worden uitgevoerd. Iets wat webdesigners zeker zal aanspreken.
  • Doordat alle code voor het vormgeven van de website ondergebracht zijn in één bestand, hoeven alleen maar veranderingen te worden aangebracht in dat bestand om een wijziging in de vormgeving voor de hele website door te voeren. Dit scheelt niet alleen veel tijd, maar verkleind tevens de kans op het maken van fouten.
  • CSS style sheets worden door alle webbrowsers uitstekend ondersteund. Misschien inmiddels zelfs al beter dan de ouderwetse methode van opmaak in de HTML-code zelf.
  • Door het toepassen van Cascading Style Sheets is het heel eenvoudig alle pagina's van de website er precies hetzelfde uit te laten zien. Iets dat als erg aangenaam zal worden ervaren door de bezoekers van uw website.
  • Wanneer de code voor vormgeving van de website ondergebracht wordt in een style sheet, is niet alleen voor u de HTML-code van u website beter leesbaar en begrijpbaar, maar ook voor de zoekmachines. Overzichtelijke code wordt ook door de zoekmachines zeer gewaardeerd en zullen zeker leiden tot betere resultaten in de zoekmachine.

Waar kan ik meer leren over CSS?

Tot zover een korte introductie wat CSS nou eigenlijk is. Wil je iets aan de opmaak van je website veranderen, dan zal je dus met CSS aan de slag moeten gaan. We raden aan om een boek aan te schaffen dat je alles leert over CSS. Online kan je ook tal van filmpjes vinden.
Volgende post
" De beste tijd om op Instagram te posten is tussen 14:00 en 15:00 uur. Het niveau van betrokkenheid dat u krijgt, kan echter aanzienlijk veranderen, afhankelijk van welke dag van de week u post. De beste dag om op Instagram te posten is donderdag, niet alleen om 15.00 uur, maar ook om 05.00 uur, 11.00 uur en 16.00 uur. "

CSS staat voor Cascading Style Sheets

Cascading Style Sheets, afgekort CSS is een programeertaal die zorgt voor de opmaak van HTML bestanden.

Aan de basis van elke pagina op een website zit een HTML bestand, dat zorgt voor alle inhoud die je te zien krijgt (tekst, afbeeldingen, links..) . Je denkt nu misschien, waarom heb ik CSS dan nodig? CSS zorgt er namelijk voor dat je die HTML code vorm kan geven.

Het toepassen van een CSS bestand

Stel je hebt een website gemaakt met HTML, zonder dat er een CSS bestand aan gekoppeld is. Hoe denk je dat dit er zal uitzien? Laten we kijken hoe een html bestand zonder en met css eruit ziet.

HTML bestand zonder CSS

Wanneer je geen stylesheet (css) toewijst aan je html bestand, zal de browser een standaard styling toepassen, men noemt dit een 'user agent stylesheet' meer informatie vind je hier.

macbook met website dat geen css gebruikt

HTML bestand met CSS

Wanneer je wel een stylesheet (css) toewijst aan je html bestand, dan zal de browser de styling overnemen van de css die je hebt gelinkt aan dat html bestand.
macbook met website dat css gebruikt

Hoe werkt CSS precies?

CSS zorgt dus voor de opmaak, maar om elementen verschillend op te maken moet er natuurlijk wel een manier zijn om je op specifieke elementen te richten. Je kunt dit doen door de HTML codes die gebruikt worden.

Elk HTML element is via CSS apart vorm te geven. Daarnaast worden vaak ook classes (class=) en identificeerders (id=) gebruikt om verschillende secties vorm te geven met CSS. Zo kun je dezelfde HTML elementen op verschillende manieren vormgeven, afhankelijk van waar het op de website staat.

Hieronder vind je een voorbeeld van CSS:

css voorbeeld code

De body geeft eigenlijk altijd het standaard lettertype en grootte weer op een website. In dit geval zie je bij font-family dat Proxima-nova als standaard lettertype wordt gebruikt. Mocht er iets zijn waardoor het niet weergegeven kan worden, dan wordt er overgeschakeld op Helvetica, dan sans-serif. De grootte van het lettertype dat wordt aangehouden is 16 pixels.

Weer iets heel anders is de “a” die je ziet staan. Hiermee kun je je richten op de links die op de website worden weergegeven. In dit geval wordt aangegeven welke kleur een link moet hebben en in welke kleur de link moet veranderen wanneer iemand er met zijn of haar muis overheen gaat (hover effect).

De voordelen van CSS gebruiken

Je stelt jezelf misschien de vraag 'Moet ik dan voor elk html bestand van mijn website een css bestand aanmaken?' Het antwoord is nee. Je kan doormiddel van CSS de opmaak en vormgeving vanuit één bestand regelen voor de hele website. Dit betekent dat je vanuit een style sheet niet alleen bijvoorbeeld de kleur en het lettertype van de tekst kunt bepalen, maar de vormgeving, opmaak en presentatie van de totale website. Kortom, de code nodig voor het design van de website kan volledig gescheiden worden van de HTML-code.

Maar er zitten nog meer voordelen aan het gebruiken van CSS:

  • Doormiddel van CSS kan het design van de pagina en plaatsing van de pagina elementen tot op de pixel nauwkeurig worden uitgevoerd. Iets wat webdesigners zeker zal aanspreken.
  • Doordat alle code voor het vormgeven van de website ondergebracht zijn in één bestand, hoeven alleen maar veranderingen te worden aangebracht in dat bestand om een wijziging in de vormgeving voor de hele website door te voeren. Dit scheelt niet alleen veel tijd, maar verkleind tevens de kans op het maken van fouten.
  • CSS style sheets worden door alle webbrowsers uitstekend ondersteund. Misschien inmiddels zelfs al beter dan de ouderwetse methode van opmaak in de HTML-code zelf.
  • Door het toepassen van Cascading Style Sheets is het heel eenvoudig alle pagina's van de website er precies hetzelfde uit te laten zien. Iets dat als erg aangenaam zal worden ervaren door de bezoekers van uw website.
  • Wanneer de code voor vormgeving van de website ondergebracht wordt in een style sheet, is niet alleen voor u de HTML-code van u website beter leesbaar en begrijpbaar, maar ook voor de zoekmachines. Overzichtelijke code wordt ook door de zoekmachines zeer gewaardeerd en zullen zeker leiden tot betere resultaten in de zoekmachine.

Waar kan ik meer leren over CSS?

Tot zover een korte introductie wat CSS nou eigenlijk is. Wil je iets aan de opmaak van je website veranderen, dan zal je dus met CSS aan de slag moeten gaan. We raden aan om een boek aan te schaffen dat je alles leert over CSS. Online kan je ook tal van filmpjes vinden.
Volgende post
" De beste tijd om op Instagram te posten is tussen 14:00 en 15:00 uur. Het niveau van betrokkenheid dat u krijgt, kan echter aanzienlijk veranderen, afhankelijk van welke dag van de week u post. De beste dag om op Instagram te posten is donderdag, niet alleen om 15.00 uur, maar ook om 05.00 uur, 11.00 uur en 16.00 uur. "

CSS staat voor Cascading Style Sheets

CSS, dat staat voor Cascading Style Sheets is een programeertaal dat zorgt voor de opmaak van HTML paginas. Iets simpeler gezegd, via CSS maakt men de opmaak van een website.
Stel je hebt een website gemaakt met HTML, zonder dat er CSS bestand is toegepast. Dan zal deze er hoogstwaarschijnlijk zo uitzien (zie afbeelding)

HTML bestand zonder CSS

Wanneer je geen stylesheet (css) bestand toewijst aan jouw website, dan zal de browser een standaard styling toepassen, men noemt dit een 'user stylesheet'.
macbook met website dat geen css gebruikt

HTML bestand met CSS

Wanneer je wel een stylesheet (css) bestand toewijst aan jouw website, dan zal de browser de styling overnemen van het css bestand dat je hebt gelinkt aan die pagina.
macbook met website dat css gebruikt

Hoe werkt CSS precies?

CSS zorgt dus voor de opmaak, maar om elementen verschillend op te maken moet er natuurlijk wel een manier zijn om je op specifieke elementen te richten. Je kunt dit doen door de HTML codes die gebruikt worden.

Elk HTML element is via CSS apart vorm te geven. Daarnaast worden vaak ook classes (class=) en identificeerders (id=) gebruikt om verschillende secties vorm te geven met CSS. Zo kun je dezelfde HTML elementen op verschillende manieren vormgeven, afhankelijk van waar het op de website staat.

Het is denk ik wel tijd voor een voorbeeld van een stukje CSS code.

css voorbeeld code

De body geeft eigenlijk altijd het standaard lettertype en grootte weer op een website. In dit geval zie je bij font-family dat Helvetica als standaard lettertype wordt gebruikt. Mocht er iets zijn waardoor het niet weergegeven kan worden, dan wordt er overgeschakeld op sans-serif. De grootte van het lettertype dat wordt aangehouden is 16 pixels.

Weer iets heel anders is de “a” die je ziet staan. Hiermee kun je je richten op de links die op de website worden weergegeven. In dit geval wordt aangegeven welke kleur een link moet hebben en in welke kleur de link moet veranderen wanneer iemand er met zijn of haar muis overheen gaat (hover effect).

Tot zover een korte introductie wat CSS nou eigenlijk is. Wil je iets aan de opmaak van je website veranderen, dan zal je dus met CSS aan de slag moeten gaan

De voordelen van CSS gebruiken

Zoals gezegd kunt u doormiddel van CSS de opmaak en vormgeving vanuit één bestand regelen voor de hele website. Dit betekent dat u vanuit een style sheet niet alleen bijvoorbeeld de kleur en het lettertype van de tekst kunt bepalen, maar de vormgeving, opmaak en presentatie van de totale website. Kortom, de code nodig voor het design van de website kan volledig gescheiden worden van de HTML-code.

Maar er zitten nog meer voordelen aan het gebruiken van CSS:

  • Doormiddel van CSS kan het design van de pagina en plaatsing van de pagina elementen tot op de pixel nauwkeurig worden uitgevoerd. Iets wat webdesigners zeker zal aanspreken.
  • Doordat alle code voor het vormgeven van de website ondergebracht zijn in één bestand, hoeven alleen maar veranderingen te worden aangebracht in dat bestand om een wijziging in de vormgeving voor de hele website door te voeren. Dit scheelt niet alleen veel tijd, maar verkleind tevens de kans op het maken van fouten.
  • CSS style sheets worden door alle webbrowsers uitstekend ondersteund. Misschien inmiddels zelfs al beter dan de ouderwetse methode van opmaak in de HTML-code zelf.
  • Door het toepassen van Cascading Style Sheets is het heel eenvoudig alle pagina's van de website er precies hetzelfde uit te laten zien. Iets dat als erg aangenaam zal worden ervaren door de bezoekers van uw website.
  • Wanneer de code voor vormgeving van de website ondergebracht wordt in een style sheet, is niet alleen voor u de HTML-code van u website beter leesbaar en begrijpbaar, maar ook voor de zoekmachines. Overzichtelijke code wordt ook door de zoekmachines zeer gewaardeerd en zullen zeker leiden tot betere resultaten in de zoekmachine.

Waar kan ik meer leren over CSS?

We raden aan om een boek aan te schaffen dat je alles leert over CSS. Online kan je ook tal van filmpjes vinden.
Volgende post
" De beste tijd om op Instagram te posten is tussen 14:00 en 15:00 uur. Het niveau van betrokkenheid dat u krijgt, kan echter aanzienlijk veranderen, afhankelijk van welke dag van de week u post. De beste dag om op Instagram te posten is donderdag, niet alleen om 15.00 uur, maar ook om 05.00 uur, 11.00 uur en 16.00 uur. "

Wat betekent HTML?

HTML is de afkorting van Hyper Text Markup Language. Het is de taal waarmee websites worden weergegeven.

Wat is HTML en hoe werkt het?

HTML is de afkorting van Hyper Text Markup Language. In het Nederlands zou "markup language" vertaald kunnen worden als "opmaak taal". Hoewel vaak aangeduid als programmeertaal, is HTML niet meer dan opmaaktaal voor tekst in een tekstdocument. Tenminste, in eerste instantie. Want na het opmaken van een HTML-pagina, ofwel alle elementen op hun plek zetten, kunnen we er vervolgens voor kiezen om de vormgeving van de diverse elementen aan onze wensen aan te gaan passen. En dat is waar we CSS voor gebruiken. Een goed voorbeeld van pagina's opmaken kunnen we dagelijks zien in de krant. De krant heeft een bepaald paginaformaat. En binnen dat formaat moeten artikelen, de koppen boven de artikelen en ook foto's en andere elementen een plek op de pagina toegewezen krijgen.

Broncode van een website bekijken

De meeste browsers maken het zeer eenvoudig om de broncode van eender welke website te bekijken en te analyseren. Wil je zelf de broncode (HTML) bekijken van een website die jij interessant vindt? Volg dan volgende stappen.
1. Klik met de rechtermuisknop eender waar op de pagina
2. Je ziet nu een pop-up met verschillende opties (zie afbeelding)
pop-up screen browser
3. Selecteer 'Paginabron weergeven' en klik erop.
4. Voila, je ziet nu de broncode (HTML) van de desbetreffende pagina. (zie afbeelding)
Html code in browser

Onze andere blog artikelen al gelezen?

Image

Wat is Google Analytics?

Google Analytics is een gratis tool van Google waarmee je een hoop gegevens kan verzamelen over je websitebezoekers. Deze tool zou op elke...
Lees meer
Image

Wat is een goede website?

Je website mag dan nog zo mooi en goed zijn, als hij niet gevonden wordt, heeft hij geen waarde. Dus vindbaarheid is een cruciale vereiste...
Lees meer

Onze andere blog artikelen al gelezen?

Image

Wat is Google Analytics?

Google Analytics is een gratis tool van Google waarmee je een hoop gegevens kan verzamelen over je websitebezoekers. Deze tool zou op elke...
Lees meer
Image

Wat is een goede website?

Je website mag dan nog zo mooi en goed zijn, als hij niet gevonden wordt, heeft hij geen waarde. Dus vindbaarheid is een cruciale vereiste...
Lees meer