Ny fil där vi lägger in stil!
👉🏽 Nytt dokument, spara filen som design.css
Låt oss ge huvudrubriken på hemsidan en stilig rosa ram. I html (innehållet) så la vi in allt innehåll i html-taggen "body" som såg ut såhär:
<body> ALLT INNEHÅLL </body>
Låt oss nu ge body-taggen lite stil.
👉🏽 Skriv in detta i design.css:
body {
border: 13px solid hotpink;
}
Spara ändringarna du gjort i design.css.
Testa att ladda om hemsidan. Visas ingen stil för dig? Inte undra på - hemsidan känner ju inte till att stilmallen existerar!
Vi behöver länka ihop filerna!
Gå tillbaka till din hemsidan.html och lägg till:
<link rel="stylesheet" href="design.css">
Spara och ladda om hemsidan.
Några fler saker du kan testa
h1 {
font-size: 2.4rem;
}
body {
border-top: 10px solid #222;
text-align: center;
}
ol, ul {
text-align: left;
max-width: 30rem;
margin-left: auto;
margin-right: auto;
}
Som rubriken lyder - läs mer om hur du kan centrera innehållet på din hemsida.
Här kan du läsa om flera olika tips på hur du kan designa din hemsida så att den blir lättläst! Exempelvis hur du kan ändra marginalerna mellan rubriker och efterföljande text.
Designtips (CSS) för att skapa lättläst hemsida →
Vill du att din design ska vara olika beroende på storleken på skärmen hos den som besöker din hemsida? Då kan du använda dig av media queries