Elements of CSS V2

The Elements of Style Sheets aims to categorize CSS properties into three elements: Nature, Theme, and Layout. It could help a front-end designer’s mental model of building the CSS on top of HTML.


Nature refers to the individual characteristics of an element.

  • Display (display)
  • Dimensions (padding, width, height)


Theme refers to the visual design of an element.

  • Colors (color, background-color)
  • Typography (font-size, font-family)
  • Decor (border, border-radius, box-shadow)


Layout refers to the relationship of elements with one another.

  • Position (float, position)
  • Spacing (margin)



As an example, after building the Content Structure in HTML, the front-end designer, in a mobile-first approach, will focus on styling individual elements – by their Nature first (usually, width is set at 100%). And then style according to Theme and lastly, as the viewport goes wider, the front-end designer styles the Layout.

Elements of Style(sheets) V1


One response to “Elements of CSS V2”

  1. […] There’s an update to this entry: Elements of CSS V2 […]

Leave a Reply

Your email address will not be published. Required fields are marked *