Globale linker

CSS

Hva er CSS?

«CSS is like chess. You can learn the basics in a day and spend a lifetime mastering it.» CSS is like a girlfriend. No matter how hard you try, she will always interpret it a different way.

CSS står for Cascading Style Sheets. (Cascading= fosse, strømme). Styles definerer hvordan HTML elementer skal se ut i en nettleser og lagres vanligvis som eksterne stilark.

Style sheetEksterne stylesheets kan være ekstremt tidsbesparende da formatteringer for HTML-sidene skjer i selve CSS-stilarket. Skal du forandre på en stil, gjør du forandringen i stylesheet'et og ikke i de enkelte HTML-dokumentene.

CSS er et gjennombrudd i webdesign fordi det lar webdesignere kontrollere stilen og layout'en for flere websider i én operasjon. Som en utvikler kan du definere stilen for hvert HTML-element og la dette gjelde for alle forekomster av elementene i flere HTML-dokumenter ved å linke til stilarket i i hvert enkelt HTML-dokument. Skal du da gjøre en forandring på alle forekomster av et eller flere HTML-elementer (tagger), gjør du forandringen i stildefinisjonen i stilarket, i stedet for å måtte forandre på hver enkelt forekomst av elementet på alle sidene i siten. Og med element, mener jeg tag.

HTML tagger ble opprinnelig laget for å definere innholdet i et dokument. Taggene skulle fortelle «her er en overskrift», «her er et avsnitt», «dette er en tabell» ved å bruke tagger som <h1>, <p> og <table>. Selve layout'en skulle tas hånd om av browseren, uten andre formatteringstagger.

Style sheetEtter som utviklerne av de to store browserene - Netscape og Internet Explorer - la til nye HTML-tagger og attributter (som <font>-taggen og farveattributter) ble det stadig vanskeligere å lage websider hvor innholdet i HTML-dokumentene var klart adskilt fra dokumentets layout-tagger.

For å bøte på dette utviklet W3C (World Wide Web Consortium) STYLES som et verktøy for layout i HTML 4.0.

Både Netscape 4.0 og Internet Explorer 4.0 støtter Cascading Style Sheets i større eller mindre grad. Sjekk Webreview's Master Compability Chart eller RichInStyle.com for oversikt over browserstøtte.

Hvorfor bruke CSS istedet for tabeller

CSS lastes raskere enn tabeller fordi:

Multiple Styles Will Cascade Into One

CSS lar oss spesifisere stilinformasjon på flere måter. Stiler kan spesifiserer i selve taggen, i dokumentets <head> eller som en ekstern CSS-fil. Man kan til og med linke til flere eksterne CSS-filer i et enkelt HTML-dokument.

Cascading rekkefølge

Cascading = str°mme inn i en definisjonHvilken stildefinisjon vil bli brukt når det er mer enn en stildefinisjon som er spesifisert for et HTML-element?

Generelt kan vi si at alle stilene vil «strømme» eller samles i et nytt virtuelt CSS-stilark etter følgende regler, hvor nummer 4 har høyeste prioritet

  1. Browser default
  2. Eksternt Style Sheet
  3. Internt Style Sheet (i<head>)
  4. Inline Style (i HTML elementets tag)

Derfor vil altså en Inline-Style (i HTML elementets tag) ha høyeste prioritet, noe som betyr at den vil overprøve stiler definert både i <head>, i eksterne CSS-stilark og browserens standardstil. Som en generell regel kan man si at den stildefinisjonen som ligger nærmest elementet (taggen) i koden vil bestemme.

Dette er dog en forenkling, for jo mer nøyaktig en deklarasjon er i stilarket jo høyere presedens (eller vekt) har det. Les mer hos W3C.

Neste sideGå til neste side hvor vi ser på syntax'en for CSS.