# CSS

__ author: krm created: 2021-01-20 image: ../../../Image/Slice/bricks.png icon:
🧱 __

Om att använda CSS och få en layoute

- [Prov beskrivning](https://docs.google.com/document/d/1i6LCrbJWQ5DlIWUles6YuyP3mla64u7mPrWoiQu2Yp4/edit?usp=sharing)
- [Exempel uppgiftyer](https://docs.google.com/document/d/1zqAh_HdHpntfPLGHHmNycJpZ79YTYGz-6Y4Sn2NPydU/edit?tab=t.0)

# 1. Introduktion till stil med CSS

- Intro
- CSS historia
- CSS terminologi
- CSS syntax
- CSS framtid, är det SCSS?

# 2. Arbeta med våra CSS exempel och utveckla med webbläsaren

- CSS exemplerna och övningarna.
- CSS i en webbläsare.

# 3. Text

- 📜 [Om texter](https://htsit.se/e/css/text/examples.sv.html)
- color
- background-color
- text-decoration
- text-align

# 4. Kantlinje

- 📜 [Om kantlinjer](https://htsit.se/e/css/border/examples.sv.html)
- border-style
- border-width
- border-color
- border-radius

# 5. Boxmodelen

- 📜 [Om boxmodellen](https://htsit.se/e/css/boxmodel/examples.sv.html)
- padding
- border
- margin
- 🔗
  [Bra Bild på boxmodelen](https://medium.com/hackernoon/the-box-model-44fc2c04a935)
- 🔗 [På svenska](http://webbdesigna.se/boxmodellen.php)
- 🔗
  [Förkortningar av CSS egenskaper](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties)
- 🖋
  [Exempel på detta](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcABMSQBeADogAgsoUA+OdQkTlijUID0oseuojxU2QoBCNtRq02rew+NVdIMBMT7kQAFlQAVhAAXzwaBiZ0DAArXAJefghBdFDwkDpGZiwcLkSBeGYAYh0JYHsJACNaWABrAHMAJx4AV2okAFpeKB5G1AlG5ABuCoB3aXgWfsCABgAHAA8RzQkWCGJ6tmn5pYq52iRRanr+gCYd5a1K3qQIPokwHihpCQBGQMWqqBray6qbu4dcZISb9d6LP70WiNerEahnC4aEIaDRFRxlCrdXr9ACe0B6oz+1TqTVa7S6T2xEiaEGSf2BoIkswhFTWGy2TMRK32hzhJwk5xZK2ujVu90ezyQbw+Cy+LQgRIBjSBEym0qFWihMLh-QAzFyQu5oHB4N5qL5XgAOVCvU6hAC6ISAA)
- 🖋
  [Ett mer komplext exempel på detta](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcABMSQBeADogAgsoUA+OdQkTlijUID0oseuojxU2QoBCNtRq02rew+NVdIMBMT7kQAFlQAVhAAXzwaBiZ0DAArXAJefghBdFDwkDpGZiwcLkSBeGYAYh0JYHsJACNaWABrAHMAJx4AV2okAFpeKB5G1AlG5ABuCoB3aXgWfsCABgAHAA8RzQkWCGJ6tmn5pYq52iRRanrpxeWtSt6kCD6JMB4oaQkARkDFqqga2vOqq5uO8ZISb9Z47CQAJjBAGYwX4dj99odiMdTgsIfCKvRaI16sj+pCzhoQhoNEVHGUKt1ev0AJ7QHqjH7VOpNVrtLoPakSJoQZI-QHAiSzQkrNYbLZCjErRFHeodeA8Ob4qVaGXIuWNcXwfpwkWqg6yjqXeAK+j9ABsKokauOHRghG1Qr1v0a11u90eSBebzRlSgLQgTL+jQBEym3udl1d-wVSruDyeBN2Kyjbo6ms28A5PVuvVox0DFVT-2Npo6YHgNJg-SQPBNwyLwaNdbLAvDPoRBvV6a1OqtNrlpZ4ZokludA7tEAdqJ+WJxeIkMJFIXc0Dg8G81F85tQUKhoQAuiEgA)

# 6. Förenklingar av CSS egenskaper

- 🔗
  [Förklaringar av förkorningar](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Shorthand_properties)

# 7. Färger

- 📜 [Om Färger](https://htsit.se/e/css/color/examples.sv.html)
- Kommer snart.

# 8. Storlekar

- 📜 [Om storlekar](https://htsit.se/e/css/length/examples.sv.html)
- 🔗 [Om enheter](https://www.w3schools.com/CSSref/css_units.asp)
- 🎥 [Enheter i CSS](https://www.youtube.com/watch?v=6eVp1TJcvuY)

# 9. Fonter

- 📜 [Om fonter](https://htsit.se/e/css/fonts/examples.sv.html)
- font-size
- font-family
- font-style: italic;
- font-weight: bold;

# 10. Listor med stil

- 📜 [Om listor](https://htsit.se/e/css/list/examples.sv.html)

# 11. Bilder med stil

- 📜 [Om bilder](https://htsit.se/e/css/image/examples.sv.html)
- 🔗
  [W3S om HTML attribute på bilder](https://www.w3schools.com/html/html_images.asp)
- 🔗
  [W3S om CSS egenskaper på bilder](https://www.w3schools.com/css/css3_images.asp)
- 🔗 [Base 64](https://sv.wikipedia.org/wiki/Base64)
- 🔗
  [Omvandla från bild till base64 text](https://www.cssportal.com/image-to-data/)

# 12. Bakgrundsbilder.

- 📜 [Om bakgrunder](https://htsit.se/e/css/background/examples.sv.html)

# 13. Selectorer

- 🖋
  [Exempel på hur använda selectorer på bästa sätt](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcABMSQBeADrc+8WsWoQATgoB8c6hIkjxE2FFo553WuqTbd+-UJYBGLRIAqEMPAlOhAemcdPXshAAcg+3sAEQh4ZQkAE-UJCD1EAA94DDsQv3Cchz9RMVcCg2LjU3MFWCsbEAiQwPdPbwAmf0CysMbImLjaROTUiVpqOjSITOzgwvzg-2LS6kXxLS5IGARiPnIQJzbUAE4QAF88GgYmdAwAK1wCXn5U+GYzi5A6RmYsHC4ngSvdAAYgBKjUyWAOQARrRYABrADm6h4AFdqEgALS8KA8dSoCTIiCpADcMLxSA0BLAPCg0gkAFZQukycFQrQkKJqIiCU4AAzM1mnXS6LB1CRQ4LQilUiQ0ulIRmCnLszmqHlKlk5ehWRGqTHwHihAlMrVSuFIlHorE4vEE9TIIUi6hi6wSZwS7W61QEvms-QZeCYym8dS0eA7agE60aOlqIUbaBwCO7ZhOABsqCcmL5qD5ZwAuqcgA)
- 🔗
  [Referens dokumentation](https://www.w3schools.com/cssref/css_selectors.asp)
- 📜 [Om selectorer](https://htsit.se/e/css/selector/examples.sv.html)

# 14. Pseudoklasser och pseudoelement

- 📜
  [Om Pseudoklasser och pseudoelement](https://htsit.se/e/css/psedo/examples.sv.html)

# 15. Prioritering av slektorer

- 📜 [Om prioriteringar](https://htsit.se/e/css/prio/examples.sv.html)
- position - Senast inlästa regel har prioritet, kallas också
  "cascading"("överlappa").
- !imoprtent - Gör en CSS regel prioriterad. Bör undvikas.
- inline - Style attributet har prioritet.
- "Specificity" - Kan behövas beräknas.
- 🔗 [Beräkna "Specificity"](https://www.w3schools.com/css/css_specificity.asp)
- 🔗 [Wikipedia om CSS](https://en.wikipedia.org/wiki/CSS)
- 🔗
  [Om prioritet och varför inte använda priority](https://techrangers.cdl.ucf.edu/2018/09/10/css-specificity.html)

# 16. Arv och liknande

- inheritance
- initial
- unset
- 🔗
  [Arvegenskapen och överlappning](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)

# 17. Mer om Boxmodelen

- Läs igenom lektionsantekning 5 ovan.

# 18. Flöde av element

- 📜 [Om flöde](https://htsit.se/e/css/float/examples.sv.html)
- 🔗
  [Beskrivning av flöde](https://developer.mozilla.org/en-US/docs/Web/CSS/float)
- Instessanta värden är nu: none, left, right
- Upp till ned

# 19. Positioner

- 📜 [Om position](https://htsit.se/e/css/position/examples.sv.html)
- relativa

# 20. Auto

"The value of said property is adjusted automatically according to the content
or the context of the element."

- 📜 [Om auto](https://htsit.se/e/css/auto/examples.sv.html)
- 🖋
  [Om att centrera en div](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcAfAB1qAAlkAJCACsZQgPSjJMrpBgJifciADMqAAwgAvnhoMm6DMtwFe-CIPRde9AA6kIACdmACNaEOhrWxA6RmYsHG8+AXhmLVlgGXleKB5A1FlA5ABuLNlEAA94AFpaKGIAc2oC2A9EQNK5WTDYAGsGwJ4AV2okapy8gpCoIYhO+RYIRrYCgEZzc18K+dkAd2IkeBY1ja2d+lpAhuJqavgeXwKAdgBWM5krGRl0zK6Lq5u1RghHgBVoQ3u50u11ugWWoNk4MhHy+1F00Dg8EM1GMACZULjVtYALpWIA)
- 🖋
  [Exempel på höjd egenskapen](https://flems.io/#0=N4IgzgpgNhDGAuEAmIBcIB0sxhAGhADMBLGXVAbVADsBDAWwjUwAt56p8RYB7axfswA8SYgDcAfAB1qQgPSjJMrpBgJifciAAMqAKwgAvnhoMm6DACtcBXvwiD0XXvQAOpCACdmAI1o-oIxMQOkZmLBxnPgF4ZkUAAmAZePi-WABrAHNPHgBXaiQAWl4oHk9UVKhciABuZPiWCGJMtgqARm1tVwAPOuoUgHdiJHgWds6evpT6Wk9M4mpC+B5XCoB2PUmZQxkZBKT++Jm5hcKYQngK2lzlqaPZ+cXPZtb469v648ellaubnjuX1OPh48GW9D+H2oO2oygIqjg8A01C0bQATKg2kYALqGIA)
- 🎥 [The CSS Value of Auto](https://www.youtube.com/watch?v=1vl3LrEwqpE)
- 🔗 [Allt om Auto](https://ishadeed.com/article/auto-css/)

# 21. Flexbox

- Enkel layoute
- 📜 [Om flexbox](https://htsit.se/e/css/flexbox/examples.sv.html)
- 🔗
  [En guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

# 22. Grid

- Svårare layoute
- 🔗
  [En guide to grid](https://css-tricks.com/snippets/css/complete-guide-grid/)

# 23. Media frågor

- Mediafrågor
- 📜 [Om Mediafrågor](https://htsit.se/e/css/media-query/examples.sv.html)
- 🔗
  [En förklaring med exempel](https://www.w3schools.com/Css/css3_mediaqueries_ex.asp)
- Mobilt