How text Appears

Style Guide/Tricks for SGP pages


This is an h1 tag. Only use this for page titles.


This is an h2 tag. Use this when you want some bigger headings.


This is an h3 tag. Use this when you want a little bigger heading, but smaller than h2.


This is an h4 tag.


This is p tag text. This text is what more of what we are writing will be.


The next area is an unordered list. (I don’t believe there are any ordered lists needed for the site.

  • List Item One
  • List Item Two
  • List Item Three

The following is how to style blockquotes (including italics.)

“This is a quote.”

–Who the quote is from


The following is how to create a right-floated image

Info here– paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph


The following has code as to how to wrap an unordered list or blockquote around a right-floated image.

handshake

Why become a business partner?

  • Show your community involvement
  • Help get your customers and employees involved by joining other environmentally-responsible businesses
  • Show your support for sustainable agriculture in Sonoma County
  • Send a positive message to employees



The following is how to create a left-floated image

paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph


The following is how images and captions should be added to article pages.

paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph

****NOTE!!!! This is very important. If you are floating an image and it is the last thing at the bottom of the page, the background will not go all the way down!!!! This is because the style only follows the text area. So, what we need to do to get around this is add a (class=”clearfix”) and it will automatically bring extra space below the image! (See this paragraph’s html to see it in use!*****