This is just a short list of available CSS properties based on some of the most common ones out there: for a more complete list visit MDN.
When working with different sizes for elements, text, or white space: you have a few different options as to how to set the value in CSS.
The first and most common sizing unit is the
px, this means that
1px matches to a single pixel as seen on the user's screen.
NOTE Retina and high resolution screens (such as on phones) render one CSS pixel over a few different screen pixels. While this does not effect things like element sizes, you may want to check this when working with images.
The next unit for sizing things is
%. Like you might guess, this unit is a percentage.
When looking at percentages, the percentage is based on the parent element's width.
50% of 60px
When working with text and white space, you may want to work in reference to base a font size.
This allows you to create a consistent flow similar to the techniques used in typesetting for books.
To refer to the current font-size of the parent element you can use the
em unit where
1em is 100% of the parent element's font-size.
em values can be very useful for doing things like increasing the size of modifier elements (
em, etc) in regards to the element that are within.
em can be used for layout and spacing, it can be inconsistent since if
em sizes are used within a parent with an
em font-size then things can be hard to trace down.
rem unit always is compared to the
font-size of the
This allows you to make a consistent vertical rhythm which makes things easier to read for users.
For this example the
remis used to make different font sizes line up in their full height. In this case, two lines of
16pxtext line up to one line of
20pxsince the line heights user
remunits that evenly divide.
font-size:20px; line-height: 4rem;
Compare this to using
em units at the standard
font-size:20px; line-height: 1.2em;