Inleiding

Hoewel HTML je in staat stelt om basisdingen te doen zoals tekst vet maken en afbeeldingen toevoegen, heb je vaak meer nodig om een webpagina echt aantrekkelijk en functioneel te maken. Dat is waar CSS begrippen om de hoek komen kijken. Met CSS begrippen kun je bepalen hoe je webpagina eruitziet, van de grootte van kopteksten tot kleuren, marges en lay-out.

Wil je bijvoorbeeld een grotere koptekst of een unieke kleur voor bepaalde secties? Met CSS begrippen is dit eenvoudig te regelen. Het werkt als volgt: je maakt in je HTML-bestand een klasse aan waarin je al je stijlinstructies definieert. Vervolgens kun je die klasse in je CSS-bestand een naam geven en daar precies aangeven welke eigenschappen je wilt aanpassen. Zo kun je met CSS begrippen zonder moeite de opmaak van je website beheren en optimaliseren.

Achtergrondkleur

CSS begrippen achtergrondkleur bepaalt de kleur van de achtergrond van een element. Deze achtergrondkleur omvat de volledige grootte van het element, inclusief de padding en de border, maar niet de marge. Met dit CSS begrippen kun je je pagina een unieke uitstraling geven en de algehele look aanpassen.

Algemeen type

CSS begrippen algemeen type verwijst naar de verschillende lettertypen die je kunt toepassen op tekst. Door gebruik te maken van CSS begrippen zoals deze, kun je eenvoudig bepalen welke lettertypes worden gebruikt om de stijl en leesbaarheid van je website te verbeteren. Dit zorgt ervoor dat je webpagina een samenhangende en professionele uitstraling krijgt.

CSS begrippen Uitleg

Background

Het begrip background in CSS stelt in één keer alle achtergrondinstellingen in, zoals kleur, afbeelding, grootte en herhaling. Dit CSS begrip helpt om een consistente en aantrekkelijke stijl voor de achtergrond van je elementen te creëren.

Background-Attachment

Het CSS begrip background-attachment bepaalt of een achtergrondafbeelding vast blijft staan binnen de viewport of meebeweegt met de inhoud. Dit is handig om te kiezen of je een vaste achtergrond wilt of een die meebeweegt wanneer je naar beneden scrolt.

Background-Position

Met het begrip background-position bepaal je waar de achtergrondafbeelding begint binnen een element. Dit CSS begrip is ideaal wanneer je de positie van je achtergrond nauwkeurig wilt instellen, bijvoorbeeld gecentreerd, linksboven of rechtsonder.

Background-Repeat

Het background-repeat begrip in CSS bepaalt hoe een achtergrondafbeelding wordt herhaald. Je kunt ervoor kiezen om de afbeelding horizontaal, verticaal of helemaal niet te laten herhalen, afhankelijk van je ontwerpvoorkeuren.

Border

Het begrip border in CSS verwijst naar de rand van een element. Je kunt de dikte (border-width), stijl (border-style) en kleur (border-color) van de rand aanpassen om je elementen meer nadruk te geven.

Border-Collapse

Het CSS begrip border-collapse bepaalt of de randen van cellen in een tabel worden samengevoegd of afzonderlijk blijven. Dit is vooral handig bij het ontwerpen van tabellen om een strakke lay-out te creëren.

Border-Spacing

Border-spacing stelt de ruimte in tussen aangrenzende cellen in een tabel, maar alleen als border-collapse op afzonderlijk staat. Dit helpt om je tabellen leesbaar en georganiseerd te houden.

Border-Style

Het begrip border-style in CSS bepaalt de stijl van de rand voor alle vier de zijden van een element. Je kunt kiezen uit verschillende stijlen, zoals doorgetrokken lijnen, stippellijnen of dubbele lijnen.

Border-Width

Border-width stelt de dikte in van de randen van een element. Je kunt de breedte aanpassen voor elke zijde apart, waardoor je meer controle hebt over de opmaak van je elementen.

Clear

Het CSS begrip clear bepaalt of een element onder eerdere zwevende elementen moet worden geplaatst. Dit is handig om de lay-out te corrigeren wanneer zwevende elementen de opmaak verstoren.

Collapsing Margins

Het begrip collapsing margins betekent dat boven- en ondermarges van aangrenzende blokken worden samengevoegd tot één marge. De grootste marge heeft dan voorrang, wat helpt om dubbele marges te voorkomen.

Color

De eigenschap color in CSS bepaalt de kleur van tekst. Je kunt ook een transparantiewaarde toevoegen om de tekst half doorzichtig te maken, wat nuttig is voor subtiele ontwerpaccenten.

