CSS (Cascading Style Sheets of Waterval Stijlbestanden) is de code die je gebruikt om je webpagina van stijlen te voorzien. In De Basisbegrippen van CSS nemen we alles door wat je nodig hebt om te beginnen. We beantwoorden vragen zoals:
Hoe maak ik mijn tekst zwart of rood?
Hoe laat ik mijn inhoud op die en die plaats in het scherm verschijnen?
Hoe versier ik mijn webpagina met afbeeldingen en kleuren?
Dus wat is CSS eigenlijk?
Zoals HTML is CSS niet echt een programmeertaal. Het is ook geen opmaaktaal. Het is een stijlbladtaal, dat wil zeggen, dat het je toestaat om stijlen op geselecteerde elementen in je HTML-documenten toe te passen. Om bijvoorbeeld, alle paragraaf-elementen in je HTML-pagina te selecteren en de tekst erin rood te maken, zou je deze CSS schrijven:
p {
color: red;
}
Probeer het eens: kopieer deze drie CSS-regels in een nieuw bestand in je broncode-editor. Dan noem je het bestand stijl.css en slaat deze op in je stijlbladenmap (bijvoorbeeld css of style).
Maar we moeten de CSS nog op je HTML-document toepassen, anders zal de CSS-stijl geen effect hebben op de manier waarop je browser het HTML-document weergeeft zoals ons voorbeeld uit: De basisbegrippen van HTML. Je doet dat door onderstaande code in je index te gebruiken tussen het <head>-attribuut.
<link href="scss/stijl.css" rel="stylesheet" type="text/css">
Anatomie van een set CSS-regels
We gaan de CSS hierboven wat grondiger bekijken. De hele structuur wordt een regel-set (een rule set in het Engels) genoemd (maar vaak afgekort tot "stijlregel", i.e. "rule"). Elk onderdeel heeft ook zijn eigen naam:
Selector - Dit is de HTML-elementnaam aan het begin van de regelset. Het selecteert de elementen waarop een stijl zal worden toegepast (in dit geval p-elementen). Om een ander element een stijl te geven, verander je gewoon de selector.
Stijldeclaratie (declaration) - Een stijldeclaratie is enkele stijlregel, zoals color: red;. De declaratie bepaalt welke eigenschappen (properties in het Engels) van het element een stijl zullen krijgen.
Eigenschappen (properties) - Met eigenschappen kan je een HTML-elementstijlen (In dit geval is color een eigenschap van de p-elementen). Met CSS kan je de eigenschappen kiezen die je met jouw regel wilt beïnvloeden.
Stijlwaarden (property values) - Aan de rechterkant van de eigenschap, na de dubbele punt (:), vinden we de stijlwaarde die per eigenschap vele verschillende gedaantes kan aannemen (behalve rood, zijn er nog vele andere kleuren).
Dit zijn de andere belangrijke delen van de syntax:
Elke regelset (behalve de selector) moeten worden ingesloten tussen accolades ({ }).
Binnen elke stijldeclaratie, moet je een dubbele punt (:) gebruiken om de eigenschap van zijn stijlwaarden te scheiden.
Binnen elke regelset, moet je een puntkomma (;) gebruiken om elke stijldeclaratie van de volgende te scheiden.
Dus om meerdere stijlwaarden tegelijk te gebruiken, moet je ze apart en gescheiden door puntkomma's schrijven zoals hieronder:
p {
color: red;
width: 500px;
border: 1px solid black;
}
Meerdere elementen selecteren
Je kunt meerdere elementtypes selecteren en één enkele regel op hen allemaal toepassen. Ze worden met komma's van elkaar gescheiden. Bijvoorbeeld:
p, li, h1 {
color: red;
}
Verschillende selectortypes
Er zijn vele verschillende selectortypes. Hierboven hebben we enkel elementselectoren bekeken. Dit zijn selectoren die alle elementen van een bepaald type in een HTML-document selecteren. Maar we kunnen veel preciezer dan dat selecteren. Hieronder volgende de gebruikelijkste selectortypes (er zijn er meer):
| Selectornaam | Wat het selecteert | Voorbeeld |
|---|
| Elementselector (soms een label of typeselector genoemd) | Alle HTML-elementen van het gekozen type. | p selecteert <p> |
| ID-selector | Het element op de pagina die het ID als attribuut heeft gekregen (in een HTML-pagina is slechts 'één element per ID toegestaan). | #devnl-voorbeeld selecteert <p id="devnl-voorbeeld"> of bijv. <a id="devnl-voorbeeld"> |
| Class-selector | Een of meerdere elementen op de pagina die een specifieke class als attribuut hebben gekregen. (In het Nederlands is dit een klasse, maar u moet het Engelse 'class' als selector gebruiken.) (verschillende elementen kunnen dezelfde klasse krijgen ). | .devnl-voorbeeld selecteert <p class="devnl-voorbeeld"> of bijv. <a class="devnl-voorbeeld"> |
| Attribuut- selector | Een of meerdere elementen op de pagina met het specifieke attribuut. | img selecteert <img src="myimage.png"> |
| Pseudo-class selector | Een of meerdere gekozen elementen maar enkel als ze zich in een specifieke staat bevinden, bijvoorbeeld als u er met uw muis overheen beweegt (dat is "hover" in het Engels). | a:hover selecteert <a>, maar enkel als de muis over de hyperlink heen beweegt. |
Lettertypes en tekst
Nu je een inleiding op CSS hebt verwerkt, zouden we meer stijlregels en informatie aan je style.css bestand kunnen toevoegen. Laten we daarvoor eerst aan de lettertypes en tekst gaan werken.
Om te beginnen zoek je op bijvoorbeeld Google Fonts een font op die je graag op je website zou willen gebruiken. Voeg het <link ...>-element in de <head></head> van je index toe. Hieronder een kleine voorbeeld.
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
Mocht je het stuk omtrent de "rode tekst" uit het eerdere gedeelte gebruikt hebben in je style.css, verwijder deze dan even want die is momenteel niet meer nuttig. Vervang het gedeelte door de regels die je hieronder in het voorbeeld ziet en pas deze waar nodig naar je eigen wens aan. We gaan namelijk nu onze font-family gebruiken om de <link ...> toe te voegen aan onze stijl. font-family betekent gewoon een of meerdere lettertypes die je voor je tekst wilt gebruiken. Deze regel stelt een globaal basislettertype in en de lettergrootte voor de volledige pagina.
html, body {
font-size: 10px; /* px betekent 'pixels': de basislettergrootte is nu 10 pixels hoog. */
font-family: 'Roboto', sans-serif;
}
Opmerking: In het voorbeeld hierboven is er commentaar toegevoegd dat uitlegt wat "px" betekent. Alles dat in een CSS-document tussen /* en */ staat is CSS-commentaar, dat de browser zal negeren wanneer het de code genereert. Dit is een plek voor jezelf waar je mogelijk nuttige commentaar kan plaatsen voor later (bijvoorbeeld een TO-DO).
Nu gaan we de lettergroottes instellen voor elementen binnen onze HTML body (h*, <li> en <p>) die tekst bevatten. We gaan ook de tekst van onze hoofding centreren en de lijnhoogte en letterafstand op de inhoud van de body instellen om de wat leesbaarder te maken.
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
Je zou de px-waarden kunnen afstemmen op wat je zelf wilt en graag terug ziet in je website ontwerp.
Dozen, dozen, het gaat allemaal over dozen
Er is een ding dat je zal gaan merken als je CSS-code schrijt. Heel vaak gaat dit namelijk over dozen - hoe je hun grootte, kleur, positie, enz. instelt. De meeste van de HTML-elementen op uw pagina kunnen als dozen worden gezien die op elkaar zijn gestapeld. Het is dan ook geen verassing dat CSS-opmaak hoofdzakelijk op het doos-model is gebaseerd. Elk van de blokken, die plaats innemen op je pagina, heeft eigenschappen zoals die hieronder.
padding (vulling, wattering) - de ruimte die je juist rond de inhoud zit (bijvoorbeeld rond de tekst van een paragraaf).
border (boord) - de volle lijn die zich rond de padding bevindt.
margin (marge) die ruimte die rond de buitenkant van het element zit (dus ook rond de border).
In dit gedeelte gebruiken we ook:
width (breedte) - van een element.
background-color (achtergrondkleur) - de kleur die achter de inhoud en padding van een element zit.
color (kleur) - de kleur van de inhoud van een element (meestal de tekst).
text-shadow (tekstschaduw) - stelt een slagschaduw in op de tekst in een element.
display (weergave) - stelt de weergave modus van een element in.
Laten we beginnen met nog meer CSS-toevoegingen aan de pagina die je ontwerpt. Voeg al deze nieuwe regels toe onderaan je pagina en wees niet bang om met de waarden van de eigenschappen te experimenteren.
De kleur van de pagina veranderen
html {
background-color: #00539F;
}
Deze regel stel de achtergrondkleur van de hele pagina in. Verander de kleurcode hierboven in een kleur die jij zelf wilt.
Uitzoeken hoe de body in elkaar steekt
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
En dan nu het body-element. Er zijn nogal wat stijldeclaraties hier en we gaan er een per een doorheen.
width: (breedte) 600px; - Dit dwingt de body om altijd 600 pixels breed te zijn.
margin: (marge) 0 auto; - Als je deze twee waarde op een eigenschap zoals margin of padding, instelt, zal de eerste waarde (in dit geval 0) de bovenkant en onderkant van het element bepalen en de tweede waarde (auto) de linker- en rechterkant van het element (Hier is auto een speciale waarde die de beschikbare horizontale ruimte gelijk in een linkse en rechtse helft verdeelt). Je kan ook een, drie of vier waarden invullen.
background-color: (kleur) #FF9500; - Zoals reed vermeld, stelt dit de achtergrondkleur van het element in. Er is een soort van roodachtige oranje voor de body gebruikt in tegenstelling tot donkerblauw voor het html-element.
padding: (vulling) 0 20px 20px 20px - We hebben deze vier waarden op de padding ingesteld om een beetje ruimte rond onze inhoud te maken. Deze keer stellen we geen padding in op de bovenkant van de body en 20 pixels op de linker-, onder- en rechterkant. De waarden stellen boven-, rechter-, onder-, en linkerkant in, in die volgorde.
border: (boord) 5px solid black; - dit stelt een volle zwarte boord in die 5px breed is rond alle zijden van de body.
Onze hoofdtitel positioneren en stijlen
h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
Het is je misschien al opgevallen dat er een afschuwelijk gat aan de bovenkant van de body zit. Dat gebeurt, omdat browsers een default styling (een standaardstijl) op het <h1> element toepast (en ook op de andere), zelfs als je geen CSS hebt ingesteld. Dat klinkt misschien als een slecht idee, maar we willen dat een onopgemaakte pagina toch leesbaar is. Om van dat gat af te raken hebben we de default styling opgeheven door de marge op 0 te zetten: margin: 0;.
We gaan verder met de padding van de onder- en bovenkant van de grootste heading (dat is dus de hoofdtitel). Die hebben we 20 pixels gegeven en we hebben de tekst van de heading dezelfde kleur gegeven als de achtergrondkleur van de HTML.
We hebben hier een interessante eigenschap gebruikt: text-shadow, die past een slagschaduw toe op de tekstinhoud van het element. Het krijgt de volgende vier waarden:
De eerste pixelwaarde stelt de horizontale offset van de tekstschaduw in. - hoe ver die van de letter weg beweegt: en negatieve waarde zou hem naar links moeten schuiven.
De tweede pixelwaarde stelt de verticale offset van de slagschaduw van de tekst in - hoe ver hij naar beneden beweegt, in dit voorbeeld zou een negatieve waarde de tekstschaduw naar boven moeten duwen.
De derde pixelwaarde stelt de troebelewaarde van de omtrekt (in het Engels: blur radius) van de tekstschaduw in - een grotere waarde creëert een vagere schaduw.
De vierde waarden bepalen de basiskleur van de schaduw.
Probeer opnieuw met verschillende waarden te experimenteren en kijk eens wat je zoal kunt bedenken.
Het beeld centreren
img {
display: block;
margin: 0 auto;
}
Tot slot zullen we de afbeelding centreren zodat die er beter uitziet. We zouden opnieuw de margin: 0 auto; truck kunnen we gebruiken zoals we dat voor de body hebben gedaan, maar we moeten ook iets anders doen. Het body-element zit namelijk op block niveau, wat wil zeggen dat het ruimte inneemt op de pagina en margin-waarden kan krijgen (het kan ook andere waarden krijgen die de afstand tussen elementen bepalen). Afbeeldingen, daarentegen, zijn inline elementen, wat wil zeggen dat zij dat niet kunnen. Dus, om de afbeelding marges te kunnen geven, moet het beeld zich gedragen als een element op block niveau. We doen dat met display: block;.
Wij raden je de volgende tutorials ook aan:
