Websites bestaan uit een aantal afzonderlijke delen, waaronder afbeeldingen, tekst en verschillende documenten. Deze documenten bevatten niet alleen documenten waarnaar kan worden gelinkt vanuit verschillende pagina's, zoals PDF-bestanden, maar ook de documenten die worden gebruikt om de pagina's zelf samen te stellen, zoals HTML-documenten om de structuur van een pagina en CSS-documenten (Cascading Style Sheet) te bepalen om het uiterlijk van een pagina te dicteren. In dit artikel wordt ingegaan op CSS, waarin wordt beschreven wat het is en waar het vandaag op websites wordt gebruikt.
Een les CSS-geschiedenis
CSS werd voor het eerst ontwikkeld in 1997 als een manier voor webontwikkelaars om het uiterlijk van de webpagina's die ze aan het maken waren te definiëren. Het was bedoeld om webprofessionals toe te staan de inhoud en de structuur van de code van een website te scheiden van het visuele ontwerp, iets dat tot die tijd niet mogelijk was.
Door de scheiding van structuur en stijl kan HTML meer van de functie uitvoeren waarop het oorspronkelijk was gebaseerd - de opmaak van inhoud, zonder zich zorgen te hoeven maken over het ontwerp en de lay-out van de pagina zelf, iets dat algemeen bekend staat als de "look and feel" van de pagina.
CSS werd pas rond 2000 populair toen webbrowsers meer dan de basislettertypen en kleuraspecten van deze opmaaktaal gingen gebruiken. Tegenwoordig ondersteunen alle moderne browsers alle CSS Level 1, de meeste CSS Level 2 en zelfs de meeste aspecten van CSS Level 3. Terwijl CSS blijft evolueren en nieuwe stijlen worden geïntroduceerd, zijn webbrowsers begonnen met het implementeren van modules die nieuwe CSS-ondersteuning bieden in die browsers en geven webontwerpers krachtige nieuwe stylinghulpmiddelen om mee te werken.
In (veel) jaren geleden waren er geselecteerde webontwerpers die weigerden om CSS te gebruiken voor het ontwerpen en ontwikkelen van websites, maar die praktijk is tegenwoordig bijna verdwenen van de industrie. CSS is nu een veel gebruikte standaard in webdesign en het zou moeilijk zijn om iemand te vinden die vandaag in de industrie werkt en die op zijn minst een basiskennis van deze taal had.
CSS is een afkorting
Zoals al gezegd, staat de term CSS voor 'Cascading Style Sheet'. Laten we deze zinsnede een beetje doorbreken om vollediger uit te leggen wat deze documenten doen.
Het woord "stylesheet" verwijst naar het document zelf (zoals HTML, CSS-bestanden zijn eigenlijk alleen tekstdocumenten die kunnen worden bewerkt met een verscheidenheid aan programma's). Style-sheets worden al vele jaren gebruikt voor het ontwerpen van documenten. Dit zijn de technische specificaties voor een lay-out, zowel in gedrukte vorm als online. Drukkers hebben lang stijlbladen gebruikt om ervoor te zorgen dat hun ontwerpen precies volgens hun specificaties worden afgedrukt. Een stylesheet voor een webpagina heeft hetzelfde doel, maar met de toegevoegde functionaliteit om de webbrowser ook te vertellen hoe het document moet worden weergegeven. Tegenwoordig kunnen CSS-stijlbladen ook mediaquery's gebruiken om de manier te wijzigen waarop een pagina naar verschillende apparaten en schermformaten kijkt. Dit is ongelooflijk belangrijk, omdat hiermee één HTML-document anders kan worden weergegeven op basis van het scherm dat wordt gebruikt om toegang te krijgen tot het document.
Cascade is het echt speciale deel van de term "cascading style sheet". Een webstijlblad is bedoeld om door een reeks stijlen in dat blad te lopen, zoals een rivier boven een waterval. Het water in de rivier raakt alle rotsen in de waterval, maar alleen die op de bodem beïnvloeden precies waar het water zal stromen. Hetzelfde geldt voor de cascade in websitestijlbladen.
Elke webpagina wordt beïnvloed door ten minste één stylesheet, zelfs als de webontwerper geen stijlen toepast. Deze stijlpagina is de stijlpagina van de gebruikersagent - ook bekend als de standaardstijlen die de webbrowser zal gebruiken om een pagina weer te geven als er geen andere instructies worden gegeven. Standaard zijn hyperlinks bijvoorbeeld in blauw weergegeven en zijn ze onderstreept. Die stijlen komen uit de standaard stylesheet van een webbrowser. Als de webontwerper echter andere instructies geeft, moet de browser weten welke instructies voorrang hebben. Alle browsers hebben hun eigen standaardstijlen, maar veel van die standaardwaarden (zoals de blauwe onderstreepte tekstlinks) worden gedeeld door alle of de meeste grote browsers en versies.
Voor een ander voorbeeld van een standaardbrowser wordt in onze webbrowser het standaardlettertype "Times New Roman" weergegeven bij maat 16. Bijna geen van de pagina's die we in die lettertypefamilie en -grootte bezoeken, echter. Dit komt omdat de cascade definieert dat de tweede stijlbladen, die door de ontwerpers zelf zijn ingesteld, de lettergrootte en -familie opnieuw definiëren, waarbij de standaardwaarden van onze webbrowser worden overschreden. Alle stijlpagina's die u voor een webpagina maakt, hebben meer specificiteit dan de standaardstijlen van een browser, dus die standaardwaarden zijn alleen van toepassing als uw stijlblad deze niet overschrijft. Als u wilt dat koppelingen blauw en onderstreept zijn, hoeft u niets te doen omdat dat de standaard is, maar als het CSS-bestand van uw site aangeeft dat koppelingen groen moeten zijn, vervangt die kleur het standaard blauw. De onderstreping blijft in dit voorbeeld omdat u niet anders hebt opgegeven.
Waar wordt CSS gebruikt?
CSS kan ook worden gebruikt om te definiëren hoe webpagina's eruit moeten zien wanneer ze worden bekeken op andere media dan een webbrowser. U kunt bijvoorbeeld een afdrukstijlblad maken dat bepaalt hoe de webpagina moet worden afgedrukt. Omdat webpagina-items zoals navigatieknoppen of webformulieren geen nut hebben op de afgedrukte pagina, kan een afdrukstijlblad worden gebruikt om die gebieden uit te schakelen wanneer een pagina wordt afgedrukt.Hoewel dit op veel sites niet echt gebruikelijk is, is de optie om print stylesheets te maken krachtig en aantrekkelijk (in onze ervaring doen de meeste webprofessionals dit niet simpelweg omdat de scope van een site niet vereist dat dit extra werk gedaan wordt ).
Waarom is CSS belangrijk?
CSS is een van de krachtigste hulpmiddelen die een webontwerper kan leren, omdat u daarmee het hele visuele uiterlijk van een website kunt beïnvloeden. Goedgeschreven stijlpagina's kunnen snel worden bijgewerkt en websites kunnen wijzigen wat visueel op het scherm wordt geprioriteerd, wat weer waarde en focus voor bezoekers weergeeft, zonder dat er wijzigingen in de onderliggende HTML-markup hoeven te worden aangebracht.
De grootste uitdaging van CSS is dat er nogal wat te leren valt - en met browsers die elke dag veranderen, werkt wat vandaag goed werkt morgen misschien niet omdat nieuwe stijlen worden ondersteund en anderen om de een of andere reden niet meer in de gunst komen .
Omdat CSS kan cascade en combineren, en kan overwegen hoe verschillende browsers de richtlijnen anders kunnen interpreteren en implementeren, kan CSS moeilijker zijn dan pure HTML om te beheersen. CSS verandert ook in browsers op een manier die HTML echt niet. Zodra u CSS gaat gebruiken, ziet u echter dat het benutten van de kracht van stijlbladen u ongelooflijke flexibiliteit biedt bij het ontwerpen van webpagina's en het bepalen van hun uiterlijk. Onderweg zul je een "zak met trucs" verzamelen van stijlen en benaderingen die in het verleden voor je hebben gewerkt en die je opnieuw kunt gebruiken wanneer je in de toekomst nieuwe webpagina's maakt.
Origineel artikel door Jennifer Krynin. Bewerkt door Jeremy Girard op 17-07-17
