|
|
This helpful aid references, explains, and demonstrates with examples how the CSS (cascading style sheet) is applied to the HTML code to more easily keep the uniform aesthetic of this website on every webpage.
You'll find the "Fresh.css" file in the root directory.
All pages start with at least this webpage formatting and meta data:
<html>
<head>
<title>Fresh Career Solutions - Blank</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="Fresh.css">
<meta name="copyright" lang="en-ca" content="(c) 2008-2009 Fresh Career Solutions">
<meta name="description" lang="en-ca" content="Janet Rowley ---------is a ------- and enjoys Burning Man, blah blah blah blah...">
<meta name="keywords" lang="en-ca" content="Janet Rowley, career, employment, job, job search, counsellor, facilitator, extraordinary">
<link rel="SHORTCUT ICON" href="http://www.FreshCareerSolutions.com/favicon.ico">
</head>
<body bgcolor="#331100">
<a name="Top"></a>
<div align="center">
CSS Business Colors
|
|
|
#330033 .purple (V Link)
|
#000000 .black
|
#660000 .burgundydark
|
#000066 .navy (Link)
|
#331100 .brown
|
#770000 .burgundy
|
#CC0000 .red (A Link)
|
#998877 .beige
|
#990000 .reddark
|
#EEEE99 .yellow
|
#CCCCBB .beigelight
|
#CC0000 .red (A Link)
|
#FFFFEE .ivory
|
#DDDDCC .beigeultralight
|
#FF0000 .redbright
|
#EEEEDD .ivorydark
|
#EEEEDD .ivorydark
|
#EEEEDD .ivorydark
|
H1 - 25px Times New Roman
bold reddark #990000
|
|
H2 - 20px Times New Roman
bold reddark #990000
|
|
H3 - 15px Times New Roman
bold reddark #990000
|
|
H4 - 25px Times New Roman
center bold reddark #990000
|
|
H5 - 20px Times New Roman
center bold reddark #990000
|
|
H6 - 15px Times New Roman
center bold reddark #990000
|
|
|
|
Outside tags this is the default text size, presented in a white table cell. All text needs to be in within P or H# tags to maintain the colour, size and 5px margins. |
All tags: sans-serif + 5px margin, except links
P - 11px, burgundy dark, #660000
P + B - bold
P + U - underline
EM - italics
<p class=px10> effected text </p>
More CCS class settings (some don't work):
center
justify justify
left
right
indent (20px)
line-through
underline (also U)
none
px8 (font size, sans-serif)
px9 (font size, sans-serif)
px10 (font size, sans-serif)
px11 (font size, sans-serif)
px12 (font size, sans-serif)
px12b (font size, sans-serif, bold)
px15 (font size, sans-serif, bold)
px20 (font size, sans-serif, bold)
px25 (font size, sans-serif, bold)
|
px10yellow (font size, yellow, #EEEE99)
px11yellow (font size, yellow, #EEEE99)
px12yellow (font size, yellow, #EEEE99)
px10ivory (font size, ivory, #FFFFEE)
px11ivory (font size, ivory, #FFFFEE)
px12ivory (font size, ivory, #FFFFEE)
px11ivorydark (font size, ivorydark, #EEEEDD)
px11beigeultralight (font size, beigeultralight, #DDDDCC)
px11beigelight(font size, beigelight, #CCCCBB)
px11beige (font size, beige, #998877)
|
px11beige (font size, beige, #998877)
px11brown (font size, brown, #331100)
px11black (font size, black, #000000)
px11burgundydark (font size, burgundydark, #660000)
px12burgundydark (font size, burgundydark, #660000)
px11burgundy (font size, burgundy, #770000)
px12burgundy (font size, burgundy, #770000)
px11reddark (font size, reddark, #990000)
px12reddark (font size, reddark, #990000)
px15reddark (font size, reddark, #990000)
px11red (font size, red, #CC0000)
px12red (font size, red, #CC0000)
px11redbright (font size, redbright, #FF0000)
px12redbright (font size, redbright, #FF0000)
px11purple (font size, purple, #330033)
px11navy (font size, navy, #000066)
A Hover - 11px, italics, red, #CC0000
A Link - 11px, blue, #000066
A Visited - 11px, purple, #330033
Sample Links:
www.FreshCareerSolutions.com/Includes/StyleGuide.htm#Top
http://www.Blank.com/
Example notes from WebMonkey:
<p class="red"> All of this text will be red. </p>
<p><span class="foo">This text is rendered foo-style</span> and this is not.
<div class="foo">
<p>The "foo" style will be applied to this text, and to <a href="page.htm">this text</a> as well.
</div>
<p style="font-size: 10pt; color: red">This text is rendered as red, 10-point type</p>
|
|
