HTML-CSS Reference - Jan Zumwalt

The most current version of this document (and many other references) can be found at NeatInfo.com/dev_notes/_cheat-sheets NeatInfo.
com/dev_notes/_cheat
by Jan Zumwalt - NeatInfo.com
Quick Reference
Syntax: HTML CLASS CLASS ID DIV SPAN
h1 { color:red; font-size:16pt; } .font1 { color:red; font-size:16pt; } h2.font1 { color:red; font-size:16pt; } #font1 { color:red; font-size:16pt; } <div>content...</div> <span>content...</span>
<h1>Hello World</h1> <span class=font1>Hello World</span> <h2 class=font1>Hello World</h2> <span id=font1>Hello World</span> <div class=font1>Hello World</div> <span class=font1>Hello World</span
Class Style Template

 { font-family : Arial; font-size : 12pt; line-height : 12pt; color : #000; text-decoration : none; text-align : left; background-color : #FFF; } <!-<!-<!-<!-<!-<!-<!-font style --> font size --> line spacing --> black --> no underline --> justification --> background color -->
Body Style Template

body {  volume : soft; \* margin *\ margin-top : 50pt; margin-bottom : 50pt; margin-left : 50pt; margin-right : 50pt; background-repeat : repeat; background-image : url(http://www.neatinfo.com/!-media/bg_starfield1.png); \* font *\ h1 { color : #f53; font-size:28pt; text-align:center; font-style:italic; h2 { color : #6cf; font-size:14pt; margin-bottom:3pt; text-align:left;} h3 { color : skyblue; font-size:10pt; margin-bottom:3pt; text-align:left;} h4 { color : #9f9; font-size:10pt; font-weight:normal; text-align:left;} a { text-decoration : none;} a:link { color : #ee6; font-weight:bold; } a:visited { color : #ee6; font-weight:bold; } a:active { color : burlywood;} a:hover { color : #9f9; font-weight:bold; } font-family : arial; font-size : 12pt; color : #cdf; }
Other Styles
h1 h2 h3 h4 a a:link a:visited a:active a:hover { { { { { { { { { color color color color text-decoration color color color color : : : : : : : : : #f53; font-size:28pt; text-align:center; #6cf; font-size:14pt; margin-bottom:3pt; skyblue; font-size:10pt; margin-bottom:3pt; #9f9; font-size:10pt; font-weight:normal; none;} #ee6; font-weight:bold; } #ee6; font-weight:bold; } burlywood;} #9f9; font-weight:bold; } font-style:italic; text-align:left;} text-align:left;} text-align:left;}
Common RGB Colors

blue blue blue brown brown brown green green green dark = #35a med = #8bc lite = #bef dark = #b85 med = #db8 lite = #fdb dark = #5a6 med = #6b8 lite = #7ca orange dark = #b50 orange med = #c85 orange lite = #fc8 purple dark = #a5c purple med = #a7d purple lite = #aaf red red red dark = #f55 med = #f88 lite = #fbb teal teal teal dark = #355 med = #388 lite = #3bb white white white grey grey grey black black black dark = #bbb med = #ddd lite = #fff dark = #666 med = #888 lite = #aaa dark = #000 med = #222 lite = #444
yellow dark = #bb5 yellow med = #cc8 yellow lite = #deb
NeatInfo.com - by Jan Zumwalt HTML / CSS Reference
Pg 2 of 77
June 20, 2012 Copyright 2005-2012
Table of Contents
QUICK REFERENCE ............................................................................................ 1
Class Style Template ...................................................................................................... 2 Body Style Template ...................................................................................................... 2 Other Styles ................................................................................................................... 2 Common RGB Colors ..................................................................................................... 2
TABLE OF CONTENTS ......................................................................................... 3 SYMBOLS USED ................................................................................................. 6 REDIRECT WITH HTML META TAGS ...................................................................... 6
Refresh meta http-equiv tag ............................................................................................ 6
REDIRECT WITH JAVASCRIPT ............................................................................... 6 REDIRECT WITH PHP ......................................................................................... 6 USING REFRESH HEADER ................................................................................. 7 3SAMPLE ONE - HTML FILE ................................................................................ 7 SAMPLE ONE - HTML FILE.................................................................................. 8 SAMPLE TWO - HTML FILE ................................................................................. 9 ALPHABETIZED HTML COMMANDS .................................................................... 10 HTML EVENTS ................................................................................................ 11 PARAGRAPHS & BREAKS .................................................................................. 11 SOUNDS .......................................................................................................... 11 FONTS ............................................................................................................ 12 FONT & BACKGROUND COLORS ........................................................................ 12 FONT SPECIAL CHARACTERS ............................................................................ 12 LINKS & URLS .................................................................................................. 13 IMAGES, MAPS, HR .......................................................................................... 13 OBJECTS ......................................................................................................... 13 CODE-BLOCK FORMATTING .............................................................................. 14 POSITION ........................................................................................................ 14 LISTS .............................................................................................................. 15 FORMS............................................................................................................ 16 GET METHOD .................................................................................................. 16 POST METHOD ................................................................................................ 17 <INPUT...> ...................................................................................................... 18 <INPUT ATTRIBUTE...> ...................................................................................... 18 CSS TABLES ................................................................................................... 28 COLORED TABLE SCHEMES .............................................................................. 29 ALL CSS BORDER PROPERTIES ........................................................................ 33 FRAMES .......................................................................................................... 34 SCRIPTS.......................................................................................................... 34
Pg 3 of 77
June 20, 2012 Copyright 2005-2012
EXAMPLES....................................................................................................... 34 HTML 5 FEATURES ......................................................................................... 35

New Markup Elements .................................................................................................. 35 New Media Elements .................................................................................................... 35 The Canvas Element .................................................................................................... 36 New Form Elements ..................................................................................................... 36 New Input Type Attribute Values ................................................................................... 36 Semantic Markup and Page Layout .............................................................................. 36
DRAWING IN HTML5 USING CANVAS ELEMENT ................................................... 38 AUDIO AND VIDEO SUPPORT ............................................................................. 39 AUDIO ............................................................................................................. 40 SUPPORT FOR OLDER BROWSERS...................................................................... 42
Summary ...................................................................................................................... 45
QUICK OVERVIEW OF CSS SYNTAX AND USE ..................................................... 46

What are Selectors html, class, id, div, span .............................................................. 46 HTML selectors ............................................................................................................ 46 CLASS selectors .......................................................................................................... 46 ID selectors .................................................................................................................. 46 DIV and SPAN selectors ............................................................................................... 46 Single and Multiline Properties / Comments .................................................................. 47 Location inline, imbedded, external ............................................................................ 47
HTML SELECTORS........................................................................................... 48 USING CLASS SELECTORS CONTROLLING GROUPS OF ELEMENTS ...................... 49 ID SELECTORS CONTROLLING SPECIFIC ELEMENTS .......................................... 50 INLINE STYLES ................................................................................................. 51 COMMON STYLES ............................................................................................ 52
Text Background Color ................................................................................................. 52 Adding a Border around text ......................................................................................... 52 Round Corners ............................................................................................................. 53 Set New Margins .......................................................................................................... 54 CSS Column Formatting ............................................................................................... 54
ADVANCED ELEMENT STYLES ........................................................................... 56

Z-index and overlapping ............................................................................................... 56 :focus ........................................................................................................................... 56 :first-child ...................................................................................................................... 56 :nth-child() .................................................................................................................... 57 :nth-last-child().............................................................................................................. 58 :nth-of-type() ................................................................................................................. 58 :nth-last-of-type() .......................................................................................................... 58 :last-child ...................................................................................................................... 58 :first-of-type and :last-of-type ........................................................................................ 58 :only-child ..................................................................................................................... 59 :only-of-type ................................................................................................................. 59 :empty .......................................................................................................................... 59 :not() ............................................................................................................................ 59 :disabled & :enabled ..................................................................................................... 59 :checked....................................................................................................................... 59 :indeterminate............................................................................................................... 59
LINKS .............................................................................................................. 60
Different link colors ....................................................................................................... 60 Border Properties ......................................................................................................... 61
GUIDELINES..................................................................................................... 62
Pg 4 of 77
June 20, 2012 Copyright 2005-2012
STYLE PROPERTY ............................................................................................ 63 ALPHABETIZED HTML COMMANDS .................................................................... 64 HTML 16 NAMED COLORS................................................................................ 71 X11 COLOR NAMES (ALL BROWSERS SUPPORT THESE) ........................................ 72 IE 46 NAMED COLORS ...................................................................................... 73 W EBSAFE 210 COLORS .................................................................................... 74 BACK PAGE ..................................................................................................... 77
Html Documentation ..................................................................................................... 77 Html Tutorials ............................................................................................................... 77 CSS Documentation ..................................................................................................... 77 CSS Tutorials ............................................................................................................... 77
Pg 5 of 77
June 20, 2012 Copyright 2005-2012
Symbols Used
URL URL of an external file (or just file name if in the same directory) ? Arbitrary number (i.e. <H?> = <H1>, <H2>, <H3>, etc.) % Arbitrary percentage (i.e. <HR WIDTH=%> = <HR WIDTH=50%> ) *** Arbitrary text (i.e. ALT=*** means fill in with text) $$$$$$ Arbitrary hex (i.e. BGCOLOR=#$$$$$$ = BGCOLOR=#00FF1C ) ::: Arbitrary date (i.e. DATETIME=::: = 1994-11-05T08:15:30) @ Email address (i.e. mailto:@ = mailto:kevin@web.com etc.) ,,, Comma-delimited (i.e. COORDS=,,, = COORDS=0,0,50,50, etc.) Alternatives (i.e. ALIGN=LEFT|RIGHT|CENTER = pick one)
Redirect with HTML meta tags These go in the section of your html. Usually when you use this meta redirect method you should also use the javascript method, just to be safe.
Refresh meta http-equiv tag
Redirects to http://www.sample.com after 0 seconds.

<meta http-equiv="refresh" content="0;url=http://www.sample.com" />
Redirect with javascript These go in the section of your html. Basic javascript Redirect method Will redirect user to http://www.sample.com immediately
<script type="text/javascript"> window.location.href='http://www.sample.com'; </script>
Redirect after specific time period This will redirect to http://www.sample.com after 2 seconds
<body onload="javascript:setTimeout(function(){window.location.href='http://www.sample.c om'},2000);">
Redirect with PHP Using Location header

<?php header('Location:http://www.sample.com'); exit; exit(); ?>
Pg 6 of 77
June 20, 2012 Copyright 2005-2012
Using Refresh header

<?php header('Refresh: 0; URL=http://www.sample.com'); exit; exit(); ?>
Ultimate PHP method It redirects to a page specified by $url. $mode can be:
LOCATION: Redirect via Header Location REFRESH: Redirect via Header Refresh META: Redirect via HTML META tag JS: Redirect via JavaScript command
<?php function do_redirect($url,$mode) { if (strncmp('http:',$url,5) && strncmp('https:',$url,6)) { $starturl = ($_SERVER["HTTPS"] == 'on' ? 'https' : 'http') . '://'. (empty($_SERVER['HTTP_HOST'])? $_SERVER['SERVER_NAME'] : $_SERVER['HTTP_HOST']); if ($url[0] != '/') $starturl .= dirname($_SERVER['PHP_SELF']).'/'; $url = "$starturl$url"; } switch($mode) { case 'LOCATION': header("Location: $url"); exit; case 'REFRESH': header("Refresh: 0; URL=\"$url\""); exit; case 'META': exit; default: ?><script type="text/javascript"> window.location.href='<?=$url?>'; </script><? } exit; } ?>
Pg 7 of 77
June 20, 2012 Copyright 2005-2012
Sample One - HTML file

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. <html> <HEAD>   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="DESCRIPTION" content="What this page does, What this page is about"> <meta name="GENERATOR" content="Plain Text Editor"> <meta name="KEYWORDS" content="search words, or phrases, so, forth"> <meta name="RATING" content="General"> <meta name="ROBOTS" content="index, follow">
 <TITLE>Page Title</TITLE> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <LINK rel="shortcut icon" href="favicon.ico"> <embed src="http://www.neatinfo.com/!-- media/default.wav" autostart="true" loop="false" width="0" height="0"> 32. </embed> 33. 34.  35. <style type="text/css"> 36. BODY { SCROLLBAR-FACE-COLOR:#FF0000; SCROLLBAR-HIGHLIGHT-COLOR:#000000; 37. SCROLLBAR-SHADOW-COLOR:#000000; SCROLLBAR-3DLIGHT-COLOR:#FF0000; 38. SCROLLBAR-ARROW-COLOR:#000000; SCROLLBAR-TRACK-COLOR:#3241D4; 39. SCROLLBAR-DARKSHADOW-COLOR:#3241D4; 40. MARGIN-TOP:50pt; MARGIN-BOTTOM:50pt; MARGIN-LEFT:50pt; MARGIN-RIGHT:50pt; 41. BACKGROUND:WHITE; BACKGROUND-REPEAT:REPEAT; BACKGROUND-IMAGE:URL(default.jpg); 42. FONT-FAMILY:ARIAL; FONT-SIZE:12PT; COLOR:BLACK; 43. VOLUME:SOFT; 44. } 45. H1 {COLOR:RED; FONT-SIZE:28PT; TEXT-ALIGN:CENTER; font-style:italic;} 46. H2 {COLOR:BLUE; FONT-SIZE:18PT; TEXT-ALIGN:CENTER;} 47. H3 {COLOR:NAVY; FONT-SIZE:14PT; TEXT-ALIGN:LEFT;} 48. A {TEXT-DECORATION: NONE;} 49. A:LINK {COLOR:NAVY; font-style:italic;} 50. A:VISITED {COLOR:GREEN;} 51. A:ACTIVE {COLOR:NAVY;} 52. A:HOVER {FONT-WEIGHT:BOLD; COLOR:RED; FONT-SIZE:95%; TEXT-DECORATION: underline overline;} 53. </style> 54. 55.  56. <BODY style="font-family:arial;"> 57. <H1>H1 Hello World!</H1> 58. <H2>H2 Is anybody there?</H2> 59. <H3>H3 This is all I have to say...</H3> 60. <a href="http://www.neatinfo.com/">Here is a HREF URL link.</a><br /><br /> 61. <a href="http://www.neatinfo.com/"><img src="http://www.neatinfo.com/test.jpg" border="0"><br>Here is a linked image.</a> 62. <form> 63. <input type="button" value="Button Link" onClick="window.location='http://www.neatinfo.com'" /> 64. </form> 65. 66. </BODY> 67. </HTML>
Pg 8 of 77
June 20, 2012 Copyright 2005-2012
Sample Two - HTML file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD><TITLE>Shell Exercise</TITLE> <META NAME="keywords" CONTENT="HTML, headings, HTML tutorial"> <META NAME="description" CONTENT="How to use paragraphs, line breaks, and headings in HTML."> </HEAD> <BODY>  <BR/> <H1><CENTER>Hello World!</CENTER></H1> </BODY> </HTML>
Pg 9 of 77
June 20, 2012 Copyright 2005-2012
Alphabetized HTML Commands

 comment <!DOCTYPE> the document type <a> anchor <abbr> abbreviation <acronym> acronym <address> address element <applet> Deprecated. applet <area> area inside an image map <b> bold text <base> base URL all page links <basefont> Deprecated. base font <bdo> the direction of text display <big> big text <blockquote> indent <body> the body element <br> Inserts a single line break <button> push button <caption> table caption <center> Deprecated. centered text <cite> citation <code> code text (formatted txt) <col> attributes for table columns <colgroup> groups of table columns <dd> definition description <del> deleted text <dir> Deprecated. directory list <div> section in a document <dfn> definition term <dl> definition list <dt> definition term <em> emphasized text <fieldset> fieldset <font> Deprecated see style, font size, select font, etc <form> form <frame> sub window (a frame) <frameset> set of frames <h1> to <h6> header 1 to header 6 <head> information about the document <hr> horizontal rule <html> html document <i> italic text <iframe> inline sub window (frame) <img> image <input> input field <ins> inserted text <isindex> Deprecated single-line input field <kbd> keyboard text <label> label for a form control <legend> title in a fieldset <li> list item <link> resource reference <map> image map <menu> Deprecated. menu list <meta> meta information <noframes> noframe section <noscript> noscript section <object> embedded object <ol> ordered list <optgroup> option group <option> option in a drop-down list <p> paragraph <param> parameter for an object <pre> preformatted text <q> short quotation <s> Deprecated. strikethrough text <samp> sample computer code <script> script <select> selectable list <small> small text <span> section in a document <strike> Deprecated. strikethrough text <strong> strong text <style> css style definition <sub> subscripted text <sup> superscripted text <table> table <tbody> table body <td> table cell <textarea> text area <tfoot> table footer <th> table header <thead> table header <title> the document title <tr> table row <tt> teletype text, similar to <code> and <pre> <u> Deprecated. underlined text <ul> unordered list <var> variable, usually same as italics <xmp> Deprecated use code instead
Pg 10 of 77
June 20, 2012 Copyright 2005-2012
HTML Events
onload onunload onclick ondblclick onmousedown onmouseup onmouseover onmousemove onmouseout onfocus onblur onkeypress onkeydown onkeyup onsubmit onreset onselect onchange occurs after the window or all frames within a frameset have loaded. occurs when the user agent removes a document from a window or frame. triggered when the mouse button is clicked over the element. occurs when the pointing device button is double clicked over an element. triggered when the mouse button is pressed over the element. occurs when the pointing device button is released over an element. triggered when the mouse is moved onto the element. occurs when the pointing device is moved while it is over an element. triggered when the mouse is moved away from the element. when an element receives focus from the pointing or tabbing device. triggered when an element loses focus of pointing or tabbing device. occurs when a key is pressed and released over an element. triggered when a key is pressed down over the element. occurs when a key is released over an element. triggered when a form is submitted. occurs when a form is reset. triggered when a user selects some text in a text field. occurs when a control loses input focus and its value was changed.
Paragraphs & Breaks

Paragraph Align Text Justify Text Line Break Clear Textwrap No Break Word Break <P></P> (closing tag often unnecessary) <P ALIGN=LEFT|CENTER|RIGHT></P> <P ALIGN=xxx></P> (xxx = left, right, center, justify) <BR> (a single carriage return) <BR CLEAR=LEFT|RIGHT|ALL> <NOBR></NOBR> (prevents line breaks) <WBR> (where to break a line if needed)
Sounds
Background Sound <BGSOUND SRC=*** LOOP=?|INFINITE>
Pg 11 of 77
June 20, 2012 Copyright 2005-2012
Fonts
Comment Heading Align Heading Bold Emphasis Strong Italic Underline Strikeout Strikeout Subscript Superscript Typewriter Preformatted Preformatted Width Center Blinking Font Size Change Size Change Size Change Size Point size Weight Base Font Size Font Color Font family  (not displayed by the browser) <H?></H?> <h1></h1> ... <h7></h7> <H? ALIGN=LEFT|CENTER|RIGHT></H?> <B></B> <EM></EM> Font style = italic <STRONG></STRONG> Font style = bold <I></I> <U></U> (not widely implemented) <STRIKE></STRIKE> (not widely implemented) <S></S> (not widely implemented) <SUB></SUB> <SUP></SUP> <TT></TT> (displays in monospaced font) <PRE></PRE> (display text spacing as-is) <XML></XML> (works when <pre> does not) <PRE WIDTH=?></PRE> (in characters) <CENTER></CENTER> (for both text and images) <BLINK></BLINK> (the most derided tag ever) <FONT SIZE=?></FONT> (ranges from 1-7) <FONT SIZE=+$></FONT> $= ranges from 1-7 <FONT SIZE=+?></FONT> increase or decrease relative size <big></big>, <small></small> increase or decrease font size <FONT POINT-SIZE=?></FONT> <FONT WEIGHT=?></FONT> 100to900, normal=400, bold=700 <BASEFONT SIZE=?> (from 1-7; default is 3, or 100to900,) <FONT COLOR=#$$$$$$|name></FONT> <FONT FACE=name></FONT>
Font & Background Colors

Background Tiled <BODY No tiling <BODY Watermark <BODY Background Color<BODY Text Color <BODY Link Color <BODY Visited Link <BODY Active Link <BODY BACKGROUND=URL> or <BODY BACKGROUND:URL(file.ext);> BACKGROUND:URL(file.ext) no-repeat;> BGPROPERTIES=FIXED> BGCOLOR=#$$$$$$> (order is red/green/blue) TEXT=#$$$$$$> LINK=#$$$$$$> VLINK=#$$$$$$> ALINK=#$$$$$$>
Font Special Characters

Special Character < > & Registered TM Copyright Non-Breaking Spc Wide space Medium space Thin space Small dash Large dash &????; (where ? is the ISO 8859-1 code) < > & " ® © &emsp; &ensp; &ndash &mdash or or or 0r or or < > & " ® ©
the width of m the width of n thin space or – or —
Pg 12 of 77
June 20, 2012 Copyright 2005-2012
Links & Urls

Redirection URL of This File Base Window Name Relationship Linked File Link Something Link Image Link to <META HTTP-EQUIV=Refresh CONTENT=?; URL=URL> <BASE HREF=URL> (must be in header) <BASE TARGET=***>(must be in header) <LINK REV=*** REL=*** HREF=URL> (in header) <LINK TYPE=*** SRC=***></LINK> <A HREF=URL></A> <A HREF=URL><image src=path or URL border=0>text title</A> <A HREF=URL#***></A> (if in another document) <A HREF=#***></A> (if in current document) Target Window <A HREF=URL TARGET=***></A> On Click <A HREF=URL ONCLICK=***></A> (Javascript) Mouseover <A HREF=URL ONMOUSEOVER=***></A> (Javascript) Mouse out <A HREF=URL ONMOUSEOUT=***></A> (Javascript) Link to Email <A HREF=mailto:@></A> Specify subject <A HREF=mailto:@?SUBJECT=***></A> (use a real ?) Define Location <A NAME=***></A> <a style=text-decoration:none; href=...> turns off link underlining
Images, Maps, HR
Display Image Alignment Alignment Alternate Dimensions <IMG SRC=URL> <IMG SRC=URL ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> <IMG SRC=URL ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM> <IMG SRC=URL ALT=***> (if image not displayed) <IMG SRC=URL WIDTH=? HEIGHT=?> (in pixels) <IMG SRC=URL WIDTH=% HEIGHT=%> (as percentage) Border <IMG SRC=URL BORDER=?> (in pixels) Runaround Space <IMG SRC=URL HSPACE=? VSPACE=?> (in pixels) Low-Res Proxy <IMG SRC=URL LOWSRC=URL> Imagemap <IMG SRC=URL ISMAP> (requires a script) Imagemap <IMG SRC=URL USEMAP=URL> Movie Clip <IMG DYNSRC=*** START=*** LOOP=?> Client-Side Map <MAP NAME=***></MAP> (describes the map) Map Section <AREA SHAPE=DEFAULT|RECT|CIRCLE|POLY COORDS=,,, HREF=URL|NOHREF> Marquee <MARQUEE></MARQUEE> Horizontal Rule <HR> Alignment <HR ALIGN=LEFT|RIGHT|CENTER> Thickness <HR SIZE=?> (in pixels) Width <HR WIDTH=?> (in pixels) Width Percent <HR WIDTH=%> (as a percentage of page width) Solid Line <HR NOSHADE> (without the 3D cutout look)
Objects
Embed Object Object Size Object Parameters Searchable Prompt Send Search Bidirect Off <EMBED SRC=URL> (insert object into page) <EMBED SRC=URL WIDTH=? HEIGHT=?> <OBJECT></OBJECT> <PARAM> <ISINDEX> (indicates a searchable index) <ISINDEX PROMPT=***> (text to prompt input) <A HREF=URL?***></a> (use a real question mark) <BDO DIR=LTR|RTL></BDO> (for certain character sets)
Pg 13 of 77
June 20, 2012 Copyright 2005-2012
Code-Block Formatting
Note: <div> vs <span> The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag includes a paragraph break, because it is defining a logical division in the document. <div> tag also gives you the ability to name sections to be acted on by style sheets or Dynamic HTML.
Comment Heading Align Heading Division Align Division Defined Content Block Quote Quote Citation Citation Code Sample Output Keyboard Input Variable Definition Author's Address Large Font Size Small Font Size Insert Time of Change Comments Delete Time of Change Comments Acronym Abbreviation
 (not displayed by the browser) <H?></H?> <h1></h1> ... <h7></h7> <H? ALIGN=LEFT|CENTER|RIGHT></H?> <DIV></DIV> <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV> <SPAN></SPAN> <BLOCKQUOTE></BLOCKQUOTE> (usually indented) <Q></Q> (for short quotations) <Q CITE=URL></Q> <CITE></CITE> (usually italics) <CODE></CODE> (pre formated, for source code listings) <SAMP></SAMP> <KBD></KBD> <VAR></VAR> <DFN></DFN> (not widely implemented) <ADDRESS></ADDRESS> <BIG></BIG> increases font size <SMALL></SMALL> decreases font size <INS></INS> (marks additions in new version) <INS DATETIME=:::></INS> <INS CITE=URL></INS> <DEL></DEL> (marks deletions in new version) <DEL DATETIME=:::></DEL> <DEL CITE=URL></DEL> <ACRONYM></ACRONYM> <ABBR></ABBR>
Position
Multi-Column Column Gutter Column Width Spacer Spacer Type Size Dimensions Alignment Layer Name Location Rel. Position Source File Stacking Stack Position Dimensions Clipping Path Visible? Background Color Inline Layer Alt. Content <MULTICOL COLS=?></MULTICOL> <MULTICOL GUTTER=?></MULTICOL> <MULTICOL WIDTH=?></MULTICOL> <SPACER> <SPACER TYPE=HORIZONTAL|VERTICAL|BLOCK> <SPACER SIZE=?> <SPACER WIDTH=? HEIGHT=?> <SPACER ALIGN=LEFT|RIGHT|CENTER> <LAYER></LAYER> <LAYER ID=***></LAYER> <LAYER LEFT=? TOP=?></LAYER> <LAYER PAGEX=? PAGEY=?></LAYER> <LAYER SRC=***></LAYER> <LAYER Z-INDEX=?></LAYER> <LAYER ABOVE=*** BELOW=***></LAYER> <LAYER HEIGHT=? WIDTH=?></LAYER> <LAYER CLIP=,,,></LAYER> <LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER> <LAYER BACKGROUND=$$$$$$></LAYER> <LAYER BGCOLOR=$$$$$$></LAYER> <ILAYER></ILAYER> (same attributes as LAYER) <NOLAYER</NOLAYER>
Pg 14 of 77
June 20, 2012 Copyright 2005-2012
Lists
Unordered List Compact Bullet Type <UL><LI></UL> (<LI> before each list item) <UL COMPACT></UL> <UL TYPE=DISC|CIRCLE|SQUARE> (for the whole list) <LI TYPE=DISC|CIRCLE|SQUARE> (this & subsequent) Ordered List <OL><LI></OL> (<LI> before each list item) Compact <OL COMPACT></OL> Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list) <LI TYPE=A|a|I|i|1> (this & subsequent) Starting Number <OL START=?> (for the whole list) <LI VALUE=?> (this & subsequent) Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition) Compact <DL COMPACT></DL> Menu List <MENU><LI></MENU> (<LI> before each list item) Compact <MENU COMPACT></MENU> Directory List <DIR><LI></DIR> (<LI> before each list item) Compact <DIR COMPACT></DIR>
Pg 15 of 77
June 20, 2012 Copyright 2005-2012
Forms
Alignment Button Button Name Button Type Checked? Default Option Default Value Define Form Field Name Field Size Field Value File Upload Group elements Input Box Size Input Field Item Labeled Label Legend Max Length Multiple Choice Name of Box Name of List Option Option Group Option Value Selection List Size #rows Wrap Text <LEGEND ALIGN=TOP|BOTTOM|LEFT|RIGHT></LEGEND> <BUTTON></BUTTON> <BUTTON NAME=***></BUTTON> <BUTTON TYPE=FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET></BUTTON> <INPUT CHECKED> (checkboxes and radio boxes) <OPTION SELECTED> <BUTTON VALUE=***></BUTTON> <FORM ACTION=URL METHOD=GET|POST></FORM> <INPUT NAME=***> <INPUT SIZE=?> (in characters) <INPUT VALUE=***> <FORM ENCTYPE=multipart/form-data></FORM> <FIELDSET></FIELDSET> <TEXTAREA ROWS=? COLS=?></TEXTAREA> <INPUT TYPE=TEXT|PASSWORD|CHECKBOX|RADIO| <LABEL FOR=***></LABEL> <LABEL></LABEL> <LEGEND></LEGEND> (caption for field sets) <INPUT MAXLENGTH=?> (in characters) <SELECT MULTIPLE> (can select more than one) <TEXTAREA NAME=***></TEXTAREA> <SELECT NAME=***></SELECT> <OPTION> (items that can be selected) <OPTGROUP LABEL=***></OPTGROUP> <OPTION VALUE=***> <SELECT></SELECT> <SELECT SIZE=?></SELECT> <TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA>
Get Method
When you specify the method="GET" in your <form> tag, information is sent with key=value pairs of text or numbers. The first pair is preceded by the question mark ?, subsequent pairs are preceded with the & sign. These value pairs are sent right after the page URL and are VISIBLE TO THE USER. Passwords and other secure information should NOT be sent this way. Without special security measures, the user can cut and past the address line at the top of their browser and compromise the data or subroutine call. Certain Javascript calls have problems with POST, otherwise POST is preferred over GET calls. Forms do allow GET data to be assigned as a hidden data type. The data may also be sent as part of a link. Example: http://www.myweb.com/somedir/prog.php?var1=text1&var2=to34&var3=577 or <form name=test_form action=prog.php method=GET> <input type=text var1=Joe name=fname> <input type=text var2=Main name=street> <input type=text var3=123 name=address <input type=submit value=save> </form> The page receiving the value pairs must use a scripting language such as PHP or JAVASCRIPT to extract the data. The above example could be received by PHP with the following code. NeatInfo.com - by Jan Zumwalt HTML / CSS Reference June 20, 2012 Copyright 2005-2012
Pg 16 of 77
<?php $first = $_GET[var1]; $second = $_GET[var2]; $third = $_GET[var3]; ?>
// $first would equal Joe // $second would equal Main // $third would equal 123
JavaScript allows access to the above html form variables like this <script LANGUAGE=javascript> first = document.test_form.name second = document.test_form.street third = document.test_form.address or first = document.test_form[0] second = document.test_form[1] third = document.test_form[2] </script>
// first would equal Joe // second would equal Main // third would equal 123 // first would equal Joe // second would equal Main // third would equal 123
Post Method
The post method sends your data to the server behind the scenes by putting it on what computer folks call standard input. Because the purpose of POST is to keep the data hidden, it can not be include in the url address like the GET example above. You can only specify the method="POST" in your <form> tag. Form information is sent with key=value pairs HIDDEN TO THE USER, they are NOT visible on the address line. Passwords and other secure information SHOULD be sent this way. Certain Javascript calls have problems with POST, otherwise POST is preferred over GET calls. The page receiving the value pairs must use a scripting language such as PHP or Javascript to extract the data. The above example could be received by PHP with the following code. <?php $first = $_POST[var1]; $second = $_POST[var2]; $third = $_POST[var3]; ?>
// $first would equal Joe // $second would equal Main // $third would equal 123
JavaScript allows access to the form variables in the same manner that we used for GET... <script LANGUAGE=javascript> first = document.test_form.name second = document.test_form.street third = document.test_form.address or first = document.test_form[0] second = document.test_form[1] third = document.test_form[2] </script>
// first would equal Joe // second would equal Main // third would equal 123 // first would equal Joe // second would equal Main // third would equal 123
Pg 17 of 77
June 20, 2012 Copyright 2005-2012
<Input...>
<INPUT ...> creates most types of data entry fields on an HTML form,(<BUTTON ...>,<TEXTAREA ...>,<SELECT ...> also create some.) The TYPE attribute establishes what type of field the input is creating. The other <INPUT ...> attributes affect different types of inputs different ways (or not at all). So let's jump straight into the TYPE attribute and look at the different types of input fields.
<Input attribute...>
ACCESSKEY: shortcut key ALIGN: text flow around picture ALT: text if no picture AUTOCOMPLETE: If browser supports it BORDER: border around image CHECKED: checkbox/radio button DISABLED: field grayed out, unchangeable HEIGHT: height of image HSPACE: horiz dist btw pict & text LANGUAGE: script language to use LOWSRC: alternate low res picture text password MAXLENGTH: maximum num char NAME: name of field READONLY: field cannot be changed SIZE: width of text field SRC: URL of image TABINDEX: tab order TYPE: type of field VALUE: value of this field VSPACE: vert dist btw pict & text WIDTH: width of image See also events, ie. Mouse & keyboard
Creates a single-line text input control. Like "text", but the input text is rendered in such a way as to hide the characters (e.g., a series of asterisks). This control type is often used for sensitive input such as passwords. Note that the current value is the text entered by the user, not the text rendered by the user agent.
Application using password only gives light security protection. Although the password is masked by user agents from casual observers, it is transmitted to the server in clear text, and may be read by anyone with low-level access to the network.
Note.
checkbox radio submit image
Creates a checkbox. Creates a radio button. Creates a submit button. Creates a graphical submit button. The value of the src attribute specifies the URI of the image that will decorate the button. For accessibility reasons, authors should provide alternate text for the image via the alt attribute. When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=xvalue and name.y=y-value where "name" is the value of the name attribute, and x-value and yvalue are the x and y coordinate values, respectively. If the server takes different actions depending on the location clicked, users of non-graphical browsers will be disadvantaged. For this reason, authors should consider alternate approaches: Use multiple submit buttons (each with its own image) in place of a single graphical submit button. Authors may use style sheets to control the positioning of these buttons. Use a client-side image map together with scripting.
reset button hidden
Creates a reset button. Creates a push button. User agents should use the value of the value attribute as the button's label. Creates a hidden control.
Pg 18 of 77
June 20, 2012 Copyright 2005-2012
file
Creates a file select control. User agents may use the value of the value attribute as the initial file name.
<Button...>
Note: You can have more than one submit button in a form by using different names or values.
<button type=button value=pressed>Click Me!</button> <input type=submit name=Insert value=Insert> <form> <input type =button value=CodingForums onClick=window.location='http://www.codingforums.com /> </form> <input type=button value=Click me! onclick=JavaScript:alert('Thanks... I feel much better now!') /> <input type=submit value=Send me your name!> <BUTTON TYPE=SUBMIT><IMG SRC=../graphics/test.gif HEIGHT=97WIDTH=105 ALT=Starflower ALIGN=ABSMIDDLE><STRONG>Send It In!</STRONG></BUTTON>
Basic Form
<form name="input" action="process-form.php" method="post"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>
Checkbox
<form name="input" action="process-form.php" method="post"> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car<br /> <input type="submit" value="Submit" /> </form>
Pg 19 of 77
June 20, 2012 Copyright 2005-2012
<Mouse & Keyboard Events>

Event Attribute onblur onclick ondblclick onfocus onmousedown onmousemove onmouseout onmouseover onmouseup onkeydown onkeypress onkeyup Value script script script script script script script script script script script script Description when element loses focus on mouse click on mouse double-click when element gets focus when mouse button is pressed when mouse pointer moves when mouse pointer moves out of an element when mouse pointer moves over an element when mouse button is released when key is pressed when key is pressed and released when key is released
Standard Attribute accesskey class dir id lang style tabindex title xml:lang
Value character classname rtl ltr id language_code style_definition number text language_code
Description Specifies a keyboard shortcut to access an element Specifies a classname for an element Specifies the text direction for the content in an element Specifies a unique id for an element Specifies a language code for the content in an element Specifies an inline style for an element Specifies the tab order of an element Specifies extra information about an element Specifies a language code for the content in an element, in XHTML documents
Optional Attribute disabled name type
Value disabled name button reset submit text
Description Specifies that a button should be disabled Specifies the name for a button Specifies the type of a button
value
Specifies the underlying value of a button
Pg 20 of 77
June 20, 2012 Copyright 2005-2012
Pg 21 of 77
June 20, 2012 Copyright 2005-2012
Note: In the picture of the form, the indentation (margin offset) was done by inclosing the form elements in a blockquote, ie. <blockquote></blockquote>. Box Outline With Legend
<fieldset><legend>Fieldset</legend> <input type="text" name="name1" size="20"><br /> <input type="text" name="age" size="5"><br /> </fieldset>
Text<br>
Optional description <input name="text_box" size="20" type="text">
Access key character<br />

<u>D</u>escription <input name="text_box" size="20" type="text" accesskey="d">
Password<br />
<input name="password" size="20" value="*********" type="password">
No Input<br />
Read only: <input type=text size=10 name="code" value="Pre set" readonly/><br/> Greyed out: <input type=text size=10 name="noinput" value="Dim text" disabled/>
Radio Buttons<br />

<input <input <input <input name="radio_bt1" name="radio_bt2" name="radio_bt3" name="radio_bt4" value="Good" value="OK" value="Best" value="Best" type="radio" checked="checked"> I do not agree<br /> type="radio"> I may soon agree<br /> type="radio"> I want to agree<br /> type="radio"> I will never agree<br />
Radio Buttons In Table<br />

<table><tbody><tr><td> <input name="radio_bt1 value="01" type="radio"><font one</strong></font><br /></td> <td> <input name="radio2_bt2" value="02" checked="checked" two</strong></font><br /></td></tr> <tr><td> <input name="radio_bt3" value="03" type="radio"><font three</strong></font><br /></td> <td> <input name="radio_bt4" value="04" type="radio"><font four</strong></font></td></tr> </tbody></table> size="4"><strong>
type="radio"><font size="4"><strong>
size="4"><strong>
size="4"><strong>
Check Box<br />

<input name="check_box" Wind<br /> <input name="check_box" <input name="check_box" <input name="check_box" value="box1" type="checkbox" checked="checked"> Gone With the value="box2" type="checkbox"> Dr Zhivago<br /> value="box3" type="checkbox"> Ben Hur<br /> value="box4" type="checkbox" checked="checked"> The Rascals<br />
Textarea<br />
<textarea name="text_area" rows="7" cols="70"> ___ ____ ___ ____( \ .-' `-. / )____ (____ \___ / (O O) \ ___/ ____) (____ `----( ) )----' ____) (____ __________\ .____. /__________ ____) (______/ `-.____.-' \______) Text areas are unformatted! </textarea>
Pull Down List<br /> <select name="animal"> NeatInfo.com - by Jan Zumwalt HTML / CSS Reference Pg 22 of 77 June 20, 2012 Copyright 2005-2012
<option <option <option <option <option <option </select>
value="down1" selected="yes">Lion</option> value="down2">Giraffe</option> value="down3">Tigers</option> value="down4">Coyote</option> value="down5">Bears</option> value="down6">Horse</option>

Option Groups<br />

<select name="Choices"> <optgroup label="Level 1"> <option value="1a">Choice <option value="1b">Choice <option value="1c">Choice </optgroup> <optgroup label="Level 2"> <option value="2a">Choice <option value="2b">Choice <option value="2c">Choice </optgroup> <optgroup label="Level3"> <option value="3a">Choice <option value="3b">Choice </optgroup> </select> 1a</option> 1b</option> 1c</option>
2a</option> 2b</option> 2c</option>
3a</option> 3b</option>
Scrolling List<br />

<select name="scroll_list" size="5"> <option value="list1">Old</option> <option value="list2">Mc Donald</option> <option value="list3">Had</option> <option value="list4">a</option> <option value="list5">very</option> <option value="list6">large</option> <option value="list7">form</option> <option value="list8">over</option> <option value="list9">there!</option> </select>
Button<br />
<button type="submit" name="b1" value="bt_01" class="btn">Button text<br/>that's formatted</button>
File brouser<br />

Choose file: <input type="file" name="photo" size="40">
Hidden<br />
<input name="hidden" value="Yes there really is hidden information here" type="hidden"> <font color="#bfbfbf">Yes, you can have hidden information</font>
Submit & Reset<br />

<input value="Submit" type="submit"> <input value="Reset" type="reset">
Image action<br />

<input type=image name="navbar" src="Imagemap.gif" />
Pg 23 of 77
June 20, 2012 Copyright 2005-2012
Tables
Define Table Table Alignment Table Border Table Border Cell Spacing Cell Padding Desired Width Width Percent Table Color Table Frame Table Rules Border Color Dark Border Light Border Table Row Alignment Table Cell Alignment No linebreaks Columns to Span Rows to Span Desired Width Width Percent Cell Color Header Cell Alignment No Linebreaks Columns to Span Rows to Span Desired Width Width Percent Cell Color Table Body Table Footer Table Header Table Caption Alignment Column Columns Spanned Column Width Width Percent Group columns Columns Spanned Group Width Width Percent <TABLE></TABLE> <TABLE ALIGN=LEFT|RIGHT|CENTER> <TABLE BORDER></TABLE> (either on or off) <TABLE BORDER=?></TABLE> (you can set the value) <TABLE CELLSPACING=?> <TABLE CELLPADDING=?> <TABLE WIDTH=?> (in pixels) <TABLE WIDTH=%> (percentage of page) <TABLE BGCOLOR=$$$$$$></TABLE> <TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS| VSIDES|BOX|BORDER></TABLE> <TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE> <TABLE BORDERCOLOR=$$$$$$></TABLE> <TABLE BORDERCOLORDARK=$$$$$$></TABLE> <TABLE BORDERCOLORLIGHT=$$$$$$></TABLE> <TR></TR> <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> <TD></TD> (must appear within table rows) <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> <TD NOWRAP> <TD COLSPAN=?> <TD ROWSPAN=?> <TD WIDTH=?> (in pixels) <TD WIDTH=%> (percentage of table) <TD BGCOLOR=#$$$$$$> <TH></TH> (same as data, except bold centered) <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> <TH NOWRAP> <TH COLSPAN=?> <TH ROWSPAN=?> <TH WIDTH=?> (in pixels) <TH WIDTH=%> (percentage of table) <TH BGCOLOR=#$$$$$$> <TBODY> <TFOOT></TFOOT> (must come before THEAD> <THEAD></THEAD> <CAPTION></CAPTION> <CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT> <COL></COL> (groups column attributes) <COL SPAN=?></COL> <COL WIDTH=?></COL> <COL WIDTH=%></COL> <COLGROUP></COLGROUP> (groups column structure) <COLGROUP SPAN=?></COLGROUP> <COLGROUP WIDTH=?></COLGROUP> <COLGROUP WIDTH=%></COLGROUP>
Pg 24 of 77
June 20, 2012 Copyright 2005-2012
Pg 25 of 77
June 20, 2012 Copyright 2005-2012
Table Examples
Single line <body> <table style="border:1px solid #000000;" cellpadding="2" cellspacing="0"> <tr> <td style="border:1px solid #000000;">Hello</td> <td style="border:1px solid #000000;">World</td> </tr> <tr> <td style="border:1px solid #000000;">I'm</td> <td style="border:1px solid #000000;">here</td> </tr> </table> </body> </html>
My friends Larry Merged Curly Mo columns
<TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN=CENTER>My friends</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Mo</TD> </TR> </TABLE>
Custom size and format <TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12 WIDTH=100 HEIGHT=75 align=center> <TR> <TD>Ed</TD> <TD>Thomas</TD> <TD>Rick</TD> </TR> <TR align=center > <TD>Mo</TD> <TD>Larry</TD> <TD>Curly</TD> </TR> NeatInfo.com - by Jan Zumwalt HTML / CSS Reference Pg 26 of 77 June 20, 2012 Copyright 2005-2012
</TABLE>
Pg 27 of 77
June 20, 2012 Copyright 2005-2012
CSS Tables
border-style values: none: Defines no border dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border double: Defines two borders. The width of the two borders are the same as the border-width value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value
<table border="1" cellpadding="5" cellspacing="5" width="100%" style="background-color:yellow;border:3px dashed black;"> <tr> <th style="text-align:left">Table header</th> <th style="text-align:left">Table header</th> </tr> <tr> <td width="20%">Table cell 1</td><td>Table cell 2</td> </tr> </table>
Pg 28 of 77
June 20, 2012 Copyright 2005-2012
Colored Table Schemes
Pg 29 of 77
June 20, 2012 Copyright 2005-2012
<style type="text/css"> /* Note: IE9 currently does not support thes CSS color style, you must /* insert the colors into each individula <tr> or <td> tag. body { font-size : 12 pt; font-family : arial; color : #fff; background-color : #666; line-height : 12 pt; margin : 100 px; } /* yellow1 table style */ table.yellow1 table.yellow1 th table.yellow1 tr:nth-of-type(even) table.yellow1 tr:nth-of-type(odd) table.yellow1 td:nth-of-type(+1) /* yellow2 table style */ table.yellow2 table.yellow2 th table.yellow2 tr:nth-of-type(even) table.yellow2 tr:nth-of-type(odd) table.yellow2 td:nth-of-type(+1) /* yellow3 table style */ table.yellow3 table.yellow3 th table.yellow3 tr:nth-of-type(even) table.yellow3 tr:nth-of-type(odd) table.yellow3 td:nth-of-type(+1) /* red1 table style */ table.red1 table.red1 th table.red1 tr:nth-of-type(even) table.red1 tr:nth-of-type(odd) table.red1 td:nth-of-type(+1) /* red2 table style */ table.red2 table.red2 th table.red2 tr:nth-of-type(even) table.red2 tr:nth-of-type(odd) table.red2 td:nth-of-type(+1) /* red3 table style */ table.red3 table.red3 th table.red3 tr:nth-of-type(even) table.red3 tr:nth-of-type(odd) table.red3 td:nth-of-type(+1) /* green1 table style */ table.green1 table.green1 th table.green1 tr:nth-of-type(even) table.green1 tr:nth-of-type(odd) table.green1 td:nth-of-type(+1) /* green2 table style */ table.green2 table.green2 th table.green2 tr:nth-of-type(even) table.green2 tr:nth-of-type(odd) table.green2 td:nth-of-type(+1) /* green3 table style */ table.green3 */ */
/* white font color */
{ { { { {
border-collapse: collapse;} background-color: #e0d000;} background-color: #e5d590;} background-color: #d0d090;} background-color: #d0d060;}
/* /* /* /* /*
no border header color 1st data row 2nd data row 1st column
*/ */ */ */ */
{ { { { {
border-collapse: collapse;} background-color: #d92; } background-color: #eb4; } background-color: #ea2; } background-color: #da0; }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse;} background-color: #940; } background-color: #962; } background-color: #953; } background-color: #a60; }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse;} background-color: #e00; } background-color: #fa9; } background-color: #f87; } background-color: #e54; }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse;} background-color: #a00; } background-color: #a88; } background-color: #a66; } background-color: #a53; }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse;} background-color: #700; } background-color: #963; } background-color: #943; } background-color: #732; }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse;} background-color: #0c0; } background-color: #9c6; } background-color: #6c6; } background-color: #3b3; }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse;} background-color: #292; } background-color: #8a6; } background-color: #596; } background-color: #494; }
/* /* /* /* /*
*/ */ */ */ */
{ border-collapse: collapse;}
/* no border
*/
Pg 30 of 77
June 20, 2012 Copyright 2005-2012
table.green3 table.green3 table.green3 table.green3
th tr:nth-of-type(even) tr:nth-of-type(odd) td:nth-of-type(+1)
{ { { {
background-color: background-color: background-color: background-color:
#040; #684; #474; #263;
} } } }
/* /* /* /*
header color 1st data row 2nd data row 1st column
*/ */ */ */
/* blue1 table style */ table.blue1 table.blue1 th table.blue1 tr:nth-of-type(even) table.blue1 tr:nth-of-type(odd) table.blue1 td:nth-of-type(+1) /* blue2 table style */ table.blue2 table.blue2 th table.blue2 tr:nth-of-type(even) table.blue2 tr:nth-of-type(odd) table.blue2 td:nth-of-type(+1) /* blue3 table style */ table.blue3 table.blue3 th table.blue3 tr:nth-of-type(even) table.blue3 tr:nth-of-type(odd) table.blue3 td:nth-of-type(+1) /* grey1 table style */ table.grey1 table.grey1 th table.grey1 tr:nth-of-type(even) table.grey1 tr:nth-of-type(odd) table.grey1 td:nth-of-type(+1) /* grey2 table style */ table.grey2 table.grey2 th table.grey2 tr:nth-of-type(even) table.grey2 tr:nth-of-type(odd) table.grey2 td:nth-of-type(+1) /* grey3 table style */ table.grey3 table.grey3 th table.grey3 tr:nth-of-type(even) table.grey3 tr:nth-of-type(odd) table.grey3 td:nth-of-type(+1) /* grey4 table style */ table.grey4 table.grey4 th table.grey4 tr:nth-of-type(even) table.grey4 tr:nth-of-type(odd) table.grey4 td:nth-of-type(+1) /* grey5 table style */ table.grey5 table.grey5 th table.grey5 tr:nth-of-type(even) table.grey5 tr:nth-of-type(odd) table.grey5 td:nth-of-type(+1) /* grey6 table style */ table.grey6 table.grey6 th table.grey6 tr:nth-of-type(even) table.grey6 tr:nth-of-type(odd) table.grey6 td:nth-of-type(+1)
{ { { { {
border-collapse: collapse; background-color: #09e; background-color: #9be; background-color: #6af; background-color: #4ae;
} } } } }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse; background-color: #00e; background-color: #89e; background-color: #77e; background-color: #35e;
} } } } }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse; background-color: #006; background-color: #86a; background-color: #66a; background-color: #339;
} } } } }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse; background-color: #c0c0d0; background-color: #dddddd; background-color: #cfd6de; background-color: #d0d0d0;
} } } } }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse; background-color: #a0a0a0; background-color: #b0b0c0; background-color: #c0c0c8; background-color: #b0b0b0;
} } } } }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse; background-color: #808080; background-color: #8890a0; background-color: #a0a0a8; background-color: #909090;
} } } } }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse; background-color: #505050; background-color: #6a6a78; background-color: #808088; background-color: #606060;
} } } } }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse; background-color: #222; background-color: #555; background-color: #445; background-color: #333;
} } } } }
/* /* /* /* /*
*/ */ */ */ */
{ { { { {
border-collapse: collapse; background-color: #000; background-color: #445; background-color: #334; background-color: #223;
} } } } }
/* /* /* /* /*
*/ */ */ */ */
/* border1 - 1px table borders */ table.border1 { border-collapse: collapse; } table.border1 td, th { border: 1px #000 solid; } /* rounded corners, works w/all browsers */ .box {
/* no cell spacing /* border color
*/ */
Pg 31 of 77
June 20, 2012 Copyright 2005-2012
color: #aef; padding: 20px; font-size: 125%; font-family: arial; width: 200px; background-color: #aaa; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; } </style>
Pg 32 of 77
June 20, 2012 Copyright 2005-2012
All CSS Border Properties

Property border
Description Sets all the border properties in one declaration Values border-width border-style border-color border-bottom-width border-bottom-style border-bottom-color border-color border-style border-width color_name hex_number rgb_number transparent inherit border-left-width border-left-style border-left-color border-color border-style border-width border-right-width border-right-style border-right-color border-color border-style border-width none hidden dotted dashed solid double groove ridge inset outset inherit border-top-width border-top-style border-top-color border-color border-style border-width thin medium thick length inherit CSS 1
border-bottom
Sets all the bottom border properties in one declaration Sets the color of the bottom border Sets the style of the bottom border Sets the width of the bottom border Sets the color of the four borders
border-bottom-color border-bottom-style border-bottom-width border-color
2 2 1 1
border-left
Sets all the left border properties in one declaration Sets the color of the left border Sets the style of the left border Sets the width of the left border Sets all the right border properties in one declaration Sets the color of the right border Sets the style of the right border Sets the width of the right border Sets the style of the four borders
border-left-color border-left-style border-left-width border-right
2 2 1 1
border-right-color border-right-style border-right-width border-style
2 2 1 1
border-top
Sets all the top border properties in one declaration Sets the color of the top border Sets the style of the top border Sets the width of the top border Sets the width of the four borders
border-top-color border-top-style border-top-width border-width
2 2 1 1
The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
Pg 33 of 77
June 20, 2012 Copyright 2005-2012
Frames
Frame Document <FRAMESET></FRAMESET> (instead of <BODY>) Row Heights <FRAMESET ROWS=,,,></FRAMESET> (pixels or %) Row Heights <FRAMESET ROWS=*></FRAMESET> (* = relative size) Column Widths <FRAMESET COLS=,,,></FRAMESET> (pixels or %) Column Widths <FRAMESET COLS=*></FRAMESET> (* = relative size) Borders <FRAMESET FRAMEBORDER=yes|no></FRAMESET> Border Width <FRAMESET BORDER=?></FRAMESET> Border Color <FRAMESET BORDERCOLOR=#$$$$$$></FRAMESET> Frame Spacing <FRAMESET FRAMESPACING=?></FRAMESET> Define Frame <FRAME> (contents of an individual frame) Display Document<FRAME SRC=URL> Frame Name <FRAME NAME=***|_blank|_self|_parent|_top> Margin Width <FRAME MARGINWIDTH=?> (left and right margins) Margin Height <FRAME MARGINHEIGHT=?> (top and bottom margins) Scrollbar? <FRAME SCROLLING=YES|NO|AUTO> Not Resizable <FRAME NORESIZE> Borders <FRAME FRAMEBORDER=yes|no> Border Color <FRAME BORDERCOLOR=#$$$$$$> Unframed Content <NOFRAMES></NOFRAMES> (for non-frames browsers) Inline Frame <IFRAME></IFRAME> (takes same attributes as FRAME) Dimensions <IFRAME WIDTH=? HEIGHT=?></IFRAME> Dimensions <IFRAME WIDTH=% HEIGHT=%></IFRAME>
Scripts
Script Location Type Language Other Content Applet File Name Parameters Location Identifier Alt Text Alignment Size Spacing Server Script Examples <?php ... ?> <script language = javascript></script> <script type = text/javascript></script> <script type = "text/vbscript" src="http://sample.com/vbcalc"></script> <SCRIPT></SCRIPT> <SCRIPT SRC=URL></SCRIPT> <SCRIPT TYPE=***></SCRIPT> <SCRIPT LANGUAGE=***></SCRIPT> <NOSCRIPT></NOSCRIPT> (if scripts not supported) <APPLET></APPLET> <APPLET CODE=***> <APPLET PARAM NAME=***> <APPLET CODEBASE=URL> <APPLET NAME=***> (for references) <APPLET ALT=***> (for non-Java browsers) <APPLET ALIGN=LEFT|RIGHT|CENTER> <APPLET WIDTH=? HEIGHT=?> (in pixels) <APPLET HSPACE=? VSPACE=?> (in pixels) <SERVER></SERVER>
Pg 34 of 77
June 20, 2012 Copyright 2005-2012
HTML 5 Features
We will cover the new semantic markup, canvas for drawing and animation, audio and video support, and how to use HTML5 with older browsers.
New Markup Elements

New elements for better structure: Tag <article> <aside> <bdi> <command> <details> <summary> <figure> <figcaption> <footer> <header> <hgroup> <mark> <meter> <nav> <progress> <ruby> <rt> <rp> <section> <time> <wbr> Description Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site. For content aside from the content it is placed in. The aside content should be related to the surrounding content For text that should not be bound to the text-direction of its parent elements A button, or a radiobutton, or a checkbox For describing details about a document, or parts of a document A caption, or summary, inside the details element For grouping a section of stand-alone content, could be a video The caption of the figure section For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information For an introduction of a document or section, could include navigation For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings For text that should be highlighted For a measurement, used only if the maximum and minimum values are known For a section of navigation The state of a work in progress For ruby annotation (Chinese notes or characters) For explanation of the ruby annotation What to show browsers that do not support the ruby element For a section in a document. Such as chapters, headers, footers, or any other sections of the document For defining a time or a date, or both Word break. For defining a line-break opportunity.
New Media Elements

HTML5 provides a new standard for media content: Tag <audio> <video> <source> <embed> Description For multimedia content, sounds, music or other audio streams For video content, such as a movie clip or other video streams For media resources for media elements, defined inside video or audio elements For embedded content, such as a plug-in
Pg 35 of 77
June 20, 2012 Copyright 2005-2012
<track>
For text tracks used in mediaplayers
The Canvas Element

The canvas element uses JavaScript to make drawings on a web page. Tag <canvas> Description For making graphics with a script
New Form Elements

HTML5 offers more form elements, with more functionality: Tag <datalist> <keygen> <output> Description A list of options for input values Generate keys to authenticate users For different types of output, such as output written by a script
New Input Type Attribute Values

Also, the input element's type attribute has many new values, for better input control before sending it to the server: Type tel search url email datetime date month week time datetime-local number range color placeholder Description The input value is of type telephone number The input field is a search field The input value is a URL The input value is one or more email addresses The input value is a date and/or time The input value is a date The input value is a month The input value is a week The input value is of type time The input value is a local date/time The input value is a number The input value is a number in a given range The input value is a hexadecimal color, like #FF8800 Specifies a short hint that describes the expected value of an input field
Semantic Markup and Page Layout

Semantic elements describe their meaning or purpose clearly to the browser and to the developer. Contrast that with (for example) the <div> tag. The <div> tag defines a division or a section in an HTML document, but it doesnt tell us anything about its content or convey any clear meaning. <div> Developers commonly use IDs and/or class names with these <div> tags. This conveys more meaning to the developers, but unfortunately, it doesnt help browsers derive the purpose of that markup. <div id="header"> NeatInfo.com - by Jan Zumwalt HTML / CSS Reference Pg 36 of 77 June 20, 2012 Copyright 2005-2012
In HTML5, there are new semantically rich elements that can convey the purpose of the element to both developers and browsers. Here are a few of the new semantic elements in HTML5: article aside figcaption figure footer header hgroup mark nav section time Now, imagine this in the hands of someone good at CSS (which I am not).
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Title</title> <link href="css/html5reset.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <header> <hgroup> <h1>Header in h1</h1> <h2>Subheader in h2</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Menu Option 1</a></li> <li><a href="#">Menu Option 2</a></li> <li><a href="#">Menu Option 3</a></li> </ul> </nav> <section> <article> <header> <h1>Article #1</h1> </header> <section> This is the first article. This is <mark>highlighted</mark>. </section> </article> <article> <header> <h1>Article #2</h1> </header> <section> This is the second article. These articles could be blog posts, etc. </section> </article> </section> <aside> <section> <h1>Links</h1> <ul>
Pg 37 of 77
June 20, 2012 Copyright 2005-2012
<li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </section> <figure> <img width="85" height="85" src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" alt="Jennifer Marsman" /> <figcaption>Jennifer Marsman</figcaption> </figure> </aside> <footer>Footer - Copyright 2011</footer> </body> </html>
Drawing in HTML5 using Canvas element

Another new element in HTML5 is the <canvas> tag. Its just what it sounds likea blank surface for drawing. You need to use JavaScript to manipulate and draw on the canvas. You may want to give your canvas element an id attribute so you can programmatically access it from your JavaScript code (or if youre using jQuery and its the only canvas on the page, you could access it using $(canvas) without needing to name it). You can also (optionally) specify a height and a width for the canvas. Between the <canvas> and </canvas>, you can specify some text to display in browsers that dont support the canvas element. Here is a simple example of using the canvas to draw. (Im attempting to draw the flag of Scotland. Please forgive any inaccuracies.)
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas">Your browser does not support the canvas tag.</canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // Draw blue rectangle ctx.fillStyle = '#0065BD'; ctx.fillRect(0, 0, 125, 75); // Draw white X ctx.beginPath(); ctx.lineWidth = "15"; ctx.strokeStyle = "white"; ctx.moveTo(0, 0); ctx.lineTo(125, 75); ctx.moveTo(125, 0); ctx.lineTo(0, 75); ctx.stroke(); </script> </body> </html>
Heres what the code produces:
Pg 38 of 77
June 20, 2012 Copyright 2005-2012
Now lets walk through the code. First, I create the actual canvas and give it an ID of myCanvas. If this code were viewed in a browser that doesnt support the HTML5 canvas element, it would display Your browser does not support the canvas tag instead of drawing the flag. Next, I have a script. Remember, the canvas tag is only a container for graphics; you must use JavaScript to actually draw and render graphics on it. First, I grab a reference to the canvas using the myCanvas ID, and then get the canvass context which provides methods/properties for drawing and manipulating graphics on the canvas. I specified 2d to use a 2-dimensional context to draw on the page. Then, I draw the blue rectangle. I use fillStyle to specify the blue color. I use fillRect to draw the rectangle, specifying the size and position. Calling fillRect(0, 0, 125, 75) means: starting at position (0, 0)the upper left-hand cornerdraw a rectangle with width=125 pixels and height=75 pixels. Finally, I draw the white X on the flag. I first call beginPath to start the process of painting a path. I specify a lineWidth of 15 pixels (using the guess-and-check method of trying different values until it looked correct) and a strokeStyle of white to make the paths color white. Then I trace out the path using moveTo and lineTo. These methods position a cursor for you to draw; the difference is that moveTo moves the cursor without drawing a line and lineTo draws a line while moving. I start by moving to position (0, 0)the upper left-hand corner and then drawing a line to (125, 75)the lower right-hand corner. Then I move to position (125, 0)the upper right-hand cornerand draw a line to (0, 75)the lower left-hand corner. Finally, the stroke method actually renders these strokes.
Audio and Video Support

One of the big features that is new in HTML5 is the ability to support playing audio and videos. Prior to HTML5, you needed a plug-in like Silverlight or Flash for this functionality. In HTML5, you can embed audio and video using the new <audio> and <video> tags. From a coding perspective, the audio and video elements are very simple to use. (Ill give you a more in-depth look at their attributes below.) The audio and video elements are also supported in all major browsers (the latest versions of Internet Explorer, Firefox, Chrome, Opera, and Safari). However, the tricky part is that you need codecs to play audio and video, and different browsers support different codecs. Fortunately, this isnt a show-stopper. The support for audio and video was implemented in a brilliant way, where there is support to try several different file formats (the browser will try each and then drop down to the next one if it cant play it). As a best practice, you should provide multiple sources of audio and video to accommodate different browsers. You can also fallback to Silverlight or Flash. Finally, any text between the opening and closing tags (such as <audio> and </audio>) will be displayed in browsers that do not support the audio or video element. For example:
<audio controls="controls"> <source src="laughter.mp3" type="audio/mp3" /> <source src="laughter.ogg" type="audio/ogg" /> Your browser does not support the audio element. </audio>
Pg 39 of 77
June 20, 2012 Copyright 2005-2012
With this code, the browser will first try to play the laughter.mp3 file. If it does not have the right codecs to play it, it will next try to play the laughter.ogg file. If the audio element is not recognized at all by the browser, it will display the text Your browser does not support the audio element where the audio control should be. shou One caveat to audio and video: there is no built-in digital rights management (DRM) support; you have to built in implement this yourself as the developer. See this link from the W3C which explains their position. (If you have a need for DRM content, also check out the Silverlight DRM documentation, which might be an easier solution.) ght
Audio
First, lets look at <audio> in more detail.
<audio controls="controls"> <source src="laughter.mp3" type="audio/mp3" /> <source src="laughter.ogg" type="audio/ogg" /> Your browser does not support the audio element. </audio>
We already discussed the fallback effect of trying each source until it hopefully finds one that can be played. Note that there is a controls attribute. This will display audio playback controls including a play/pause button, the controls time, a mute button, and volume controls. In most situations, its good to display audio controls to the user; I hate visiting a website with sound and being unable to stop it, mute it, or turn it down. Dont you? Heres what the audio controls look like in Internet Explorer: es
The controls look different in different browsers. Here are what they look like in Chrome (with a song playing). The drop-down volume pops down when you hover over the sound icon on the far rig down right.
Here are the controls in Firefox (with a song paused). Like Chrome, it also has a pop-up volume control (not pop shown) when you hover over the sound icon on the far right.
Other fun attributes on the audio element include: Possible Values autoplay autoplay controls controls loop loop auto, preload metadata, Attribute Description Starts the audio playing as soon as its ready Displays audio playback controls on the page Causes audio to repeat and play again every time it finishes Determines whether to load the audio when the page is loaded. The value auto will load the audio, metadata will load only Pg 40 of 77 June 20, 2012 Copyright 2005-2012
Attribute
Possible Values none
Description
src
metadata associated with the audio file, and none will not preload audio. (This attribute will be ignored if autoplay is specified.) specifi (some URL) Specifies the URL of the audio file to play
So this code sample would not only display audio playback controls, but also start the audio playing immediately and repeat it over and over in a loop.
<audio controls="controls" autoplay="autoplay" loop="loop"> <source src="laughter.mp3" type="audio/mp3" /> <source src="laughter.ogg" type="audio/ogg" /> Your browser does not support the audio element. </audio>
If youd like to play around with the <audio> element yourself in your browser, there is a great Tryit Editor on yourself http://w3schools.com that allows you to edit some sample code and see what happens. Or try the How to add an HTML5 audio player to your site article.
Video Now, lets examine the <video> element. Collapse | Copy Code <video width="320" height="240" contr controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>
As we discussed above, the video element has support for multiple sources, which it will try in order and then fall down to the next option. Like audio, video has a controls attribute. Here is a screenshot of the video controls in Internet Explorer:
Other fun attributes of the video element include: her Possible Values audio muted autoplay autoplay controls controls height (value in Attribute Description Sets the default state of the audio (currently, muted is the only option) Starts the video playing as soon as its ready Displays video playback controls on the page Sets the height of the video player Pg 41 of 77 June 20, 2012 Copyright 2005-2012
Possible Values pixels) loop loop poster (some URL) auto, preload metadata, none src (some URL) (value in width pixels) Attribute
Description Causes video to repeat and play again every time it finishes Specifies the URL of an image to represent the video when no video data is available Determines whether to load the video when the page is loaded. The value auto will load the video, metadata will load only metadata associated with the video file, and none will not preload video. (This attribute will be ignored if autoplay is specified.) Specifies the URL of the video file to play Sets the width of the video player
Support for older browsers

Weve discussed a lot of cool new functionality in HTML5, including the new semantic elements, the canvas tag for drawing, and the audio and video support. You may think that this stuff is really cool, but you cant possibly adopt HTML5 when many of your users dont have HTML5-compatible browsers yet. Not to mention that the browsers that DO support HTML5 support different pieces of it; not all of the new HTML5 functionality is supported in all browsers and various features may be implemented differently. But there is a way to use the new features without breaking your site for users with older browsers. You can use polyfills. According to Paul Irish, a polyfill is a shim that mimics a future API, providing fallback functionality to older browsers. A polyfill fills in the gaps in older browsers that dont support the HTML5 functionality in your site. Learning to use polyfills will let you use HTML5 today without leaving behind users of older browsers. One way to get polyfill support is the JavaScript library Modernizr (but there are many polyfills available). Modernizr adds feature detection capability so you can check specifically for whether a browser supports (for example) the canvas element and provide a backup option if it doesnt. Lets walk through an example. Remember the code sample that I used when introducing semantic elements and page layout? We can use the Internet Explorer developer tools to see what this would look like in older versions of IE. In Internet Explorer, press F12 to access the developer tools.
Note that the Browser Mode (in the grey menu bar across the top) is currently set to IE9. Click on the Browser Mode, and from the resulting dropdown menu, select Internet Explorer 8 (which does not have HTML5 support).
Pg 42 of 77
June 20, 2012 Copyright 2005-2012
After I make this change and switch to a non tch non-HTML5-compatible browser, this is what my webpage looks like: compatible Although this looks like a monster problem to fix, its not actually that bad. The reason that this doesnt work is that IE8 doesnt recognize the new HTML5 elements that Im using, so it doesnt add them to the DOM, so you using, cant style them using CSS. However, just adding a reference to Modernizr (without making any other code changes!) will brute-force these brute elements into the DOM. Download it from http://www.modernizr.com/download/ and add a reference in the <head> section like so:
<head> <meta charset="utf-8" /> <title>Title</title> <link href="css/html5reset.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> rel=" <script src="script/jquery 1.6.2.min.js" type="text/javascript"></script> src="script/jquery-1.6.2.min.js" <script src="script/modernizr 2.0.6.js" type="text/javascript"></script> src="script/modernizr-2.0.6.js" </head>
I added two script references, one to jQuery and one to Modernizr. I dont actually need the jQuery reference at actually this point, but we will need it for the next script, so Im adding it now. Just this simple change now gets my site to this state in Internet Explorer 8:
Its not perfect, but that is pretty close to the original version that we see in Internet Explorer 9. Modernizr added version these new HTML5 elements that IE8 didnt understand into the DOM, and since they were in the DOM, we could style them using CSS.
Pg 43 of 77
June 20, 2012 Copyright 2005-2012
But Modernizr does more than that! Notice that one of the differences between our IE8 and IE9 versions of the webpage is that the IE9 version has nice rounded corners on the two articles and the figure, and the IE8 version doesnt. We can also use Modernizr to fix this.
<script type="text/javascript"> if (!Modernizr.borderradius) { nizr.borderradius) $.getScript("script/jquery.corner.js", function() { $("article").corner(); $("figure").corner(); }); } </script>
In this script, were checking the Modernizr object to see if there is support for borderradius (a CSS3 feature). If not, I use a jQuery script called jquery.corner.js (which is available for download at http://jquery.malsup.com/corner/ and requires that extra reference to jQuery which I made earlier). Then I simply call the corner method from that script on my articles and figures to give them rounded corners. OR, you can do this a slightly different way. Modernizr has an optional (not included) conditional resource loader called Modernizr.load(), based on Yepnope.js. This allows you to load only the polyfilling scripts that y Yepnope.js. your users need, and it loads scripts asynchronously and in parallel which can sometimes offer a performance boost. To get Modernizr.load, you have to include it in a custom build of Modernizr which you have to create at http://www.modernizr.com/download/; http://www.modernizr.com/download/; it is not included in the Development version. With Modernizr.load, we can write a script like this:
<script type="text/javascript"> Modernizr.load({ test: Modernizr.borderradius, nope: 'script/jquery.corner.js', callback: function () { $('article').corner(); $('figure').corner(); } }); </script>
In short, this implements the same functionality as our previous script. Modernizr.load first tests the Boolean previous property Modernizr.borderradius to see if it is supported. Then, nope defines the resources to load if test is false. Since IE8 doesnt support the CSS3 property borderradius, it will load the jquery. jquery.corner.js script. Finally, the callback specifies a function to run whenever the script is done loading, so we will call the corner method on my articles and figures as we did before. There is a brief tutorial on Modernizr.load at http://www.modernizr.com/docs/#load if you want to dive deeper.
Pg 44 of 77
June 20, 2012 Copyright 2005-2012
Now, by using either of those scripts, our Internet Explorer 8 version (which doesnt support HTML5) looks like this: Therefore, using polyfills and tools like Modernizr allow you to utilize new HTML5 functionality and still provide a good experience on older browsers as well. For more information, check out http://www.diveintohtml5.org/detect.html which describes in detail how Modernizr detects HTML5 features.
Summary
In this introduction to HTML5, we covered semantic markup, canvas, audio and video, and using HTML5 while retaining support for older browsers. But also note that theres a lot we didnt cover: microdata, storage, CSS3, etc.
Pg 45 of 77
June 20, 2012 Copyright 2005-2012
Quick Overview of CSS Syntax and Use
Remember:
HTML selectors are re-defined tags and may appear as often as desired. CLASS selectors are user-defined tags controlling groups and may appear many times. ID selectors are user-defined tags controlling a unique element and may appear only once. DIV selectors add a line break before it. SPAN selectors do not add a line break.
Syntax: HTML h1 { color:red; font-size:16pt; } <h1>Hello World</h1> CLASS .font1 { color:red; font-size:16pt; } <span class=font1>Hello World</span> ID #font1 { color:red; font-size:16pt; } <span id=font1>Hello World</span> DIV <div>content...</div> <div class=font1>Hello World</div> SPAN <span>content...</span> <span class=font1>Hello World</span> What are Selectors html, class, id, div, span
CSS selectors give control over how the elements in your web page look and act. Depending on which tool you use, you can affect many, just one, or a series (i.e odd/even) of elements. There are five basic operations that can be performed html, class, id, div, and span.
HTML selectors
HTML selectors are re-defined tags and may appear as often as desired. For example we can change the color and font size of the standard <h1> tag.
h1 {color:red; font-size:16pt;} /* tag selector */
CLASS selectors
Class selectors are user defined names and may appear as often as desired.
.font1 {color:red; font-size:16pt;} font1.h2 {color:red; font-size:16pt;} /* class with element definition */
Notice the period (stop) at the beginning.

ID selectors
ID selectors are user defined names, but may be used only once on a page.
Usually its element or unique location will be needed by some other tag.
#menuitem1 {color:red; font-size:16pt;} #menuitem1 h2 {color:red; font-size:16pt;} /* id with element definition */
DIV and SPAN selectors

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference Pg 46 of 77 June 20, 2012 Copyright 2005-2012
<Div> and <span> tags are identical except <div> tags insert a break <br> prior to the tag.
This is a<DIV Class = FontOne> div tag </DIV> and here is a <SPAN Class = FontOne> span tag. </SPAN>
Result This is a div tag and here is a span tag Notice the break before the div tag.
Single and Multiline Properties / Comments
Property values may either be single or multi line.

/*This is a comment*/ H1 {Color: Red; Font-weight: Bold;}
Here is the multiple line version:

H1 { Color: Red; /*This is a comment*/ Font-weight: Bold; }
Location inline, imbedded, external
Inline definitions a re placed directly inside tags.

<h1 style=color:red; font-size:16pt;>Hello</h1>
Imbedded styles go in the <head> section and are the most common.
<html> <head> <style type=text/css>
Style definitions go here

</style> </head> <body>
External definitions are located in text files that will be included in the html <head> section. They have the advantage that several programs can use the same external file. A sample test file named default.css could look like this
.font1 {color:red; font-size:16pt;}
Notice that no <style> tags are required The html page that uses it would have this
<head> <link rel=stylesheet type="text/css" href="default.css"> </head>
Pg 47 of 77
June 20, 2012 Copyright 2005-2012
HTML selectors
Here is a web page without any CSS.
<HTML> <HEAD> <TITLE>CSS Style Example</TITLE> </HEAD> <BODY> <h1>Nursery Rhyme</h1> <h2>Mary Had A Little Lamb</h2> <h3>First stanza</h3> <p> Mary had a little lamb,<br> Its fleece was white as snow;<br> And everywhere that Mary went,<br> The lamb was sure to go.</p> <h3>Second stanza</h3> <p> He followed her to school one day,<br> Which was against the rule;<br> It made the children laugh and play<br> To see a lamb at school.</p> </body> </HTML>
Now we add modest HTML styling.

<HTML> <HEAD> <TITLE>CSS Style Example</TITLE> <STYLE TYPE = "text/css"> body { font-family: arial; } p { font-style: italic; color: #059; } h1 { color: red; } h2 { color: blue; font-size:12pt } h3 { font-weight: normal; } </STYLE> </HEAD> <BODY> <h1>Nursery Rhyme</h1> <h2>Mary Had A Little Lamb</h2> <h3>First stanza</h3> <p> Mary had a little lamb,<br> Its fleece was white as snow;<br> And everywhere that Mary went,<br> The lamb was sure to go.</p> <h3>Second stanza</h3> <p> He followed her to school one day,<br> Which was against the rule;<br> It made the children laugh and play<br> To see a lamb at school.</p> </body> </HTML>
Pg 48 of 77
June 20, 2012 Copyright 2005-2012
Using Class Selectors controlling groups of elements

Classes are user defined tags that can be used as often as needed. To set up a Class, the code looks like this:
.ClassSelector {Property: Value}
Let us suppose that we need to use our normal <h3> tag somewhere else, but we need to customize how the stanza line looks. Just for fun we will watch the effects of defining the second verse with the same style. Here we go
<HTML> <HEAD> <TITLE>CSS Style Example</TITLE> <STYLE TYPE = "text/css"> body { font-family: arial; } p { font-style: italic; color: #059; } h1 { color: red; } h2 { color: blue; font-size:12pt } .stanza { font-size: 10pt; color: e60; font-weight: normal; } </STYLE> </HEAD> <BODY> <h1>Nursery Rhyme</h1> <h2>Mary Had A Little Lamb</h2> <h3>First stanza (regular h3)</h3> <p> Mary had a little lamb,<br> Its fleece was white as snow;<br> And everywhere that Mary went,<br> The lamb was sure to go.</p> <h3 class=stanza>Second stanza(stanza h3)</h3> <p class=stanza> He followed her to school one day,<br> Which was against the rule;<br> It made the children laugh and play<br> To see a lamb at school.</p> </body> </HTML>
Notice the original <h3> of the first stanza works as it normally would. But, the second stanza and text have picked up the attributes of the stanza class. It is important to notice that when we defined the .stanza class we did not modify the font style. So, while it changed the color and size of the text, it did not change the <h3> from normal or the <p> italic. The CLASS selector starts working a little different when we use them with the <DIV> and <SPAN> tags. In the next example we have used them around Marys name in the first stanza. Notice the different effects:
code... <h3>First stanza (regular h3)</h3> <p> <span class=stanza>Mary</span> had a little lamb,<br> Its fleece was white as snow;<br>
Pg 49 of 77
June 20, 2012 Copyright 2005-2012
And everywhere that <div class=stanza>Mary</div> went,<br> The lamb was sure to go.</p> code continues...
When we used the CLASS style with SPAN (the first MARY - purple arrow) everything worked as we would expect. However, using the CLASS style with DIV (second Mary red arrows) causes three things to happen that we might not have expected. 1. it caused a line break before the style took effect. 2. a line break occurred after it was done, really what it did was 3. text after the DIV reverted back to the default style and caused a line break. (notice the black text without italics) For the reasons just given, SPAN is usually used for small sections of text. DIV is usually used for major blocks of code such as the entire section of a menu or footer. Remember: DIV does strange things!
ID Selectors controlling specific elements

ID selectors allow us to identify a unique element on the web page. Remember that a CLASS can be used many times. But a ID may only be used one time on a page. You write an ID selector in exactly the same way that you use the Class selectors. The only difference is the spelling of the word CLASS vs ID.
<DIV ID = FontOne>Class Selector</DIV>
Why would we need an ID selector? A scripting language may want to cause something to happen such as a color to change or something to appear or disappear. The scripting language will control the page element by referring to its ID name. We now present a script that allows the title of our web page to either change its visibility (its there, we just wont see it), or to entirely removed from the html page (completely removed).
<HTML> <HEAD> <TITLE>CSS Style Example</TITLE> <STYLE TYPE = "text/css"> body { font-family: arial; } p { font-style: italic; color: #059; } h1 { color: red; } h2 { color: blue; font-size:12pt; } </STYLE> <script type="text/javascript"> // toggles visibility of element ID passed to this function, hidden/visible function toggleVisibility(x) { if(document.getElementById(x).style.visibility == "hidden" ) { document.getElementById(x).style.visibility = "visible"; } else { document.getElementById(x).style.visibility = "hidden"; } } // toggles existence of element ID passed to this function, added/removed from page function toggleExistance(x) {
Pg 50 of 77
June 20, 2012 Copyright 2005-2012
if(document.getElementById(x).style.display == "none" ) { document.getElementById(x).style.display = ""; } else { document.getElementById(x).style.display = "none"; } } </script> </HEAD> <BODY> <h1 ><div id="toggleMe" style="visibility: visible;display=''">Nursery Rhyme</div></h1> <h2>Mary Had A Little Lamb</h2> <h3>First stanza</h3> <p> Mary had a little lamb,<br> Its fleece was white as snow;<br> And everywhere that Mary went,<br> The lamb was sure to go.</p> <h3>Second stanza</h3> <p> He followed her to school one day,<br> Which was against the rule;<br> It made the children laugh and play<br> To see a lamb at school.</p> <a href="#" onclick="toggleVisibility('toggleMe');">[ Toggle Visibility ]</a>&emsp; <a href="#" onclick="toggleExistance('toggleMe');">[ Toggle Display ]</a> </body> </HTML>
When you click on one of the links at the bottom, it causes one of the javascript routines to be run and changes the visibility of the page title that we gave a ID=toggleme. Inline Styles We are going to write code that changes the color of a hyperlink based on whether the mouse is moved over it. The easiest way to do this is to add the style within the element on the page.
Inline Style
Create a new web page with a white background color. The HTML code in your editor should now look like this:
<html> <head> <title>Inline Style</title> </head> <body> <A Href = "http://www.example.com" onmouseover="style.color='Red'" onmouseout="style.color='Blue'"> Click Me Now!</A> </body> </html> or <html> <head> <title>Inline Style</title> <style> body { font-family: arial } a:link,a:visited,a:active,a:hover { text-decoration: none; } a:hover { font-weight:bold; font-size: 14pt } </style> </head> <body> <A Href = "http://www.example.com" onmouseover="this.style.color='Red'" onmouseout="this.style.color='Blue'"> Click Me Now!</A> </body>
Pg 51 of 77
June 20, 2012 Copyright 2005-2012
</html>
View it in a browser, and test it out by moving your mouse over the hyperlink and moving it away.
this.style.color= or style.color=
The word "this" doesn't have to be there. It means "this document" and tells the browser exactly which web page you mean. It's used more on the scripting side of things than on the style side. It could have been shortened to: We told the browser what to do when it detects an "OnMouseOver" event (more on this in the scripting section), and what to do when it detects an "OnMouseOut" event. What it does is to change the color of the text for the link.
Common Styles
Text Background Color
We'll now use an editor to add a style that changes the background color behind some text. This will demonstrate the how the Class Selector works. First we add the style definition in head of the html page
<html> <head> <STYLE> .BlueBgText { Background-Color: Blue; Color: White; } </STYLE> </HEAD> <body> <SPAN Class = BlueBgText >Text with blue background.</SPAN> </body> </html>
Save your work and view the results in a browser It should look like the text below: Text with blue background.
Adding a Border around text

We'll now add a border around a paragraph of text. This will demonstrate how to use the ID Selectors. So create a new web page. Add a paragraph or two of text. Again, it's a two step process to set up and apply an ID selector. First add the style definition to the head of the html page.
<HEAD> <TITLE>Add a Border</TITLE> <STYLE> .Borders { Border: 3pt solid Black; Padding: 10pt; } </STYLE> </HEAD>
Pg 52 of 77
June 20, 2012 Copyright 2005-2012
Note the name of the ID Selector enough to set up an ID selector.
Borders. The Hash symbol (#) in front of it is
Now we apply the ID selector to some text:

<body> <span class = Borders> A Little bit of text to put a border around. </DIV> </body> </html>
Save your work and view the results in a browser. Your paragraph should look something like this: A Little bit of text to put a border around.
Round Corners
There is no command consensus among browsers when it comes to creating rounded corners. The example shown here will work with all browsers of course you must set the three alternate css style commands shown here. Unfortunately, capabilities also vary. Some browsers allow each corner to be individually defined, while some browsers lack this capability.
<!DOCTYPE html> <html> <head> <title>Round corners for all browsers</title> <style type="text/css"> body { padding: 0px; margin: 75px; } .box { color: #aef; padding: 10px; font-size: 125%; font-family: arial; width: 200px; background-color: border-radius: -moz-border-radius: -webkit-border-radius: } </style> </head> <body>
#aaa; 25px; /* css standard, IE9 */ 25px; /* firefox */ 25px; /* chrome, opera, android */
<div class="box"> The quick brown fox jumped over the lazy dogs back. </div> </body> </html>
Pg 53 of 77
June 20, 2012 Copyright 2005-2012
Set New Margins

Now lets se how to set margins. This Rule allows you to specify how far from the left you want some text to be positioned. Create a new web page and type in the margin style definition.
<HEAD> <TITLE>Margins and Indents</TITLE> <STYLE> .Margins { Margin-Top: 5em; Margin-Bottom: 5em; P {text-indent: 3em;} </STYLE> </HEAD>
Margin-Left: 5em; Margin-Right: 5em; }
Notice that both a Class selector and a HTML selector have been set up. The HTML Selector is the P tag. You don't have to do anything else with the HTML selector. Once it is set up, the text in every set of <P> </P> tags will have the first line indented by a value 3em. Note the property for the first line indent - textindent: However, the margins properties are in a Class Selector called Margins. Now we have to apply the Class Selector in order to use it. So do the following:
<P CLASS = Margins> A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. </P>
A A A A A A
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
of of of of of of
Text. Text. Text. Text. Text. Text.
Now that the HTML selector for the P tag has been set, all the first lines of paragraphs on the page will be indented like this:
A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text. A Paragraph of Text.
CSS Column Formatting

For example, include this in your style sheet:
.leftcolumn { position: absolute; width: 200; top: 0px; left: 0px; background-color: #00FFFF; }
Now you've created a class called leftcolumn. In your HTML document, create a DIV that calls the leftcolumn class, and you have a red box 200 pixels wide in the top left corner of the page. Fill up the box with whatever you want to be in the left column, like so:
<DIV class="leftcolumn"> Contents of left column.
Pg 54 of 77
June 20, 2012 Copyright 2005-2012
</DIV>
You can do the same thing using IDs instead of CLASSes if you prefer. Of course, a left column is seldom encountered without a right column, so you'll need to define a rightcolumn class as well. For best results, everything on the page should be in a division that has its position specified in a style sheet. We can create a right column class like so:
.rightcolumn { position: top: left: }
absolute; 0px; 200px;
Remember that the left column is 200 pixels wide. Since the right column begins 200 pixels from the left edge, it should be right next to the left column, where it belongs. Simple, eh? A bit too simple, in fact. The layout we've just created serves as a good, clear example of how positioning with CSS works, but in the real world, your style sheets will need to be much more complex to get the results you want. Some other things you need to consider are: Borders, padding, etc. Just like table cells, divisions can have borders, background colors, padding and other properties. Stretchability. Like tables, divisions need to be able to stretch to accommodate different user window sizes. You can specify dimensions in percentage values as well as in pixels. Another handy trick is leaving a division's size unspecified, and using margins to position the contents of the division. Inheritance. That pesky inheritance can upset your best-laid positioning plans, especially if you're using relative positioning. Browser bugs. Remember how we covered our posteriors at the beginning of the article by mentioning certain "notable exceptions" to current browsers' support for CSS? The important point to remember is that if you're going to use CSS for positioning, you have to get it right. A tiny error can cause a page to appear as a jumbled mess, although perhaps only in certain browsers. To get the most out of this powerful set of tools, you need to know all the positioning properties of CSS backwards and forwards. Peruse some of the CSS tutorials you'll find here at the WDVL, and keep a good reference at your elbow as you code (such as Eric Meyer's Style Sheet Reference Guide). Or, if you're not the studious type, you can simply copy what someone else has done. There are two excellent sites that offer prefab CSS layouts that you can freely copy and modify for your own use. Eric Costello's excellent site glish.com features several great layouts including 2-column and 3-column layouts both fluid (stretchable columns) and static (fixed-width columns) and one that is particularly amazing, a nested float (which allows you to wrap text around a division). The Layout Reservoir from Bluerobot.com is another similar resource. I strongly recommend glish.com to anyone dabbling in CSS positioning. Their layouts are the product of collaboration among several leading CSS geeks, who have tested their layouts in lots of browsers. They've figured out exactly how padding NeatInfo.com - by Jan Zumwalt HTML / CSS Reference June 20, 2012 Copyright 2005-2012
Pg 55 of 77
and margins work, something that has baffled many a designer. They also have clever workarounds for the browser-specific problems we mentioned above. Glish also has lots of links to CSS tutorials and other resources.
a:link {color:#3344dd} a:visited {color:#804180} a:hover {color:#b50010} a:active {color:#b50010}
The above CSS pseudo-classes should already be familiar to you. These are all used for styling links while :focus below is used for fields in forms.
Advanced Element Styles

Z-index and overlapping
The z-index property defines the vertical stacking order of elements. For example, an element that has {z-index:2} will appear on top of an element that has {z-index:1} if their positions on the page overlap.
You can combine image and text by putting your graphic and your text in two different divisions, with the same (or overlapping) x and y coordinates, but different z-indices, as in the example below.
:focus
This will give the field a yellow background when the cursor is clicked in the box:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> body {font-family: arial } input:focus { background-color:#ffc; } </style> </head> <body> <p>Click inside text fields to see yellow background:</p> <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form> <p>IE8 requires a DOCTYPE to be declared.</p> </body> </html>
:focus is not support in IE6 and IE7 and :active is not supported in IE6 and only partially supported in IE7.
:first-child
This is a useful CSS rule and it serves as an introduction to the myriad of CSS 3.0 pseudo-classes.
Pg 56 of 77
June 20, 2012 Copyright 2005-2012
The only browser it doesn't work in is IE6. Here's how it looks in action and it does what you would expect:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> p:first-child { background : #fcf; } ul li:first-child { background : #ffc; } table tr:first-child { background : #cff; } </style> </head> <body> <p>First paragraph</p> <p>Second paragraph</p> <p>Third paragraph</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <table> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> </td> </table> </body> </html>
The three styles affect the first paragraph, list item, and table row. This only works in IE9 or newer, but works in the latest versions of Opera, Chrome, Firefox and Safari. There are limited JavaScript solutions available for earlier versions of IE.
:nth-child()
To demonstrate this pseudo-class lets say you have a list with five items. You need to style the third item and the third item only. If this is the case then use :nth-child() as below.
ul li:nth-child(3) { background : #ffffcc } But it's more powerful than just this simple use. ul li:nth-child(even) { background : #ffffcc } ul li:nth-child(odd) { background : #ffffcc }
The above will target all even numbered list items and odd numbered lists respectively. I'm using lists as an example but it could just as easily be paragraphs, table columns or a variety of different purposes. There's even a more precise use for :nth-child():
Pg 57 of 77
June 20, 2012 Copyright 2005-2012
ul li:nth-child(3n+2) { color: yellow; }
Note the addition of the letter n. This is a number expression an+b and this will target the second and fifth list item and so on in a pattern of 3.
ul li:nth-child(4n+3) { color: yellow; }
Above will target the fourth and seventh list item and upwards in a pattern of 4. Confused? The best way of understanding this is by creating a simple HTML list and playing around with this CSS syntax yourself.
:nth-last-child()
This is exactly the same as :nth-child() but it reverses the order, for instance the code below would target the last list item on a page:
ul li:nth-last-child(1) { background : #ffffcc; }
:nth-of-type()
As with :nth-child() this can either be a number, odd or even and a number expression; however, this matches a child of a specific element type while :nthchild() matches any child. Again, lets give an example:
p img:nth-of-type(1) { border : 2px solid #ffff00; }
This will target the first image in any paragraph which :nth-of-type() is particularly useful for.
p img:nth-of-type(1) { float : right; } p img:nth-of-type(2) { float : left; }
Above will float the first image in the paragraph to the right and the second image to the left. The use of nth-of-type() over nth-child() allows more precision in targeting elements.
:nth-last-of-type()
The same as :nth-of-type expect it selects from the bottom up. Below will give a border to the last image in a paragraph:
p img:nth-of-type(1) { border : 2px solid #ffff00; }
:last-child
The reverse of :first-child. Below will highlight the last item in a list:
ul li:last-child { background : #ffffcc }
:first-of-type and :last-of-type

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference June 20, 2012 Copyright 2005-2012
Pg 58 of 77
What :nth-of-type() is to :nth-child(), so :first-of-type and :last-of-type are to :first-child and :list-child respectively.
:only-child
This targets a single child of its parents. Look at the following code:
#wrapper p:only-child { background : #ffffcc }
Above would give a background colour to the paragraph only if there was one paragraph in the wrapper div. It's a struggle to find an example where this would come handy. If you can think of one post it up below!
:only-of-type
Matches the only child element of its type. If you want to create a border around an image in a paragraph if there is only one image then use the following code:
p img:only-of-type { border: 2px solid #ffffcc; }
:empty
With this pseudo-class you can target an element with nothing in it. Maybe you are using a CMS and you want to hide a box until there is some user-generated content in which case you could use the code below. However, it's not particularly practical because even white space within the box would prevent it from working.
.box:empty { display: none; }
:not()
Also known as the negation pseudo-class this targets everything except that declared in the brackets. As an example this CSS will give every paragraph a yellow background except that with a class of highlight:
p:not(.highlight) { background : #ffffcc; }
:disabled & :enabled

There are two attributes in HTML that help restrict the users ability to input data into a field. They are disabled and readonly. For instance you may want to add disabled=disabled to the submit button until the user fills in all the required details. They are mostly only used in conjunction with JavaScript and CSS 3.0 allows styling of one of these disabled.
input:disabled { background : #ffff00; } input:enabled { background : #ffff00; }
The first example above would allows styling of all fields using the disabled attribute while the latter would affect fields not using it.
:checked
This is a useful little bit of CSS to use. It allows the styling of a form checkbox when it is checked. Below enlarges the box upon user interaction:
input:checked { width: 20px; height: 20px; }
:indeterminate
NeatInfo.com - by Jan Zumwalt HTML / CSS Reference June 20, 2012 Copyright 2005-2012
Pg 59 of 77
This matches checkbox elements whose indeterminate DOM attribute is set to true by JavaScript.
Links
Different link colors
If you want to have different colours or styles for certain links you need to assign those links a class and write the styles for each class. Assuming we have two links "Blue Bold Link" and "Red Italic Link" we assign each a suitable class link this:
<a href="blue.htm" class="blue">Blue Bold Link</a> <a href="red.htm" class="red">Red Italic Links</a>
Our css for these links would be in this form: (note: blue=#0000ff, red=#ff0000)
<style type="text/css"> a.blue:link {color: #0000ff; a.blue:active {color: #0000ff; a.blue:visited {color: #0000ff; a.blue:hover {color: #0000ff; a.red:link a.red:active a.red:visited a.red:hover </style> {color: {color: {color: {color: #ff0000; #ff0000; #ff0000; #ff0000; background: background: background: background: background: background: background: background: #ffffff; #ffffff; #ffffff; #ffffff; #ffffff; #ffffff; #ffffff; #ffffff; font-weight: font-weight: font-weight: font-weight: font-style: font-style: font-style: font-style: bold;} bold;} bold;} bolder;}
italic;} italic;} italic;} normal;}
You can have any number of link styles on a page once you assign each one a class and specify the styles for each class. Effective use of "hover" can add a lot to a web page. Experiment!
Pg 60 of 77
June 20, 2012 Copyright 2005-2012
Border Properties
Property border
Description Sets all the border properties in one declaration Values border-width border-style border-color border-bottom-width border-bottom-style border-bottom-color border-color border-style border-width color_name hex_number rgb_number transparent inherit border-left-width border-left-style border-left-color border-color border-style border-width border-right-width border-right-style border-right-color border-color border-style border-width none hidden dotted dashed solid double groove ridge inset outset inherit border-top-width border-top-style border-top-color border-color border-style border-width thin medium thick length inherit CSS 1
border-bottom
Sets all the bottom border properties in one declaration Sets the color of the bottom border Sets the style of the bottom border Sets the width of the bottom border Sets the color of the four borders
border-bottom-color border-bottom-style border-bottom-width border-color
2 2 1 1
border-left
Sets all the left border properties in one declaration Sets the color of the left border Sets the style of the left border Sets the width of the left border Sets all the right border properties in one declaration Sets the color of the right border Sets the style of the right border Sets the width of the right border Sets the style of the four borders
border-left-color border-left-style border-left-width border-right
2 2 1 1
border-right-color border-right-style border-right-width border-style
2 2 1 1
border-top
Sets all the top border properties in one declaration Sets the color of the top border Sets the style of the top border Sets the width of the top border Sets the width of the four borders
border-top-color border-top-style border-top-width border-width
2 2 1 1
The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).
Pg 61 of 77
June 20, 2012 Copyright 2005-2012
Guidelines
Like everything else in this life, it is all subjective and depends on what you are going to do. For instance, if your intended audience was somebody wanting to bank from you, buy stocks or hive their hard-earned money to you, the guidelines may be more stringent than a web site geared towards having fun or something you threw together yourself. With that in mind, there are certain "annoyances" everybody is aware of and is essentially universal for any web page out there. In fact, for some really, really nasty web site design and to know NOT what to do, see http://www.worstoftheweb.com it's great! 1. Make sure your fonts are clear and readable. This means to not have really gigantic fonts that are dark green on a black background and expect people to understand the message you are trying to say, especially on a professional-like level. In very rare circumstances, without readable fonts, then visitors will go away. 2. Just like HTML, Java, JavaScript, the same annoyance guidelines still apply to CSS. Loud backgrounds, clashing elements, nasty background graphics, cluttered (or haphazard) formatting, etc. will only discourage visitors from taking you seriously. If you are not serious and want to do this for fun or to make a statement, then fine. 3. Test, test, test! Whenever you try something new and want to implement something different then you need to test your code in a number of browsers in as many platforms as possible. Remember, CSS is NOT perfect, and not everything that may work for you will work for somebody else. As said in the compatibility chart by Mark A. Meyer, there are many browsers out there and not everything in CSS is supported. Whenever in doubt, refer to that document. 4. There is nothing wrong with simple. If at all possible, keep your styles as simple as possible and to add to your web page not overwhelm it. This is not the end-all rule, but how many pages have you visited that are so loud or over burdened with crap you, no matter how helpful the content, you just click the "back" button on your browser? Of course, most of us have. In fact, there is nothing wrong with having a plain text version if at all possible as a catch all especially if you sell stuff and depend on it for income. 5. Get a second opinion. That's why you have friends and AntiOnline, to get constructive criticism (or flames), praise, and feedback to make things better. Because you think it looks good may not good to somebody else. Remember, you cannot please everybody, but you want to make it appealing to as many as possible. 6. If all else fails, go to www.google.com. 7. These guidelines do not apply if you or your intended audience do not care. If you have a site where you want to express yourself and your intended audience does not care, or you do not care, then these guidelines are just that. 8. Keep your code readable and maintainable by reasonable name conventions. Like other programming languages, the need for useful names are very important in case you need to go back to it later. For instance, the expression does not. At the time of coding, you knew what CrackWhore meant, but six months, a year down the road, it's time to dig around the code and see what it does. 9. Have fun!
.TopMargin { background-color: red; border-color: #8080FF; border-style: solid; font-family: Verdana, Arial, Helvetica; }
Pg 62 of 77
June 20, 2012 Copyright 2005-2012
This example tells you something useful about what is being controlled.
.BigTrucks { background-color: red; border-color: #8080FF; border-style: solid; font-family: Verdana, Arial, Helvetica; }
This example tells you very little about what is being controlled.
Style Property
Note: The CSS style property can be used inside block structures such as <Body...> <table> <p> etc. Example: <body style=font-family: arial; color: black;> or <body style=fontfamily: arial;
Aural cue cue-after cue-before elevation pause pause-after pause-before pitch pitch-range play-during richness speak speak-numeral speak-punctuation speech-rate stress voice-family volume Boxes border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-style border-top-width border-width margin margin-bottom margin-left margin-right margin-top padding padding-bottom padding-left page padding-right padding-top Color / Bkg background background-attachment background-color background-image background-position background-repeat color Dimensions height line-height max-height max-width min-height min-width vertical-align width Font font font-family font-size font-size-adjust font-stretch font-style font-variant font-weight Interface cursor outline outline-color outline-style outline-width Miscellaneous azimuth content counter-increment counter-reset list-style list-style-image list-style-position list-style-type marker-offset quotes Paging marks orphans page page-break-after page-break-before page-break-inside size widows Positioning bottom clear clip direction display float left overflow position right top unicode-bidi visibility z-index Table border-collapse border-spacing caption-side empty-cells speak-header table-layout Text color letter-spacing text-align text-decoration text-indent text-shadow text-transform white-space word-spacing Units #ddd #dddddd % 0 does not require unit cm em ex in mm pt px rgb(d,d,d)
Pg 63 of 77
June 20, 2012 Copyright 2005-2012
Alphabetized HTML Commands

 comment <!DOCTYPE> the document type <a> anchor <abbr> abbreviation <acronym> acronym <address> address element <applet> Deprecated. applet <area> area inside an image map <b> bold text <base> base URL all page links <basefont> Deprecated. base font <bdo> the direction of text display <big> big text <blockquote> indent <body> the body element <br> Inserts a single line break <button> push button <caption> table caption <center> Deprecated. centered text <cite> citation <code> code text (formatted txt) <col> attributes for table columns <colgroup> groups of table columns <dd> definition description <del> deleted text <dir> Deprecated. directory list <div> section in a document <dfn> definition term <dl> definition list <dt> definition term <em> emphasized text <fieldset> fieldset <font> Deprecated see style, font size, select font, etc <form> form <frame> sub window (a frame) <frameset> set of frames <h1> to <h6> header 1 to header 6 <head> information about the document <hr> horizontal rule <html> html document <i> italic text <iframe> inline sub window (frame) <img> image <input> input field <ins> inserted text <isindex> <kbd> <label> <legend> <li> <link> <map> <menu> <meta> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <s> text <samp> sample computer code <script> script <select> selectable list <small> small text <span> section in a document <strike> Deprecated. strikethrough text <strong> strong text <style> css style definition <sub> subscripted text <sup> superscripted text <table> table <tbody> table body <td> table cell <textarea> text area <tfoot> table footer <th> table header <thead> table header <title> the document title <tr> table row <tt> teletype text, similar to <code> and <pre> <u> Deprecated. underlined text <ul> unordered list <var> variable, usually same as italics <xmp> Deprecated use code instead Deprecated single-line input field keyboard text label for a form control title in a fieldset list item resource reference image map Deprecated. menu list meta information noframe section noscript section embedded object ordered list option group option in a drop-down list paragraph parameter for an object preformatted text short quotation Deprecated. strikethrough
Pg 64 of 77
June 20, 2012 Copyright 2005-2012
Pg 65 of 77
June 20, 2012 Copyright 2005-2012
Pg 66 of 77
June 20, 2012 Copyright 2005-2012
Special Characters
Character space exclamation quotation mark = APL quote number dollar percent ampersand single quote = apostrophe less-than sign greater-than sign ellipses inverted exclamation mark cent sign pound sign currency sign yen sign = yuan sign broken vertical bar section sign spacing diaeresis copyright sign feminine ordinal indicator left pointing guillemet not sign soft hyphen = discretionary hyphen registered sign = registered trade mark sign macron = overline = APL overbar degree sign plus-minus sign = plus-or-minus sign superscript digit two = squared superscript digit three = cubed acute accent = spacing acute micro sign pilcrow sign = paragraph sign middle dot cedilla = spacing cedilla superscript one = superscript digit one masculine ordinal indicator right pointing guillemet fraction one quarter fraction one half fraction three quarters inverted question mark Latin capital letter A grave Latin capital letter A with acute Latin capital letter A with circumflex Latin capital letter A with tilde Latin capital letter A with diaeresis Latin capital letter A with ring above Latin capital ligature AE Latin capital letter C with cedilla Latin capital letter E with grave Latin capital letter E with acute Latin capital letter E with circumflex Latin capital letter E with diaeresis Latin capital letter I with grave Latin capital letter I with acute Latin capital letter I with circumflex Latin capital letter I with diaeresis Latin capital letter ETH Latin capital letter N with tilde Latin capital letter O with grave Latin capital letter O with acute Latin capital letter O with circumflex Entity Decimal ! " # $ % & ' < > ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Hex ! " # $ % & ' < > ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô View ! # $ % & ' < >
"
& < > ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô
Pg 67 of 77
June 20, 2012 Copyright 2005-2012
Character Latin capital letter O with tilde Latin capital letter O with diaeresis multiplication sign Latin capital letter O with stroke Latin capital letter U with grave Latin capital letter U with acute Latin capital letter U with circumflex Latin capital letter U with diaeresis Latin capital letter Y with acute Latin capital letter THORN Latin small letter sharp s Latin small letter a with grave Latin small letter a with acute Latin small letter a with circumflex Latin small letter a with tilde Latin small letter a with diaeresis Latin small letter a with ring above Latin small ligature ae Latin small letter c with cedilla Latin small letter e with grave Latin small letter e with acute Latin small letter e with circumflex Latin small letter e with diaeresis Latin small letter i with grave Latin small letter i with acute Latin small letter i with circumflex Latin small letter i with diaeresis Latin small letter eth Latin small letter n with tilde Latin small letter o with grave Latin small letter o with acute Latin small letter o with circumflex Latin small letter o with tilde Latin small letter o with diaeresis division sign Latin small letter o with stroke Latin small letter u with grave Latin small letter u with acute Latin small letter u with circumflex Latin small letter u with diaeresis Latin small letter y with acute Latin small letter thorn Latin small letter y with diaeresis Latin capital ligature OE Latin small ligature oe Latin capital letter S with caron Latin small letter s with caron Latin capital letter Y with diaeresis Latin small f with hook = function = florin modifier letter circumflex accent small tilde Greek capital letter alpha Greek capital letter beta Greek capital letter gamma Greek capital letter delta Greek capital letter epsilon Greek capital letter zeta Greek capital letter eta Greek capital letter theta Greek capital letter iota Greek capital letter kappa Greek capital letter lambda Greek capital letter mu Greek capital letter nu Greek capital letter xi Greek capital letter omicron Greek capital letter pi Greek capital letter rho Greek capital letter sigma
Entity Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ &OElig; &oelig; &Scaron; &scaron; &Yuml; &fnof; &circ; &tilde; Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ
Decimal Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Œ œ Š š Ÿ ƒ ˆ ˜ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ
Hex Õ Ö × Ø Ù Ú Û Ü Ý Þ ß à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ Œ œ Š š Ÿ ƒ ˆ ˜ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ
View
Pg 68 of 77
June 20, 2012 Copyright 2005-2012
Character Greek capital letter tau Greek capital letter upsilon Greek capital letter phi Greek capital letter chi Greek capital letter psi Greek capital letter omega Greek small letter alpha Greek small letter beta Greek small letter gamma Greek small letter delta Greek small letter epsilon Greek small letter zeta Greek small letter eta Greek small letter theta Greek small letter iota Greek small letter kappa Greek small letter lambda Greek small letter mu Greek small letter nu Greek small letter xi Greek small letter omicron Greek small letter pi Greek small letter rho Greek small letter final sigma Greek small letter sigma Greek small letter tau Greek small letter upsilon Greek small letter phi Greek small letter chi Greek small letter psi Greek small letter omega Greek small letter theta symbol Greek upsilon with hook symbol Greek pi symbol no-break space, non-breaking space en space em space thin space en dash em dash zero width non-joiner zero width joiner left-to-right mark right-to-left mark left single quotation mark right single quotation mark single low-9 quotation mark left double quotation mark right double quotation mark double low-9 quotation mark dagger double dagger bullet = black small circle horizontal ellipsis = three dot leader per mille sign single left-pointing angle quotation mark single right-pointing angle quotation mark euro sign prime = minutes = feet double prime = seconds = inches overline = spacing overscore fraction slash script capital P = power set = Weierstrass p blackletter capital I = imaginary part blackletter capital R = real part symbol trade mark sign
Entity Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ &sigmaf; σ τ υ φ χ ψ ω &thetasym; &upsih; ϖ &ensp; &emsp; – — &zwnj; &zwj; &lrm; &rlm; ‘ ’ &sbquo; “ ” &bdquo; &dagger; &Dagger; • … &permil; &lsaquo; &rsaquo; € ′ ″ &oline; &frasl; &weierp; &image; &real; ™
Decimal Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϑ ϒ ϖ – — ‌ ‍ ‎ ‏ ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › € ′ ″ ‾ ⁄ ℘ ℑ ℜ ™
Hex Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϑ ϒ ϖ – — ‌ ‍ ‎ ‏ ‘ ’ ‚ “ ” „ † ‡ • … ‰ ‹ › € ′ ″ ‾ ⁄ ℘ ℑ ℜ ™
View
Pg 69 of 77
June 20, 2012 Copyright 2005-2012
Character alef symbol = first transfinite cardinal leftwards arrow upwards arrow rightwards arrow downwards arrow left right arrow carriage return leftwards double arrow upwards double arrow rightwards double arrow downwards double arrow left right double arrow for all partial differential there exists empty set = null set = diameter nabla = backward difference element of not an element of contains as member n-ary product = product sign n-ary sumation minus sign asterisk operator square root = radical sign proportional to infinity angle logical and = wedge logical or = vee intersection = cap union = cup integral therefore tilde operator = varies with = similar to approximately equal to almost equal to = asymptotic to not equal to identical to less-than or equal to greater-than or equal to subset of superset of not a subset of subset of or equal to superset of or equal to circled plus = direct sum circled times = vector product up tack = orthogonal to = perpendicular dot operator left ceiling = APL upstile right ceiling left floor = APL downstile right floor left-pointing angle bracket = bra right-pointing angle bracket = ket lozenge black spade suit black club suit = shamrock black heart suit = valentine black diamond suit
Entity &alefsym; ← ↑ → ↓ ↔ &crarr; ⇐ &uArr; ⇒ &dArr; ⇔ ∀ ∂ ∃ ∅ ∇ ∈ ∉ &ni; ∏ ∑ − &lowast; √ &prop; ∞ &ang; &and; &or; ∩ ∪ ∫ &there4; &sim; &cong; ≈ ≠ &equiv; ≤ ≥ ⊂ ⊃ &nsub; &sube; &supe; &oplus; &otimes; &perp; ⋅ &lceil; &rceil; &lfloor; &rfloor; &lang; &rang; &loz; &spades; &clubs; &hearts; &diams;
Decimal ℵ ← ↑ → ↓ ↔ ↵ ⇐ ⇑ ⇒ ⇓ ⇔ ∀ ∂ ∃ ∅ ∇ ∈ ∉ ∋ ∏ ∑ − ∗ √ ∝ ∞ ∠ ∧ ∨ ∩ ∪ ∫ ∴ ∼ ≅ ≈ ≠ ≡ ≤ ≥ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅ ⌈ ⌉ ⌊ ⌋ 〈 〉 ◊ ♠ ♣ ♥ ♦
Hex ℵ ← ↑ → ↓ ↔ ↵ ⇐ ⇑ ⇒ ⇓ ⇔ ∀ ∂ ∃ ∅ ∇ ∈ ∉ ∋ ∏ ∑ − ∗ √ ∝ ∞ ∠ ∧ ∨ ∩ ∪ ∫ ∴ ∼ ≅ ≈ ≠ ≡ ≤ ≥ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅ ⌈ ⌉ ⌊ ⌋ 〈 〉 ◊ ♠ ♣ ♥ ♦
View
Pg 70 of 77
June 20, 2012 Copyright 2005-2012
HTML 16 named Colors

The HTML 4.x specifications defines sixteen color names that can be used instead of color values in HTML. These colors are valid values for attributes such as BGCOLOR or LINK on the BODY element. The CSS2 specification also uses these colors as color values which can be used with properties such as color, background-color or border-color.
HTML 4.01 & CSS2 Colors

Color Name black silver gray white maroon red purple fuchsia green lime olive yellow navy blue teal aqua Hex 6 #000000 #C0C0C0 #808080 #FFFFFF #800000 #FF0000 #800080 #FF00FF #008000 #00FF00 #808000 #FFFF00 #000080 #0000FF #008080 #00FFFF Hex 3 #000 #CCC #888 #FFF #800 #F00 #808 #F0F #080 #0F0 #880 #FF0 #008 #00F #088 #0FF 0,0,0 192,192,192 128,128,128 255,255,255 128,0,0 255,0,0 128,0,128 255,0,255 0,128,0 0,255,0 128,128,0 255,255,0 0,0,128 0,0,255 0,128,128 0,255,255 RGB RGB% 0%,0%,0% 75%,75%,75% 50%,50%,50% 100%,100%,100% 50%,0%,0% 100%,0%,0% 50%,0%,50% 100%,0%,100% 0%,50%,0% 0%,100%,0% 50%,50%,0% 100%,100%,0% 0%,0%,50% 0%,0%,100% 0%,50%,50% 0%,100%,100% Websafe Yes No No Yes No Yes No Yes No Yes No Yes No Yes No Yes No No Yes No Yes No Yes No Yes No Yes No Yes No Yes Reallysafe Yes Sample
The HTML 4.01 and CSS2 color names with their corresponding numerical values. Members of the Websafe and Reallysafe palletes are marked.
Pg 71 of 77
June 20, 2012 Copyright 2005-2012
X11 color names (all browsers support these)

Hex RGB Red colors IndianRed CD 5C 5C LightCoral F0 80 80 Salmon FA 80 72 DarkSalmon E9 96 7A LightSalmon FF A0 7A Red FF 00 00 Crimson DC 14 3C FireBrick B2 22 22 DarkRed 8B 00 00 Pink colors Pink FF C0 CB LightPink FF B6 C1 HotPink FF 69 B4 DeepPink FF 14 93 MediumVioletRed C7 15 85 PaleVioletRed DB 70 93 Orange colors LightSalmon FF A0 7A Coral FF 7F 50 Tomato FF 63 47 OrangeRed FF 45 00 DarkOrange FF 8C 00 Orange FF A5 00 Yellow colors Gold FF D7 00 Yellow FF FF 00 LightYellow FF FF E0 LemonChiffon FF FA CD LightGoldenrodYellow FA FA D2 PapayaWhip FF EF D5 Moccasin FF E4 B5 PeachPuff FF DA B9 PaleGoldenrod EE E8 AA Khaki F0 E6 8C DarkKhaki BD B7 6B Purple colors Lavender E6 E6 FA Thistle D8 BF D8 Plum DD A0 DD Violet EE 82 EE Orchid DA 70 D6 Fuchsia FF 00 FF Magenta FF 00 FF MediumOrchid BA 55 D3 MediumPurple 93 70 DB BlueViolet 8A 2B E2 DarkViolet 94 00 D3 DarkOrchid 99 32 CC DarkMagenta 8B 00 8B Purple 80 00 80 Indigo 4B 00 82 DarkSlateBlue 48 3D 8B HTML name Decimal RGB 205 92 92 240 128 128 250 128 114 233 150 122 255 160 122 255 0 0 220 20 60 178 34 34 139 0 0 255 192 203 255 182 193 255 105 180 255 20 147 199 21 133 219 112 147 255 160 122 255 127 80 255 99 71 255 69 0 255 140 0 255 165 0 255 215 0 255 255 0 255 255 224 255 250 205 250 250 210 255 239 213 255 228 181 255 218 185 238 232 170 240 230 140 189 183 107 230 230 250 216 191 216 221 160 221 238 130 238 218 112 214 255 0 255 255 0 255 186 85 211 147 112 219 138 43 226 148 0 211 153 50 204 139 0 139 128 0 128 75 0 130 72 61 139 HTML name Hex RGB Green colors GreenYellow AD FF 2F Chartreuse 7F FF 00 LawnGreen 7C FC 00 Lime 00 FF 00 LimeGreen 32 CD 32 PaleGreen 98 FB 98 LightGreen 90 EE 90 MediumSpringGreen 00 FA 9A SpringGreen 00 FF 7F MediumSeaGreen 3C B3 71 SeaGreen 2E 8B 57 ForestGreen 22 8B 22 Green 00 80 00 DarkGreen 00 64 00 YellowGreen 9A CD 32 OliveDrab 6B 8E 23 Olive 80 80 00 DarkOliveGreen 55 6B 2F MediumAquamarine 66 CD AA DarkSeaGreen 8F BC 8F LightSeaGreen 20 B2 AA DarkCyan 00 8B 8B Teal 00 80 80 Cyan colors Aqua 00 FF FF Cyan 00 FF FF LightCyan E0 FF FF PaleTurquoise AF EE EE Aquamarine 7F FF D4 Turquoise 40 E0 D0 MediumTurquoise 48 D1 CC DarkTurquoise 00 CE D1 CadetBlue 5F 9E A0 SteelBlue 46 82 B4 Blue colors LightSteelBlue B0 C4 DE PowderBlue B0 E0 E6 LightBlue AD D8 E6 SkyBlue 87 CE EB LightSkyBlue 87 CE FA DeepSkyBlue 00 BF FF DodgerBlue 1E 90 FF CornflowerBlue 64 95 ED RoyalBlue 41 69 E1 SlateBlue 6A 5A CD MediumSlateBlue 7B 68 EE Blue 00 00 FF MediumBlue 00 00 CD DarkBlue 00 00 8B Navy 00 00 80 MidnightBlue 19 19 70 Decimal RGB 173 255 47 127 255 0 124 252 0 0 255 0 50 205 50 152 251 152 144 238 144 0 250 154 0 255 127 60 179 113 46 139 87 34 139 34 0 128 0 0 100 0 154 205 50 107 142 35 128 128 0 85 107 47 102 205 170 143 188 143 32 178 170 0 139 139 0 128 128 0 255 255 0 255 255 224 255 255 175 238 238 127 255 212 64 224 208 72 209 204 0 206 209 95 158 160 70 130 180 176 196 222 176 224 230 173 216 230 135 206 235 135 206 250 0 191 255 30 144 255 100 149 237 65 105 225 106 90 205 123 104 238 0 0 255 0 0 205 0 0 139 0 0 128 25 25 112 HTML name Hex RGB Decimal RGB Brown colors Cornsilk FF F8 DC 255 248 220 BlanchedAlmond FF EB CD 255 235 205 Bisque FF E4 C4 255 228 196 NavajoWhite FF DE AD 255 222 173 Wheat F5 DE B3 245 222 179 BurlyWood DE B8 87 222 184 135 Tan D2 B4 8C 210 180 140 RosyBrown BC 8F 8F 188 143 143 SandyBrown F4 A4 60 244 164 96 Goldenrod DA A5 20 218 165 32 DarkGoldenrod B8 86 0B 184 134 11 Peru CD 85 3F 205 133 63 Chocolate D2 69 1E 210 105 30 SaddleBrown 8B 45 13 139 69 19 Sienna A0 52 2D 160 82 45 Brown A5 2A 2A 165 42 42 Maroon 80 00 00 128 0 0 White colors White FF FF FF 255 255 255 Snow FF FA FA 255 250 250 Honeydew F0 FF F0 240 255 240 MintCream F5 FF FA 245 255 250 Azure F0 FF FF 240 255 255 AliceBlue F0 F8 FF 240 248 255 GhostWhite F8 F8 FF 248 248 255 WhiteSmoke F5 F5 F5 245 245 245 Seashell FF F5 EE 255 245 238 Beige F5 F5 DC 245 245 220 OldLace FD F5 E6 253 245 230 FloralWhite FF FA F0 255 250 240 Ivory FF FF F0 255 255 240 AntiqueWhite FA EB D7 250 235 215 Linen FA F0 E6 250 240 230 LavenderBlush FF F0 F5 255 240 245 MistyRose FF E4 E1 255 228 225 Gray colors Gainsboro DC DC DC 220 220 220 LightGrey D3 D3 D3 211 211 211 Silver C0 C0 C0 192 192 192 DarkGray A9 A9 A9 169 169 169 Gray 80 80 80 128 128 128 DimGray 69 69 69 105 105 105 LightSlateGray 77 88 99 119 136 153 SlateGray 70 80 90 112 128 144 DarkSlateGray 2F 4F 4F 47 79 79 Black 00 00 00 0 0 0
Pg 72 of 77
June 20, 2012 Copyright 2005-2012
IE 46 named Colors
Internet Explorer's Proprietary Names
Color Name white beige cornsilk lemonchiffon blanchedalmond bisque antiquewhite burlywood salmon coral orange darkorange chocolate darkkhaki darkgoldenrod indianred darksalmon brown darkred crimson azure aquamarine Cyan / Aqua lightseagreen yellowgreen chartreuse forestgreen darkolivegreen darkgreen darkcyan cadetblue darkseagreen aliceblue cornflowerblue dodgerblue blue navy darkblue lavender mediumslateblue slateblue blueviolet darkorchid darkmagenta lightgrey darkgray black Hex 6 #FFFFFF #F5F5DC #FFF8DC #FFFACD #FFEBCD #FFE4C4 #FAEBD7 #DEB887 #FA8072 #FF7F50 #FFA500 #FF8C00 #D2691E #BDB76B #B8860B #CD5C5C #E9967A #A52A2A #8B0000 #DC143C #F0FFFF #7FFFD4 #00FFFF #20B2AA #9ACD32 #7FFF00 #228B22 #556B2F #006400 #008B8B #5F9EA0 #8FBC8B #F0F8FF #6495ED #1E90FF #0000FF #000080 #00008B #E6E6FA #7B68EE #6A5ACD #8A2BE2 #9932CC #8B008B #D3D3D3 #A9A9A9 #000000 Hex 3 #FFF #FFD #FFD #FFC #FEC #FEC #FED #DB8 #F87 #F75 #FA0 #F80 #D61 #BB6 #B80 #C55 #E97 #A22 #800 #D13 #FFF #7FD #0FF #2BA #9C3 #7F0 #282 #562 #060 #088 #59A #8B8 #FFF #69E #19F #00F #008 #008 #EEF #76E #65C #82E #93C #808 #DDD #AAA #000 RGB 255,255,255 245,245,220 255,250,220 255,250,205 255,235,205 255,230,195 250,235,215 220,185,135 250,130,115 255,125,80 255,165,0 255,140,0 210,105,30 190,185,105 185,135,10 205,90,90 235,150,120 165,40,40 140,0,0 220,20,60 240,255,255 125,255,210 0,255,255 30,180,170 155,205,50 125,255,0 35,140,35 85,105,50 0,100,0 0,140,140 95,160,160 145,190,140 240,250,255 100,150,235 30,145,255 0,0,255 0,0,130 0,0,140 230,230,250 125,105,240 105,90,205 140,45,225 155,50,205 140,0,140 210,210,210 170,170,170 0,0,0 RGB% 100%,100%,100% 96%,96%,86% 100%,97%,86% 100%,98%,80% 100%,92%,80% 100%,89%,76% 98%,92%,84% 87%,72%,52% 98%,50%,44% 100%,49%,31% 100%,64%,0% 100%,54%,0% 82%,41%,11% 74%,71%,41% 72%,52%,4% 80%,36%,36% 91%,58%,47% 64%,16%,16% 54%,0%,0% 86%,7%,23% 94%,100%,100% 49%,100%,83% 0%,100%,100% 12%,69%,66% 60%,80%,19% 49%,100%,0% 13%,54%,13% 33%,41%,18% 0%,39%,0% 0%,54%,54% 37%,61%,62% 56%,73%,54% 94%,97%,100% 39%,58%,92% 11%,56%,100% 0%,0%,100% 0%,0%,50% 0%,0%,54% 90%,90%,98% 48%,40%,93% 41%,35%,80% 54%,16%,88% 60%,19%,80% 54%,0%,54% 82%,82%,82% 66%,66%,66% 0%,0%,0% Sample
Internet Explorer's proprietary color names with their corresponding numerical values. Members of the Websafe and Reallysafe palletes are marked.
Pg 73 of 77
June 20, 2012 Copyright 2005-2012
Websafe 210 Colors

Code 000000 003300 006600 009900 00cc00 00FF00 330000 333300 336600 339900 33cc00 33ff00 660000 663300 666600 669900 66cc00 66FF00 990000 993300 996600 999900 99cc00 99ff00 cc0000 cc3300 cc6600 cc9900 cccc00 ccff00 FF0000 ff3300 ff6600 ff9900 ffcc00 FFFF00 Color Code 000033 003333 006633 009933 00cc33 00ff33 330033 333333 336633 339933 33cc33 33FF33 660033 663333 666633 669933 66cc33 66FF33 990033 993333 996633 999933 99cc33 99ff33 cc0033 cc3333 cc6633 cc9933 cccc33 ccff33 FF0033 ff3333 ff6633 ff9933 ffcc33 FFFF33 Color Code 000066 003366 006666 009966 00cc66 00FF66 330066 333366 336666 339966 33cc66 33FF66 660066 663366 666666 669966 66cc66 66ff66 990066 993366 996666 999966 99cc66 99ff66 cc0066 cc3366 cc6666 cc9966 cccc66 CCFF66 ff0066 ff3366 ff6666 ff9966 ffcc66 FFFF66 Color Code 000099 003399 006699 009999 00cc99 00ff99 330099 333399 336699 339999 33cc99 33ff99 660099 663399 666699 669999 66cc99 66ff99 990099 993399 996699 999999 99cc99 99ff99 cc0099 cc3399 cc6699 cc9999 cccc99 ccff99 ff0099 ff3399 ff6699 ff9999 ffcc99 ffff99
Pg 74 of 77
Color
Code 0000cc 0033cc 0066cc 0099cc 00cccc 00FFCC 3300cc 3333cc 3366cc 3399cc 33cccc 33FFCC 6600cc 6633cc 6666cc 6699cc 66cccc 66ffcc 9900cc 9933cc 9966cc 9999cc 99cccc 99ffcc cc00cc cc33cc cc66cc cc99cc cccccc ccffcc ff00cc ff33cc ff66cc ff99cc ffcccc ffffcc
Color
Code 0000FF 0033ff 0066ff 0099ff 00ccff 00FFFF 3300ff 3333ff 3366ff 3399ff 33ccff 33FFFF 6600ff 6633ff 6666ff 6699ff 66ccff 66FFFF 9900ff 9933ff 9966ff 9999ff 99ccff 99ffff cc00ff cc33ff cc66ff cc99ff ccccff ccffff FF00FF ff33ff ff66ff ff99ff ffccff FFFFFF
Color
June 20, 2012 Copyright 2005-2012
Notes: ___________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________
Pg 75 of 77
June 20, 2012 Copyright 2005-2012
Notes: ___________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________ __________________________________________________________________
Pg 76 of 77
June 20, 2012 Copyright 2005-2012
Back Page
Html Documentation
Introduction to HTML http://www.utoronto.ca/webdocs/htmldocs/NewHTML/htmlindex.html http://www.w3.org/TR/html4/ http://www.lbl.gov/web/Web-Docs.html
Html Tutorials
http://www.w3schools.com/html/html_intro.asp http://www.html5tutorial.info/index.php http://www.htmlcodetutorial.com/ http://www.tizag.com/htmlT/
CSS Documentation
http://www.css3.info/ http://reference.sitepoint.com/css https://developer.mozilla.org/en/CSS/CSS_Reference http://htmlhelp.com/reference/css/ http://www.w3schools.com/cssref http://xhtml.com/en/css/reference/
CSS Tutorials
http://www.w3schools.com/css/ http://www.echoecho.com/css.htm http://www.csstutorial.net/ http://www.w3.org/Style/Examples/011/firstcss.en.html http://www.html.net/tutorials/css/
Pg 77 of 77
June 20, 2012 Copyright 2005-2012

HTML-CSS Reference - Jan Zumwalt

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML-CSS Reference - Jan Zumwalt

Uploaded by

Copyright:

Available Formats

The most current version of this document (and many other references) can be found at NeatInfo.com/dev_notes/_cheat-sheets NeatInfo.

by Jan Zumwalt - NeatInfo.com

Syntax: HTML CLASS CLASS ID DIV SPAN

Class Style Template

Body Style Template

Common RGB Colors

yellow dark = #bb5 yellow med = #cc8 yellow lite = #deb

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

EXAMPLES....................................................................................................... 34 HTML 5 FEATURES ......................................................................................... 35

QUICK OVERVIEW OF CSS SYNTAX AND USE ..................................................... 46

ADVANCED ELEMENT STYLES ........................................................................... 56

June 20, 2012 Copyright 2005-2012

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

Redirects to http://www.sample.com after 0 seconds.

Redirect with PHP Using Location header

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

Using Refresh header

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

Sample One - HTML file

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

Sample Two - HTML file

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

Alphabetized HTML Commands

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

Paragraphs & Breaks

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

Font & Background Colors

Font Special Characters

the width of m the width of n thin space or &#8211; or &#8212;

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

Links & Urls

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

<?php $first = $_GET[var1]; $second = $_GET[var2]; $third = $_GET[var3]; ?>

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

checkbox radio submit image

reset button hidden

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

<Mouse & Keyboard Events>

Optional Attribute disabled name type

Value disabled name button reset submit text

Specifies the underlying value of a button

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

June 20, 2012 Copyright 2005-2012

NeatInfo.com - by Jan Zumwalt HTML / CSS Reference

the width of m the width of n thin space or – or —