CSS is een verzameling van stijlregels (style rules) om
webpagina’s op te maken.
CSS staat voor ‘Cascading Style Sheets’
Op deze manier kunnen we een website opdelen in semantische (de tekst, koppen, afbeeldingen, …) en stijl onderdelen (lettertype tekst, grote kop, waar staat afbeelding, …)
Elementen CSS
Een stijlregel in CSS is opgebouwd 4 delen:
De selector: Hetgene dat je wilt stijlen (bv. ‘h1’)
De declaration: Hoe men wilt gaan stijlen, ze bestaat zelf uit twee componenten:
Property: wat men van de selector wil gaan stijlen (bv. kleur)
Value: De waarde die de property bezit (bv. groen)
CSS invoegen
We hebben drie verschillende mogelijkheden om CSS toe te passen op een HTML bestand. We overlopen wat ze zijn en hoe we ze toepassen.
Inline CSS
Bij inline CSS gaan we de stijl info letterlijk in de HTML elementen zetten.
We starten met de ‘stijl’ attribuut zodat onze browser weet dat er nu CSS komt om de paragraaf te stijlen.
Nu gaan we de eigenschap ‘color’ of kleur aanpassen.
We geven de waarde waarmee we de ‘color’ eigenschap willen aanpassen, in dit geval ‘orange’ ofwel oranje.
<p style=’color: orange;'>Ik ben oranje</p>
Meerdere eigenschappen
We zetten op het einde van de eigenschap een puntkomma (;). Dit zorgt ervoor dat we erna nog een attribuut kunnen toekennen, bv. het font!
<p style=’color: orange; font-family: Arial;'>Ik ben oranje</p>
Interne CSS
Bij interne CSS zetten we onze styling niet meer in de elementen maar wel nog steeds in ons HTML document.
We doen dit a.d.h.v. het html element ‘style’.
Daarna gebruiken we de selector, in dit geval ‘p’ voor paragraaf, gevolgd door ‘{}’ haakjes.
Ten slotte gevolgd door de eigenschap en waarde.
Opnieuw eindigen we elke eigenschap met ‘;’ zodat we meerdere kunnen
<style> p { color: orange; }</style><p>Ik ben oranje</p><p>Ik ben ook oranje</p>
Externe CSS
Externe CSS is een andere vorm om CSS toe te passen. We gebruiken een extra bestand met de ‘.css’-extensie om een stijl toe te passen.
Je maakt een html bestand aan met wat inhoud en kijkt wat je wilt veranderen.
<p>Ik ben oranje</p><p>Ik ben ook oranje</p>
En daarna maak je een .css bestand aan en pas je het element aan met een selector.
p { color: orange;}
Linken van bestanden
Om je HTML aan te passen a.d.h.v. een extern CSS bestand moet je die eerst linken. We doen dit letterlijk a.d.h.v. het ‘link’. Dit zetten we in de ‘head’-sectie van het HTML bestand.
We starten natuurlijk met ‘link’ om een extern bestand (internet of opgeslagen op pc) te linken.
Daarna zetten we het type van het bestand dat we willen linken, in ons is dit een CSS bestand ofwel een ‘stylesheet’.
Ten slotte zetten we de bestandsnaam van het css bestand, in ons geval is dit ‘styles.css’.
<head> <link rel=”stylesheet” href=”styles.css”><head><body> <p>Ik ben oranje</p></body>
p { color: orange;}
CSS properties
Warning
Soms tonen we enkel een fragment met de property, niet de bijbehorende selector (bv. body). We tonen ook enkel de CSS en niet altijd de HTML.
body {
background-color: red;
}
wordt
background-color: red;
Achtergrondkleur
De kleur van de achtergrond kan je veranderen met background-color gevolgd door de kleur.
background-color: red;
Achtergrondafbeelding
Als we een afbeelding willen toepassen op de achtergrond van onze website kunnen we background-image toepassen.
Herhaling
Een achtergrondafbeelding herhaalt basis. Door background-repeat op no-repeat zetten kunnen we dit stoppen. Andere vormen van herhaling zijn:
repeat-x;: Herhaalt de afbeelding enkel horizontaal
repeat-y;: Herhaalt de afbeelding enkel verticaal
round;: Herhaalt de afbeelding zonder dat hij afgesneden wordt door hem te stretchen.
body { background-image: url(../images/bush.png); background-repeat: no-repeat;}
Voorbeeld
Vastzetten
Aan de hand van background-attachment kunnen we de achtergrondafbeelding op een bepaalde manier vastzetten.
fixed: Vast t.o.v. venster, inhoud scrollt over afbeelding.
scroll: (Standaard) Scrolt mee met de inhoud
local: Schuift enkel mee met de inhoud van het element
Positie
Met background-position kunnen we de positie van de afbeelding aanpassen. Dit kunnen we op verschillende manieren.
/* Sleutelwoorden */background-position: top;background-position: bottom;background-position: left;background-position: right;background-position: center;/* Vaste lengtes */background-position: 0 0;background-position: 1cm 2cm;background-position: 10ch 8em;/* Percentages t.o.v. element */background-position: 25% 75%;/* Verschuiving t.o.v. zijkanten */background-position: bottom 10px right 20px;background-position: right 3em bottom 10px;background-position: bottom 10px right;background-position: top right 10px;
Enkele speciale zijn de ‘globale’ properties.
inherit: Neemt de positie over van het bovenliggende html element (ouder)
initial: Neemt de initiële waarde aan (0,0) (Linkerbovenhoek.)
revert: Negeert de huidige CSS stylesheet en gebruikt die van de browser of indien aanwezig de onderliggende stylesheet (hiërarchisch)
unset: Neemt de positie van het bovenliggende element over of indien niet mogelijk de initiële waarde.
Uitrekken en afknippen
Met background-clip kunnen we bepalen tot waar de achtergrond uitloopt of hoe het uitgeknipt wordt.
border-box: (standaard) De achtergrond rekt tot de rand van het element
padding-box: De achtergrond stopt bij de binnenkant van de padding. De rand (border) wordt niet bedekt.
content-box De achtergrond beperkt rekt tot de content. De padding EN de border worden niet bedekt.
text: Achtergrond wordt toegepast op de tekst. (Hiervoor is color: transparent wel nodig ander overschrijft de kleur de achtergrond.)
background-origin bepaalt van waaruit de achtergrond start.
border-box: (standaard) De achtergrond begint bij de rand (border) van het element.
padding-box: De achtergrond begint bij de binnenkant van de padding.
content-box De achtergrond begint bij de rand van de content.
Schaling
Met background-size bepalen we de schaling van de foto
contain: De afbeelding wordt geschaald zodat deze volledig binnen het element past zonder de verhoudingen te verliezen, maar kan ruimte overhouden.
cover: De afbeelding wordt zo geschaald dat deze het hele element bedekt zonder de verhouding te verliezen. Het kan de afbeelding bijsnijden om te passen.
auto: De afbeelding behoudt zijn oorspronkelijke grootte.
Waarden: Je kan ook waarden ingeven zoals 50%, 1cm, .5rem, … om de afbeelding te schalen.
Kleurverloop
We kunnen kleurverlopen (gradients) toepassen op de achtergrond van onze elementen. Er zijn drie (niet herhalende) types:
linear-gradient: Een kleurverloop a.d.h.v. een lijn
radial-gradient: Een kleurverloop a.d.h.v. een enkel punt
- `conic-gradient`: Een kleurverloop a.d.h.v. een lijn eindigend in een punt
Syntax (Niet overal toepasbaar)
background: [TYPE]-gradient([VORM] at [LOCATIE], [KLEUR1], [KLEUR2], ..., [KLEUR_X] [PERCENTAGE])
Voorbeeld
background: radial-gradient(ellipse at bottom, #e66465, transparent)
Lijsten
Opsommingsteken
Met list-style-type kunnen we het type opsommingsteken aanpassen.
list-style-type: upper-alpha;
Voorbeeld
Afbeelding
Met list-style-image kunnen we een afbeelding gebruiken als opsommingsteken.
list-style-image: url('../images/star.png');
Voorbeeld
Plaatsing
Je kan de plaatsing van het opsommingsteken veranderen, binnenin inside of apart outside (basis).
Voorbeeld inside
Tekst
Familie
font-family geeft een geprioritiseerde lijst van lettertypes die gebruikt moet worden.
font-family: Arial, Helvetica, sans-serif;
Indien Arial niet kan geladen worden (niet geïnstalleerd op pc, niet beschikbaar meer, foutje in configuratie …) zal hij Helvetica laden, enzv …
Grootte
De grootte van het lettertype veranderen we met font-size. Je doet dit via
a.d.h.v. text-align kunnen we tekst op een specifieke manier uitlijnen, waaronder:
left, right, center: Links, rechts of in het midden
start, end: Hangt ervan af wat er ingesteld staat, indien links naar rechts start hij bij links en eindigt hij bij rechts.
justify: Creëert witruimte om de regels mooi over het element te verdelen
text-align: justify;
Voorbeeld
Integer elementum massa at nulla placerat varius. Suspendisse in libero risus,
in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque.
Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
>[!info]
>
>Je kan dit ook enkel toepassen op de laatste regel (`text-align-last`), syntax blijft hetzelfde.
Decoratieve lijnen
We kunnen met text-decoration (text-decoration-line, text-decoration-style, text-decoration-color) lijneffecten toepassen op een tekst.
Met text-indent kunnen we tekst laten inspringen a.d.h.v. de normale waarden (percentages, px, rem, em, …)
text-indent: 30%;
Dees stoan geundenteürd
Verticale tekst
Om te wisselen tussen verticale en horizontale tekst gebruiken we text-orientation en moet writing-mode verschillen van horizontal-tb. Er zijn verschillende vormen van draaien.
mixed: Draait de karakters op hun zijkant (90°)
upright: Zet de karakters boven elkaar
sideways: Volledige lijn wordt gedraait i.p.v. per individueel karakter
sideways-right: Zelfde als sideways maar bestaat nog voor compatibaliteit redenen
Wanneer er tekst is die verstopt wordt (gebruiker kan niet meer zien) door het overflowen van karakters gebruiken we de text-overflow property om gedrag te definiëren
text-overflow: ellipsis;
clip: knipt gewoon de tekst af waar het er niet meer op kan
ellipsis: toont ...
Schaduw
Met text-shadow kunnen we schaduw toepassen op onze tekst
#### Grote <-> Kleine letters
Aan de hand van `text-transform` kunnen we eender welke tekst in hoofdletters, kleine letters of elke eerste letter in hoofdletters
uppercase: ALLEMAAL GROTE LETTERS
lowercase: allemaal kleine letters
capitalize: Start Met Hoofdletter
text-transform: uppercase;
<p>kleine jongens worden groot</p>
kleine jongens worden groot
Witruimte toepassen
white-space verandert het gedrag van waar witruimte wordt toegepast en wanneer er door wordt gegaan naar de volgende regels
normal (basis): Lijn (<p> element) past zich aan op de ruimte die gegeven wordt
nowrap: Lijn wordt op één lange lijn gezet, instructies voor nieuwe regel (bv. <br>) worden genegeerd
pre: Lijn wordt op één lange lijn gezet, instructies voor nieuwe regel worden wel gerespecteerd
pre-wrap: Er wordt witruimte toegevoegd voor elke nieuwe ‘wrap’ (regel wordt onderbroken door <br>)
pre-line: Voor elke lijn wordt er witruimte toegepast, instructies voor nieuwe regel worden wel gerespecteerd
break-spaces: Zelfde als pre-wrap maar witruimte wordt beperkt voor elke wrap zodat er nog zo veel mogelijk woorden op de laatste regel kan.
white-space: nowrap;text-overflow: ellipsis;
<p>Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae <br>metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p>
Voorbeeld
Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
#### Letter ruimte
Met `letter-spacing` kunnen we de ruimte tussen letters uitrekken of indrukken.
normal: Zet terug naar normale waarde voor font
Waardes: Alles groter dan 0 rekt uit, alles kleiner dan 0 drukt in
letter-spacing: .2rem;
Voorbeeld
ik ben wijd
#### Woord ruimte
`word-spacing` werkt op dezelfde manier als `letter-spacing` maar dan met woorden.
normal: Zet terug naar normale waarde voor font
Waardes: Alles groter dan 0 rekt uit, alles kleiner dan 0 drukt in
word-spacing: .2rem;
Voorbeeld
deze zin is wijd
#### Afbreken woorden
Indien woorden te lang zijn kunnen we `word-break` gebruiken om ze af te breken in verschillende manieren.
normal: Zal de woorden zoals normaal afbreken sommige uitzonderingen blijven waar
Uitzondering: Chinees, Japanees, Koreaans in fonetische (Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu) vorm wordt niet afgebroken maar symbool vorm wel. (グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉)
break-all: Breekt de woorden af zonder uitzonderingen inclusief CJK en zet ze achter elkaar
break-all: Woorden kunnen op elk punt worden gebroken als ze niet passen binnen de container, zelfs als dat betekent dat het midden in een woord wordt afgebroken.
De universele selector (of wildcard) * past een CSS regel op elk element toe.
* {
color: red;
}
Voorbeeld
Type selector
Alle elementen van eenzelfde type stijlen.
h2 { color: red;}
Voorbeeld
Class en IDs
Klassen en IDs liggen redelijk dicht qua functionaliteit. Je past een naam toe op een element en stijlt ze a.d.h.v. die naam. Enkel is er een groot verschil:
Een id is uniek en past men maar één keer toe.
Een class kan meerdere keren gebruikt worden
Class
We gaan naast type selectors bijna altijd gebruik maken van classes om onze elementen en/of groepen te stijlen.
Je kan ook meerdere classes toepassen op één element. Dit zorgt ervoor dat je je eigen structuur in je stijling kan steken.
Om deze stijling te kunnen gebruiken moeten we iets gaan veranderen in onze html. Namelijks de class attribute gevolg door de namen van de klassen die we willen gebruiken / aanmaken.
<h1 class="eerst vetter">Groen leven</h1><p class="eerst">Niet iedereen heeft groen leven in zijn woning. Soms kan het gewoonweg niet, op apartement of huis zonder tuin is het moeilijker om planten te kweken. <a href="...">Elias<a> ging tegen alle verwachtingen in en bekladde zijn balkon in groen ...</p>
eerst en vetter zijn twee aparte klassen die we via CSS nu kunnen gaan aanpassen:
Nu worden enkel de titels (h1) in de klasse eerst gestijld.
Warning
Elk andere element met klasse eerst in onze aangepaste CSS worden niet meer gestijld, enkel de h1’s. Indien je toch eerst wilt stijlen naast de h1 moet je terug een .eerst toevoegen.
Als we iets volledig uniek willen toepassen op een element kunnen we een id gaan gebruiken voor enkel dat specifiek element te stijlen.
bv. Je wilt enkel deze link in het groen en vet zetten omdat hij belangrijk is.
<h1 class="eerst vetter">Groen leven</h1><p>Niet iedereen heeft groen leven in zijn woning. Soms kan het gewoonweg niet, op apartement of huis zonder tuin is het moeilijker om planten te kweken. <a href="..." id="elias">Elias<a> ging tegen alle verwachtingen in en bekladde zijn balkon in groen ...</p>
We kunnen nu specifiek de link voor Elias veranderen met stijlen.
#elias { color: green; font-weight: 700;}
IDs beginnen met een hekkentje (#)
Selector list
Als we meerdere elementen dezelfde opmaak willen geven maken we gebruik van een selector list.
h1, #elias, .vetter { font-family: "Open Sans";}
Alle h1, de unieke ID elias en alles met de klasse vetter krijgt het font type Open Sans
We scheiden elementen van de selector list met een komma (,)
Descendant combinator
Om alle afstammelingen van een element te selecteren gebruiken we de descendant combinator.