Commentaar

Het begrip commentaar in CSS wordt gebruikt om aantekeningen in je code te maken tussen */ en */**. Dit is handig voor het documenteren van je code, zodat je later kunt teruglezen wat bepaalde regels doen, zonder dat deze opmerkingen invloed hebben op de werking van de CSS-code.

Declaratie

Een declaratie in CSS bestaat uit een eigenschap en een waarde die samen bepalen hoe een element wordt gestyled. Dit CSS begrip is essentieel omdat het de basis vormt van alle stijlinstructies in je stylesheet.

Bijvoorbeeld:
font-size: 80%;

Hier is font-size de eigenschap en 80% de waarde. Dit betekent dat de tekstgrootte wordt ingesteld op 80% van de standaardgrootte. Met CSS-declaraties kun je de stijl van je website eenvoudig aanpassen door eigenschappen zoals kleur, lettertype, marges en afstanden in te stellen.

Descendant Selector

De descendant selector is een belangrijk CSS begrip dat wordt gebruikt om elementen te selecteren die zich binnen een ander element bevinden. Dit doe je door een selector te gebruiken met witruimte tussen de verschillende onderdelen.

Display

Het display-attribuut is een belangrijk CSS begrip dat bepaalt hoe een element wordt weergegeven op een webpagina. Hiermee kun je instellen of een element zich gedraagt als een blok (block), een inline-element (inline), of gebruik maakt van meer geavanceerde lay-outs zoals flex of grid. Dit CSS begrip beïnvloedt ook hoe de kinderen van dat element worden weergegeven en biedt flexibiliteit bij het ontwerpen van de structuur van een pagina.

Eenheid

Het begrip eenheid is een belangrijk CSS begrip dat bepaalt hoe groot een bepaalde eigenschap is die je instelt voor een element of de inhoud ervan. CSS eenheden, zoals pixels (px), procenten (%), em’s en rem’s, worden gebruikt om eigenschappen zoals marges, afstanden, en lettergroottes nauwkeurig te definiëren. Deze CSS begrippen helpen je bij het consistent ontwerpen en aanpassen van je webpagina’s.

Eigenschap

Het eigenschap-begrip in CSS verwijst naar een CSS declaratie die bestaat uit een eigenschapsnaam en een bijbehorende waarde. Deze CSS begrippen bepalen hoe een element wordt gestyled. De structuur is eenvoudig: eerst geef je de naam van de eigenschap op, gevolgd door een dubbele punt, en daarna de gewenste waarde. Dit maakt het mogelijk om specifieke stijlen toe te passen, zoals kleur, grootte, marges, en meer, om de opmaak van je website te optimaliseren.

First-letter:

Het begrip first-letter vertegenwoordigt de eerste letter van een element, als het niet wordt voorafgegaan door andere inhoud (zoals afbeeldingen of inline tabellen) op zijn lijn.

Wat doet first-letter precies?

De first-letter selector zorgt ervoor dat de eerste letter op de eerste regel van een element op blokniveau door de browser met de aangegeven stijl wordt weergegeven.

Elementen die je kan gebruiken met first-letter:

Background properties
Margin properties
Padding properties
Border properties
Text-decoration
Vertical-align (aleen als float is ‘geen’)
Text-transform
Line-height
Float
Clear

Het begrip first-line in CSS past stijlen toe op de eerste regel van een block-level element.

let op: dat de lengte van de eerste regel hangt af van velen factoren die meespelen. Zoals de breedte van het element, de breedte van het document, en de lettergrootte van de tekst.

Float:

Met het begrip float kun je de box om je tekst/afbeelding veranderen.

Voorbeeld hiervan:

Als je zegt float links dan gaat de tekst/afbeelding naar de meest linkse kant.

Font-family:

Het begrip font-family Specificeert het lettertypen voor een element. De font-family eigenschap kan meerdere lettertype bevatten als een “fallback” systeem. Dat betekent als de browser het eerste lettertype niet ondersteund dan pakt hij de volgende lettertype.

Font-size:

Het begrip font-size stelt de grootte in van het lettertype in.

Font-style:

Het begrip font-style bepaalt of een lettertypen moet worden opgemaakt met een normaal, cursief of schuin. Je combineert font-style samen met de font-family.

Font-variant:

Het begrip font-variant in CSS kun je de (geselecteerde) tekst veranderen in kleine letters.

Front-weight:

Het begrip front-weight in CSS heb je de optie om letters dikgedrukt te maken, je kan de letters ook wat lighter maken.

Getal:

Het begrip getal in CSS is de syntax van < getal> het is een uitbreiding van < integer>. Met < getal> kun je getallen of getallen met breukcomponent type.

Voorbeeld hiervan:

12 Een ruw < integer> is ook een < getal>
4.01 Positieve breuk
-456.8 Negatieve breuk
0,0 Nul
+0.0 Nul, met een + voor
-0.0 Nul, met een voorloop –
.60 Fractioneel getal zonder voorloopnul
10e3 Wetenschappelijke notatie
-3.4e-2 Gecompliceerde wetenschappelijke notatie

Height

Het height begrip is een belangrijk CSS begrip dat de hoogte van een element bepaalt. Standaard stelt deze eigenschap de hoogte in van het inhoudsgebied van een element, exclusief de padding en border. Als de box-sizing-eigenschap is ingesteld op border-box, dan wordt de hoogte inclusief de padding en border berekend. Dit CSS begrip helpt bij het nauwkeurig definiëren van de afmetingen van elementen, wat essentieel is voor het creëren van een consistente lay-out.

Hex & RGB

De begrippen hex en RGB zijn belangrijke CSS begrippen die worden gebruikt om kleuren weer te geven op een webpagina.

• Hex is een hexadecimaal getal bestaande uit zes cijfers (bijvoorbeeld #FF5733). Deze code vertegenwoordigt drie kleurencomponenten: rood, groen en blauw. Elke component heeft een waarde tussen 00 en FF.
• RGB gebruikt een andere notatie om kleuren te definiëren, zoals rgb(255, 87, 51). Hier staat elke waarde tussen 0 en 255 voor de intensiteit van de rode, groene en blauwe kleuren.

Beide CSS begrippen helpen je om nauwkeurig de kleuren van tekst, achtergronden en andere elementen te bepalen en aan te passen.

Id-selector

De id-selector is een essentieel CSS begrip dat gebruik maakt van het id-attribuut van een HTML-element om dat specifieke element te selecteren. Een id is altijd uniek binnen een pagina, wat betekent dat het een perfecte manier is om een enkel, specifiek element te stylen.

Om een id-selector te gebruiken in CSS, plaats je een hash-teken (#) gevolgd door de naam van het id. Dit CSS begrip is ideaal wanneer je een element wilt onderscheiden en een unieke stijl wilt geven zonder andere elementen te beïnvloeden.

Ineger:

Het begrip ineger in CSS is een speciaal type van geeft de getallen zowel positief als negatief aan. Ineger bestaat uit één of meer decimale cijfers, 0 tot en met 9, eventueel voorafgegaan door een enkel + of – teken.

Voorbeelden hiervan:
12 Positief geheel getal (zonder voorteken +)
+123 Positief geheel getal (met + voorloopgetal)
-456 Negatief geheel getal 0 Nul
+0 Nul, met een + als eerste cijfer
-0 Nul, met een voorloop –

Kleur

Het begrip kleur in CSS wordt gebruikt om de kleur van elementen zoals tekst, achtergronden en borders in te stellen. Je kunt ook een alpha-channel toevoegen om transparantie te regelen, wat bepaalt hoe de kleur samengaat met de achtergrond.

Letter-spacing

Letter-spacing is een CSS begrip dat de horizontale ruimte tussen teksttekens instelt. Dit helpt om de leesbaarheid van tekst te verbeteren door de afstand tussen letters aan te passen.

Line-height

Het line-height begrip in CSS bepaalt de hoogte van een regel tekst. Het wordt gebruikt om de afstand tussen regels binnen een tekstblok te regelen, waardoor de tekst leesbaarder wordt.

Link

Het begrip link in CSS verwijst naar het stylen van hyperlinks op een webpagina. CSS biedt mogelijkheden om links op verschillende manieren op te maken, zoals het wijzigen van kleur, onderstreping en hover-effecten.

List-style

Het list-style begrip in CSS stelt je in staat om in één keer alle stijlen van een lijst in te stellen. Dit omvat het type marker (zoals puntjes of nummers) en de positie van de markeringen.

List-style-position

Met list-style-position bepaal je waar de markeringen (zoals puntjes of nummers) van een lijst worden weergegeven, binnen of buiten het kader van het element.

List-style-type

Het list-style-type begrip in CSS bepaalt het type markering dat wordt gebruikt voor een lijst. Je kunt kiezen voor standaard opties zoals puntjes, nummers, of aangepaste stijlen.

Margin

Het margin begrip in CSS verwijst naar de ruimte tussen de rand van een element en de rand van het ouderelement of aangrenzende elementen. Marges worden gebruikt om de lay-out en afstand tussen elementen te beheren, waardoor je een overzichtelijke indeling kunt creëren.

Max-height

De max-height eigenschap in CSS bepaalt de maximale hoogte van een element. Als de inhoud groter is dan de opgegeven maximale hoogte, zal deze overlopen. Als de inhoud kleiner is, heeft de max-height geen effect.

Min-height

Het begrip min-height in CSS stelt de minimale hoogte van een element in. Dit voorkomt dat de hoogte van het element kleiner wordt dan de opgegeven waarde, zelfs als de inhoud minder ruimte inneemt.

Max-width

Met max-width stel je de maximale breedte van een element in. Dit CSS begrip voorkomt dat de breedte van een element groter wordt dan de opgegeven waarde, ongeacht de inhoud.

Min-width

De min-width eigenschap bepaalt de minimale breedte van een element. Het zorgt ervoor dat de breedte van een element nooit kleiner wordt dan de opgegeven waarde, zelfs als de inhoud minder ruimte vereist.

Overerving

Het begrip overerving in CSS betekent dat sommige eigenschappen doorgegeven worden aan de kinderen van het element waaraan stijlregels werden toegekend.

Percentage

Het begrip CSS begrippen zoals percentage verwijst naar een procentuele waarde die vaak wordt gebruikt om de grootte van verschillende elementen te bepalen. Dit is een van de flexibele CSS begrippen waarmee je de breedte, hoogte, marges en font-grootte kunt aanpassen op basis van een verhouding tot het ouder-element.

Het gebruik van CSS begrippen zoals percentage zorgt ervoor dat de elementen op je webpagina zich dynamisch aanpassen aan de schermgrootte. Hierdoor kun je met CSS begrippen eenvoudig responsieve ontwerpen creëren die zich aanpassen aan verschillende apparaten. Door CSS begrippen zoals percentages te gebruiken, kun je ervoor zorgen dat je lay-out altijd proportioneel blijft, ongeacht de grootte van het scherm.

Pseudo-class

Een pseudo-class is een essentieel CSS begrip dat een sleutelwoord toevoegt aan een selector om een specifieke toestand van een element te selecteren. Met CSS begrippen zoals pseudo-classes kun je elementen stylen op basis van hun huidige status, zonder extra HTML-code toe te voegen.

Een veelvoorkomend voorbeeld van een pseudo-class is

waarmee je de stijl van een element kunt aanpassen wanneer een gebruiker er met de muis overheen gaat. Dit CSS begrip is ideaal om interactie en visuele feedback te creëren, zoals het veranderen van de kleur van een knop. Dankzij CSS begrippen zoals pseudo-classes kun je dynamische en interactieve stijlen toepassen op je website

Selector:

Het begrip selector in CSS is het eerste deel van een css regel. Het is een patroon van elementen die de browser (google chrome , firefox, ect) vertellen welke HTML elementen geselecteerd moeten worden om de eigenschappen in de waarde van de regel toegepast te krijgen.

Text-align:

Het begrip text-align in CSS bepaalt de horizontale uitlijning van de inhoud binnen een tabel-cel box. Dit werkt ook het zelfde al vertical-align maar dan op de horizontale lijn

Text- decoration:

Het begrip text-decoration in CSS bepaald het uiterlijk van de decoratieve lijnen op de tekst.

Text-transform:

Het begrip text-transform in CSS bepaald hoe de tekst van de element in hoofdletters moet worden weergeven. Tekst-transform kan worden gebruikt om woorden van de tekst allemaal in hoofdletters, allemaal kleine letters of elk woord in hoofdletters te zetten.

Type-selector:

Het begrip type-selector in CSS zorgt er voor dat als je iets zoekt ( een specifiek woord) in het document dat je het dan makkelijk kan vinden.

Url:

beschrijft een locatie van een bron.

Visibility:

Het begrip Visibility in CSS kun je een element tonen of verbergen zonder dat je de opmaak van een document veranderen, het werkt ook bij rijen of kolommen van een < tabel>

Visited:

Het begrip visited in CSS kun je de links zien die de gebruiker heeft bezocht. Om privacy redenen zijn de stijlen die met deze selector kunnen worden gewijzigd zeer beperkt.

Width:

Het begrip width in CSS is de breedte van het inhoudsgebied van het element.

Word-spacing:

Het begrip word-spacing in CSS bepaalt de spatiering tussen de woorden van een tekstblok.