HTML och design

HTML handlade ända från början om att strukturera information. Tanken var inte att man skulle arbeta med formgivning i HTML. Ursprungligen skulle en HTML-sida kunna fungera, i princip lika bra även om användaren arbetade i ett rent textbaserat gränssnitt som på en dator med ett grafiskt användargränssnitt.

I och med att webben slog stort kom dock HTML i allt högre grad användas för att reglera utseendet på sidorna. Nya taggar kom till och gamla taggar återanvändes som ett sätt att arbeta med utseende snarare än dokumentstruktur. Detta innebar en allt mer tillkrånglad kod, med svårigheter att återanvända kod. Koden blev både mer felkänslig, med både större risk att skriva fel och risken för att kod skall tolkas fel av en mer eller mindre välgjord webbläsare.

Formgivning i HTML var uppenbarligen inte en bra idé, men samtidigt hade webben utvecklats till ett grafiskt medium.

Det behövdes en lösning som både kunde tillfredsställa både behovet av struktur och enkelhet i HTML, och behovet av möjligheter att arbeta med formgivning på webben.

Lösningen är stilmallar

En stilmall är kod som ligger tydligt åtskilt från den strukturskapande koden och innehållet. Antingen på ett separat ställe i HTML-koden, eller i ett helt separat dokument.

på detta sätt kan man tydligt skilja på innehållet å ena sidan och utseendet å andra. Detta kan göra arbetet mycket enklare. Inte minst blir det mycket enklare att uppdatera och modernisera sina sidor när vid behov.

Det fanns under en tid flera förslag på hur stilmallar skulle kunna skapas på webben men det som blev standard är det som heter CSS, Cascading Style Sheets.

Det som blev CSS presenterades 1994 av Håkon Wium Lie på W3C. Den aktuella versionen av CSS är CSS 3, men kommande uppdateringar av CSS sker i olika moduler, vilket gör att begreppet "CSS 3" sannolikt kommer att bli mer irrelevant framöver.

Som webbdesigner bör du sträva efter att låta bli allt som är ren formgivning i HTML, saker som olika färger, typsnitt och så vidare. Detta görs bättre i CSS.

Ta för vana att tänka på HTML-elementen efter vad de betyder mer än hur de ser ut. Allt utseende kan nämligen ändras senare, med CSS. Du kan till och med ställa in olika utseende för olika skärmar, en version för stora skärmar och en för mobiltelefoner till exempel.

En kul sajt där du kan kolla olika exempel på saker som går att göra med CSS är CSS Zen Garden, där du med ett klick kan byta CSS, men hela tiden med samma HTML.