HTML/CSS dag 4

Vi gick bland annat igenom

• Specificitet i CSS Selectors
• Google Fonts (länka in typsnitt)
• CSS-funktionen calc()
• box-sizing: border-box
• nya semantiska element i HTML5

Till på fredag

Till på fredag vill jag ni har läst igenom https://internetingishard.com/html-and-css/floats/ (jag lovar, den är kort!) samt https://internetingishard.com/html-and-css/css-box-model/ (repetition av det vi sysslat med de senaste två lektionerna). Spontant förhör kan förekomma 😝.

---

Specificity i CSS Selectors

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Specificity_2

Google Fonts

https://fonts.google.com/

calc()

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

box-sizing: border-box

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#The_alternative_CSS_box_model

HTML5-element

Några av de nya semantiska elementen i HTML5 för sektionering/uppmärkning av innehåll som vi gick igenom

• header
• nav
• main
• section
• article
• footer (gammal men vi har inte nämnt den tidigare)

Kika på https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines för beskrivning av ovan element eller kolla på nedan video:

---

Workshop

Här är vad jag vill ni ska återskapa (se också bild nedan). Obs att det är en annan bakgrundsfärg på body/container bara för att ni ska lättare se var innehållet börjar/slutar. Tänk också på att i sidfoten så går bakgrunden hela browserns bredd. Kan ni återskapa det?

(ja, självklart så hade innehållet i sidfoten inte blivit bredare än resten av innehållet utan radbrytit om det behövts.)

Om in vill ”reset:a” margin & padding så t.ex. er body slutar ha 8px margin runt om så kan ni sätta följande CSS-deklaration (obs att det så klart tar bort all margin på t.ex. era paragrafer, så ni måste sätta en egen margin-bottom på <p>-taggar m.m.):

* {
    margin: 0;
    padding: 0;
}

Om in vill slippa ”mäta” i bilden så är den här fast med outlines för de olika delarna. grön = headers, blå = container, röd = paragraf, lila = osorterad lista.

Bonus! Om det inte var någon direkt utmaning med ovan, så kan ni se om ni kan göra en style för att få detta utseendet 😛. Obs att ni alltså inte ska göra cirkeln eller pilen 😄. Ännu mer kul är om ni kan få den här lilla pop-over/tooltip när man hover över texten.