0100 padding margin mm

Stila en sida med CSS så att den får nedanstående utseende. I bilden nedan är varje ruta 20 pixlar bred och 24 pixlar hög.

Du får välja om du vill göra uppgiften på JSFiddle eller lokalt på din dator. Det går nog snabbast på JSFiddle. Men för att kunna spara behöver du ett eget konto.

På JSFiddle

Uppgiften på JSFiddle

Bakgrundsbilden hittas på adressen: "http://rikardkarlsson.se/img/uploads/bg.svg"

Lokalt på datorn

Skapa en ny mapp 0100-padding-margin-mm. I den skapar du en fil index.html, en fil style.css, och en fil bg.svg. Kopiera in nedanstående kod i dessa.

bild på hemsidan som ska göras

Uppgiften - steg för steg

Boxmodellen

Om collapsing margins på MDN

Bakgrundsbilden

Bakgrundsbilden är 24 pixlar hög och 80 pixlar bred.

Sätt bakgrundsbilden på klassen main.

Bakgrundsbild fås genom att skriva följande i CSS:

background-image: url('sökväg/filnamn.filtyp');

upprepa bilden i x- och y-led

background-repeat: repeat;

HTML-kod

padding margin mm

1 text text text text text text text

2

3

4


CSS

html { font-family: Cambria, Georgia, "Times New Roman", Times, serif; background: #fff; color: #333; font-size: 16px; line-height: 1.5em; /* 1.5 * 16px = 24px */ }

filen bg.svg

Obs du måste lägga till < före svg först i filen.

svg xmlns="http://www.w3.org/2000/svg" version="1.1" width = '80px' height = '24px'>