Integrated Search Marketing, Pay-per-Click, and business strategy.
   utilizing technologies usability web marketing portfolio/ resume faqs
html goodies
css goodies
javascript bag o' tricks
website evaluation
white space
newsletter writing
search engine optimization (SEO)
meta tags
branding YOU
Resume: Search Marketing
web portfolio
Article: WebSite Equals ROI
geodemographics
xml
using server side includes
designing store locators
anti-spam laws
 
  overview
  creating sub-classes
  css examples

css examples & resources

I've provided a master CSS Style Sheet you can use below. Just modify the properties contained within to suit your needs. If you want to simply copy it to your clipboard, click on the Copy To Clipboard button at the bottom. Then open up your favorite editor and hit Ctrl + P to paste the Master Style Sheet in.

If you aren't sure how to use then read my CSS overview page and study the writing CSS sub-classes pages first.

/* Begin master stylesheet */

H1
{
FONT-WEIGHT: BOLD;
FONT-SIZE: 16px;
COLOR: #000000;
FONT-FAMILY: arial, helvetica, verdana, sans serif;
MARGIN: 15px;
}

H2
{
FONT-WEIGHT: normal;
FONT-SIZE: 12px;
MARGIN-LEFT: 10px;
COLOR: #2b6fb5;
MARGIN-RIGHT: 12px;
FONT-FAMILY:"arial","helvetica", "verdana","sans serif";
TEXT-ALIGN: center
}

H3
{
FONT-WEIGHT: normal;
FONT-SIZE: 11px;
COLOR: #f5c98b;
TEXT-INDENT: 5px;
FONT-FAMILY: "verdana","arial","helvetica","sans serif"
}

H4
{
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
COLOR: #336699;
TEXT-INDENT: 5px;
FONT-FAMILY: verdana, helvetica, arial, "sans serif"
}

H5
{
BORDER-RIGHT: #fdf7df thin solid;
BORDER-TOP: #fdf7df thin solid;
FONT-WEIGHT: bold;
FONT-SIZE: 16px;
MARGIN-LEFT: 10px;
BORDER-LEFT: #fdf7df thin solid;
COLOR: #fdf7df;
TEXT-INDENT: 5px;
MARGIN-RIGHT: 10px;
BORDER-BOTTOM: #fdf7df thin solid;
FONT-FAMILY: verdana, helvetica, arial, "sans serif";
BACKGROUND-COLOR: #043263
}

H6
{
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #fdf7df;
FONT-FAMILY: verdana, helvetica, arial, "sans serif"
}

OL
{
FONT-SIZE: 12px;
MARGIN-LEFT: 60px;
COLOR: #36716b;
MARGIN-RIGHT: 5px;
FONT-FAMILY: verdana, helvetica, arial, "sans serif"
}

UL
{
FONT-SIZE: 12px;
MARGIN-LEFT: 60px;
COLOR: #340088;
MARGIN-RIGHT: 5px;
FONT-FAMILY: "verdana", "helvetica", "arial", "sans serif";
list-style-type: square;
/* image: url("../zipnet/images-old/10-tiny-ball.gif") */
}

P
{
FONT-SIZE: 12px;
COLOR: #363431;
MARGIN: 15px;
FONT-FAMILY: arial, helvetica, verdana, "sans serif"
}
/* Controls the links. */

/* Unvisited Link. */
a:link {
font-family: Arial;
font-size: 9pt;
font-weight: normal;
text-decoration: none;
color: #CC0000
}

/* Selected link. CRIMSON Red for web #C00000. */
a:active {
font-family: Arial;
font-size: 9pt;
font-weight: bold;
text-decoration: none;
color: #CC0000;
}

/* Visited link. MEDIUM-WARM gray. */
a:visited {
font-family: Arial;
font-size: 9pt;
font-weight: normal;
text-decoration: none;
color: #898989;
}

/* The link during a mouseover. GOLD for web.*/
a:hover {
font-family: Arial;
font-size: 9pt;
font-weight: normal;
text-decoration: none;
color: #F9BC53;
}


/* begin CSS sub-classes */
p.newsbulletin {font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
color: red;}

.special
{
FONT-WEIGHT: bold;
FONT-SIZE: 8pt! important;
COLOR: #4f7397;
FONT-FAMILY: arial,verdana,helvetica,"sans serif"

.smallnormal
{
FONT-WEIGHT: normal! important;
FONT-SIZE: 8pt! important;
COLOR: #c36c2a;
FONT-FAMILY: Arial,Verdana,Helvetica,sans-serif;
valign: bottom
}

.smallestnormal
{
FONT: 80% Arial,Verdana,Helvetica,sans-serif;
COLOR: #00254a
}

.smallernormal
{
MARGIN-TOP: 5pt;
FONT-WEIGHT: normal! important;
FONT-SIZE: 7pt;
MARGIN-BOTTOM: 3pt;
COLOR: #00254a;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}

.quote {font-family: "Trebuchet MS", "arial", "helvetica", "sans-serif";
font-style: oblique;
font-size: 9.5pt;
color: #083194;
margin: 0px;}

/* Uses a light blue (#33ccff) for color */
.first-letter {"Trebuchet MS", arial, helvetica, sans-serif;
font-size: 16px;
text-decoration: normal;
text-transform: capitalize;
color: #33ccff;
margin: 0px;}
/* Used for the text in the registration form */
.formtext {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
margin: 0px;}

.required {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
margin: 0px;
color: #083194;}
/* #083194 is a medium blue.*/

.verticalline {
border-right: thin solid;
border-width: 1px;
border-color: CCCCCC;
padding-right: 5px;
padding-left: 5px;}

/* End master stylesheet */





Need More Resources?

Then check out the following:

  • W3Schools - very good because you can test out your CSS code right there and get immediate feedback
  • HTML Goodies - very straight-forward tutorials even for the newest beginner
  • Glish.com - shows elegant website designs using CSS (pretty cool!)
  • HTML Help - discusses the technical structure and how to link CSS up to your website
 
© 2000-2007 StephanieCota.com  |  site map