Man hører tit om CSS filer når man snakker om html.
Så hvad er de?
En CSS fil er en fil der indeholder en masse klasser, der bestemmer hvordan et html element ser ud.
Det du normalt skriver i style attributten kan du skrive i css og få et meget mere overskuelig kode.
F.eks.

<h1 style="background-color:#FF0000; font-size:32; font-family: calibri, arial, verdana; font-weight:normal"></h1>
<h1></h1>

Her der to h1 tags. Den ene viser hvordan man kan få en stor rød overskrift ved at taste det direkte ind i html'en den anden viser hvordan det ville se ud hvis vi brugte CSS.
Der er vist ingen tvivl om at det er lettere at sætte en hjemmeside op med CSS filer.

For at få gang i din CSS fil skal du først have den lavet, jeg har valgt at lave en fil der hedder style.css og jeg har lagt den ind i mappen CSS.

Når du har fået oprettet din fil skal du have din html fil til at indlæse den.
For at gøre det skal du putte dette i dit <head> tag:

<link rel="stylesheet" type="text/css" href="CSS/style.css">

Nu skal du have skrevet stilen ind i CSS filen.
For at få den overstående header skal det skrives sådan her:

h1{
	font-size: 32px;
	color: #FF0000;
	font-family: calibri, arial, verdana;
	font-weight: normal;
}

Så når du skal ændre på et tags udseende skal du skrive taggets navn f.eks.

h1{
}
div{
}

Du kan også lave klasser hvor sætter det op ligesom før men istedet skriver du et punktum før navnet og derefter skriver du dit eget navn der:

.minklasse{
	font-size: 32px;
	color: #FF0000;
	font-family: calibri, arial, verdana;
	font-weight: normal;
}

og så i html'en skrive

<h1 class="minklasse"></h1>

Ligeledes kan du definere en style for et specielt id ved:

#mitid{
        font-size: 32px;
	color: #FF0000;
	font-family: calibri, arial, verdana;
	font-weight: normal;
}

Hvis du vil ændre på stylen for et link i forskellige stadier kan du skrive:

a:link
{
	color: #3CB371;
}
a:visited
{
	color: orange;
}
a:active
{
        color: green;
}

- Deltag i community projektet hvor vi laver en simpel html template i fællesskab!

<?
include('style.css')
?>

<style type="text/css">
<?
include('style.css');
?>
</style>