Hej Nina
Ja, det er bare med at sætte sig lidt ind i det - CSS er yderst simpelt.
Dine spørgsmål handler generelt om, hvordan CSS bruges, så her kommer en kort forklaring...
Adskil formatering fra selve din HTML-side for at få overblik og meget bedre styr på det hele. Det bruger du CSS til. Vi kan lige lave et eksempel...
Hvis du i din HTML-fil fx vil placere en <div>-boks med noget indhold, så kan du skrive fx:
<div> Tekst tekst tekst </div>
Her er der overhovedet ikke angiver nogen form for formatering, og tekstens farve, skrift osv. og boksens størrelse mm. er derfor standard.
Hvis jeg nu vil formatere teksten, så kan jeg bruge CSS. Vi kan sige, at jeg vil sørge for, at div-boksen fylder 50% af skærmen, at teksten centreres, at skriften sættes til Arial, samt at tekstfarven gøres blå.
Det kan gøres på tre forskellige måder - og her mener jeg, at CSS'en kan placeres tre forskellige steder:
Placering 1 - Inde i tagget (Inline Styles):
<div style="width: 50%; text-align: center; font-family:arial; color: blue;"> Tekst tekst tekst </div>
Her er formateringen placeret inde i tagget, ved at der er indsat en style=" "-atribut. Så gælder formateringen KUN for det pågældende tag.
Placering 2 - I head-delen (Internal Styles):
<head>
<style type="text/css">
<!--
.boks1 {
width: 50%;
text-align: center;
font-family: arial;
color: blue;
}
-->
</style>
</head>
<body>
<div class="boks1"> Tekst tekst tekst </div>
</body>
Se, her har vi tilføjet præcis samme formatering til div-boksen. Men vi har skrevet formateringen i CSS i toppen af dokumentet, og så kobler vi div-boksen til CSS'en ved at tilføje en class=" "-atribut.
Formateringen gælder netop for hele HTML-filen nu, og hvis vi tilføjer class="boks1"-atributten til andre div-elementer, så får de samme formatering :) Det er smart!
Placering 3 - Eksterne CSS-dokument (External Styles):
<head>
<link rel="stylesheet" type="text/css" href="formatering.css" />
</head>
<body>
<div class="boks1"> Tekst tekst tekst </div>
</body>
Her har vi igen angivet præcis samme formatering til div-boksen, men det kan bare ikke ses i HTML-filen. I stedet for at lave et internt CSS i toppen af dokumentet, så laver vi et eksternt CSS-dokument, som indeholder formateringen. Og så henviser vi blot til dette dokument.
I dette eksempel hedder CSS'dokumentet så "formatering.css", og det eneste det behøver indeholde nu er:
.boks1 {
width: 50%;
text-align: center;
font-family: arial;
color: blue;
}
Det er alt, hvad der skal stå i CSS-dokumentet. Så kan du henvise til dette dokument fra mange andre sider også, og dermed sørge for at de alle har samme formatering. Så kan du også ændre formateringen ét sted, nemlig i dette dokument, hvis der skal ske ændringer, i stedet for at åbne hver enkel HTML-fil. Det er da smart! :)
// Steeven
