CSS er et format for å skrive såkalte stilark. CSS brukes for å lage design til flere typer dokumenter. I denne guiden tar vi en kikk på hvordan CSS skrives og brukes, samt hvordan det brukes sammen med (X)HTML-standarden. Det er en fordel med grunnleggende forståelse av HTML før du begynner med CSS.
Innhold:
I den første siden av artikkelen får du grunnleggende informasjon om hvordan du skriver en CSS-kode, og hvordan den legges inn på nettsiden din.
Videre på side to ser vi på hvordan du kan optimalisere koden og holde den ryddig. I tillegg tar vi noen mer avanserte funksjoner og bruk av avstandsenheter i CSS
CSS står for Cascading Style Sheets, eller stilark på norsk. Dette er en relativt ny standard som skal utfylle HTML. Sidene på WWW skrives i HTML og de som har laget og utviklet HTML (World Wide Web Consortium eller W3C) ønsker ikke at ting som har med layout å gjøre skal inn i HTML. I stedet ønsker de at HTML-markeringene bare skal beskrive informasjonen i dokumentet, slik at nettleseren kan vise dokumentet på den måten som passer leseren best.
Hva er poenget med CSS, og hvorfor bør man lære seg det?
For det første er det enkelt. En endring i en CSS-fil kan utføre globale endringer på hele ditt nettsted. CSS hjelper deg med å gjøre ditt nettsted stilrent og likt, noe som igjen gjør det enkelt for besøkende å vite at de fortsatt befinner seg på samme nettsted om de klikker på en link.
Har du et større nettsted med mange sider, er det svært vanskelig og tungvindt å måtte oppdatere samtlige av de for å få et likt design over hele nettstedet. I tillegg gjør CSS at du ikke trenger å bruke tabeller, slik at du slipper å ha <tr> og <td>-koder overalt som må lastes for hver side. Du sparer dermed både båndbredde, penger og tid!. Dersom du koder i HTML 4 strict eller XHTML vet du kanskje at tagger og attributter som <font> og bgcolor ikke er tillatt.
Stilark kan du bruke på flere måter:
- Inline, på et element i HTML-koden
- Intern, lagt inn mellom head-taggene i starten av dokumentet
- Ekstern, i en annen fil tilknyttet dokumentet
- Som nettleserens standard
Starte å kode
CSS-stilark skrives i all hovedsak slik:
egenskap : verdi;
}
Vi kan ta denne koden fra hverandre å forklare litt. Den første delen er en velger. Den velger hva stilregelen omfatter (det mellom {}). Her er et par eksempler:
egenskap : verdi;
}
.my_class {
egenskap : verdi;
}
#my_id {
egenskap : verdi;
}
Det første eksemplet vil sette en regel for elementet body. Det andre eksemplet bestemmer hvordan alle elementer med attributten class="my_class" vil se ut. Du kan selvfølgelig sette "my_class" til hvilken verdi du selv ønsker. Eksempel nummer tre vil gjelde for alle elementer med id="my_id" som attributt. Denne er veldig lik class'en men det kan kun være ett element med en spesifikk ID i et dokument.
Egenskaper og verdier
Så, hva kan vi skrive som egenskaper og verdier? Det finnes omkring 100 forskjellige egenskaper vi kan skrive, og enda flere for verdier. Du trenger selvfølgelig ikke å huske alle disse, og enkelte får du kanskje aldri bruk for. Her kommer et par eksepler på hvor enkelt det er å kode med CSS.
body {
background-color : black;
}
a {
color : red;
}
p {
text-align : center;
}
I den første velgeren finner vi body-elementet. Her har vi bestemt at når body-taggen brukes, skal background-color (bakgrunnsfarge) være den verdien vi har satt, det vil si svart.
I den neste linjen har vi brukt elementet a, som de fleste vet at brukes til å lage linker. Denne er så og si selvforklarende, og er enklere enn det første eksemplet. Egenskapen color bestemmer at alle linker som bruker a-taggen skal være røde. Det siste eksemplet lager en regel for paragraf-taggen p. Her vil paragrafer bli midstilt ved hjelp av text-align
Legge til CSS på din side
Nå som du har fått litt grunnleggende om hvordan CSS-koden er bygd opp, er det på tide å få stilarket inn i HTML-dokumentet ditt. Vi starter med hvordan du legger inn eksterne stilark. Denne metoden brukes ofe når du vil at et stilark skal gjelde for hele nettstedet, eller i det minste flere filer. Dette gjør vi ved å legge til følgende kode mellom <head> og </head> i starten av HTML-dokumentet.
<link rel="stylesheet" type="text/css" href="http://www.eksempel.no/style.css">
Vi bruker her <link>-taggen for å linke til stilarket. rel="stylesheet" forteller nettleseren at vi linker til et stilark. Selvfølgelig må vi også ha med adressen til der CSS-filen befinner seg. Du kan legge til flere stilark dersom du ønsker det, på samme måte.
Så har vi det interne stilarket. Dette er nyttig å bruke dersom du skal legge til en stil som kun skal brukes på den ene filen. Denne koden legges også mellom <head> og </head> i starten av HTML-dokumentet.
<style type="text/css"><!–
body {
background-color : black;
}
–></style>
Legg merke til at vi har lagt inn kommentar-tagger i CSS-koden. Dette er for å forhindre at eldre nettlesere skal vise CSS-koden i HTML-dokumentet. Dette er lurt å gjøre – men du må ikke.
Den siste måte å legge til CSS på, er direkte på elementet. Denne metoden bruker litt annet format, og du skal ikke skrive verken velgeren eller {}. Det ser slik ut: <a style="color:red;" …. Her får linken en rød farge. Det vil se slik ut: ITpro.no.
Nå som du vet hvordan du bruker CSS og hvordan du legger det til i dokumentet, bør du ta en titt på CSS Reference hos W3Schools for å se alle reglene du kan sette.
Sender din rapport, vennligst vent...