# 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. ```html

Et tu, Brute?

Beware the Ides of March

 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.
  1. The fault, dear Brutus, is not in our stars. But in ourselves, that we are underlings.
  2. This was the noblest Roman of them all.
  3. The evil that men do lives after them. The good is oft interred with their bones.
  4. Not that I loved Caesar less, but that I loved Rome more

The Life and Death of Julius Caesar av William Shakespeare

``` 1. Gör rubrikerna röda. 2. Se till elementet med id "coward" fÄr bredden 450 pixlar. 3. Gör sÄ bakgrunden till "pre" fÄr fÀrgen som motsvara koden DC143C. 4. Elementet med class "odd" ska vara understruken. 5. FÄ "ol" elementet att ha en solid kantlinkje med breden 10 pixlar. 6. Gör sÄ att elementerna i en lista har smÄ kvadrater framför sig. 7. 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 ![Flöde](./flow.png) Bilden ovan visar följande html kod: ```html
1
2
3
``` 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 ![Font](./font.png) 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. ```html
Lorem ipsum
``` ![Stor](./big-screen.png) ![Mindre](./small-screen.png) ## 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**