Fysikums webb- och mediakurser

STILMALLSSTANDARDEN CSS

Stilmallskoden i exemplena i detta kapitel följer standarden "Cascading Style Sheets, Level 2.1".

Webbsidor med stil

Varje webbsideförfattare är naturligtvis mån om att göra en så snygg och tilltalande sida som möjligt, både visuellt och innehållsmässigt. Tyvärr ger HTML, det sidbeskrivningsspråk som bygger upp webbsidor, författaren inte samma möjligheter att göra snygg layout och design som t.ex ordbehandlingsprogram och ombrytningsprogram. Det finns visserligen en del stöd för visuell formatering i HTML (t.ex HTML-elementet <font> eller HTML-parametrarna bgcolor och align) men dessa finns ofta i flera varianter som fungerar olika i olika webbläsare.

För att ge HTML-knypplare lite bättre kontroll över sina webbsidors utseende publicerade W3-konsortiet, webbens standardiseringsorganistation, i slutet av 1996 en ny standard, Cascading Style Sheets, level 1, förkortat CSS 1, som skulle fungera som komplement till HTML. I enlighet med CSS-standarden kan man kompettera HTML-koden för ett webbdokument med s.k. stilmallar (eng. style sheets) som innehåller formateringsregler för webbsidan. Tanken är alltså att HTML ska ge webbsidorna deras logiska struktur (t.ex ange vad som ska vara rubrik, vad som är stycken med löpande text eller länkar, var bilder ska placeras, o.s.v), medan stilmallar bestämmer sidans utseende (t.ex färgen på sidans bakgrund, typsnittet i rubriker, bredden på sidans marginaler o.s.v).

Fula knep med ostandardiserad HTML

Ett exempel: HTML ger inte några enkla sätt att bestämma en webbsidas vänster- och högermarginaler. Normalt går löpande text ända ut till kanten på webbläsarfönstret, vilket ser fult ut och ger alltför långa rader. Fiffiga webbknypplare har under åren utvecklat diverse fula HTML-trick att fuska sig till marginaler, t.ex ett oortodoxt användande av tabeller, osynliga pixlar och listor.

Så här kan det se ut, om man inte är så nogräknad med tillämpningen av HTML. Handen på hjärtat - har du någon gång använt något av dessa knep för att ändra vänstermagrinalen på dina webbsidor?

Fult marginalknep med tabeller:

<body>
  <table><tr>
    <td width="15"><br></td>
    <td> text i sidan </td>
  </tr></table>
</body>

Fult marginalknep med osynlig pixel:

<body>
  <img src="pixel.gif" align="left" width="15" height="1000">
  text i sidan
  <br clear="all">
</body>

Fult marginalknep med definitionslista:

<body>
  <dl>
    <dd> text i sidan </dd>
  </dl>
</body>

Somliga av dessa trick utnyttjar tolkningar av HTML-koden som är specifika för vissa webbläsare, men inte andra. T.ex är det konvention bland de stora grafiska webbläsarna att indentera element i en definitionslista märkta med elementet <dd> en bit in från vänstermarginalen, och detta kan utnyttjas för att indentera hela sidans text. Men det står inget om indentering i HTML-specifikationen, så man kan mycket väl tänka sig webbläsare som renderar definitionslistor helt annorlunda, med mycket märkliga resultat i sidans utseende. Andra knep fungerar bra i grafiska webbläsare, men ger bara nonsens när sidan ses i textorienterade webläsare eller med talsyntes. Man vet alltså aldrig riktigt vilka oönskade sidoeffekter de trixiga HTML-knepen kan ge.

Stilmallar ersätter oortodox HTML-formatering

Med stilmallar blir det däremot enkelt, och dessutom formellt korrekt i alla sammanhang och webbläsare att i detalj styra webbsidans utseende. Stilmallsstandarden CSS tillåter en stilregel som definierar 2 cm breda vänstermarignaler, och som ser ut så här (mer om hur man skriver stilregler i ett senare avsnitt):

margin-left: 2cm

Vi kan nu stoppa in denna stilregel i HTML-elementet <body>, som ju omfattar hela den synliga webbsidan, så här:

Rekommenderat sätt att skapa marginaler:

<body style="margin-left:2cm">
all text i sidan läggs här, som vanligt
</body>

och vips! visar webbläsaren sidan med marginaler. Utan att vi behöver ta till fula knep. På liknande sätt kan vi med lämplig stilregler styra utseendet av t.ex rubriker, stycken, länkar, bakgrunder, och andra element i en webbsida. Så använd alltid stilmallar när du ska bestämma hur webbsidan ska se ut när den ses i en webbläsare.

Vems stilmallar?

Men hallå - webbsidor ser ju faktiskt alltid ut på något sätt när man tittar på dem, också utan stilmallar! Jo, men i vanliga fall är det användarens webbläsare som bestämmer hur olika HTML-element ska visas, t.ex att sidmarginaler ska vara noll, att rubriker ska visas med fet stil och följas av en blankrad, och att sidans bakgrundsfärg ska vara vit (eller grå, som den oftast var i webbens barndom). Användaren kan modifiera webbläsarens standardinställningar i viss mån, t.ex brödtexttypsnittet och länkars färg. Med stilmallar kan nu också webbsideförfattaren påverka webbsidans utseende. CSS-standarden föreskriver t.o.m att författarens stilmallar har företräde framför webbläsarens standardinställningar eller användarens ändringar.

Men hallå igen - den som skriver webbsidan har väl alltid haft något att säga till om vad gäller sidans utseende. Kanske inte just marginaler, men bakgrundsfärgen kan ju t.ex sättas med HTML-elementet <body bgcolor='...'>, och typsnittet bestäms med <font face='...'>. Det är visserligen sant, men, som redan antytt tidigare, det finns ett antal goda skäl till att undvika HTML-kod för att påverka sidans utseende, och i stället använda stilmallar.

Innan vi börjar fördjupa oss i teorin bakom stilmallar och detaljer i hur de fungerar tänkte jag visa dig några enkla inledande exempel på stilregler som du kan testa i någon webbsida du redan har gjort för att få en känsla för idén bakom CSS.

FORTSÄTT