CSS - Att skapa en stiligare värld

created: 2026-06-02
author: krm
icon: 🌐

Lista på CSS med egenskaper och värden

Observera att listan nedan inte nödvändigtviss innehålla alla egenskaper som nämns i prov instruktionen eftersom dessa ska du redan känna till.

border-radius
list-style-type, har värderna "square", "disc" och "circle".
font-style, har värderan "normal", "italic" och "oblique".
text-decoration-line, har värdena: "none", "underline", "overline" och "line-through".
font-family, har värderna "Serif", "Sans-serif", "Monospace" och "Arial".
:hover
:visited
:link

Del I

Du får två poäng per uppgift. Varje svar innehåller minst en css regel som ska skrivas ut fullständigt. Du ska utgå från HTML koden nedan när du löser uppgifterna. Det kan finnas fler än en lösning av uppgifterna. Om inga värden skrivs utan kan du själv välja dessa.

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1 id="brute">Et tu, Brute?</h1>
    <h1>Beware the Ides of March</h1>
    <pre id="coward" >
        Cowards die many times before their deaths.
        The valiant never taste of death but once.
        Of all the wonders that I yet have heard,
        It seems to me most strange that men should fear,
        Seeing that death, a necessary end,
        Will come when it will come.
    </pre>
    <img src="./rom.jpeg" />
    <ol>
      <li class="even">
        The fault, dear Brutus, is not in our stars. But in ourselves, that we
        are underlings.
      </li>
      <li class="odd">This was the noblest Roman of them all.</li>
      <li class="even">
        The evil that men do lives after them. The good is oft interred with
        their bones.
      </li>
      <li class="odd">
        Not that I loved Caesar less, but that I loved Rome more
      </li>
    </ol>
    <p>
      <a href="http://shakespeare.mit.edu/julius_caesar/full.html">The Life and Death of Julius Caesar</a> av <a
        href="https://en.wikipedia.org/wiki/William_Shakespeare"
      >William Shakespeare</a>
    </p>
  </body>
</html>

Gör rubrikerna blå.
Se till elementet med id "coward" får bredden 50 pixlar.
Gör så bakgrunden till "pre" får färgen som motsvara css färgkoden FF00FF.
Elementet med class "even" ska vara kursiv.
Få "ol" elementet att ha en solid kantlinje med breden 10 pixlar.
Gör så bilden "./rom.jpeg" får en röd kantlinje runt sig.

Del II

Ge ett längre svar med motivation. Tre poäng per uppgift.

Uppgift 1

Flöde

Bilden ovan visar följande html kod:

<div id="container">
  <div id="item-1" class="item">
    1
  </div>
  <div id="item-2" class="item">
    2
  </div>
  <div id="item-3" class="item">
    3
  </div>
</div>

Förklara vilka css egenskap som har använts för att få rätt dimensioner på div enligt box modelen. Du kan ignoera alla andra css egensper som har används för att göra bilden.

Uppgift 2

Vilka css egenskaper som har med teckensnittet att göras används i bilden ovan? Och vilka egneskaper har de? Du behöver inte skriva exakt, men beskriv vilka värden du tror har används. Motivera ditt svar.

Font

Del III

Fyra poäng ges för denna uppgift. Nedan ges html kod och en bild. Du ska skriva CSS kod som kan placeras i style elemetet och återskapar bilderna nedan. Exakta värdern är inte nödvändiga. Men en kort motiverin ska bifogas.

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <style>
    </style>
  </head>
  <body>
    <div id="box-1">
      Lorem ipsum
    </div>
  </body>
</html>

Stor

För att få ett poäng krävs

CSS regler som skapar en box som har likheter med en av bilderna.
Några ord om boxmodellen.

För att få full poäng krävs

Alla relevanta CSS egenskaper finns med.
Inget värde är orimligt.
Båda bilderna kan ses beronde på situationen.
Inga onödiga CSS egenskaper.
En förklaring till varför sidan förändras.

🍀 Lycka Till! 🍀

/krm