Grunderna i CSS

Designa HTML med CSS

CSS är ett språk inom webbdesign som används för att ge HTML-element olika stilar, så som storlek, färg, typsnitt, form med mera. Om du vill designa din hemsida så är det CSS du behöver. Det är ett väldigt lätt språk att lära sig och möjligheterna i webbdesign är enorma när man väl lärt sig det.

1 Skapa nytt dokument

Skapa en ny mapp i samma mapp som index.html och döp den till assets (förslagsvis).

Skapa ett nytt dokument i assets och döp det till style.css

Vi väljer att lägga style.css i en enskild mapp eftersom det kan tillkomma fler tillgångar (assets) framöver, och då har vi allt samlat på samma ställe. Filändelsen i slutet av namnet (.css) berättar för webbläsaren att att det är CSS som ska hämtas.

2 Länka in CSS i HTML

För att CSS’en ska fungera på vår hemsida måste vi länka in den i vår HTML.

Klistra in följande inom <head>

<link rel="stylesheet" href="assets/style.css">

Länkat och klart

Nu kommer din HTML-sida att reagera på allt vi skriver i style.css

Hur skriver man i CSS?

Öppna style.css och skriv vilket HTML-element du vill ändra designen på. Vi börjar med rubriken.

h1

Därefter skriver vi så kallade måsvingar {}. Om du har Mac så trycker du Alt Shift 8 / 9 för att skriva en måsvinge. Det som skrivs inom dessa vingar kommer att appliceras på HTML-elementet som de tillhör.

h1 {}

Nu har vi möjligheten att ge elementet olika stilar/attribut. Det finns en mängd olika att välja på, men vi börjar med något enkelt - färgen.

h1 {
  color: darkblue;
}

Skriva kommentarer i CSS

Precis som i HTML så kan vi kommentera ut texter i filen som inte påverkar hur webbläsaren ska läsa sidan. Om det endast gäller en rad skriver du // medan flera rader kommenteras ut genom /* i början och */ i slutet.

// En rad

/* Flera rader
som kommenteras 
ut här */

Bra!

Nu kan du grunden i hur CSS fungerar. Nästa steg blir att lära sig alla attribut som går att tillämpa i CSS.

Gå till nästa steg!


Vill du bidra till ett öppnare och friare läromedel?

Bidra med eget material
comments powered by Disqus