HTML, Javascript, and CSS reference

I made this page to create a nice concise reference and help page for HTML, Javascript, and CSS (cascading style sheets) in order to create beautiful web pages! Enjoy!

Here's a page to test out and see examples of HTML colors (hex values), sizes for text (pixels), and font types!
HTML Test

Jump To:
HTML
Javascript
CSS

HTML WebMonkey HTML cheatsheet (tags, tables) Color codes (hex values)
Visit the above links for HTML reference.
Back to TOP

Javascript (with CSS)

Check out this great Javascript tutorial: Thau's JavaScript tutorial

Note: Javascript is case-sensitive!

To access the elements on your page, add either a 'class' or an 'id' to the tag name:
<span id='testId'> </span> <div class='classTest'>

Now you can access the elements in your javascript code, and change it's style or properties.I think you have to use the ID.
var myElement = document.getElementById("testId"); [Needs to be capitalized just right!]
myElement.style.clip = "rect(0px 50px 50px 20px)";
In IE, you can pass the Object to a javascript function instead of using getElementById. Dont use quotes when passing.

You can't access elements if they aren't there yet. Call your javascript in a function after page loads. Example:

<head>
< script language="JavaScript">
<!--
function onStart() {
	var element = window.document.getElementById('test');
	alert(element);  //This will display [object] if done correctly, or NULL if it doesnt exist.
	}
//-->
</script>
</head>
<body onLoad = 'onStart();'>

Once you have the element, you can change its style properties!
Add the quotes around the values just to be safe, except numbers.

element.style
.display = 'none' (disappear)
.display = '' (reappear)
.color = 'blue'
.fontFamily = 'Courier'
.fontSize = 50px;
.width = 100;
.height = 100;

If the element has both an ID and class
element.className = 'newClass' (Dynamically changing the whole style set!)

If the element is an image:
element
.width = 100;
.height = 100;

CSS

Check out this great tutorial if you are unfamiliar with CSS: Mulder's CSS tutorial
Excellent reference for CSS Here
Add either a 'class' or an 'id' to the tag name:
<span id='testId'> </span> <div class='classTest'>

And in your .css file you can define styles for those classes or ids:
For Class: div.classTest {FONT-SIZE: 35px;}
For ID: #testId {FONT-SIZE: 35px;}

Difference between DIV and SPAN:

The background color in a DIV will go to the edges of the page or table cell,

while in a Span it will only be behind the text.
Span is used Inline within a sentence.

In the right column I list the property and an example value, then list other possible values for that property indented on the next lines. If there's a ? then the value or item may not be supported anymore.

FONT	font-size: 5px (units can be px, pt, em, in, cm, mm, pc, ex) (also can use keywords: xx-small, x-small, small, medium, large, x-large, xx-large) (also can use relativity: smaller, larger or a percentage) font-family: "comic sans ms" or font-family: times, serif font-style: italic (other values: oblique, normal) font-weight: bold (other values: normal, lighter,bolder, or numerical value (nonbold = 400 and max=900)) font-variant: small-caps (?)
TEXT	color: red (can use a hex value, certain predefined color names, or rgb values) text-transform: uppercase (lowercase, capitalize, none) text-decoration: underline (overline, line-through, blink(?), none) text-indent: 1cm; (Probably can use other units as in font-size)
Background:	background: yellow; (or background-color:) (assign it a simple color or RGB value) background: url(pics/bg.jpg) repeat-X; (assign it a picture, specify which direction to repeat)
Positioning	position: absolute position: relative top: 100px left: 100px width: 100px height: 100px z-index: 10
Cursor display: (doesnt work in Netscape?)	cursor: hand (crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, test, wait, and help)
Div or Span specific(?)	border: thin solid red; (must have at least solid)
Display: none makes it invisible and does not affect layout	display: inline none no value means default-- visible
Visibility: hidden makes it invisible, but it still affects layout (takes up space)	visibility: visible hidden
Clip: displays only a certain rectangle of a picture. So far I can only get it to work after specifying the position using absolute positioning. See the hidden picture on the Puzzle Page. clip: rect(top,right,bottom, left); clip: rect(auto); (auto only works with IE)
Special: filter: glow(Color="red",Strength=5); [see the magic header on Magic Fun page]

The Quimod Zone

HTML, Javascript, and CSS reference