cascading stylesheet development

default styles

different browsers apply different default styles to elements. these styles can be removed/overridden, for example with reset.css

the alternative to removing default styles it to normalise and create a base style that looks the same in different browsers. downside is that this creates a dependency on the normalise styles, whereas using reset only requires that there are no active default styles

relativity, vertical rhythm

if sizes and colors are kept consistent in regular difference ratios, a human viewer might have it easier to process the content on a web page. to simplify size relations, one can choose a minimum base size and use only multiples of it, for example a quarter, leading to sizes such as 0.25, 0.5, 0.75, 1, 1.25, and so on. irregularly chosen sizes can make things look more unorderly

vertical rhythm describes the vertical distances, sizes and the ratios between them; where lines and blocks start. if you want a regular vertical rhythm, find a way to display a grid on the page and see if lines and blocks start at horizontal grid lines

size units

some interesting units a "ch", the width of a character and "px". "rem" and "em" are relative to the diagonal size of characters and therefore correspond neither to the width nor height of characters

box model

box-sizing border-box

* {box-sizing: border-box;}

when using this, the widths and heigths of objects can be expressed as percentages of parent element sizes. without it, padding and border are separate values and not included in the width/height properties and percentages set for them


use a limited color set. this can make things look consistent and being more easily recognised as belonging to the same site. keep a minimum contrast ratio between foreground and background color


you could use the hsl color notation because it has separate values for hue, luminance and saturation, which can make relative colors easier to manage compared to rgb or hex notation. questions like "create a version of #b42ca9 that is 10% lighter" or "#b42ca9 with 7% more saturation" are easy to answer

there are disadvantages. basically it trades exactness for ease-of-use, and this to a considerable degree

notation: hsl(hue, saturation-percent, luminance-percent)

hsl(40, 0%, 15%)

property order

introducing property order introduces a new possible error: wrong property order

if you feel the need to, you could order properties alphabetically, since almost everyone knows the order of the alphabet well. this should allow for some possible skipping of multiple irrelevant lines when reading

using other property orders is popular but often inefficient because it requires every developer to memorise a new order and usually some category for every property there is, and requires the effort necessary to maintain that order

tags: start document guide computer development css