5 Sep
2014
Posted in: CSS
By    No Comments     |    

Börja med CSS

Börja ändra sidans utseende med Cascading style sheets

Man styr webbsidans utseende med en annan sorts textfiler. Mest rationellt är att skriva i separata textfiler med filändelsen .css

Öppna en ny textfil. Skriv så här:

h1 {color:green;}

Detta betyder att alla rubriker märkta som <h1> ska bli gröna.

Spara filen som min_stil.css  (i samma mapp som din html-sida).

För att koppla filen till din html-sida, måste du referera till den med elementet link i din sidas head-del, så här

<link rel=”stylesheet” href=”min_stil.css”>

Spara din html-fil. Ladda om i webbläsaren. Om din rubrik som är märkt med h1 blev grön så har du lyckats koppla ihop filerna på rätt sätt.

css7 webb7

Bygg ut dina stilregler t.ex. så här:

h1 {
color:green;

text-transform:uppercase;
}

body {
background-color:ghostwhite;
font-family: serif;
}

Den här gången behöver du bara spara css-filen, innan du uppdaterar i din webbläsare för att kolla hur det blev.

css8 webb8

När du gör fler webbsidor kan dessa sedan kopplas till samma css-fil för att det ska vara rationellt att styra utseendet på flera webbsidor från samma css-fil.

Några frågor eller kommentarer?