CSS properties

CSS properties

Naar aanleiding van een vorige artikel waarin we schreven over de basis van css, gaan we nu in op de verschillende properties van CSS. Wat kun je nu in de praktijk met CSS. Hoe pas je het toe? We hebben de belangrijkste properties op een rij gezet.

Lettertypes

Voor het lettertype te veranderen hebben we verschillende
properties, denk maar eens aan grote, type, kleur, … Hieronder vind je een lijst
van de belangrijkste properties.

font-family

Font-family is het attribuut om je lettertype van een een stijl te bepalen. Het is niet enkel mogelijk om 1 lettertype te kiezen maar ook om
een voorkeurslijst te maken. Dit wil zeggen dat je meerdere lettertypes opgeeft in een bepaalde volgorde. In het geval dat hij het 1ste lettertype
niet kan terug vinden, neemt hij het volgende op de voorkeurslijst.

CSS syntax:

.voorbeeld{font-family:"Times New Roman", Times, serif}

Resultaat:

Times New Roman met alternatieven.

font-style
Font-style geeft een stijl aan je lettertype. Een stijl zoals cursief of de tekst schuin trekken.

Opgelet
vet en onderlijnde tekst horen hier niet bij! Hiervoor gebruiken we een ander attribuut.

CSS syntax:

.voorbeeld{font-style:italic}

Resultaat:

Italic tekst.

CSS syntax:

.voorbeeld{font-style:oblique}

Resultaat:

Oblique tekst.

font-size
Font-size bepaalt de grote van je lettertype. Dit is heel nuttig om bijvoorbeeld titels
aan te duiden en ze te laten opvallen. De waarde voor dit attribuut kan ook ingegeven worden
onder verschillende types. Precentage tegenover het standaard lettertype, puntgrote of een standaard
waarde zoals small. Alle waarden kan je terugvinden in de
propertylijst. We illustreren hier 2 voorbeelden.

CSS syntax:

.voorbeeld{font-size:x-large}

Resultaat:

x-large

CSS syntax:

.voorbeeld{font-size:15pt}

Resultaat:

Puntgrootte 15

font-variant
U kan ook kiezen tussen normale hoofdletters en kleine hoofdletters, voor minder opvallende tekst.

CSS syntax:

.voorbeeld{font-variant:normal}

Resultaat:

normale tekst

CSS syntax:

.voorbeeld{font-variant:small-caps}

Resultaat:

kleine hoofdletters

font-weight
Dit geeft letterlijk aan hoe zwaar de letters moeten zijn. Dit wil dus zeggen dat we bepalen hoe vet
we het lettertype willen plaatsen. Het is mogelijk om 2 soorten waarden hieraan toe te kennen, een getalwaarde
of een vooraf ingestelde standaardwaarde.

CSS syntax:

.voorbeeld{font-weight:bold}

Resultaat:

tekst in bold

CSS syntax:

.voorbeeld{font-weight:900}

Resultaat:

font weight van 900

Tekst opmaak

We kunnen nu al het lettertype aanpassen in een bepaalde tekst maar we mogen ook niet te vergeten de tekst zelf op te maken.
Zaken zoals uitlijning, regelhoogte,… zijn even belangrijk in de opmaak van een stuk tekst.

letter-spacing
U kan de afstand tussen de verschillende letters aanpassen om zo de aandacht te trekken. Dit kan een alternatief zijn
om tekst in het vet te plaatsen.

CSS syntax:

.voorbeeld{letter-spacing: 4}

resultaat:

spacing 4

text-decoration
Text-decoration geef je de mogelijkheid om je tekst te onderlijnen of te doorhalen. Ook een lijntje
boven je tekst is hier mogelijk.

CSS syntax:

.voorbeeld{text-decoration: underline}

resultaat:

onderlijnen

.voorbeeld{text-decoration: overline}

resultaat:

lijn boven de tekst

.voorbeeld{text-decoration: line-trough}

resultaat:

doorstreepte tekst

