Cursus – CSS voor beginners – stijlen

In het eerste artikel over de basisprincipes van CSS heb ik uitgelegd hoe je CSS toepast, linkt aan een html document en wat declaraties, eigenschappen, waardes en selectoren zijn. In dit tweede artikel in de serie wil ik voorbeelden gaan geven van stijlen die je kunt gebruiken in een stijlblad.

De vorige les

Een paar heb ik er al laten zien. Zo kun je de volgende eigenschappen gebruiken:
font-size voor de lettergrootte
font-weight voor de dikte van de letter
font-style voor de stijl van de letter (schuingedrukt of juist niet)
color voor de kleur van de letter

Lettertype aanpassen met font

Naast deze vier zijn er nog een paar mogelijkheden om het lettertype aan te passen.

Met font-family kun je bijvoorbeeld aangeven welk lettertype je wilt gaan gebruiken. Bijvoorbeeld Arial of Times New Roman, maar ook is het mogelijk een algemeen lettertype te duiden, zoals serif of sans-serif.

Kortweg is het zo dat serif extra pootjes aan de letter heeft zitten en sans-serif niet.
Een voorbeeld maakt het duidelijk. Hieronder staat twee keer een stuk tekst. De eerste met font-family serif, de tweede met font-family sans-serif.

Deze tekst is serif

Deze tekst is sans-serif

Small caps, kleine hoofletters

Soms zie je bij een site kleine hoofdletters staan. Dit worden small-caps genoemd. Deze zijn in te stellen met font-variant. Deze instelling is ook meteen de enige instelling naast de normale waarde. Voorbeeld:

font-variant: small-caps;

Resultaat:

Deze regel staat in small-caps

Regelhoogte, line-height instellen

Naast font-size kun je ook de regelhoogte instellen. Dit is handig als je de afstand tussen de regels groter wil maken dan ‘font-size’ toelaat. Zo kun je font-size bijvoorbeeld instellen op 13px, en de regelhoogte op 18px. Er zit dan een extra ruimte van 5 pixels tussen iedere regel. Dit instellen doe je met line-height.

line-height: 18px;

Verkorte declaraties

Er zijn verschillende onderdelen van CSS waarbij je een verkorting kunt toepassen. Zo hoef je bijvoorbeeld niet alle font stijlen in te vullen, maar kun je in je stijblad ook af met de eigenschap font. Hier worden wel enkele voorwaarden aan gesteld. Zo moet er minimaal een font-size in staan en een font-family. Voorbeeld:

body { font: 1em/1.5em bold italic serif; }

Hier zie je achtereenvolgens de lettergrootte, de regelhoogte (line-height), font-weight, font-style en font-family.

Achtergronden

Een ander interessant aspect van CSS is het gebruik van achtergronden. Je kunt achtergronden gebruiken in ieder blok element zoals paragraaf (<p>), div en body. Een achtergrond kan in de vorm van een afbeelding voorkomen of een kleur. Daarbij kan de achtergrond vastgezet worden of juist meebewegen met scrollen. Hiermee kun je dus gemakkelijk meerdere lagen maken binnen je website.

Background-color – achtergrondkleur

Het eerste onderdeel is background-color. Hiermee stel je een specifieke kleur in voor je achtergrond. Deze kleur kun je echter ook overnemen van een ander element. Stel je body heeft als achtergrondkleur blauw, dan kan deze blauwe kleur worden overerft door een paragraaf. Dat doe je door de declaratie ‘inherit’ te gebruiken. Naast kleuren en erven kun je ook ’transparant’ instellen als waarde.

body {background-color: blue;}
p {background-color: inherit;}

Background-image – achtergrond afbeelding

Tweede mogelijkheid is het instellen van een achtergrondafbeelding. Hierbij heb je eigenlijk drie declaraties nodig.
Background-image – Hiermee bepaal je de locatie van de achtergrondafbeelding
background-repeat– Hiermee bepaal je of de achtergrond 1 keer, horizontaal meerdere keren of verticaal meerdere keren mag voorkomen.
background-position – Hiermee bepaal je de plaats van de afbeelding. Boven of juist onder, links of juist rechts.

background-attachment, vastzetten van je achtergrond

Tenslotte de declaratie om een achtergrond vast te zetten of juist mee te laten scrollen. Dit doe je met background-attachment. Een voorbeeld vind je in de CSS referentie.

Volgende keer ga ik het hebben over blok elementen waarbij je padding, margin en lijnen kunt gebruiken om ze fraaier te maken.

Cursus HTML

Mocht je behoefte hebben aan een uitgebreide cursus over html en css, dan verwijs ik je naar de cursus die ik heb gemaakt:
http://localhost:8888/cursus-html