Wat zijn Cascading Style Sheets en waarvoor wordt CSS gebruikt?

CSS behoort tot een drietal kernwebtechnologieën naast HTML en JavaScript. Met een zorgvuldige planning draagt CSS bij aan een scheiding van zorgen. Onafhankelijke bronnen bepalen de structuur, de presentatie en het gedrag van een inhoud.

Style Sheets spelen een belangrijke rol bij toegankelijkheid, schaalbaarheid en zelfs webprestaties. Als contentauteur of webdesigner geven ze je controle over hoe apparaten content weergeven. Van lay-out tot lettergrootte en kleur, CSS transformeert inhoud in prachtig ogende pagina's.

Hoe ziet CSS eruit?

CSS is een grote taal - er zijn veel verschillende dingen om te stylen! Maar de syntaxis is eenvoudig, met slechts een paar regels om te leren.

HTML-elementen hebben verschillende eigenschappen die CSS kan opmaken. De kleur eigenschap stelt de voorgrondkleur (bijvoorbeeld tekst) in. Lettergrootte is afhankelijk van de lettertypegrootte eigendom.

Elke eigenschap kan worden ingesteld op een ondersteunde waarde. Het toekennen van een waarde aan een eigenschap is een 'verklaring'. Over het algemeen zien ze er als volgt uit:

property: value

Bijvoorbeeld:

hoe linux dubbel op te starten op mac

color: red

Waarden voor verschillende eigenschappen kunnen er heel anders uitzien, zelfs waarden voor dezelfde eigenschap. Hier zijn bijvoorbeeld nog twee manieren om de vorige verklaring te schrijven:

color: #ff0000  
color: rgb(255, 0, 0)

Hoe HTML en Style Sheets samenkomen

U kunt HTML en CSS op een paar verschillende manieren combineren, elk met zijn voordelen.

Schrijfstijlen Inline

De eenvoudigste methode is om stijldeclaraties rechtstreeks aan een element in het HTML-bestand te koppelen. U kunt dit doen met behulp van de stijl attribuut als volgt:

  
 Most of this text is red …
  
 … but this isn’t!

Hoewel stijlelementen inline zoals deze handig kunnen zijn, heeft het verschillende nadelen. Om te beginnen bemoeilijkt het de HTML, waardoor het moeilijker te lezen is in één oogopslag. Het is ook lastig om te onderhouden: stel je een lang document voor waarin we de kleur van elke alinea willen instellen. Dit is CSS, maar het is geen 'Style Sheets'.

Stijlen in het hoofd inbedden

U kunt beginnen te zien hoe een stylesheet eruitziet met het tweede mechanisme, inbedden . Met deze aanpak verzamelen we alle stijlverklaringen samen in een stijl element in de hoofd van ons document. Het zal er ongeveer zo uitzien:

  
  
  
  
 /* style instructions go here */  
  
  
  
 ...

Onze stijlinstructies hebben echter wat meer detail nodig dan voorheen. Omdat we ze naar de head hebben verplaatst, is elke regel niet langer gekoppeld aan een element. We hadden kunnen verklaren kleur rood , maar wat moet die kleur hebben?

Dit is waar CSS-selectors binnenkomen. Ze stellen ons in staat om specifieke delen van de pagina te targeten en hun stijl op één plek te definiëren, met behulp van deze syntaxis:

ontdek gratis van wie een telefoonnummer is

selector {  
 declaration1;  
 declaration2;  
 /* etc. */  
}

Als we bijvoorbeeld de tekst van alinea's blauw willen opmaken, kunnen we het volgende specificeren:

p {  
 color: blue;  
}

In dit voorbeeld is de selector gewoon P , die overeenkomt met alle alinea-elementen in ons document. Het kleurt alle tekst blauw, zolang het erin zit

Een extern stylesheet koppelen

De laatste methode om te dekken is koppelen. Dit is verreweg de meest bruikbare benadering en een die u het grootste deel van de tijd zou moeten kiezen. In plaats van CSS-regels in te sluiten in de stijl element rechtstreeks in uw document, kunt u ze naar een apart bestand verplaatsen.

Plak deze code in de tags van uw HTML-bestand om uw externe stylesheet te koppelen.

De kracht van CSS

Met de gekoppelde methode benutten we een kernkracht van CSS: scheiding van zorgen. Alle semantische informatie - wat de inhoud betekent - is opgenomen in het HTML-document. De styling - hoe het eruit ziet - staat in een apart bestand, de stylesheet.

Hier zijn slechts enkele voordelen van deze scheiding:

