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 (common…


This content originally appeared on DEV Community and was authored by avery

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


This content originally appeared on DEV Community and was authored by avery


Print Share Comment Cite Upload Translate Updates
APA

avery | Sciencx (2025-09-27T14:50:48+00:00) 6. CSS Properties. Retrieved from https://www.scien.cx/2025/09/27/6-css-properties/

MLA
" » 6. CSS Properties." avery | Sciencx - Saturday September 27, 2025, https://www.scien.cx/2025/09/27/6-css-properties/
HARVARD
avery | Sciencx Saturday September 27, 2025 » 6. CSS Properties., viewed ,<https://www.scien.cx/2025/09/27/6-css-properties/>
VANCOUVER
avery | Sciencx - » 6. CSS Properties. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/09/27/6-css-properties/
CHICAGO
" » 6. CSS Properties." avery | Sciencx - Accessed . https://www.scien.cx/2025/09/27/6-css-properties/
IEEE
" » 6. CSS Properties." avery | Sciencx [Online]. Available: https://www.scien.cx/2025/09/27/6-css-properties/. [Accessed: ]
rf:citation
» 6. CSS Properties | avery | Sciencx | https://www.scien.cx/2025/09/27/6-css-properties/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts