## Uppgift
Granska den tillhandahållna HTML-koden och förutsäg hur sidan kommer att se ut i webbläsaren. Det finns tre `<div>`-element, som vardera innehåller en kombination av ett inline- och ett blockelement.

```html
<div>
  <span>This is an inline element</span>
  This is a block-level element.
</div>

<div>
  This is a block-level element.
  <span>This is an inline element</span>
</div>

<div>
  This is a block-level element.
  <span>This is an inline element</span>
  This is another block-level element.
</div>
```

### Frågor att fundera på
1. Hur kommer inline- och blockelement att samverka inom varje `<div>`?
2. Hur påverkar ordningen av elementen layouten?
3. Vilken visuell hierarki får inline- och blockelement inom varje `<div>`?

1. **Hur kommer inline- och blockelement att samverka inom varje `<div>`?**
   - I den första och andra `<div>` visas `<span>`-elementet (inline) före texten (blockelement);
   - I den tredje `<div>` är `<span>`-elementet placerat mitt i texten (blockelement).
2. **Hur påverkar ordningen av elementen layouten?**
   - I den första `<div>` kommer texten "This is a block-level element." sannolikt att visas under inline-elementet på grund av `<div>`-behållarens standardbeteende för blockelement;
   - I den andra `<div>` är ordningen omvänd, så texten visas sannolikt ovanför inline-elementet;
   - I den tredje `<div>` är texten och inline-elementet blandade, så layouten kan visa text och inline-element i sekvens.
3. **Vilken visuell hierarki får inline- och blockelement inom varje `<div>`?**
   - Inline-elementet (`<span>`) kommer sannolikt att visas i linje med texten i samtliga fall, men dess position kan variera beroende på ordningen av elementen inom `<div>`.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdj4KICAgICAgPHNwYW4+VGhpcyBpcyBhbiBpbmxpbmUgZWxlbWVudDwvc3Bhbj4KICAgICAgVGhpcyBpcyBhIGJsb2NrLWxldmVsIGVsZW1lbnQuCiAgICA8L2Rpdj4KCiAgICA8ZGl2PgogICAgICBUaGlzIGlzIGEgYmxvY2stbGV2ZWwgZWxlbWVudC4KICAgICAgPHNwYW4+VGhpcyBpcyBhbiBpbmxpbmUgZWxlbWVudDwvc3Bhbj4KICAgIDwvZGl2PgoKICAgIDxkaXY+CiAgICAgIFRoaXMgaXMgYSBibG9jay1sZXZlbCBlbGVtZW50LgogICAgICA8c3Bhbj5UaGlzIGlzIGFuIGlubGluZSBlbGVtZW50PC9zcGFuPgogICAgICBUaGlzIGlzIGFub3RoZXIgYmxvY2stbGV2ZWwgZWxlbWVudC4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LyogU3R5bGUgdGhlIGJsb2NrLWxldmVsIGA8ZGl2PmAgZWxlbWVudCAqLwpkaXYgewogIGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Ymx1ZTsKICBib3JkZXI6IDFweCBzb2xpZCBibGFjazsKICBwYWRkaW5nOiAyMHB4OwogIG1hcmdpbi1ib3R0b206IDMwcHg7Cn0KCi8qIFN0eWxlIHRoZSBpbmxpbmUgYDxzcGFuPmAgZWxlbWVudCAqLwpzcGFuIHsKICBjb2xvcjogcmVkOwogIGZvbnQtc2l6ZTogMjRweDsKfQ==

Behärska grunderna i CSS (Cascading Style Sheets), det stiliseringsspråk som förändrar utseendet och känslan på webbsidor. Utforska kärnkoncept som textstilar, färger, avstånd, boxmodellen, Flexbox och dekorativa effekter. Bygg upp färdigheter för att skapa visuellt tilltalande och välstrukturerade webbsidor. Perfekt för nybörjare som vill skapa en stabil grund i CSS.

Lär dig vad CSS är, hur det kopplas till HTML och hur HTML-element kan stylas med selektorer. Utforska grundläggande koncept som textfärger, användaraktions-pseudoklasser och variabler i CSS.

Utforska hur du kan formatera och utforma text på dina webbsidor. Lär dig att använda anpassade typsnitt och undersök olika typsnittsegenskaper för att förbättra textens utseende.

Lär dig grunderna i boxmodellen, som definierar layout och avstånd för element på en webbsida. Utforska koncept som boxstorlek, tillägg av utrymme till element, arbete med block- och inline-element samt användning av strukturella och funktionella pseudoklasser för avancerad formatering.

Utforska Flexbox, en kraftfull CSS-layoutmetod för att arrangera element i rader och kolumner. Lär dig att kontrollera riktning, justering och avstånd mellan element horisontellt och vertikalt samt anpassa enskilda flexobjekt för precisa layouter.

Lär dig hur du kan förbättra den visuella attraktionskraften på dina webbsidor med CSS. Utforska tekniker för att använda bakgrundsfärger och bakgrundsbilder, formge bilder, använda dekorativa pseudo-element samt lägga till skuggor för att skapa imponerande designer.

Utmaning: Förutsäg Sidlayout med Olika Elementtyper

Utmaning: Förutsäg Sidlayout med Olika Elementtyper