U kunt een stylesheet uitschakelen door de bestandsverwijzing te wijzigen. Dit kan zelfs dynamisch gebeuren. In één stap kunt u de hele look en feel van een pagina wijzigen.

Veel pagina's kunnen desgewenst dezelfde stylesheets delen. Door één enkel bestand te wijzigen, kunt u het uiterlijk van een hele website bijwerken.

Het splitsen van een pagina in ‘content’ en ‘style’ heeft technische voordelen. Proxy's en browsers kunnen afzonderlijke bestanden afzonderlijk cachen. Dit betekent dat een site zijn stijlinformatie één keer kan verzenden, in plaats van deze op elke afzonderlijke pagina op te nemen.

Bij het samenwerken kunnen verschillende teams naar hun kracht werken door afzonderlijke bestanden te maken en te bewerken zonder elkaar te beïnvloeden.

De Cascade uitleggen

Je hebt veel geleerd over stijlen en stylesheets, maar hoe zit het met het trapsgewijze deel van CSS?

De cascade bepaalt welke stijlen worden gebruikt wanneer er meerdere stylesheets aanwezig zijn. Je hebt gezien hoe een auteur stijlen voor hun inhoud kan specificeren. Maar een ander kenmerk van CSS is dat het lezers en browserfabrikanten ook wat te zeggen heeft.

Je hebt je misschien al afgevraagd over standaardstijlen. Hoe werkt bijvoorbeeld een H1 element groot en vet lijken, zelfs zonder stijlbladen van de auteur? Dit is te danken aan een reeks speciale regels die de user-agent-stylesheet vormen. Deze regels worden in eerste instantie door uw webbrowser toegepast op elke pagina die u bezoekt.

De cascade geeft aan dat een auteursstijlblad van toepassing is na de user-agentstijlen. Als onze browser zegt dat koppen vet zijn, maar de auteur van de pagina verklaart dat koppen op deze pagina licht zijn, dan worden ze licht.

Er is nog een stijlbladbron die de lezer enige controle overhandigt. Elke internetgebruiker kan in theorie een gebruikersstijlblad met aangepaste regels bijhouden. Deze zitten in het midden: gebruikersregels overschrijven de standaard browserinstellingen, maar worden zelf overschreven door auteursstijlen. Helaas is ondersteuning voor gebruikersstijlbladen nooit wijdverbreid geweest.

Verschillende media targeten

U kunt Style Sheets in verschillende contexten gebruiken, ook buiten het scherm. De voor de helft attribuut van de koppeling element definieert op welke mediatypen het stijlblad van toepassing is. U kunt bijvoorbeeld a . definiëren stylesheet om af te drukken met behulp van opmaak zoals het volgende:
U kunt gemeenschappelijke stijlen in één globaal stijlblad en mediaspecifieke stijlen in afzonderlijke bestanden verzamelen. Er zijn zelfs mediatypen voor auditieve of braillepresentaties van uw inhoud. CSS is een essentieel hulpmiddel bij het verbeteren van de toegankelijkheid.

Verwant: Hoe u op internet kunt surfen als u blind of slechtziend bent
vind mijn huis op google earth

Sites zoals Wikipedia gebruiken CSS om hun afdrukstijl te bepalen, ongewenste elementen te verbergen en de lay-out te vereenvoudigen.

CSS laat HTML er goed uitzien

Cascading Style Sheets dekken veel: de cascade, overerving, selectors, bronnen, media, enz. Maar hun kracht maakt het moderne web mogelijk. Dit is een medium dat ingebouwde functies voor herbruikbaarheid, flexibiliteit en toegankelijkheid biedt.

Om de volledige kracht van CSS te zien en hoeveel het te bieden heeft, bekijk onze spiekbrief met alle essentiële CSS3-eigenschappen.
Deel Deel Tweeten E-mail De essentiële CSS3-eigenschappen Cheatsheet
Beheers essentiële CSS-syntaxis met onze cheatsheet voor CSS3-eigenschappen.
Lees volgende Gerelateerde onderwerpen

Programmeren

Webontwikkeling

CSS

Over de auteur Bobby Jack(58 artikelen gepubliceerd)
Bobby is een technologie-enthousiasteling die bijna twee decennia als softwareontwikkelaar heeft gewerkt. Hij is gepassioneerd door gaming, werkt als recensie-editor bij Switch Player Magazine en is ondergedompeld in alle aspecten van online publiceren en webontwikkeling.
Meer van Bobby Jack
Abonneer op onze nieuwsbrief

Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren