CSS Styling Guidelines

1. All colour “hex values” are to be the exact values used in the design. Avoid using the “eyedropper” tool in Illustrator or Photoshop as it is not always accurate. Instead, double click the “fill” swatch box in Illustrator or Photoshop and copy the exact value from the hex field. Make sure to have the “Web Safe Colours” unticked and the correct colour selected before copying the value.
2. Avoid having two types of “hover” styles on links or buttons. For example, the background colour of a button can change colour on hover, but does not need an underline as well. Another example is on links. A link does not need to change colour when it shows an underline on hover. In WCAG compliant sites, a link can show an underline and disappears on hover. Also in WCAG, a button background colour can change in colour on hover.
3. Use both “margin/padding top OR bottom” and “line-height” when listing items. If only a “line-height” is used, the gap between two lines of text will be the same as the gap between list items. This makes it uneasy to identify the beginning of a list item.
4. If an element OR container appears vertically aligned centre in the design, make sure that it is vertically aligned centre in code as well.
5. Write as little CSS as possible. Avoid using too many “classes”. A good practice is to create a parent container and assign a CSS name to the container. Then use plain html tags to mark the elements inside the container.

Optimising Websites

1. Optimising for smartphones rule of thumb. Unless a design shows different, style the sides of a parent container to be 10 pixels away from the sides of the screen in both portrait and landscape orientation. For titles, headings and paragraph text, a 20-pixel distance from the edge is preferred for easier reading. This practice help make good use of screen real estate.
2. Remove the “Pinch & Zoom” function on smartphones. When a website is properly optimised for viewing on smartphones, then there is no need for this function. An exception can be for gallery images or maps where it is functionally beneficial.
3. For touch devices, buttons and links should have a minimum width and height of 30 pixels each side to accommodate for people with thick fingers.