CSS tutorial 4 – Fonte

I denne del af CSS tutorial vil vi se på fonte, dvs. skrifttyper og skriftstørrelser i CSS.
Skrifttyper, størrelser og farver kan du nemt sætte med html tagget font.

<font face="verdana" size="10" color="red">Tekst her</font>

Det var sådan man gjorde i gamle dage inden CSS for alvor blev implementeret. I dag bruges kun CSS til at angive skrifttyper, -størrelser og -farver. Her er et eksempel hvor det ændres for h1 tagget i CSS:

h1 {
font-family: verdana, arial, sans-serif;
font size: 10;
color:#FF0000;
}

Bemærk at du i CSS kan angive flere skrifttyper der skal bruges. Det er en prioriteringsrække, så hvis operativsystemet ikke har den første kan den skifte til den anden osv.

Fed, kursiv og understreget

Du kan også angive i CSS om skriften skal være fed, kursiv eller understreget, men det kræver lidt forskellige koder. Her er koden til at gøre skriften kursiv:

font-style: italic;

Og her til at få fed skrift:

font-weight: bold;

Og her til understreget:

text-decoration: underline;

Du kunne også vælge værdier som line-through eller overline for at få teksten henholdsvis gennemstreget eller overstreget.
Med text-transform kan du vælge at alle bogstaver skal skrives med stort:

text-transform: uppercase;

Denne kan også have værdien lowercase hvis alle bogstaver skal tvinges små eller capitalize hvis første bogstav i hvert ord skal være stort.
Der findes mange flere CSS koder du kan bruge til at ændre udseendet af din tekst. Det er bare at slå det ønsksede op i en CSS reference på nettet.

Justering

For at ændre justeringen til f.eks. centrering af teksten ville man i html have brugt html tagget center.

<center>Denne tekst centreres</center>

I CSS bruger man bare koden text-align:center;. Lad os lige kigge på et eksempel på dette.

p.center {
text-align:center;
}

Denne kode gælder altså for all p-tags der har angivet klassen “center”. I HTML skulle jeg så skrive:

<p class="center">Denne tekst centreres</p>

For at angive at jeg ville have teksten centreret. Jeg kunne også vælge left eller right for at få dem henholdsvis venstre eller højrejusteret. Med værdien justify ville teksten blive fordelt over hele bredden.

Indrykning

Med koden text-indent kan du rykke første linie i et afsnit ind, ligesom du ofte ville gøre i Word for at lave et nyt afsnit.

p {
text-indent: 30px;
}

Dette betyder altså at første linie vil starte 30 pixels længere inde end de resterende linier i alle afsnit.

Afstand mellem bogstaver

For at ændre på afstanden mellem bogstaver kan du bruge koden letter-spacing.

h1 {
	letter-spacing: 4px;
}

Denne kode siger altså at der skal være 4 px afstand mellem hvert bogstav i overskrift 1 (h1).