vertical-align
Vertical-align geef je de mogelijkheid om Subscript en Superscript te plaatsen.
Dit is zwevende tekst of tekst onderaan een woord. Opgelet dit kan enkel gebruikt worden in
een in-line opmaak. Opmaak die in een lijn geldig is voor 1 of meerdere woorden of letters, niet voor een volledige body.

CSS syntax:

.voorbeeld{vertical-align: sub}

resultaat:
Subscriptsub

CSS syntax:

.voorbeeld{vertical-align: super}

resultaat:
Subscriptsuper

text-transform
Tekst kun je met css ook zo bewerken dat hij automatisch een volledige tekst of deel van een tekst zelf in hoofdletters plaats.
ook net anders om, in kleine letters.

CSS syntax:

.voorbeeld{text-transform: uppercase}

resultaat:

gewone letters naaar hoofdletters

CSS syntax:

.voorbeeld{text-transform: lowercase}

resultaat:

HOOFDLETTERS NAAR KLEINE LETTERS

text-align
Een tekst aligneren kan natuurlijk heel goed van pas komen. Dit is dan ook een veel gebruikt attribuut
die makkelijk te gebruiken is. We kennen hier de 4 uitlijningen als waarde: left, right, center en justify.

CSS syntax:

.voorbeeld{text-align: right}

resultaat:

rechts uitgelijnde tekst

CSS syntax:

.voorbeeld{text-align: center}

resultaat:

tekst in het midden uitgelijnd

text-indent
Text-indent zorgt ervoor dat je de kans krijgt om de eerste regel van een bepaalde tekst te laten inspringen. Je kan hier zelfde
de waarde ingeven in px en in procent

CSS syntax:

.voorbeeld{text-indent: 30px}

resultaat:

Van deze tekst is de eerste regel 30px ingesprongen. De rest van deze tekst
loopt dan gewoon door op de volgende lijn zonder in te springen.

CSS syntax:

.voorbeeld{text-indent: 40%}

resultaat:

Van deze tekst is de eerste regel 40 procent ingesprongen. De rest van deze tekst
loopt dan gewoon door op de volgende lijn zonder in te springen.

line-height
Het is ook perfect mogelijk om de hoogte van je regels te bepalen hierdoor krijg je meer of minder ruimte tussen je
regels door. De waarde geef je terug in met px.

CSS syntax:

.voorbeeld{line-height: 15px}

resultaat:

Een tekst met bestaande uit meerdere lijnen bevat dan meer witruimte tussen de regels als
een gewone tekst die niet opgemaakt is.

Kleuren en Achtergrond

Nu we de het lettertype kunnen opmaken is de volgende stap de kleuren. In CSS kun je niet
enkel de kleuren van de tekst veranderen maar bijna van alle objecten. Dus ook knoppen, achtergrond, tabellen, …

color
Dit attribuut geeft je de mogelijkheid om de voorgrond van een bepaald object te veranderen. De waarden kun je op 2 manieren aanduiden.
De eerste mogelijkheid is de hexadecimale notatie zoals in HTML of een vooraf bepaalde standaardwaarde zoals: yellow, green,…
Vergeet niet dat je voor de hexadecimale waarden een # moet plaatsen. Je ziet hier beide voorbeelden.

CSS syntax:

.voorbeeld{color: lime}

Resultaat:

groene tekst

CSS syntax:

