CSS Style Sheets
Consistent branding throughout your site
Keep the way you present your site clear and professional.
CSS or Cascading Style Sheets create a harmonious look and feel throughout your site by standardising the typography for all pages.
Style Sheets control all aspects of type, background, colours and other elements which will be directly related to the fonts and colours specified in your Branding Board.
How CSS Styling Works
You won't need to worry about adding formatting to the content you add to your web site. Just type as you would if sending a text message. The style sheet tells the browser how the text, buttons and other web site elements should look on every single page. CSS can also be used to change the size and position of elements so they look good in all screen widths and on all devices.
When we build your site, we use your Brand Board for style guidelines. Once we've mapped out your content inb a Wireframe, it is easier to decide how best to use your brand's colours to help guide the visitor 's journey through your site.
Colour Groups in Style Sheets
Your site elements can be grouped into elements of the same colour or shade to make it easier to change these elements en-masse. If you rebrand your business and the colours change, this makes it quick and easy to change the colours throughout the site.
Common CSS Style Sheet Elements
Most web sites have the following elements that are usually styled with a colour:
- Page Background
- Text
- Headings H1 – H6
- Page Hyperlinks and Breadcrumbs – including hover, visited and active
- Menu Background
- Menu Links - including hover, visited and active
- Table elements such as headers and alternate rows
- Block quotes
Font Groups used in styling
Most web sites use only two fonts. One for the main Headings and another for Text and sometimes the smaller headings to maintain legibility.
By varying the size, weight, colour and decoration of the fonts, we create a typographic hierarchy that works for search engines and visitors alike.
Reflecting your Brand
The fonts and colours used in your Branding Board determine how they will be used on the web site.
Pure black text on a white background can be quite hard on the eye so it is not uncommon for web designers to use an off-white background with dark-grey text or vice-versa.
This is one reason why we ask for your logo in vector format so we can more easily create a web version on a transparent background.
You will also see the usage in text format using the language used by CSS style sheets, for example:
- Headline Font (Roboto): h1-h6
- Text Font (Lato): body, p
- Text Colour (#000000): p, h1, h4, a:hover, footer bg
- Page Background Colour (#ffffff): body, footer p
- Main Colour (#xxxxxx): h2, h5, a:link
- Highlight Colour(#xxxxxx): h3, h6, a:visited
- Main Colour 25% BG: tr.odd, blockquote
- Underlined: a:hover, h5
- Font Weight Bold: h6
- Font Weight Light: h1, h3
CSS Animation and other fancy stuff
CSS Style Sheets can be used to animate elements or create transitions. This is a useful way of grabbing your visitor's attention when used in moderation. It can be used for interesting image effects using techniques that don't change the original image. If you see visual elements you like on a web site, a web designer can look at the code used to create them. Let your imagination run a little wild!
