Logotyp för Björns studiewebb

Stilmallar (CSS3)

Inledning

Denna underwebb beskriver grundläggande principer för version 3 av stilmallar - CSS3 (Cascading Style Sheets, CSS). Beskrivningar är på inget sätt uttömmande, de är tänkta att ge en något djupar introduktion till stilmallar (CSS) samt vara en källa till (referens för) kunskap man inte använder dagligen.

Exempelsidor i denna underwebb använder HTML version 5, men stilmallar bör även fungera med HTML 4 och XHTML 1.

Observera att denna underwebb använder JavaScript! För att kunna använda underwebbens funktion (främst öppna nya fönster med exempel) krävs att din webbläsare stödjer JavaScript samt inte har inaktiverat JavaScript! Din webbläsare måste även stödja CSS version 3. :-)

Observera även att version 8 och tidigare av webbläsaren Internet Explorer inte följer standarder så bra, om ens alls.

Om stilmallar generellt

Stilmallar fungerar, historiskt, inte alltid som man vill och inte alltid på samma sätt mellan webbläsare från olika tillverkare. Detta gäller även mellan versioner av samma webbläsare då de kan ha olika mycket stöd för CSS. Detta beror bl.a. på att vissa versioner av webbläsare inte har stöd för hela CSS-standarden (delar av version 3 är t.ex. fortfarande under utveckling) samt att standarder är rekommendationer, d.v.s. det finns utrymme för tolkning och vilja att implementera standarder.
På de ställen där jag upptäckt att problem kan uppstå har jag lagt till ett OBS! sist i avsnittet.

För att stilmallar ska fungera tillfredställande måste man ibland anpassa HTML- eller CSS-kod. T.ex. att alla HTML-dokument har en dokumenttyp (se underwebben HTML) samt att alla element har en öppnande och avslutande tagg (om sådana finns). Mer om detta kommer beskrivas under länken Utforma HTML.

På sidan Beskrivning beskrivs hur stilmallarna på denna (och relaterade) underwebbar har utformats. Beskrivningen behandlar även vilka problem jag stött på och hur jag hanterat dem.

Denna underwebb använder CSS-ramverket Skeleton och valet att använda detta ramverket beror på:

  • att jag är värdelös på design
  • att ramverket är inte vidare omfattande.

Jag har försökt designa denna underwebb så att den påminner om underwebben HTML.