.voorbeeld{color: #000000}

Resultaat:

kleurwaarde #000050

Je vindt ook een klein overzicht van de kleurwaarden in onze
tutorial over kleuren. Hierbij vind je
dan ook de broncode.

background-color
Background-color gebruiken we voor het instellen van de achtergrond. Dit kan de achtergrond zijn van de pagina, tekst, cel, naargelang de plaats van je stijl.
De waarden hiervoor zijn dezelfde als voor het attribuut color. Er is enkel 1 speciale waarde: transparent. Deze maakt de achtergrond doorzichtig en zorgt zo voor de
kleur van het object die er zich achter bevindt. Dit wordt vooral gebruikt voor knoppen.

CSS syntax:

.voorbeeld{background-color: lime}

Resultaat:

groene achtergrond

CSS syntax:

.voorbeeld{background-color: #356578}

Resultaat:

achtergrondkleur: #356578

background-image
Het is natuurlijk ook mogelijk om een afbeelding te gebruiken als achtergrond. Ook met css kun je een achtergrond
plaatsen op een pagina of bepaald object. Hiervoor moeten we de locatie van de afbeelding vastleggen in de CSScode.

Dit gaat op volgende wijze:
url(images/voorbeeld.jpg)

CSS syntax:

.voorbeeld{background-color: green}

background-repeat
Als we als achtergrond een afbeelding plaatsen is het ook mogelijk om deze te herhalen wanneer het object waar je het op toepast
groter wordt dan de afbeelding zelf. Hierbij is het mogelijk ze horizontaal en vertikaal te laten herhalen, in beide richtingen of
geen van beide.

CSS syntax:

.voorbeeld{background-repeat: repeat-x}

CSS syntax:

.voorbeeld{background-repeat: repeat}

background-attachment
CSS geeft je ook de mogelijkheid om de afbeelding op de achtergrond vast te plaatsen zodat deze blijft staan als je aan het scrollen bent.
Hiermee vermijd je ook dat de afbeelding wordt afgebroken bij het scrollen.

CSS syntax:

.voorbeeld{background-attachment: fixed}

Resultaat:

Randen

De randen van tekst, cellen, knoppen,… worden in CSS uitgebreid behandeld. Je kan verschillende stijlen kiezen, diktes, kleuren,…
We geven hier maar een samenvatting van alle
properties.

border-width
Hiermee bepaal je de dikte van je rand rond het een bepaald object. Je kan hier terug een px waarde ingeven of gewoon een standaard waarde zoals:
thin, medium of thick.

CSS syntax:

.voorbeeld{border-width: 3px; border-style: solid}

Resultaat:

een rand met als border 3px dik.

border-style
Als je een border-width instelt moet je ook het type meegeven. Er zijn verschillende types randen

CSS syntax:

.voorbeeld{border-width: 3px; border-style: groove}

Resultaat:

een rand met als border 3px dik en het type groove

border-color
Een kleur toekennen aan een border is gebaseerd op het gewone color attribuut. Het principe is net hetzelfde, je kan een waarde
ingeven als hexadecimale waarde of een standaard kleur.

CSS syntax:

.voorbeeld{border-width: 3px; border-style: solid; border-color: lime}

Resultaat:

een rand met als border 3px dik in fel groen

Je kan al deze properties ook gebruiken voor 1 rand van de kader of een combinatie. Zoals de bovenkant: border-top-style of border-top-color.
Dit geldt voor top, left, right en bottom.

U vindt deze properties terug in de
abc van CSS
.

Marges

Nu je borders kan plaatsen rond een bepaald object moet je ook weten dat je ook de afstand van de borders tot de inhoud kan instellen. Niet tot enkel de inhoud
maar ook de marge tegenover de omliggende objecten. Hiervoor bestaan er 2 specifieke
properties, padding en margin.

padding
Dit attribuut zorgt voor de ruimte tussen de inhoud van een bepaalde border of cell en de rand hiervan.

CSS syntax:

.voorbeeld{border-width: 3px; border-style: solid ;padding: 10px}

Resultaat:

padding van 10px

margin
Margin zorgt dan op zijn beurt voor de ruimte rond de border of object. Het is ook mogelijk om zo een waarde enkel toe te kennen
aan 1 zijde van de border door de zijde aan te duiden in het attribuut. Dit geldt ook voor het padding attribuut.

CSS syntax:

.voorbeeld{border-width: 3px; border-style: solid ;margin: 10px}

Resultaat:

een margin van 10px aan alle zijden.

CSS syntax:

.voorbeeld{border-width: 3px; border-style: solid ; margin-left: 50px}

Resultaat:

50px afstand aan de linkerkant.
          Leuk als je dit artikel deelt:
Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *