Bedre webdesign med CSS

Skrevet av: GratisGuide.net
Til side 1

Med dette stilarket på hjemmesiden kan vi endre koden for teksten vår slik at ordene som skal utheves benytter klassen vi har definert i stilarket:

Forklaringer til begrep som CSS og HTML finner du her.

Forklaringer til begrep som <SPAN CLASS="uthev">CSS</SPAN> og <SPAN CLASS="uthev">HTML</SPAN> finner du her.

Som du ser er resultatet det samme; ordene er fortsatt uthevet og fargen på teksten er fortsatt grønn. Forskjellen er at du nå kun trenger å endre ett sted for at det skal gjelde alle de uthevede ordene!

Dersom du vil endre fargen fra grønn til rød er det bare å endre fargen i stilarket. Du slipper dermed å måtte endre farge på hvert eneste ord. Med utdrag fra stilarket over blir den endrede linjen slik:

.uthev { font-weight: bold; color: red }

og det gir dette resultatet:

Forklaringer til begrep som CSS og HTML finner du her.

Stilark for flere hjemmesider

La oss si at du har flere hjemmesider med uthevede ord. Kanskje en reportasje eller artikkel. Da blir det mye jobb med å endre stilarket i <STYLE></STYLE>-beholderen om du velger å endre fargen på teksten.

Løsningen på dette er å benytte <LINK>-merket til å lenke et eksternt stilark til hjemmesiden.

Eksternt stilark

Først lager du et stilark i en tekstbehandler, for eksempel Notepad, og lagrer dette som en ren tekstfil, la oss si med navnet eksempel.css. Endelsen css hjelper oss å huske at filen inneholder CSS-kode. Du kan benytte det filnavnet og den endelsen du selv vil.

I denne tekstfilen legger vi inn samme stilark som vi la inn i <STYLE></STYLE>-beholderen. Siden filen er et stilark skal vi ikke ha med HTML-merker, altså <STYLE> </STYLE> og . Tekstfilen vil se slik ut:

.uthev { font-weight: bold; color: green }

Nå som du har et eksternt stilark er det bare å lenke dette til hjemmesidene du vil bruke det på. Du behøver ikke å ha <STYLE></STYLE>-beholderen lenger, i stedet skal du ha et <LINK>-merke. Denne skal plasseres i <HEAD></HEAD>-beholderen og koden ser slik ut:

Forklaring på koden

Vi har startet med hjemmesidens hode siden <LINK>-merket alltid skal plasseres i denne. Øvrig innhold i hodet er angitt med tre punktum.

<LINK>-merket har vi med REL=""-attributten sagt at vi lenker et stilark til hjemmesiden. Dokumenttypen vi lenker til er et stilark som angitt med TYPE=""-attributten. Med HREF=""-attributten angir vi banen til stilarket.

Banen til stilarket kan angis eksplisitt med en full URL eller implisitt med en relativ URL, relativ i forhold til hjemmesiden med <LINK>-merket. I eksempelet er det tatt for gitt at stilarket er lagret i samme katalog som hjemmesiden. Ligger stilarket ett nivå over ville den relative banen blitt ../eksempel.css. Relativ bane må alltid være lik eller under øverste nivå i en URL:

Ligger hjemmesiden din på URL-en http://mitt.domene.no/side.html vil en relativ URL i <LINK>-merket som sier ../eksempel.css bety at stilarket ikke finnes selv om stilarket ligger i katalogen over på serveren - en katalog som ikke er tilgjengelig fra nettet. En eksplisitt URL vil kunne være http://mitt.domene.no/eksempel.css.

Mer informasjon

Nå vet du hvordan du kan benytte CSS på nettstedet ditt til å gjøre det enklere å vedlikeholde designet på hjemmesidene.

Bruker du stilark, CSS, vil du fort kunne gjøre vedlikeholdet av nettstedet ditt mye enklere. Dessuten kan du med CSS styre en rekke av HTML-merkenes egenskaper og på den måten lage spennende hjemmesider!

Relaterte lenker

For mer informasjon om CSS kan du besøke World Wide Web Consortium. Ta også en titt i vår katalog over nettsteder som handler om CSS.

Opphavsrett

Ønsker du å gjengi denne artikkelen eller noe fra den må du gjerne gjøre det, men ikke glem kildereferanse. For å lenke til denne artikkelen kan du bruke URL-en http://www.gratisguide.net/artikler/html/bedre-webdesign-med-css.html.

Til side 1 | Tilbake til Artikler / HTML og CSS