HTML cheatsheet

My HTML for beginners cheat sheet.

Your weapons in HTML:

Paragraph Tag

<p> paragraph </p>

Anchor Tag

Creates a hyperlink

<a href="http://www.yoursite.com" title="your roll over tile for this link"> Your Site Name </a>

Image Tag

<img src="http://www.youimage.jpg" alt="your description"  width="" />

self closing tag ends in />

src is the source image can be realtive

alt is the description of the image for people that can not see the image

important to note that this alt tag DOES get read and has some importance for search engines but only if the image is a link

Break Tag

<br />

self closing tag that creates a line break.

better to avoid and up paragraphs with margins when possible

Ordered and Unordered Lists

<ol>

<li>One</li>

<li>Two</li>

<li>Three</li>

</ol>

Dividers

<div>

Your content here

</div>

How to apply style to tags

Can be on any tag even img and br heres a style on a div tag

<div style="color: red">My Red Text</div>

Apply to a span tag for inline hilighting

<span style="color: red;">My Red Text</span>

If you have a style defined in a style sheet you can just name the tag with that class

in you style sheet:

.myRedText{color: red;}

<div class="myRedText">My Red Text</div>

My Favorite CSS tricks

use margin: auto to center elements with a defined width

Clearing Hack
make a style class called "clear" like this:
.clear{clear:both;}
and use it on <br /> like <br class="clear" />
to clear a multi-column layout.

Quick multi column layout:
.column{float: left; width: 33%}
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>

Big Button Styles:
.button, .button:link, .button:visited{padding: 5px; display: block; text-align: center; background: #c52b2a; color: #fff; font-size: 1.8em; line-height: 2em;    border: double #c52b2a; margin: 10px;}
.button:hover, .button:active{background: #d3503a; cursor: pointer;}

For quick menus use lists!
use li{display: inline;}
ul{list-style:none;}
to get lists to show across the page.