Properties and Units

Common Styling Properties

As with HTML tags and attributes, there are dozens of valid CSS style properties, all of which can be found here on MDN Web Docs. The collection of properties listed below should be sufficient for most of your styling and layout needs.

Basic Text and Container Appearance

• background-color
• border
• border-radius
• color
• font-family
• font-size
• font-weight

Basic Layout, Sizing, and Spacing

• height
• line-height
• margin
• padding
• text-align
• width

Responsive Design

• display (primarily used for Flexbox or Grid)
• max-height
• max-width
• min-height
• min-width

Effects

• opacity
• transform (e.g., scale, rotate, translate)

Units

There are multiple valid ways to specify units for any style property that deals with size or space, such as width, height, font-size, border-radius, etc. Again, the list below is just a selection of recommended units to apply to your designs.

Absolute Units

• px - Absolute pixel units.

Relative Units

• % - Relative to the parent element's corresponding property (e.g., width, height, etc.).
• ch - Relative to the width of a "0" text character at the element's current font size.
• em - Relative to the element's current font size (roughly the height of the text).
• rem - Relative to the root document's font size (1rem is usually equivalent to 16px).