CSS - Att skapa en stiligare värld

created: 2025-04-25
author: krm
icon: 🌐

Lista på CSS med egenskaper och värden

Observera att denna lista 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 regle som ska skrivas ut fullständigt.

HTML koden nedan är inte nödvändig för att lösa uppgiftenrna, men kan använda som inspiration. Det kan finnas fler en än tolkning av uppgifterna.

<!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 röda.
Se till elementet med id "coward" får bredden 450 pixlar.
Gör så bakgrunden till "pre" får färgen som motsvara koden DC143C.
Elementet med class "odd" ska vara understruken.
Få "ol" elementet att ha en solid kantlinkje med breden 10 pixlar.
Gör så att elementerna i en lista har små kvadrater framför sig.
Gör så att en länk som har blivit besökt blir överstrukten.

Del II

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

Uppgift 1

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 eller egenskaper som används för att påverka layouten, dvs. posistion av elementen. Ge också förslag på värden som kan förekomma och motivera ditt svar.

Uppgift 2

Vilka css egenskaper som har med teckensnittet att göras används i bilden ovan? Och vilka egneskaper har de? Motivera ditt svar.

Del III

Fyra poäng ges för denna uppgift

Nedan ges html kod och två bilder. Du ska skriva CSS kod som kan placeras i style elemetet och återskapar bilderna nedan för olika skärmstorlekar. 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>

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