# Style med CSS

Vi ska lära oss att ge utsende till webbsidor med CSS.

# Lektioner

## 1 - Introduktion till stil med CSS

- 🔗 [CSS trädgården](http://www.csszengarden.com/) - Testa några olika stilar
  på denna sida.

## 2 - Våra CSS exempel

- ⚙️ [Exempel om stil med CSS](htsit.se/f/ex-for-style.zip)
- 📄
  [Lista över CSS egenskaper](https://docs.google.com/document/d/1uO3_Oqb4DOqadr8H0Bf4utVPppcUVNu_R1oIY-5A_WM/edit?usp=sharing)

## 3 - Hur vi kan använda CSS interaktivt

- I firefox kan du öppna en interaktiv editor.
- 🔔
  [Att anvädna Firefox för CSS utveckling](https://www.youtube.com/watch?v=a-V8GFtwjos) -
  Provocerande titel, men en bra guide till att utveckla CSS med firefox.

## 4 - Text

- Titta på exempel som börjar på 01.
- Så som _01-05-headlines.html_ som visar olika rubriker.

## 5 - Färger

- ❗ Kommer strax

## 6 - Storlekar

- dpi/ppi - upplösning
- Absoluta
- -px
- -cm
- -inc
- Relativa
- -em
- -vh
- -%

## 7 - Font

- 🔗 [Om fonter på Wiki](https://en.wikipedia.org/wiki/Font)
- Tryck och typeface
- Teckenkodning: Unicode/UTF-8
- Tänk på att fonter ofta har en ägare.
- Till exempel du trycker eller gör ett spel måste du ha tillstånd.
- Font-familjer
- Typer av font familjer:
- -Serif
- -Sans-serif
- -Monospace
- Font alternativ

## 8 - Selectorer

- id
- class
- tagnamn
- kombinationer

## 9 - Prioritering

- inline och important
- specifik
- senaste

## 10 - Arv

- Namn konventioner
- Flera klasser
- Special värden:
- -inherit
- -initial
- -none

## 11 - Pseudoklasser och pseudoelement

- Pseudoelement
- 🔗
  [Om pseudoelement på MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
- Pseudoklasser
- Content

## 12 - Listor

- 🔗
  [Olika CSS egenskaper och dess värde på W3S](https://www.w3schools.com/CSS/css_list.asp)

## 13 - Bilder

- border-radius kan användas för att ge runda bilder.
- 🔗
  [Exempel på runda bilder på W3S](https://www.w3schools.com/css/css3_images.asp)
- Thumbnail
- Width and height
- Opacity
- Filter, finns exempel här.
- 🔗
  [Exempel på filter på W3S](https://www.w3schools.com/CSSref/css3_pr_filter.asp)
- Ofta använda en funktion url() för att hämta bilder.
- 🔗
  [Exempel på detta från MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/url())

## 14 - Background

- Finns olika egenskaper som kan användas.
- 🔗
  [Olika background egenskaper från W3S](https://www.w3schools.com/css/css_background.asp).
- Background-color
- background-image: url("paper.gif");
- background-repeat
- -repeat-x
- -no-repeat
- -background-position: right top;

## 14 - Boxmodelen

- 🔗
  [Om "CSS Box Model" från W3S](https://www.w3schools.com/Css/css_boxmodel.asp)
- 🔗 [Om boxmodelen på svenska](http://webbdesigna.se/boxmodellen.php)
- 🔗 [Youtube film om boxmodelen](https://www.youtube.com/watch?v=rIO5326FgPE)

## 15 - Flödet av element

- 🔗 [W3S](https://www.youtube.com/watch?v=rIO5326FgPE) - Vilka typer av element
  finns det?
- 🔗 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout) -
  Normalt flöde
- -block formatting
- -inline formatting
- -Out of flow
- Overflow
- -z-index

## 16 - Positioner

- 🔗 [W3S](https://www.w3schools.com/Css/css_positioning.asp) - Förklarar
- static
- relative
- fixed
- absolute
- sticky

## 17 - ♻️ Repetion

- Vi går igenom hella detta moment.

## 18 - ⏰ Repetionsövningar

- Övningar på hela detta moment.

## 19 - Grid

- Övningar på hela detta moment.

## 20 - Flexbox

- 🖋
  [Guide till Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- Ett bra sätt att skapa layoute

## 21 - ♻️ Gå igenom exempel igen

- Ett bra sätt att skapa layoute

## 22 - ♻️ Fler exempel på flexbox

- Ett bra sätt att skapa layoute

## 23 - Några praktiska exempel

- Ett bra sätt att skapa layoute
- 🖋
  [En klocka utan stil](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcABMSQBeADrcoPWAGsFAPjnUR4qbIVJaATzAKJsKLRzyQAV2rF4GrRNcSdki1bA3qt+gBGEABOztRurgC0kS4RQgD0omKa4XFJ5pbWBhBgsMHEAA7wxHxhERKGAOa0oaluCUkprg3iTe7pXlkgSDxOIOotybEeejYsPLbBpiAZ3jb2jmX1HZk+Cn6BIUtu0bHNia177bqda905eYXFpf1HrsX0NUeDbfuNzytzBr0aLx+60hs9GIfkQ01mXQWfVex08q18-iCoVudR2MVRfwxny6SAu+SKJWo2zcwNBW1R7gOQ1SmOa2LOPWhtNhowUkF41CQ4NO8wc0LuIx560RWxR5Si6PKzOWJ3h2Vy+OuRLF4sgKnsuNqUqpbUxLy4kBgCEJ5BAAEYAByoM0AJhAAF88DQGEx0BgAFa4AgcgTwZgweASegSGRBniMfgACgUNoADDazZFYwA2SJms0SM0AVlQsdjCjwEgUAE1S8XIgBZCuRAAiNYkAAkG6h6PQFABKADcWh71Eg8AAkvwQmJaFBI4R7Ma+BIAGI8HiR9sSYCxAMVENhiPwDBISa0JWR+i74iEQhH8MQKPtm-dompDlgQPjSZgAD69DAlU3SAwL6mS7qAAnAA-AAyvA+TUJUka-v+YBLu2qAKPmIAANRwRMAFdrEj6BqSthgh+X4-hgBFgoBoEQVBMG-uROSIchICoRhZEgoRDE4Q+fBPhI7J8FyxHfqGv78ZyCHtsB4GQSCtEYGJXKMShCisQpEl3q4sSxD0sD+FeO4AI62CERhgdAcDwDwwTRiAADEhgmBIGAbEiHYYCC1AhA2AAqFYADKbhIFYHiwGCEEoVmwRgVg1sYElca4Ol6fwGBGSZZlGpZ1kKLZ8FOS5ortu51CecEPn+YF8FCRpFTKMlhnGcEpnmQgkU5fRYD5SKyJFR5Xm+QFoZBuxRGfpUNVJduqWNc1mVtXZaldZsPXFaV5WDa4anVVojqZnmsbtgaLVKqaZoACyoMmQEOk6IB0IwzBYDgXA+vpzAOgAugQUAgio5BUHdLrMPQl78JEADujgsJESiwGOORsdQHpenYwScOgbDwAUYCoPE8SwEg1CelgSi2Eg4U1BAWDhvEtDurQAAe8Q-QEYDxCDU2evENoYDaWYYGa7Og-AENQzDyjw2AiPI1w8BGAUrrgJcRSffaQA)
- 🖋
  [Ett förösk till layoute på klockan](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcABMSQBeADrcoPWAGsFAPjnUR4qbIVJaATzAKJsKLRzyQAV2rF4GrRNcSdki1bA3qt+gBGEABOztRurgC0kS4RQgD0omKa4XFJ5pbWBhBgsMHEAA7wxHxhERKGAOa0oaluCUkprg3iTe7pXlkgSDxOIOotybEeejYsPLbBpiAZ3jb2jmX1HZk+Cn6BIUtu0bHNia177bqda905eYXFpf1HrsX0NUeDbfuNzytzBr0aLx+60hs9GIfkQ01mXQWfVex08q18-iCoVudR2MVRfwxny6SAu+SKJWo2zcwNBW1R7gOQ1SmOa2LOPWhtNhowUkF41CQ4NO8wc0LuIx560RWxR5Si6PKzOWJ3h2Vy+OuRLF4sgKnsuNqUqpbUxLy4kBgCEJ5BAAEYAByoM0AJhAAF88DQGEx0BgAFa4AgcgTwZgweASegSGRBniMfgACgUNoADDazZFYwA2SJms0SM0AVlQsdjCjwEgUAE1S8XIgBZCuRAAiNYkAAkG6h6PQFABKADcWh71Eg8AAkvwQmJaFBI4R7Ma+BIAGI8HiR9sSYCxAMVENhiPwDBISa0JWR+i74iEQhH8MQKPtm-dompDlgQPjSZgAD69DAlU3SAwL6mS7qAAnAA-AAyvA+TUJUka-v+YBLu2qAKPmIAANRwRMAFdrEj6BqSthgh+X4-hgBFgoBoEQVBMG-uROSIchICoRhZEgoRDE4Q+fBPhI7J8FyxHfqGv78ZyCHtsB4GQSCtEYGJXKMShCisQpEl3q4sSxD0sD+FeO4AI62CERhgdAcDwDwwTRiAADEhgmBIGAbEiHYYCC1AhA2AAqFYADKbhIFYHiwGCEEoVmwRgVg1sYElca4Ol6fwGBGSZZlGpZ1kKLZ8FOS5ortu51CecEPn+YF8FCRpFTKMlhnGcEpnmQgkU5fRYD5SKyJFR5Xm+QFoZBuxRGfpUNVJduqWNc1mVtXZaldZsPXFaV5WDa4anVVojqZnmsbtgaLVKqaZoACyoMmQEOk6IB0IwzBYDgXA+vpzC2RYygqCu2nEGABSWEYqASOFEAAB41Y8wSVCCwNxgUEOxAUtBIKI0Fw7GCM1QEVmasDe0I3xPBQNIEgFCCKjY7jISRMEKPELYYAY1jsQBLQqiVMEEycpEvBKMEwMFJMAMQJ2RbUPavYYFCP2pFDMPUMziMS1LBXBIWu69LLriEHw8CRGAxAAF4QMDyaY8rkv3prgarnLNQK5ElkFErd5W1ouVYZ1aFOYyqCoLQhCIOrEi2R1Eg+zb-uB8H2tBg7IJOzwLsSGdFs1a9-DAwoTFu1oR2ZSazA2gAzNaJcOgAugQJPUCo5BUHdLrMPQl78JEADujgsJESiwGOORsdQHpenYwScOgbDwAUTPxPEsBINQnpYEothIOFNQQFg4bxLQ7q0GD8QkwEYDxK3U2evENoYDaWYYGaZ9t-rXfwD3fcD2AQ8j1w8BGAUrrgEuEUKu9ogA)

## 24 - ⏰ Repetionsövningar

- Om layoute

## 25 - Mediafrågor

- Olika stora skärmar

## 26 - Auto och Övrigt

- Om annat som inte fått någon anna plats.

## 27 - ⏰ Repetionsövningar

- Om layoute

## 28 - Hur gör jag?

- Hur får vi skuggning på våra bokstäver?
- Hur får vi divar överlappande?

## 29 - ♻️ Repetion och frågor

- Hur får vi skuggning på våra bokstäver?
- Hur får vi divar överlappande?

## 30 - 🔥 Labbprov

- Ett labbprov
- Liknar övningarna vi har haft

## 31 - Om inlämning

- Ett labbprov
- Liknar övningarna vi har haft

## 32 - Extra provtillfälle

- Ett labbprov
- Liknar övningarna vi har haft

## 32 - Utvärdering och infromtion om nästa läsår.

- Ett labbprov
- Liknar övningarna vi har haft