CSS Cascading Style Sheet

CSS (Cascading Style Sheet) er et programmeringssprog som er beregnet til at definere layout på HTML-dokumenter. Det smarte ved CSS er, at du kan definere baggrundsfarve, fonte, fontfarve og fontstørrelser, linieafstand, marginer samt en mængde andre definitioner fælles for alle dine websider, i stedet for at skulle definere hver enkelt side for sig selv.

Med et stylesheet kan du eksempelvis ændre skrifttypen på alle dine websider fra Tahoma til arial eller en hvilken som helst anden font med een enkelt rettelse i dit stylesheet dokument.

Mulighederne for at lave et flot sidelayout med et stylesheet begrænser sig ikke kun til tekstlayout. Med et stylesheet kan man styre stort set enhver form for layout på websiden.

Selve stylesheetet kan kodes i Notepad eller i en hvilken som helst anden Notepad-lignende editor, og gemmes som en fil af filtypen .css. Der findes ligeledes en del købeprogrammer som er beregnet til fremstilling af stylesheets.
Et eksempel på et sådant er CoffeeCup StyleSheet Maker, som du kan se på dette link: [KLIK HER]

Når man har defineret sit stylesheet, så laver man bare et link til det html-dokument som man ønsker det pågældende stylesheet anvendt på, og indsætter dette link i "head" på sit html-dokument. Et sådant link vil typisk se således ud:

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

I ovenstående eksempel linkes der til et stylesheet som hedder "my-style.css". Du kan naturligvis give dit stylesheet et hvilket som helst andet navn, når blot du husker at filtypen skal være .css.

I det følgende eksempel kan du downloade en webside der er lavet med et stylesheet. Så kan du selv prøve hvor nemt det er at ændre på websidens layout ved hjælp at sidens stylesheet, som er defineret i den tilhørende css-file.

Du skal huske at din css-fil skal ligge i samme root-directory som din html-fil. Gør den ikke det så skal du udvide linket til at beskrive den nøjagtige sti til filens placering, ellers vil dit stylesheet ikke fungere. Dette betyder også at du skal have dit stylesheet (css-filen) liggende i samme mappe som html-filen hvis du ønsker at arbejde med websiden offline.

Hvis du er lidt uklar omkring hvad "Root directory" er for en størrelse, og hvordan man definerer en korrekt sti til sine filer på serveren, så er der helt nede i bunden af denne webside et lille lynkursus i disse begreber, som du bør læse.

Du kan se de to eksempelfiler her, og du kan downloade dem ved at højreklikke på linket og vælge "Gem destination som" fra din højrekliksmenu.

Se eller download html webside: [KLIK HER]

Se eller download StyleSheet: [KLIK HER]

Bemærk: Hvis du ikke har noget program associeret til css-filer, så vil du ikke kunne åbne css-filen ved at klikke på linket. Du kan dog stadig downloade den således som før beskrevet.

Betydningen af hvor mange funktioner stylesheetet styrer kan du få et indtryk af ved at klikke her på eksemplet igen. Linket er til den samme webside som før, - nu bare uden stylesheet:

Se html webside uden stylesheet: [KLIK HER]

Hvis du har lyst til at lære noget mere om CSS, så er der utallige muligheder for dette ved at søge på Google med søgeordene "Cascading Style Sheet".

Er du ikke så skrap til det engelske, så kan du indskrænke din søgning ved at sætte hak i denne option: "Sider på dansk". Du vil se at der stadig er et betydeligt udvalg af sider selv med denne begrænsede søgning.

For at lette din søgning lidt, så får du her nogle af de gode link til emnet, som jeg selv har fundet og haft glæde af:

HTML.dk - Hvad er CSS?:   [KLIK HER]
HTML.dk - Hvordan fungerer CSS?:   [KLIK HER]
Designerværkstedet - Cascading Style Sheet:   [KLIK HER]
Style sheets på 1-2-3: del 2:   [KLIK HER]
Teknik & Sjov - Cascading Style Sheet:   [KLIK HER]
Webtip.dk - Typografiark:   [KLIK HER]

Credit for tekst og kodning:

Tekst og HTML-kodning: Flemming Nielsen Webmaster FN Support
(Spirituel inspirator og åndeligt vejledende guru: GnaXi fra Arden)


Root directory og definition af stier

