HTML uten CSS

Det aller første du trenger om du ønsker å eksprimentere med CSS, er en HTML-fil (dokument) som skal lenke til en ekstern CSS-fil, så vi går gjennom detaljene for å få til dette.

HTML-filen skal inneholde vanlig HTML-kode, men tags som kan påvirke utseendet til tekst og layout skal utelukkes i selve html dokumentet, og i stedet settes opp i CSS filen.

Nedenfor ser du innholdet i en enkel html testfil (kalt "test.html") som på de neste sidene vil bli brukt til å demonstrere hvordan det hele fungerer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>testfil som viser css</title>

<!-- HER LENKES CSS-FILEN TIL DENNE HTML-FILEN -->

</head>
<body>

<h1>overskrift 1</h1>
<h2>overskrift 2</h2>
<h3>overskrift 3</h3>

<p>
et style sheet er kort fortalt en fil som bestemmer utseendet på en html-fil.
style sheet-filer slutter på .css (forkortelse for "cascading style sheets").
</p>

<p>
et style sheet er kort fortalt en fil som bestemmer utseendet på en html-fil.
style sheet-filer slutter på .css (forkortelse for "cascading style sheets").
</p>


<p><a href="test.html">testlink - klikk, og legg merke til hvordan denne linken er!</a></p>

</body>
</html>

» Slik ser eksempel koden ut i en nettleser! - Verdt å merke seg er at ingenting av tekststørrelser, skrifttype eller annet er spesifisert. Normalt gjør man det, men denne er forberedt for css.

Konklusjon og forklaring

I eksemplet over ser du under <title> </title> taggene en grå tekststreng:
<!-- HER LENKES CSS-FILEN TIL DENNE HTML-FILEN -->

Denne skal byttes ut med en link til en ekstern CSS fil i neste eksempel, og må alltid stå mellom <title> og </head> når du lenker til en CSS-fil.

(Bruken av slike grå tekststrenger inne i et dokument er for å lage seg små huskelapper, og satt opp slik er den usynlig for alle nettlesere)

Når den er byttet ut skal den erstattes med et link element som inneholder attributtet "Rel", som igjen beskriver relasjonen mellom selve HTML dokumentet og det dokument som det linkes til! I dette tilfellet, et "Stylesheet".

For at nettlesere best skal skjønne hva det dreier seg om, implanteres et annet attributt i tilleg, kalt "Type", og som bare beskriver det linkede dokumentets innhold.

Neste eksempel skal inneholde link til vår Stylesheet fil (CSS), og den grå tekststrengen byttes som sagt ut med den under, som da vil se slik ut:

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

Vi merker oss at CSS filen også heter test, men med en annen endelse: .css

Men først må vi altså sette opp selve stilsettet (CSS), og det gjør vi på neste side.

Neste side: HTML med CSS



SØK ressurser

Gå til Avansert søk

HJELP til Hjemmesiden

Nyttige ressurser til ditt Hjemmesideprosjekt, alltid tilgjengelig. Klikk for å vise tilgjengelige ressurser.

Til toppen