Cartoon Edmund

Home

Calendar

Contact

Knight Vision

Sitemap



Edmund J. Sutcliffe
Thoughtful Solutions, Creatively Implemented and Communicated

Edmund's CSS Quick Reference
Click here for a printable version of this page.

Linked Stylesheets

<HEAD>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="
stylesheetname.css">
</HEAD>

The use of the above allows for re-useable stylesheets among web pages to give a corporate image to your site, with the least amount of work.
The information in the file named in the HREF tag is the same as what would be placed between <STYLE> </STYLE> tags in the head.

Embeded Stylesheets

<HEAD>
<STYLE>
<!--
H1 {font-size:24pt; font-family:arial}
H2 {font-size:18pt; font-family:arial; font-style:italic}
P {font-size:12pt; font-family:arial}
#ID {font-color:#ffaa66; font-size:10pt}
.CLASS {font-style:italic}

-->
</STYLE>

NOTE the use of <!-- and --> HTML comment tags. These are used to prevent older web browsers from displaying the information between the <STYLE> </STYLE> tags as text on the web page.

Style syntax;
tag {attribute:value; attribute2:value2; ....}

Inline Style

<H1 STYLE="font-size:24pt; font-family:Arial">This is my Title</H1>

The use of inline styles can be placed inside most tags within an HTML document.

Quick Reference Chart

Attribute Some Values Example
font-size points(pt)
pixels(px)
inches(in)
{font-size: 14px}
font-family arial
courier
verdana
comic sans verdana
{font-family: "Times New Roman", Arial}
font-weight medium
bold
{font-weight: bold}
font-style normal
italic
{font-style: italic}
font-color

#FFFFFF
red
#000000

{font-color:#ffcc00}
line-height points(pt)
pixels(px)
inches(in)
{line-height: 16px}
color #FFFFFF
red
#00F
{color: #000000}
text-decoration none
underline
line-through
{text-decoration: overline}
margin-left
margin-right
points(pt)
pixels(px)
inches(in)
{margin-right: 10%}
text-align left
center
right
{text-align: center}
text-indent points(pt)
pixels(px)
inches(in)
{text-indent: 0.75in}
background #FFFFFF
red
#00F
{background: purple}
top
left
0
50
{top:5}
{left:10}
position relative
absolute
{position:relative}


Cartoon Edmund

Quick Ref

Tech Tips

Travel Tips

Tech News

Images