Der er erfaringsmæssigt mange brugere der har problemer med at definere stier korrekt. I langt de fleste af de tilfælde hvor link ikke virker, eller hvor brugere ikke får billeder ind på deres hjemmeside, så skyldes det næsten altid at stien til de ønskede objekter ikke er defineret korrekt.

Biblioteksstrukturen på et webhotels serverplads er i mange henseender sammenlignelig med den biblioteksstruktur de fleste brugere kender fra Windows Stifinder. På de fleste computere er "Root directory" identisk med C-drevet, som på en computer er defineret således: C:\

Denne enkle betegnelse for et root directory kan ikke anvendes på webhoteller, idet alle brugere har unikke domænenavne. Har du eksempelvis et domæne der hedder www.mitdomæne.dk så vil den nøjagtige sti til dette se således ud: http://www.mitdomæne.dk/
Denne sti er samtidig stien til dit root directory, og er således ret identisk med den fra Windows Stifinder så velkendte C:\

I dit root directory ligger der en underliggende mappe- og filstruktur. Din index-fil til din webside vil typisk ligge i root directory, - det er den fil som er startsiden på din webside, og den vil typisk hedde: index.html
For øvelsens skyld kan vi så lige definere stien til din index-fil korrekt også. Den ser nemlig således ud:
http://www.mitdomæne.dk/index.html

I det følgende eksempel forestiller vi os at du har en stylesheet-fil med navnet mystyle.css og at du placerer denne fil et andet sted end i root directory, - eksempelvis i en mappe du har kaldt stylesheets En korrekt sti til denne fil skal således både indeholde stien til root directory, stien til mappen, og stien til selve filen i mappen. Denne sti vil derfor se således ud:
http://www.mitdomæne.dk/stylesheets/mystyle.css

For forståelsen skyld får du lige endnu et eksempel: Jeg har et billede af mig selv. Dette billede hedder, praktisk nok, mig.jpg. Hvis jeg lægger dette billede ud direkte i root directory, så er stien til billedet forholdsvis enkel, - den vil nemlig se således ud:
http://www.fnsupport.dk/mig.jpg

Nu kan man jo ikke have alle sine filer til at ligge og sejle rundt i root directory i een stor pærevælling. Det ville svare til at alle filer på ens computer lå direkte i roden til C-drevet i stedet for at være pænt ordnet og sorteret i mapper og undermapper.

Root directory på dit webhotel er primært beregnet til at indeholde dine websider og nogle helt specielle filer som .htaccess, der skal ligge i roden for at fungere. De øvrige filer bør man sortere og gruppere i egne undermapper, for bare at holde en lille smule styr på det. Billeder bør eksempelvis være i en mappe der udelukkende indeholder billeder.

I det aktuelle eksempel har jeg derfor lavet en mappe til billeder. Denne mappe hedder billeder, og jeg har i denne mappe også lavet nogle undermapper, således at jeg kan sortere mine billeder i forskellige grupper.
Billeder af mig selv, som eksempelvis mig.jpg, skal ligge i en undermappe i billeder, som hedder egne-foto . Nu bliver stien til billedet en anelse mere kompliceret. Den ser nu således ud:
http://www.fnsupport.dk/billeder/egne-foto/mig.jpg

En sti er stort set det samme som et link. Den nemmeste måde at tjekke en sti på er at skrive stien direkte i din browsers adresselinie. Hvis det pågældende objekt ikke dukker op, og du i stedet får den velkendte "Siden kan ikke vises", så er dit link helt enkelt defineret forkert.

Du kan jo prøve at skrive de stier, jeg her har lagt som et eksempel, i din browsers adresselinie, - så vil du se billedet mig.jpg dukke op på din skærm. Brug copy/paste, - det er nemmere, og det er i øvrigt altid en god skik at gøre dette når man skal videregive link til andre. Så er man i det mindste sikker på at linket er korrekt gengivet.

Du bør især være opmærksom på at link er "Case sensetive". Det betyder at der skelnes meget nøje mellem små og store bogstaver, og at linket ikke virker hvis du ikke overholder dette. Det er derfor også meget vigtigt at du gengiver filtyper præcis således som de er skrevet, - så er en jpg-fil benævnt .jpg med små bogstaver, så skal du også gengive den med små bogstaver i dit link til filen.


DIN COMPUTERS IP-ADRESSE ER:  38.107.191.102
Du åbnede denne webside Søndag den 05 September 2010. kl. 18:56:38


* TILBAGE TIL TOPPEN AF SIDEN *