Använda CSS i hemsidebygget

Genom att använda CSS i hemsidebygget kan du spara mycket tid och energi. CSS betyder ordagrant Cascading Style Sheets och
kan på svenska översättas till stilmallar. Stilmallarna kan användas för att ha samma format, samma färger, samma bakgrund på flera sidor och lätt ändra denna information på alla sidor samtidigt, vilket gör livet lättare för webbdesignern.

html-cssAtt HTML-koden för alla dessa sidor inte behöver läsas om gör att det blir mycket mindre kod och typiskt tar det kortare tid för sidorna att ladda. En annan fördel är att formen och innehållet är separerat så synskadade mycket lättare kan få ta del av endast texten när de surfar på internet och får koden uppläst för dem. Visserligen finns program som försöker separera texten från koden, men CSS gör det mycket lättare för programmen eller användare utan program att läsa upp den text som faktiskt står på hemsidan för den som besöker den.

Om du vill en använda CSS-mall är det hela ganska enkelt. Du gör en separat fil i en textbehandlare som heter något med .css, som till exempel form.css. Denna fil behöver inte innehålla mer än en enda instruktion som till exempel:

body {

font-size; 25px;

}

Sedan åkallar du denna instruktion från din, eller dina, sidor om du vill använda dem. Det kan du till exempel göra med en länk som ser ut så här (fast inom vinkelparentes):

link href=”form.css” rel=”stylesheet” type=”text/css”

Detta kommer automatiskt göra att all text i body-partiet i denna fil kommer att ha storleken 25px vilket betyder 25 pixlar. Pixlar är ett mått på storleken som samstämmer med bildskärmens upplösning. Detta gör att om du gör fönstret mindre kommer texten också bli mindre. Pixelmåttet är alltså relativt, till skillnad från till exempel tum och centimeter som är absoluta mått. Användandet av relativa mått gör att anpassningen till olika webbläsare blir mycket bättre.

Kom igång med CSS

Att komma igång med CSS är lätt. Allt som behövs är ett program att koda i, dreamweaver brukar vara
uppskattat, lärobok eller wbbsidor som kan lära dig grunderna, samt en hel del tålamod. Det bästa är att
starta med enklare kodning och sedan trappa uppåt för att komma igång med mer avancerade
funktioner.

Att koda i CSS specifieras in i tre olika nivåer.
CSS 1: Denna nivå innehåller den mest basika informationen. Till exmepel bakgrundfärger, bilder,
typsnitt och vart texten ska vara placerad på sidan.
CSS 2: I detta steg så kan du formge ett helt dokument och bestämma possitioner inom rektangulära
områden.
CSS 3: Här läggs alla special effekter till. Tänk på att alla webbläsare inte har fullt stöd på precis alla
effekter, så dubbelkolla alltid hur det ser ut innan du publicerar dessa på din sajt.
Det vanligaste sättet att använda CSS kodning är att man skriver in koderna i ett separat dokument som
du sedan kopplar till de sidor som koden ska tillämpas på. Som nänt ovan så behöver CSS mallens fil
namnges med .css i slutet.
Det går även att koppla flera CSS mallar till ditt dokument för att lägga till fler stilar. Skulle flera mallar ha
samma selektioner så kommer den sista CSS filen att räknas. Det går dessutom att lägga till ytterligare
kod i själva html filen senare, även om du tidigare har använt ett separat dokument för dina CSS koder.
De första stegen man brukar kika på när man börjar koda i CSS är grundfunktioner som bakgrundfärger,
textstorlek och textfärg. Det är även ett smart steg att börja med för att komma igång med kodningen.
Koden för bakgrundfärg samt typsnitt och storlek på texten som ska finnas inom <body> kan se ut som
följande:
body {
background-color: #00000;
font-family: Verdana;
font-size: 16px;
color: #ff0000
}
Här kommer alltså bakgrundsfärgen att vara svart, text fonten och storleken kommer att vara Verdana i
16px, och färgen på texten är röd.
Ett tips är att testa lite olika färger på både bakgrund och text. Ta hjälp av en mall med färgkoder som
denna för att enklare få fram den färgkombination som passar dig.

Så fort du har kommit igång med grunderna är det lättare att ta nästa steg. Ett tips är att investera i en
bra läro bok. “Basics of Web Design” av Terry Felke-Morris är en uppskattad och bra skriven lärobok
som ofta används som lärbok inom kodning.
Föredrar du att använda internet som din lärare så är https://webdesignskolan.se alltid ett bra ställe att
starta på.

Leave a Reply

Your email address will not be published. Required fields are marked *