DEV Community

avery
avery

Posted on

6. CSS Properties

BootCamp by Dr.Angela

1. Font Properties

  • Size
    • 1px : 1/96th inch
    • 1pt : 1/72nd inch, rarely used in web
    • 1em : 100% of parent
    • 1rem : 100% of root <html>
  • Weight
    • Keywords : normal/bold
    • Relative : lighter/bolder
    • number : 100-900 (commonly 400 = normal, 700 = bold)
  • Family
    • Generic font type : sans-serif, serif, monospace, cursive, fantasy
    • Quotes("") : Required when the font name contains spaces
    • https://fonts.google.com/ : inside <head> ~ </head>

2. Inspecting CSS (Open Chrome DevTools)

  • Windows : Ctrl + Shift + I(or F12)
  • Mac: Cmd + Option + I (or Fn + F12)
  • CSS Overview : A DevTools panel that gives you a summary of colors, fonts, unused declarations, and more

3. The CSS Box Model - Margin, Padding and Border

  • border : Does not affect the size of the content inside.
  • Width/Spacing order (margin, padding, border): Clockwise order (top → right → bottom → left)
    • For vertical and horizontal shorthand: top + bottom / left + right
  • Padding < Border < Margin(between elements)
  • <div> ~ </div> : Content division element

Top comments (0)