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.
Syntax i CSS
Hur man skriver CSS
En CSS-stilmall är på många sätt enklare att skriva än HTML. CSS består av regler för hur olika HTML-element ska visas.
Alla regler man behöver skrivs efter varandra i ett textdokument, oftast spelar det inte ens någon roll i vilken ordning man skriver dem
CSS kan skrivas i egna dokument som länkas till från HTML-dokumentet den ska gälla för eller bäddas in i HTML-dokumentet. Enstaka regler kan till och med läggas till som attribut till HTML-element.
För att skriva CSS kommer du behöva lite andra tecken än när du skriver HTML. De viktigaste av dessa är:
Spetsklamrar ("måsvingar")
{ }
Kolon
:
Semikolon
;
Du kommer också att behöva en del andra tecken så småningom, som nummertecken (#), komma och punkt. Även snabel-a (@) kommer att kunna förekomma.
Regler
En regel (rule) i CSS består av en väljare (selector) och en eller flera egenskaper (properties). Varje egenskap har minst ett värde (value). Regler skrivs så här:
väljare {egenskap:värde}
men det är inget problem om man lägger till radbrytningar för att göra det mer lättläst:
väljare {
egenskap :värde
}
Det går bra att ge en väljare flera olika egenskaper med värden. Då använder du semikolon som skiljetecken mellan de olika egenskaperna:
väljare {
egenskap :värde;
egenskap :värde;
}
Det är klokt att ta för vana att alltid avsluta egenskaper (med värde) med semikolon, även om du för tillfället bara har en. Det är aldrig fel och kommer ändå att behövas om du bestämmer dig för att lägga till fler egenskaper i efterhand.
nu skulle du kunna skriva en regel som ger alla <h1>-rubriker färgen blå:
h1{color:blue}
och ge resultatet
En blå rubrik
Väljare
Som väljare i CSS kan du använda alla existerande HTML-element, inklusive <html> och <body>, fast utan < och >.
Vill du till exempel ge en bakgrundsfärg eller bakgrundsbild till din webbsida är det lämpligt att ge egenskapen background-color eller background-image till <body>. Vill du att all vanlig text i ett helt dokument ska ha ett visst typsnitt kan det vara lämpligt att ge egenskapen font-family till <html> eller <body>, så ärvs egenskapen till allt innanför den taggen.
Undantaget är elementet <head> och det som befinner sig mellan <head> och </head> i ett HTML-dokument. Det visas ju inte, och har därför inga visuella egenskaper som kan anpassas med CSS.
Väljare kan anpassas och villkoras på många olika sätt. Man kan göra egna väljare för särskilda situationer med HTML-attributen class eller id, man kan använda pseudoklasser för att en regel ska gälla till exempel när man håller musen över elementet, man kan ange en regel som gäller för taggar som befinner sig inuti andra taggar med sammansatta väljare, ange flera väljare för samma regel, låta en regel gälla bara för vissa skärmstorlekar och annat. Det är alltså ett flexibelt system som går att anpassa på många sätt.
Egenskaper
Vilka egenskaper du kan tilldela ett element är naturligtvis beroende av vad det är för element du försöker ge egenskapen till. Det är inte meningsfullt att ge egenskaper som teckenstorlek eller typsnitt till en <img>, till exempel.
Du kan tilldela en väljare hur många egenskeper som helst, kom bara ihåg skiljetecknet semikolon (;)
Värden i CSS kan anges på många alternativa sätt. Mått, färger och annat kan oftast anges på flera olika sätt, mått kan till exempel anges såväl i millimeter, pixlar, typsnittets storlek (em) eller som procent.
Vilka värden du gan ge till vilka egenskaper är beroende på vad det är för egenskap. Ett typsnitt (font-family) kan naturligtvis inte vara ett mått eller en färg, utan ett namn på ett typsnitt.
Information om vilka sorters värden som fungerar för vilka egenskaper går att läsa i beskrivningen till egenskaperna i CSS
Kommentarer i CSS
Kommentarer skrivs på ett annat sätt i CSS än i HTML. I CSS skrivs kommentarer med ett snedstreck (/) följt av en asterisk (*). Kommentaren avslutas med det omvända: en asterisk med ett snedstreck efter.
/* Jag är en CSS-kommentar */
<!-- Jag är en HTML-kommentar -->
Tre sätt att lägga till CSS
Du kan arbeta på tre olika sätt med stilmallar på din sida. Dessa tre kallas för lokala (inbäddade, embedded), individuella (Inline), och globala eller externa (external) stilmallar.
Lokala och individuella stilmallar ligger inbäddade i själva HTML-dokumentet. Externa, eller globala stilmallar är egna dokument, med filändelsen .css, som länkas till HTML-dokumentet. Ett sådant dokument skulle alltså kunna heta till exempel ”stilmall.css”.
Global (extern) stilmall
Det vanligaste sättet att lägga till CSS är genom en extern stilmall. Det innebär att du skriver alla dina regler i ett textdokument som får filändelsen .css och länkar till detta i dina HTML-sidor, på detta sätt kan samma regler gälla för ett stort antal sidor. Vill du ändra på sajtens utseende behöver du bara göra detta på ett ställe.
Först gör du ditt CSS-dokument, som innehåller alla dina regler. Du döper detta dokument till till exempel ”stilmall.css” (eller något annat, bara det slutar på ".css").
I HTML-dokumentet som stilmallen ska gälla för länkar du till din nya stilmall genom HTML-elementet <link>, som läggs till i HTML-dokumentets <head>.
rel talar om vilken relation CSS:en har till HTML-dokumentet, href är som vanligt URL:en till detta, och type talar om vad det är för typ av dokument du länkar till.
det går dessutom bra att ha flera <link>-taggar, som länkar till olika stilmallar om man skulle behöva det. Se bara till att reglerna i de olika CSS-dokumenten inte krockar med varandra.
Lokal stilmall
I stället för att göra ett separat dokument kan du skriva in dina regler i <head>-delen av ett HTML-dokument. Denna stilmall kommer då bara gälla för detta specifika dokument. Det här är inte speciellt flexibelt eller lättarbetat, men det kan finnas tillfällen då det är ett vettigt sätt att arbeta (men oftast inte).
I ditt HTML-dokument lägger du till en stilmall i
<head> med hjälp av elementet <style>.
<head>
<style type=”text/css”>
body {
background-color:blue
}
h1 {
font-family:helvetica, arial, sans-serif;
color:blue
}
…och alla andra regler du vill ha med…
</style>
</head>
Stilmallsdelen är på detta sätt någorlunda urskiljt från resten av koden i HTML-dokumentet, men du måste fortfarande gå in i detta för att ändra stilmallen.
Individuell stilmall (inline CSS)
Individuella, eller inline CSS-regler är CSS-regler som skrivs in direkt som ett attribut till det specifika HTML-element det gäller. Du använder dig då av HTML-attributet style, med reglerna du vill ha som värde
Koden ovan kommer att göra just denna individuella
<h1> blå i ditt valda typsnitt.
Det finns tillfällen när detta sätt är det enda rimliga för att lösa något problem, men det är någonting man gärna vill undvika, då det gör koden rörigare och mer svårarbetad. Om man har möjlighet är det oftast bättre att ge egenskaper med hjälp av HTML-attributet class när man vill göra någonting som avviker från sajtens vanliga utseende.
Till nästa gång
Snygga till din sida med CSS. Testa olika saker. Fundera över eventuella fel som uppstår (anteckna gärna).
Minimum är att byta bakgrundsfärg.