CSS (Cascading Style Sheets)
CSS Kurs Velkommen til CSS kurs
Prinsippet bak CSS er at innholdet, tekst, bilder o.l, skal skilles fra det som styrer selve utseendet på en webside.
- Enkelt å endre utseende på en webside
- Utseende styres kun fra en enkelt fil
- Mye lettere å vedlikeholde
- De fleste nyere språk benytter CSS
Å sklille innhold fra utseende er også sentralt i aktuelle språk som XML. Det er anbefalt å lære seg stilsett, som er et godt norsk ord for CSS, for å kunne imøtekomme krav til nyere standarder.
Et stilsett er altså kort fortalt en fil som "styrer" utseendet på en HTML-fil, og ved ekstern implentasjon har den endelsen .css. Et ubegrenset antall dokumenter kan peke til og styres av samme .css-fil, noe som blant annet er styrken i CSS.
Introduksjon til CSS
Stilsett kan forklares som en ekstern samling av én eller flere regler om hvordan en hjemmeside skal vises og skaper mer kontroll over sidens utseende, men er meningsløst uten et HTML-dokument hvor stilsettet gjelder.
Ordet "cascading" betyr at man kan bruke flere stilsett-typer på samme side. Med stilsett-typer menes forskjellige måter å sette stilsett på en hjemmeside, og foruten den forhåndsatte standarden i din nettleser gjelder 3 måter:
Eksternt - Som omtalt ovenfor vil dette være en egen fil (med endelse .css) med deklarasjoner av alle tagger som brukes i html dokumentet.
Embedded - Et <style> sett som er integrert i selve html dokumentet, og som står mellom <head> taggene.
Inline - Et style attributt som er deklarert direkte i en tagg i selve html dokumentet mellom <body> taggene.
Hvilket CSS oppsett som styrer html dokumentet hvis du har flere enn ett style sett, bestemmes også fra nevnte punkter, men i motsatt rekkefølge.
Det å bruke HTML-attributtet Inline style for et spesifikt HTML-element på en side har høyeste prioritet, og overskriver alle andre stilsett-typer som måtte være koblet til siden. En < p> tagg som er definert i et eksternt stilsett med margin 5 px, vil måtte vike for en enkelt spesifikk og definert tagg som <p style="margin: 1px;"> på selve html siden.
Eksternt stilsett
Et eksternt css stilsett kommer vi tilbake til, men for å lenke til stilsettet settes en slik link inn mellom <head> taggene, hvor filnavn.css er navnet på den eksterne css filen:
<link rel="stylesheet" href="filnavn.css" type="text/css" />
Embedded stilsett
For å bruke et embedded, eller internt stilsett, skal vi fortsatt deklare koden mellom <head> taggene, og da kan det se slik ut:
<style type="text/css">
body {
background-color: #000000;
color: #ffffff;
}
</style>
Inline stilsett
Du kan sette opp så mange stilsett du vil med deklarasjon for p tagg og andre tagger i både eksternt og embedded stilsett, men har du en Inline deklarert tagg overskriver den alt annet. Inline har altså høyeste prioritet, og kan se slik ut:
<p style="margin-left: 1px; font: 1.1em arial, verdana; color: #000000;">
Teksten her...
</p>
Vi lærer alltid av de som kan mer en oss! Nettsteder der ute som inspirerer til lærdom gjennom egne erfaringer eller nyttige publiseringer, kan man ha svært stor nytte av! Finn dine ressurs sider, du også.
Artikkelkilde brukt til denne CSS seksjonen
Eirik Newth har skrevet mer enn 250 artikler og utgitt 17 bøker, mange av dem utkommet på en rekke språk. Han dukker regelmessig også opp som kommentator e.l. på radio og TV, og er i tillegg en ivrig nett- publisist med sin weblogg:
» newth.net/eirik.
Vil du studere hans originale CSS artikkel finner du den på denne linken » Original CSS artikkel
apasje.COM har vært heldige og fått tillatelse fra Eirik Newth til å bruke hans artikkel om CSS som mal for denne seksjonen. Det finnes mange som kan fortelle mye om css, men Newth gjør det på en genial og enkel måte.
Noen modifikasjoner er imidlertid tilføyd originalartikkelen på apasje!
Neste side: Fordeler og ulemper med CSS
SØK ressurser
HJELP til Hjemmesiden
Nyttige ressurser til ditt Hjemmesideprosjekt, alltid tilgjengelig. Klikk for å vise tilgjengelige ressurser.
CSS og html bøker
Hjemmesideprosjektet kan etterhvert bli innholdsrikt, suppler på med fagbøker og litteratur om hvordan lage optimale sider fra A til Å.