CSS properties

Naar aanleiding van een eerder artikel waarin ik schreef over de basis van css, ga ik nu in op de verschillende properties van CSS. Wat kun je nu in de praktijk met CSS. Hoe pas je het toe? 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:

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:

CSS syntax:

.voorbeeld{font-style:oblique}

Resultaat:

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. Percentage tegenover het standaard lettertype, puntgrootte 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:

CSS syntax:

.voorbeeld{font-size:15pt}

Resultaat:

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

CSS syntax:

.voorbeeld{ font-variant:normal}

Resultaat:

CSS syntax:

.voorbeeld{ font-variant:small-caps}

Resultaat:

font-weight
Dit geeft letterlijk aan hoe ‘vet’ de letters moeten zijn. 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:

CSS syntax:

.voorbeeld{ font-weight:900;}

Resultaat:

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, ze zijn even belangrijk in de opmaak van een stuk tekst.

letter-spacing
Je kunt 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: 4px;}

resultaat:

—

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:

.voorbeeld{text-decoration: overline}

resultaat:

.voorbeeld{text-decoration: line-trough}

resultaat:

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:

CSS syntax:

.voorbeeld{text-transform: lowercase}

resultaat:

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:

CSS syntax:

.voorbeeld{text-align: center}

resultaat:

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:

CSS syntax:

.voorbeeld{text-indent: 40%}

resultaat:

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:

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:

CSS syntax:

.voorbeeld{color: #000000}

Resultaat:

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:

CSS syntax:

.voorbeeld{background-color: #356578}

Resultaat:

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:

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:

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:

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:

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:

CSS syntax:

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

Resultaat: