CSS-koden till mallsidan layout.css »
CSS - (Cascading Style Sheets) är stilmallar som tillåter både den som skapar dokument och den som läser dem att använda sin egen stilmall. I praktiken har CSS använts till att formge dokument när det gäller färg, teckensnitt, justering av text och objekt mm. En enda CSS-mall kan styra tusentals dokument och det är då enkelt att ändra formateringen genom att det bara i CSS-mallen. CSS har tagit HTML ett steg längre och möjliggjort formateringar och effekter som inte fanns tidigare. En av fördelarna med CSS är att flera mallar kan användas och de har då företräde inbördes så att en "huvudmall" med de övergripande formateringarna kan ersättas på en lägre nivå av en "lokal mall" som då gäller före huvudmallen.
CSS är liksom XML/XHTML ett steg mot att separera innehåll och struktur i dokument. All formatering bör ske i externa mallar vilket gör att mängden kod i själva dokumentet minskar avsevärt och gör att sidorna laddas snabbare i webläsaren. Då samma mall används för varje dokument behöver inte webläsaren läsa in formateringsanvisningar på nytt varje gång en ny sida anropas.
En målsättning med CSS är att läsaren ska kunna påverka utseendet av dokumentet när sidorna läses i webläsaren vilket inte alltid har varit populärt bland författarna av dokumenten då förändringar kan påverka webplatsens layout. Detta har i praktiken inneburit att vissa grupper har utestängts från att använda många platser på Internet. Syn- och hörselskadade och andra har haft svårigheter att ta del av innehåll på sidorna trots att det finns programvaror för tolkning av innehåll på websidor. Tillgänglighet är ett av ledorden när framtidens webplatser ska utformas och då gäller detta inte bara de som har svårt att läsa dokumenten på en PC. Ett av målen för W3C är att göra webbaserat innehåll tillgängligt på fler plattformar än PC. Det kan vara för handdator (PDA), mobiltelefoner, enheter för talsyntes och punktskrift (Braille). Genom att strukturera dokumenten på rätt sätt ska alltså både synskadade och hörselskadade kunna ta del av innehållet.
Den här layouten är gjord utan att använda bilder. De runda hörnen är gjorda med boxar och denna sida innehåller 5 olika uppsättningar med färger och radie på rundningen. Läs mer om runda hörn utan bilder i guiden CSS - effekter »
Text mellan de runda boxarna.
Boxarna i denna kolumn har runda hörn gjorda helt utan utan bilder. Det krävs en hel del CSS-kod för att ange rundningen på boxarna - om detta är din första CSS-layout kan det vara en bra idé att börja med något av de andra exemplen först.
Text mellan de runda boxarna.
TIPS! Prova att ändra storleken på texten i din webläsare. Snabbkommandot i Firefox och Internet Explorer är CTRL+plus eller CTRL+minus och det finns 16-17 storlekar (återställ till standard med CTRL+0). Snabbkommandon finns inte i IE6 men du kan välja menyn "Visa/Textstorlek" där du har fem olika storlekar att välja på ("mellan" är standardvärdet). Dessutom kan du med scrollhjulet på musen CTRL+scrolla för att andra textstorlek både i Firefox och IE.
Text mellan boxarna
Alla boxar kan återanvändas på olika platser i layouten.
Text under sista boxen