Introduksjon | Enkle stilsett | Oversikt over egenskaper | Avanserte stilsett | CSS-støtte | Kaskadingen | Avsluttende moralpreken | Videre utvikling | Tillegg
Denne innføringen forutsetter at du allerede kjenner HTML. Hvis du ikke gjør det eller føler du trenger en oversikt over HTML-taggene kan du ta en titt her.
CSS står for Cascading Style Sheets (på norsk stilsett) og er en relativt ny standard som skal utfylle HTML. Sidene på WWW skrives i HTML og de som laget 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 vevleseren kan vise dokumentet på den måten som passer leseren best. Man må huske på at på WWW kan leseren bruke et hvilket som helst system, kanskje til og med kjøre i tekstmodus eller være blind, og sidene skal være like tilgjengelige uansett.
Derfor har W3C jobbet med CSS siden 1994, men forslaget var altså ikke ferdig før september '96, og vev-lesere som forstår CSS har ikke blitt vanlig før nå nylig. Likevel har dette hele tiden vært målet til W3C, selv om enkelte produsenter av vev-lesere har blitt overivrige og utvidet HTML med ting beregnet på å påvirke presentasjonen. I og med HTML 4.0 er disse tingene på vei ut av HTML igjen.
W3C utga i mai '98 CSS level 2 (CSS2), som utvider CSS1 med en del nyttige ting. Denne innføringen dekker ikke CSS2, men jeg er i ferd meg å skrive en innføring som tar for seg det nye i CSS2. Det vil dukke opp en link fra denne artikkelen (nederst) når innføringen i CSS2 er klar.
CSS gir forfatteren (og brukeren) mulighet til å angi hvordan HTML-dokumenter skal vises, enten i HTML-dokumentet, eller i en egen CSS-fil. Fordelene med dette er mange, og en av de viktigste er at man slipper å hele tiden skrive FONT FACE, FONT COLOR, BGCOLOR osv over alt i HTML-dokumentene. I stedet kan man ha all layout-informasjonen i noen få CSS-filer, og ved å endre en av disse kan man endre utseendet på mange HTML-dokumenter. Dette gjør også at HTML-markeringene blir enklere å skrive og det blir lettere å vedlikeholde sidene. En siste fordel er at det blir mindre å laste ned, slik at nedlastingen går raskere. (Når CSS begynner å bli vanlig i bruk vil dette faktisk kunne begrense belastningen på nettet litt også.)
CSS har også rent grafiske fordeler, i og med at det gir muligheter rent grafisk som ikke er tilgjengelige via HTML. Man har langt større mulighet for å bestemme hvor elementer skal plasseres, avstand mellom elementer, skrift-størrelser, bakgrunnsfarger, innramming (ikke FRAMEs) osv.
Det er også noen fordeler ved dette for brukeren. Brukeren skal nemlig kunne angi sine egne stilsett som skal gjelde i tillegg til de som er angitt av forfatteren. Slik kan en svaksynt bruker f.eks. angi at all tekst skal vises i dobbel størrelse, mens resten av reglene fra forfatterens stilsett beholdes. Dersom forfatteren har gjort jobben sin skikkelig skal dokumentet tåle det uten å bli uleselig.
Den siste, og kanskje viktigste, fordelen er at stilsett "degrades gracefully". Det vil si at om man har en vevleser som ikke støtter stilsett så vil sider som bruker stilsett fortsatt være like leselige i den, for siden er skrevet i vanlig HTML. Dette gjør at CSS kan innføres uten at det går ut over lesere med gammel programvare som ikke støtter CSS. Det betyr også at bruk av CSS ikke går ut over lesere med ikke-grafiske vevlesere som Lynx.
De fleste som snakker om HTML er litt unøyaktige i bruken av ordet "tag", så
det er antagelig best å rydde opp i det før vi fortsetter for å unngå
misforståelser.
For å ta et eksempel:
<P>Dette er et <EM>enkelt</EM> avsnitt.</P>
Hele eksempelet består av ett element, nemlig P-elementet, som
strekker
seg fra start-taggen (<P>) til
slutt-taggen (</P>). Inne i elementet
finner vi tekst og et EM-element. Dersom man hekter en stilregel på
P-elementene ville den gjelde hele eksempelet over.
Det er vanlig å kalle et element som inneholder et annet som "forelderen" til det innerste elementet, som er "barnet" til det ytterste. I dette eksempelet er P foreldre-elementet til EM, mens EM er et barn av P.
Et attributt er slike ting som HREF på A-elementet og SRC på IMG-elementet.
I dette eksempelet:
<P ALIGN=center>Dette er et sentrert avsnitt</P>.
har jeg brukt ALIGN-attributtet på P og satt det til verdien center.
Attributt-verdier skal settes i anførselstegn hvis de inneholder noe annet
enn tall og bokstaver.
Dette er egentlig ord og uttrykk som er eldre enn HTML og skriver seg fra SGML, som er standarden HTML er laget i. Det er lurt å bruke disse uttrykkene korrekt fordi nye standarder som CSS og XML (se lenger ned) gjør bruk av dem.
CSS-stilsett består ganske enkelt av en liste med stilregler. En stilregel har to deler: selektoren som forteller hvor den gjelder og deklarasjons-listen som forteller hvordan formateringen skal være. Selektoren kan gjelde slike ting som ett bestemt element, alle H1-elementer, eller alle EM-elementer inne i et A-element.
Stilsettet kan skrives i en vanlig teksteditor (som f.eks. Notepad, eller forsåvidt Emacs, selv om det ikke akkurat er noen vanlig editor) og enten lagres i en .css-fil og henvises til fra HTML-sidene eller settes rett inn i en HTML-side innpakket i et STYLE-element. Mer om dette senere.
Syntaksen i en ekstern CSS-fil og i et STYLE-element er akkurat den samme, dvs at man kan ha en HTML-kommentar rundt alle stilreglene, men ellers skal stilsettet kun bestå av stilregler og eventuelle CSS-kommentarer. (Merk at CSS-kommentarer har en annen syntaks enn HTML-kommentarer.) Detaljene følger nå...
En stil-regel ser slik ut:
selektor { deklarasjon; deklarasjon; osv... }
Selektoren angir hvilke elementer deklarasjonene som er ramset opp inne i
klamme-parentesene gjelder.
Deklarasjonene har formen egenskap: verdi.
Hvis vi for eksempel vil at de viktigste overskriftene på en side skal
være i fet 26-punkt Times New Roman og sentrert kan vi angi det slik:
H1 { font-weight: bold; font-size: 26pt; font-family: "Times New Roman";
text-align: center }
Denne regelen vil nå gjelde alle H1-elementene i dokumentet
som bruker stilsettet.
Verre er det faktisk ikke å skrive enkle CSS-regler. Man har imidlertid mer avanserte muligheter, og det finnes en hærskare av forskjellige egenskaper. Disse kan du finne en oversikt over lenger nede.
Et viktig prinsipp i CSS er at elementer arver stilegenskaper fra
foreldrene. Det betyr at om man skriver: <H1>Dette er en
<EM>kuul</EM> overskrift</H1> og bruker stilregelen
i eksempelet over vil "kuul" inne i EM se ut akkurat som teksten inne
i H1, men den vil i tillegg være uthevet på en eller annen måte.
(Vanligvis i kursiv.)
Ikke alle egenskaper arves, men hvilke som ikke gjør det er stort sett intuitivt. F.eks. arves ikke bakgrunnsbilder, i stedet skinner de gjennom fra forelderen siden alle elementer som har gjennomsiktig bakgrunn som standard-verdi.
Dette kan gjøres på mange måter, men jeg tar bare de vanligste her. Den
kanskje nyttigste lar deg koble en egen CSS-fil til HTML-siden din. Jeg
har gjort det på hjemmesidene mine for å gi dem et felles utseende. Alle
mine sider deler altså CSS-stilsett, slik at jeg kan endre utseendet på
alle sammen samtidig. Du angir hvilken fil som skal brukes med
følgende HTML-markering:
<LINK REL="Stylesheet" TYPE="text/css" MEDIA="screen" HREF="url">
LINK-elementet skal alltid stå inne i HEAD-elementet til siden. HREF angir
altså URLen til stilsettet, akkurat som om det skulle vært en side man
linket til med A HREF.
MEDIA-attributtet angir hva slags medium dette stilsettet skal gjelde. SCREEN angir at dette stilsettet gjelder visning på skjerm. Andre verdier kan være:
TYPE-attributtet forteller vevleseren at det er snakk om et CSS-stilsett. Denne jobben skal egentlig webserveren gjøre, men det gjør den ikke alltid og da er TYPE en grei måte å løse problemet på. Bare så det er sagt, det finnes andre typer stilsett, f.eks. DSSSL (brukes ikke på web) og XSL (ikke ferdig enda, brukes med XML som det står mer om lenger ned).
STYLE er et vanlig HTML-element som du kan bruke til å sette inn stilregler rett i HTML-dokumentet ditt. STYLE skal stå inne i HEAD-elementet, og du kan ha flere STYLE-elementer i samme dokument. STYLE har også et MEDIA-attributt i likhet med LINK, og det fungerer på akkurat samme måte.
Et eksempel på stilsett med STYLE:
<HTML>
<HEAD>
<TITLE>Lite eksempel</TITLE>
<STYLE>
<!-- Skjuler for vevlesere som ikke forstår STYLE
...stilregler inn her på samme måte som i en .css-fil...
-->
</STYLE>
<HEAD>
<BODY>
...resten av dokumentet kommer her...
Det er også mulig å sette en stilregel direkte på et HTML-element, i stedet
for å gjøre det i et STYLE-element eller i en separat fil. Dette kan f.eks.
gjøres slik:
<P STYLE="color: red">Dette avsnittet ville blitt vist i rødt.</P>
I dette tilfellet er det ikke nødvendig å angi noen selektor, fordi det er helt åpenbart hvilket element deklarasjonene gjelder. Man skriver med andre ord bare det som ellers ville stått inne i klammeparentesene.
Man kan godt kombinere flere stilsett og f.eks. ha et eksternt i en .css-fil, flere skutt inn i STYLE-elementer og noen satt på STYLE-attributter. (I tillegg kan brukeren ha laget et eget bruker-stilsett som kombineres med alle sider brukeren ser på.) Da blir stilreglene kombinert med hverandre etter kaskade-reglene jeg beskriver lenger ned.
Noen ganger opplever man at HTML mangler et element for det man ønsker å uttrykke. Tenk deg f.eks. at du vil legge ut et intervju i HTML og vil vise intervjuerens spørsmål i en annen stil enn intervjuobjektets svar.
Den perfekte løsningen hadde sett omtrent slik ut:
<QUESTION>Hva følte du da du gikk i mål og visste du hadde vunnet?
</QUESTION>
<ANSWER>Helt topp, blahabklahbalbaahbhablabhalbahblalb.
</ANSWER>
Da kunne du hektet stilregler på QUESTION og ANSWER-elementene og det hele ville ha vært svært greit. Nå mangler imidlertid HTML slike elementer, men heldigvis har W3C forutsett dette problemet og laget en løsning på det.
Alle elementer i HTML 4.0 (ikke HTML 3.2) har et valgfritt attributt som heter CLASS. Det kunne vært brukt i eksempelet over på denne måten:
<P CLASS=question>Hva følte du da du gikk i mål og visste du hadde vunnet?
</P>
<P CLASS=answer>Helt topp, blahabklahbalbaahbhablabhalbahblalb.
</P>
Dette gjør at du kan sette på følgende regler i stilsettet ditt:
P.question { font-weight: bold; margin-left: 2em }
P.answer { font-weight: normal; margin-left: 4em }
Vevlesere som ikke forstår CSS bare overser dette CLASS-attributtet, slik at du kan bruke det helt uten å bekymre deg for virkningen i gammeldagse vevlesere. Du bør imidlertid bruke CLASS med forsiktighet, fordi dokumentet ditt skal helst være skrevet slik at man kan lese det med et helt generelt stilsett også. Du kan med andre ord ikke være 100% sikker på at leseren vil ha egne stilregler for klassene question og answer, og må ta hensyn til det når du skriver dokumentet.
Det finnes en annen løsning på dette problemet, som ikke er ferdig utformet ennå. Den heter XML (eXtensible Markup Language) og lar deg definere dine egne elementer. Du finner mer informasjon om XML under referansene.
Noen ganger vil du ha en stilregel som bare gjelder ett bestemt element. Dette gjelder særlig slike ting som plassering av elementer i dokumentet, men av og til trenger man det også til andre ting. Som regel bør slike problemer løses så generelt som mulig, slik at man ikke er avhengig av å bruke ditt stilsett for å se siden.
Dersom det ikke finnes noen generell løsning kan du bruke ID-attributtet, som
i likhet med CLASS ble introdusert i HTML 4.0 og finnes på alle elementer. For
å hekte en stilregel på ett bestemt element må du først gi det elementet et
unikt navn. Slik:
<DFN ID=CSSDEF>CSS</DFN> er en ny standard fra W3C..
Nå heter DFN-elementet i eksempelet CSSDEF, og dette navnet kan nå brukes som
selektor i en stilregel slik:
#CSSDEF { color: kufiolilla }
Vær klar over at et ID-attributt skal identifisere elementet det står på, slik at du ikke kan ha to like IDer i et dokument.
Det er også mulighet for å sette inn tekst i CSS-stilsett som ignoreres
av vev-leserne. Dette kalles kommentarer og brukes stort sett til beskjeder
og påminnelser til deg selv og andre, eller til å gjøre det lettere å holde
oversikten. Kommentarer begynner med /* og slutter med */. Følgende er en
fullstendig kommentar: /* Dette kan ingen se */.
Dette er en liten oversikt over noen av de viktigste CSS-egenskapene. Den er ikke komplett, men skulle gi et utgangspunkt for å skrive CSS-stilsett. Mer komplette oversikter finnes i referansene.
Størrelsesenhetene i CSS er av to typer: absolutte og relative. Dersom du bruker en relativ enhet angir du hvor stort noe skal være i forhold til noe annet. Dette kan utnyttes for å få ting til å tilpasse seg varierende størrelser. Absolutte størrelser, derimot, er alltid de samme og angis direkte. 1.5 cm er en absolutt størrelse, mens 120 % (av et eller annet) er en relativ størrelse.
Det er tre relative størrelses-enheter:
Det er fem absolutte størrelses-enheter. Disse bør brukes med forsiktighet, ettersom de ikke tilpasser seg leserens omgivelser på noen måte:
Prosent-enheter i CSS skrives uten mellomrom, f.eks. slik:
font-size: 90%. Negative prosenttall er i noen sammenhenger
tillatt.
Farger i CSS kan angis enten med en fargekode eller med et av seksten fargenavn: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white eller yellow.
Fargekodene er de samme som i HTML, nemlig #RRGGBB, der RR er et heksadesimalt tall mellom 0 og 255 (og angir mengden av rødt), mens GG angir grønt og BB blått. (Det er flere måter å skrive det samme på, se referansene hvis du er interessert.)
BODY { background-image: url(bg.gif) }CSS har en del forhåndsdefinerte klasser som ikke egentlig er klasser i vanlig forstand, for å få til ting som ellers ville vært svært vanskelige. Hvordan ville du f.eks. velge farge på besøkte og ikke-besøkte linker med det du hittil har lært av CSS?
Til dette finnes det tre forhåndsdefinerte pseudo-klasser på
A-elementet: link, visited og active. En selektor bruker pseudo-klasser
slik:element:pseudo-klasse { stilregler }. Dermed skal altså
disse pseudo-klassene brukes slik:
Det finnes to pseudoklasser til: first-line og first-letter, og disse kan brukes for å få til spesielle effekter på henholdvis første linje og første bokstav av teksten i et blokknivå-element. (Dvs: P, H1, BLOCKQUOTE etc, men ikke EM, STRONG osv.)
Det er mulig å forskjellsbehandle elementer etter hvilken sammenheng de står i. For eksempel: dersom man har en liste av lister der LI i den ytterste listen brukes som overskrifter for de innerste listene ønsker man kanskje å fremheve overskriftene. Det kan gjøres slik:
/* LI'ene i den ytterste listen: */
UL LI { font-size: large }
/* LI'ene i den innerste listen: */
UL UL LI { font-size: normal }
Den øverste regelen gjelder LI-elementer som står inne i en UL, mens den andre gjelder LI-elementer i en UL som igjen står inne i en annen UL. Du legger kanskje merke til at den øverste regelen gjelder i begge tilfeller? Det gjør ikke noe, for den nederste er mest spesifikk, så når den slår til vil den overstyre den øverste. (Mer om reglene for dette lenger ned.)
Du kan angi en stilregel som skal gjelde for alle elementer i samme klasse,
uavhengig av hvilke de er. Regelen .klasse { deklarasjon } vil
gjelde både <P CLASS=klasse>Dette avsnittet.</P> og
<EM CLASS=klasse>denne frasen</EM>.
Dersom du vil at alle overskrifter skal være i Helvetica, uansett hvilket
nivå de er på kan du gjøre det slik:
H1, H2, H3, H4, H5, H6 { font-family: Helvetica }
Av og til ønsker man å skrive noe som bare skal synes for de som har vevlesere som ikke forstår CSS. Dette kan gjøres svært enkelt med CSS: sett egenskapen display til none, og elementet vil ikke vises. Med andre ord kan man bruke en ID eller CLASS eller noe helt annet for å unngå at elementet vises.
HTML inneholder to elementer som kan brukes som elementer uten noen form for betydning. Dvs: innholdet i CODE-elementet skal være programkode, HTML-markup, CSS-stilsett eller lignende. Det ligger ingen slike føringer på hva som kan være inne i SPAN og DIV, annet enn at DIV er et blokk-nivå element (på linje med P, PRE og TABLE), mens SPAN er på tekst-nivå (på linje med EM og A).
Disse to elementene er dermed svært greie å kombinere med CLASS for å lage egne pseudo-elementer for ting som ikke finnes i HTML, der det ikke passer å ta over noen av elementene i HTML. Dette kan være dersom man ikke ønsker linjeskift og lignende formateringsføringer.
I CSS er det fullt mulig å få til en layout som bruker to kolonner uten at man må ty til tabeller. Dette kan gjøres ved å legge ett "beholder"-element rundt hver kolonne (DIV med passende CLASS egner seg bra, siden det er snakk om ting på blokk-nivå) og så sette på de riktige CSS-egenskapene, f.eks. slik:
DIV.venstre { width: 30%; float: left }
DIV.hoyre { width: 70%; float: right }
Dette skulle være ekvivalent med:
<TABLE>
<TR><TD WIDTH="30%"> ...Innhold i venstre kolonne her...
<TD WIDTH="70%"> ...Innhold i høyre kolonne her...
</TABLE>
Brukere som ikke har stilsett vil ikke få de to kolonnene. I stedet vil den kolonnen som står først i teksten komme øverst, og den andre vil komme under. Siden bør være like leselig når den vises på denne måten.
Ofte ønsker man å kunne dele stilregler mellom flere forskjellige stilsett.
CSS har en enkel måte å håndtere dette på: @import lar deg inkludere et
stilsett i et annet. @import-setninger kan settes inn blant stilreglene, og
ser slik ut:
@import url(http://www.server.dom/path/fil.css);
De behøver selvsagt ikke være absolutte som her, men kan også være relative,
akkurat som vanlige HTML-linker.
Følgende vev-lesere har hel eller delvis støtte pr 02.10.97:
W3C har en mer oppdatert liste.
Flere mye brukte vev-lesere støtter ikke CSS, som f.eks. Lynx, Netscape Navigator 3.0. Dette betyr at du hvis du skriver sider som er avhengige av CSS for å være leselige vil svært mange av leserne dine ikke kunne lese dem. Dette vil normalt ikke være noe problem hvis man skriver noenlunde fornuftig HTML og kan lett testes ved at man skrur av stilsett i vevleseren sin og ser på sidene.
Dette er svært alvorlig fordi det betyr at enkelte helt korrekte sider vil være uleselige for svært mange lesere. Det bryter altså med prinsippet om at CSS skal "degrade gracefully". Feilen ligger selvsagt hos Microsoft/Netscape, men det hjelper ikke den stakkars leseren. Her må man antagelig teste sidene med de forskjellige vev-leserne for å være helt sikker på at de er leselige.
En alternativ holdning er at man ikke skal tilpasse seg programvare med alvorlige feil. Dette for å unngå at enkelte deler av CSS-standarden forblir umulige å bruke i all evighet fordi brukerne fortsetter å bruke dårlig programvare. (De vil jo ikke skifte til noe annet hvis de aldri opplever problemer med vev-leseren sin.) Du får selv velge hva du vil gjøre; jeg vil ikke gi noen anbefalinger her.
Se referansene for mer detaljert oversikt over feil og mangler. En ting som er verdt å merke seg er at Opera har veldig bra støtte for CSS.
Pass på å lese videre helt til avsnittet "En avsluttende moralpreken", ellers kan du risikere å misforstå reglene!
Når man skriver litt store og kompliserte stilsett (eller kombinerer bruker-stilsett med forfatter-stilsett) kommer man fort i den situasjon at flere forskjellige stilregler gjelder samme element. Dette kan virke forvirrende, men de som laget CSS har forutsett problemet og laget regler for hvilke regler som skal gjelde i disse tilfellene.
Reglene er slik: til enhver tid gjelder den mest spesifikke stilregelen som passer. For hvert element i dokumentet, gå gjennom alle stilreglene i stilsettet og beregn en poengsum for hver regel etter følgende formel og velg regelen med flest poeng:
10000*c+100*b+a
Der bokstavene står for:
For å ta noen eksempler:
LI {...} /* a=1 b=0 c=0 -> poeng = 1 */
UL LI {...} /* a=2 b=0 c=0 -> poeng = 2 */
UL OL LI {...} /* a=3 b=0 c=0 -> poeng = 3 */
LI.red {...} /* a=1 b=1 c=0 -> poeng = 101 */
UL OL LI.red {...} /* a=3 b=1 c=0 -> poeng = 103 */
#x34y {...} /* a=0 b=0 c=1 -> poeng = 10000 */
Her vil altså regelen med ID #x34y bli valgt, hvilket er
fornuftig når man tenker over det: regelen er skrevet spesielt for dette
elementet, og da ville det vært litt dumt om den ikke gjaldt.
Dersom to regler skulle få samme poengsum vil den regelen som står sist i teksten gjelde.
Så kan man lure på: hvordan passer stilegenskaper som er angitt med STYLE-attributtet inn i dette? De har jo ingen selektor, så hvordan skal man gi dem poeng? Svaret er ganske logisk: de teller som en stilregel med ID-verdi. (Og siden de står sist i teksten, og på det elementet de gjelder, vil de slå ut andre stilregler med ID-verdi.)
Det går også an å angi presentasjon i HTML-markupen, f.eks. av hensyn til vev-lesere som ikke støtter CSS. En vev-leser som støtter CSS skal oppfatte dette som stilregler med 1 poeng angitt av forfatteren aller først i stilsettet. De blir med andre ord en del av stilsettet.
Som jeg allerede har nevnt kan man sette flere forskjellige selektorer
etter hverandre på denne måten H1, H2 { deklarasjon }. Denne
regelen vil ikke få to poeng, men vil i stedet betraktes som to
forskjellige regler, slik:
H1 {...} /* a=1 b=0 c=0 -> poeng = 1 */
H2 {...} /* a=1 b=0 c=0 -> poeng = 1 */
Bruk av komma for å skille selektorer er altså bare en kortere måte å skrive stilregler på, slik at hvis man i flere tilfeller deler stilegenskaper kan man ramse opp alle tilfellene, og så slenge på stilegenskapene etterpå.
En måte å utnytte dette med flere selektorer per stilregel kunne være å skrive slik:
H1, H2, H3, H4, H5, H6 { font-family: Helvetica, Sans-Serif }
H1 { font-size: 18pt }
H2 { font-size: 16pt }
osv
Så er spørsmålet, vil en H1 da vises i Helvetica eller med 18 punkters skriftstørrelse? Svaret er kanskje ikke så overraskende: begge deler. Utvelgelsen av hvilke stilregler som gjelder gjøres på nytt for hver egenskap. Med andre ord så vil følgende element:
<P CLASS=advarsel ID=14>Ikke trykk på knappen
merket "Self-destruct"!</P>
kombinert med følgende stilsett:
P.advarsel { color: red; font-weight: bold; text-align: center }
#14 { text-align: left }
vises med rød fet skrift, men vil ikke sentreres, fordi ID-regelen overstyrer klasse-regelen. Det viktige her er at ID-regelen ikke overstyrer fargen eller skrift-vekten, fordi den ikke sier noe om disse egenskapene. Igjen ganske logisk, og omtrent slik man ville vente.
Ett siste punkt gjenstår før vi er ferdige med behandlingen av kaskade-rekkefølgen: forholdet mellom forfatterens stilregler og brukerens stilregler.
For å få til dette må vi innføre to variable til i formelen jeg anga ovenfor:
slik at vi får formelen:
100000000*e+1000000*d+10000*c+100*b+a
Dette er altså den endelige formelen for stilregel-sortering. Legg merke til at det er viktigere hva forfatteren av siden mener, enn hva du mener. I det opprinnelige CSS-forslaget var rekkefølgen omvendt, men etter press fra Microsoft og Netscape ble dette gjort om.
Dette er faktisk noe av et problem fordi jeg selv f.eks. forventer at linker er understreket i grafiske vev-lesere. Slik har det vært siden jeg begynte å bruke NCSA Mosaic i 1994, og slik vil jeg at det fortsatt skal være for meg, andre kan gjøre hva de vil.
Resultatet er at en forfatter kan si:
A { text-decoration: none !important },
og vips får ikke linkene mine understreking, uansett hva jeg gjør,
noe som vil både forvirre og irritere meg som leser. Med andre ord:
rekkefølgen burde vært omvendt, men siden den ikke er det legger
det mer ansvar på deg som forfatter av stilsett. Bruk !important
med forsiktighet!
Det er viktig å skrive korrekt HTML når man bruker CSS, fordi vev-leserne ellers kan få problemer med å vise sidene riktig. Dette gjelder også når man ikke bruker CSS, men vev-leserne blir ekstra følsomme når man gjør det. Den enkleste måten å garantere at man skriver korrekt HTML på er å bruke en validator. Du finner mer informasjon om validatorer i referansene.
I og med at mange av leserne dine bruker programmer som ikke forstår CSS er det viktig at siden din er like leselig uten CSS. Å få til dette skulle ikke være så vanskelig, i og med at du kan skrive vanlig ren HTML og så bruke CSS til layouten.
Det er også en god ting å ikke gjøre seg avhengig av ID- og CLASS-attributtene, slik at dokumentet fortsatt er leselig dersom noen skulle finne på å ignorere ditt stilsett og heller bruke sitt eget. Om noen fargekodinger og slikt forsvinner er ikke det så farlig, poenget er at dokumentet fortsatt må være leselig.
Alle vev-lesere har standardverdier for link-fargene i tillegg til dokumentenes forgrunns- og bakgrunnsfarger. Dette betyr at dersom du bare oppgir noen av disse fargene i ditt stilsett vil leserens vev-leser bruke sine standard-instillinger (enten fra et stilsett eller de som er satt opp i vevleseren). Problemet med dette er at du ikke kan vite hvilke farger dette er, slik at du risikerer at de kolliderer med de du selv har oppgitt. Resultatet kan f.eks. bli at leseren blir presentert for hvit tekst på hvit bakgrunn, som ikke er spesielt leselig.
Dersom du angir et bakgrunnsbilde til dokumentet ditt bør du også tenke på de som ikke laster bilder. Med andre ord: du bør angi en bakgrunnsfarge som erstatning for bakgrunnsbildet.
Arial er en populær font som brukes av mange "webdesignere". Man bør
imidlertid være klar over at denne fonten kun finnes for Windows, slik
at man bør oppgi alternativer for andre plattformer. Dette kan f.eks.
gjøres slik: BODY { font-family: Arial, Helvetica, Sans-serif }.
Helvetica er det egentlige navnet på denne fonten, og Helvetica-fonter finnes på de aller fleste plattformer. Aller sist bør man angi en av de generiske font-familiene som er oppgitt i CSS-spesifikasjonen:
Merk også at font-navn som inneholder mellomrom bør settes i anførselstegn.
Alt som står inne i anførselstegn vil bli tolket som ett navn, slik at "Arial, Helvetica, Sans-Serif" vil tolkes som ett fontnavn, ikke tre.
Størrelsesenheter som pt, px, in og cm bør unngås, fordi du ikke vet hva slags omgivelser dokumentet ditt vil bli vist under. Bruk i stedet prosent, em, ex og tilsvarende, som tilpasser seg dokumentet og skriftstørrelsene.
Til skriftstørrelser er kanskje disse verdiene de beste å bruke: xx-small, x-small, small, medium, large, x-large og xx-large.
Tenk på at stilsettet og dokumentet ditt skal tilpasse seg en mengde forskjellige omgivelser og bruker-stilsett. For å få til dette best mulig bør du unngi å oppgi flere stilegenskaper enn absolutt nødvendig. Alle deklarasjoner som ikke endrer hvordan dokumentet ser ut i forhold til standard-oppsettet bør unngås.
En vanlig feil er f.eks å sette tekststørrelse til 12pt i BODY-elementet (altså hele dokumentet), når standard-størrelse faktisk er 12pt i utgangspunktet. Dette er jo meningsløst, særlig hvis det overstyrer en bruker som forsøker å sette f.eks 14pt i sitt bruker-stilsett.
Tenk deg altså om to ganger før du slenger på en ny deklarasjon og gå gjerne over stilsettet etterpå for å luke ut de overflødige.
Liam Quinn har skrevet et svært godt program som sjekker CSS-stilsettene dine for feil og uheldige stilregler. Det kan være greit å bruke for å sjekke at du har gjort alt riktig.
Programmet heter CSSCheck og finnes på http://www.htmlhelp.com/tools/csscheck/.
Det du (forhåpentlig) har lært nå er CSS1, eller Cascading Style Sheets level 1. Level 2 er nå også fullført, men er så og si ikke implementert i noen vevleser i dag. Level 2 utvider level 1 med følgende:
Som jeg snakket om lenger oppe har man utviklet et språk som vil la deg definere dine egne markup-språk til erstatning for HTML, kalt XML. XML vil kunne bruke CSS som stilsett-språk, men man har også tenkt seg mer avanserte språk.
Det som det arbeides mest med i dag heter XSL og er helt nytt og foreløbig i utkast-stadiet. Det er mye kraftigere enn CSS, men også mye tyngre å skrive. For mange vil nok CSS fortsette å være et greit alternativ til XSL.
XSL er imidlertid inspirert av et enda mer avansert språk som allerede finnes: DSSSL. DSSSL er egentlig beregnet på SGML, som har eksistert i over ti år og er en mer avansert storebror av XML. DSSSL er stort og komplekst (ISO-standarden er på nesten 300 sider), og kan gjøre mange ting som er umulig i CSS og XSL. (DSSSL uttales slik at det rimer med "whistle" på engelsk.) DSSSL inneholder et fullstendig programmeringsspråk basert på Scheme, som er en dialekt av Lisp. Dette gjør DSSSL svært kraftig og fleksibelt.
Som en kuriositet kan det nevnes at mange av de andre artiklene mine er konvertert fra SGML til HTML ved hjelp av DSSSL.
Helt til slutt vil jeg takke noen som har hjulpet meg med denne artikkelen på forskjellige måter: