Maten & kleuren

In CSS ben je veel bezig met het opgeven van groottes en afstanden om alle paddings en margins en fontgroottes goed te zetten. Dit kun je doen in pixels met de px suffix. Maar er zijn nog een aantal andere mogelijkheden om maten op te geven. Iedere maat heeft weer zijn eigen voordeel en nadeel.

Pixels px: De meest voor zichzelf sprekende eenheid. Gelijk aan het aantal pixels op het beeldscherm.
Centimeters cm: Hiermee kan je de daadwerkelijke fysieke grootte in centimeters op het beeldscherm aangeven. Deze wordt net als millimeters en inches weinig gebruikt.
Millimeters mm: De grootte in millimeters.
Inches in: De grootte in inches.
Points pt: De grootte in points, de waardes die je ook in de meeste tekstverwerkers gebruikt om lettergroottes aan te geven. Dit wordt veel gebruikt om font grootte aan te geven.
Em em: Een speciale waarde die relatief is ten opzichte van de font-grootte in die context. 1.0em is precies even groot als de font-grootte, en 2.0em is twee keer zo groot. Deze waarde wordt veel gebruikt voor ruimtes die groter moeten worden naarmate de tekst zelf ook groter wordt. Dit kun je testen door de tekstgrootte in een browser aan te passen (ctrl+)

Percentage %

Bij sommige properties kan je ook percentages gebruiken als eenheid. Dit wordt vaak gebruikt bij de width en height properties bij het maken van een layout. Bijvoorbeeld een menu dat altijd 20% van de pagina breed is.


      
div {
    border: 1px solid black;
    width: %;
    height: %;
}
      
<div>Een procentuele grootte</p>

Kleuren

Op veel plekken in CSS kan je kleuren aangeven. Bijvoorbeeld de kleur van een border, de kleur van de tekst of de achtergrondkleur van een div. Een kleur aangeven kan je op verschillende manieren doen.

Namen: CSS heeft een lijst van ingebouwde engelse kleurnamen die je kan gebruiken. Dit zijn: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white en yellow.
RGB-waardes: Als we wat specifiekere kleuren willen gebruiken moeten we RGB waardes gebruiken. Elke kleur kunnen we samenstellen door rood, groen en blauw met elkaar te mengen. Elk kleurcomponent is een 8-bit waarde van 0 tot en met 255. rgb(50, 255, 60) is een voorbeeld van een lichtgroene kleur.
RGBA-waardes: Hetzelfde als RGB maar dan met een vierde alfa-waarde waarmee je de transparantie van de kleur kan aangeven. Deze waarde loopt van 0.0 (volledig transparant) tot 1.0 (volledig ondoorzichtig).
Hex-waardes: Een veelgebruikte verkorte notatie van rgb zijn de hex waardes. Hiermee schrijf je de rgb waardes hexadecimaal op van 00 (0) tot FF (255). De rood, groen en blauw hexwaardes schrijf je dan achter elkaar met een # ervoor. #BB00FF is bijvoorbeeld een paarse kleur.


      
div {
    background-color: ;
}
      
<div>Div met een kleurtje</div>

De kleur rood meng je door 100% rood, 0% groen en 0% blauw. Maak de achtergrondkleur van de div rood met de rgb() notatie

Maak de achtergrondkleur rood met de hex-notatie