Tips&Tricks

til hjemmesiden, computeren og internettet

Tips & Tricks



Sådan vedhæfter du et stylesheet

Sat på siden 02-06-2005

Rigtig flot webdesign -- det laver man kun med stylesheets.

Det er sjovt, men når man bliver øvet i at se på hjemmesider, er der stor forskel på dem.

Der er dem, der er designet med rammer og billeder, og der er dem, der er designet med stylesheets. Jeg kan lettest forklare forskellen via et billede: Hjemmesider, designet med rammer (frames) og billeder, svarer til et måltid, bestående af flæskesteg, sovs og kartofler. Det kan måske smage godt (personligt har jeg aldrig brudt mig om flæskesteg), men det ligger tungt i maven. En hjemmeside, der er designet med stylesheets, kan sammenlignes med et måltid, bestående af en kalkunschnitzel, dampede grøntsager og en frugtdessert. Let, luftigt, men mættende.

Nå, og hvad kan du så bruge min mening om det til?

Jeg har netop skrevet "Hjemmesider for absolutte begyndere", og der er ikke et ord om stylesheets. Jo, jeg nævner dem, men de er slet ikke brugt i hæftet. Hvorfor ikke? Fordi vi skal jo lige starte et sted, og det kan da ikke nytte noget, at bede kokkeeleven om at lave haute cuisine, når han endnu ikke har lært at skrælle kartofler.

For at du kan bruge dette tip, skal du derfor kende til det grundlæggende om at lave hjemmesider. Du skal helst vide, hvad det betyder, når der står <body> i koden på hjemmesiden for at nævne et eksempel.

Men det ved du faktisk allerede, hvis du har læst det nævnte hæfte, eller på anden vis har lært lidt om at lave hjemmesider.

Næste skridt for den ærgerrige, nysgerrige og videbegærlige webmaster er derfor stylesheets, som bruges til at få hjemmesiden til at se rigtig flot ud med. Faktisk bør alt, hvad der har med udseendet at gøre, befinde sig i et dokument, et stylesheet. Det gør det også meget lettere at lave helt om på designet, hvis du bliver træt af det oprindelige.

Et stylesheet kan laves i et program som fx Notesblok. I fremtidige tips skriver jeg blot den kode, der skal indsættes i tekst-dokumentet, og så kan du vende tilbage til dette tip for at se, hvordan stylesheetet kan vedhæftes.

Når tekst-dokumentet er lavet, skal du gemme det under et navn, der ender på filtypen .css, fx style.css.

Det gør du i notesblok ved at klikke på Filer -> Gem som ... -> Vælg, hvor dokumentet skal gemmes.
Jeg vil foreslå dig, at du i første omgang gemmer stylesheetet samme sted, som du har gemt din hjemmeside.

Ret herefter filtypen til Alle filer, og skriv navnet, fx style.css i feltet "Filnavn".

Når du skal bruge stylesheetet på din hjemmeside, skal du åbne html-filen, så du kan html-koderne. I mange hjemmeside-programmer er der en knap eller et faneblad, som du kan klikke på for at se html-koden. Hvis dit program ikke har sådan en, kan du i stedet højreklikke på html-filen, mens den er lukket, og vælg Åbn med ... Klik dig vej til Notesblok.

Øverst i html-dokumentet vil du se, at der bl.a. står <head> en hel masse og så </head>. Et sted imellem de to head-tags (som de hedder), skal du skrive:

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

Det betyder, at du laver en kæde (link) til et stylesheet, som hedder "style.css", og som bruges, når man ser hjemmesiden på skærmen (screen).

Alt, hvad du laver af koder i filen style.css, vil herefter slå igennem på din hjemmeside.

Du kan lære alt, hvad du behøver for at komme i gang med at bruge stylesheets på mit online-kursus "Begynd med stylesheets", som du finder på www.e-skolen.com -- der starter snart et nyt hold.

Kunne du lide tippet? Abonner gratis på mine nyhedsmails og få friske tips hver uge: Tilmelding til Tips og tricks
Lige nu: Få e-bogen "701 Tips og Tricks" gratis (normalpris $11,83) ved tilmelding.


|