# CSS - Lösning ``` created: 2025-04-25 author: krm icon: 🌐 ``` # Del I 1. Gör rubrikerna röda. h1 { color: red; } 2. Se till elementet med id "coward" fĂ„r bredden 450 pixlar. #coward { width: 450px; } 3. Gör sĂ„ bakgrunden till "pre" fĂ„r fĂ€rgen som motsvara koden DC143C. pre { background-color: #DC143C } 4. Elementet med class "odd" ska vara understruken. .odd { text-decoration: underline; } 5. FĂ„ "ol" elementet att ha en solid kantlinkje med breden 10 pixlar. ol { border: 10px solid black; } 6. Gör sĂ„ att elementerna i en lista har smĂ„ kvadrater framför sig. li { list-style-type: square; } 7. Gör sĂ„ att en lĂ€nk som har blivit besökt blir överstrukten. a:visited { text-decoration: line-through; text-decoration: line-through; } # 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(Borde varit vÀrden) 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**