This is an example Style Sheet to show logos, fonts (style & sizes), colours and other elements. It has been assembled for the project shown below, and will form the basis of the layout for your site.

Logo and Favicon

Logo

woocommerce-placeholder

The image above will be the logo on the header of all pages. Initial size is xxx x yyy but may be reduced to xxx x yyy when the header collapse on scrolling the page.

slider_pattern_dark

The image above is used as the Favicon, the little image shown on the tabs of browsers next to the webpage title. It is produced at 512 x 512 pixels to allow for retina devices but is typically shown at around 32px square. It may also be used on pages instead of the main logo image at various sizes where a reduced size square image is required.

Titles and Body Text

H1 Main Title in Montserrat (a Google font)

The text above is using the H1 tag. The text attributes are 700 Bold Regular and xx px high.

This text is using the Body Text style and is in a paragraph P tag. The rest of this paragraph is just filler text. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.

H2 is used for Section Titles (Raleway)

The text above is using the H2 tag. The text attributes are 400 regular and xx px high.

The style for these paragraphs of body text is Helvetica or Arial, or Sans and is set at xx px high.

This H3 style of title is used for sub-titles within sections (Oswald)

The text above is using the H3 tag. The text attributes are 700 Bold Italic at xx px high. It is transformed into ALL CAPITALS.

H4 is great to use as a contrasting title (Raleway)

The text above is using the H4 tag. The text attributes are 400 Regular and xx px high. This has been set to the same size as the H2 Tag but in a contrasting colour.

H5 Titles often used for List Headings (Oswald)

The text above is using the H5 tag. this has been set as a smaller and thinner version of the H3 tag. The text attributes are 400 regular and xx px high.

H6 title element is not often used. (Montserrat)

The text above is using the H6 tag. The text attributes are 400 Regular and xx px high. Transform into ALL CAPITALS.

Example Style Sheet

Colours

#000000 – BLACK

#FFFFFF – WHITE

#E3E3E3 – BACKGROUND

#5D5D5D – ALT BACKGROUND

#FF9900 – ACCENT

#98CB33 – BRAND Light

#008F1F – BRAND Medium

#39662B – BRAND Dark

Notes

this section contains any special notes which are specific requirements for styling in this project.

  • Site Title
  • Tag Line
  • Address
  • Phone
  • Contact e-Mail
  • Company Reg No.
  • VAT Nunber