Wat css is, en wat kun je met CSS doen?
CSS staat voor Cascading StyleSheet. CSS wordt gebruikt om HTML pagina’s een opmaak mee te geven. Veel mensen noemen een CSS bestand ook wel “Style Sheet” of “styling”.
Waarom CSS?
Met CSS kun je bepalen hoe een pagina wordt weergegeven in een browser. De styling die je met CSS kunt bereiken, zijn in HTML niet mogelijk. Zo kun je bijvoorbeeld bepalen dat bepaalde elementen in HTML een bepaalde afstand van de zijkant af moeten staan.
CSS stelt je in staat om álle stijlelementen van een website in een document onder te brengen. Het grote voordeel hiervan is dat, als je iets wilt veranderen aan het uiterlijk van je website, je dit in slechts één document hoeft te veranderen om dit op alle pagina’s toe te passen.
Als je in HTML de styling zou willen wijzigen, moet je dit in álle pagina’s wijzigen.
Doordat je met CSS minder code gebruikt dan met HTML, worden de pagina’s kleiner en daarmee ook sneller.
Browsers ondersteunen CSS heel erg goed, zowel mobiele browsers als desktop versies.
Versies
Moderne browsers ondersteunen CSS versie 1 en CSS versie 2. CSS 3 is er wel al, maar nog niet alle browsers ondersteunen deze versie (volledig). Dit komt doordat CSS 3 nog geen officiële standaard is op het web.
Responsive
Omdat meer dan de helft van alle bezoekers van het internet vanaf een mobiel apparaat komen, is het tegenwoordig standaard aan het worden dat een webpagina ook op een juiste manier wordt weergegeven op een mobiel apparaat.
Om je webpagina op een mobiel apparaat weer te geven, maken mensen hun website steeds vaker “responsive”. Dit houdt in dat men hun pagina zo ontwikkeld dat de breedte afhankelijk is van de breedte van de browser.
Voorheen werd bijna altijd gewerkt met vaste breedtes.
Het responsive maken van websites kan een grote uitdaging zijn. Door het grote aanbod aan diverse mobiele apparaten en de verschillende groottes van de apparaten is het lastig om te voor alle apparaten de juiste styling te maken.
Responsive designs gaan bijna altijd samen met veel javascript. Zo heb je bijvoorbeeld een framework genaamd “bootstrap”.
Zo een framework bied de basis van een responsive design, een tool die het de designer een stuk makkelijker maakt.
Een dergelijk framework biedt vaan heel veel add-ons, zoals diverse menu’s en vele buttons die je kan gebruiken.
Regels
Binnen CSS zijn er een aantal standaarden vastgelegd. Het belangrijkste om te weten is het verschil tussen classes en ID’s.
Als je een class aanmaakt in CSS, kan en mag je deze in je HTML pagina zo vaak gebruiken als je zelf wilt.
Met een ID zit dit iets anders. Een ID mag je volgens de regels slechts één keer gebruiken in je HTML pagina.
Een class maak je door een punt (.) toe te voegen vóór de naam van je class. Een ID maak je door een hashtag (#) toe te voegen vóór de naam van je ID.
Browsers
Helaas is het nog altijd zo dat de verschillende browsers de CSS regels anders interpreteren. Als jij een website maakt, kan het dus zo zijn dat deze er in Internet Explorer anders uit ziet dan in bijvoorbeeld Google Chrome of Mozilla Firefox.
Gelukkig is hier een oplossing voor bedacht.
Je kunt in je HTML pagina meerdere CSS bestanden oproepen, per browser kun je aangeven welk bestand aangeroepen moet worden.
Op deze manier kun je er voor zorgen dat je webpagina er in iedere browser hetzelfde uit ziet.