Cascading Style sheets

Grundideen med CSS er at skille design fra indhold – stylesheet kan sammenlignes med typografi ark eller design skabeloner i word eller openoffice. Et html side kan få mange forskellige udtryk og designs ved at ændre på stylesheet’et. På www.zengarden.com kan man se den samme html-fil med samme indhold stylet på 210 forskellige måder. Prøn at kig lidt på disse sider – de illustrerer meget præcist hvordan indhold og design er skilt ad.

Et stylesheet eller typografi ark kan skrives internt i en html-fil men oftest vil vi arbejde med en selvstændig css-fil – filtype navnet er navn.css og vi vil linke fra head sektionen i html filen for at indlæse stylesheet’et. Fordelen ved denne metoder er at vi kan styre flere filer fra det samme typografi-ark.

CSS har en anden syntax og ser sådan her ud:

1

h1 {color:red;}

h1 er tagget vi vil gøre noget ved (selector)

color den egenskab vi vil angribe(property)

og red er værdien (value)

for at det slår igennem på vores htmlside skal vi inde i head sektionen skrive:

<style >h1 {color:red}</style>

Der er mange egenskaber vi kan tilføje i CSS:

1
2
3
4
5
6
7
8
9
10

h1 {
    color:red;
    font-size:32px;
    font-family:Verdana;
    font-weight:bold;
    line-height:30px;
    letter-spacing:10px;
    text-transform: uppercase;
 
   }

Læs mere på w3schools om styling af fonte og mere generel styling af text