I denna laboration arbetar du med stilinställningar för text och listor. Selektorer med id och class användes redan i L3a, men tas nu upp lite mer.
8 min.
Förberedelser
- Öppna mappen L3 i Visual Studio Code (VSC).
- Öppna filerna index.html och style.css i VSC och öppna sidan i Live Server
- Du ska arbeta vidare med den CSS-kod som du skapade i föregående laboration.
Text
- Skapa en regel för
htmloch lägg infont-size: 16px;- Detta blir webbsidans "rotfont", som t.ex. enheten
remutgår från.
- Detta blir webbsidans "rotfont", som t.ex. enheten
- I regeln för
bodylägger du infont-familyoch väljer önskat typsnitt (font). - Skapa en regel för
header h2där du också lägger infont-family, fast med en annan font, eller endast en typ av font, t.ex.cursiveellerfantasy. - I regeln för
footerlägger du tillfont-style: italic; - Lägg även in
font-sizeoch experimentera med olika storlek och enheter. Sätt det sedan till t.ex.0.8rem.
Listor
- Ta bort punkterna i listan i navigeringen, genom att lägga till
list-style: none;i regeln förnav ul. - I listan i innehållet på sidan ska du byta punkten till en cirkel. Skapa en regel för
main ulmedlist-style: circle;
Id och class
- Användning av
id- I HTML-koden lägger du in
id="intro-img"iimg-taggen med smultronen. - I CSS-koden skapar du en regel för
#intro-imgmedwidth: 250px;
- I HTML-koden lägger du in
- Användning av
class- I HTML-koden lägger du in
class="large"både i förstap-taggen och iul-taggen imain. - I CSS-koden skapar du en regel för
.largemedfont-size: 1.3em;ochline-height: 2em;
- I HTML-koden lägger du in
Validera
- Validera style.css med validatorn på https://jigsaw.w3.org/css-validator/#validate_by_upload och rätta eventuella fel.
Klar
Gå nu vidare med föreläsning F3c och därefter laboration L3c.