Webbteknik 1

Laboration 3B

Stil för text och listor

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.

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 html och lägg in font-size: 16px;
    • Detta blir webbsidans “rotfont”, som t.ex. enheten rem utgår från.
  • I regeln för body lägger du in font-family och väljer önskat typsnitt (font).
  • Skapa en regel för header h2 där du också lägger in font-family, fast med en annan font, eller endast en typ av font, t.ex. cursive eller fantasy.
  • I regeln för footer lägger du till font-style: italic;
  • Lägg även in font-size och 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ör nav ul.
  • I listan i innehållet på sidan ska du byta punkten till en cirkel. Skapa en regel för main ul med list-style: circle;

Id och class

  • Användning av id

    • I HTML-koden lägger du in id="intro-img" i img-taggen med smultronen.
    • I CSS-koden skapar du en regel för #intro-img med width: 250px;

  • Användning av class

    • I HTML-koden lägger du in class="large" både i första p-taggen och i ul-taggen i main.
    • I CSS-koden skapar du en regel för .large med font-size: 1.3em; och line-height: 2em;

Validera