Table <TABLE> ... </TABLE>

See later: <button> <col>, <colgroup>

<TABLE cols=5 border="1" width="100%" cellpadding="5" cellspacing="1">

</TABLE>

Personal tips

• <tr valign=baseline, bottom, middle or top> for vertical alignement
• <tr height="45">
• <td align=center, char, justify, left or right> or use <div> tag to align within the cells: <td><div align=right>234.5</div></td>  
• <td width="100" bgcolor="336666">

<table> ... </table>

• align: deprecated 4.0
• bgcolor: deprecated 4.0
• border: thickness in pixels. Default: no border
• cellpadding: white space between cell wall and contents (pixels). Default: 1
• cellspacing: white space between cells or between cell and outer border (pixels). Default: two pixels.
• frame: visibility of outside border. Values are above, below, border, box, hsides, lhs, rhs, void, and vsides.
• rules: border lines around cells inside the table. Values row, col, none (?).
• summary: used with non-visual media such as braille and speech to provide information about a table.
• width: pixels or percentage
• Core Attributes: class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title

• align: horizontal alignment of the cell contents for all of the cells in a single row. Values center, char, justify, left, and right.
• char: select a character that will be used to align the contents of all of the rows in a cell.
• charoff: integer used to specify if the value designated in the char attribute is to be the first, second, or whatever occurrence.
• valign: set the vertical alignment of the cell contents for all of the cells in a single row. Values baseline, bottom, middle, and top

• abbr: not recognized by most browsers. Provide an abbreviated summary of the data cell text.
• align: horizontal alignment. Values center, char, justify, left, and right.
• axis: not recognized by most browsers. a list of category names which form the basis of a query.
• bgcolor: deprecated. Use style sheets.
• char: character that will be used to align the contents of the cell.
• charoff: integer used to specify if the value designated in the char attribute is to be the first, second, or whatever occurrence.
• colspan: allows a header to span horizontally two or more columns (cells).
• headers: not recognized by most browsers.
• height: deprecated. use style sheets.
• nowrap: deprecated. use style sheets.
• rowspan: allows a cell to extend down two or more rows.
• scope: not recognized by most browsers. It is used to assign a set of data cells to one header cell. Values col, colgroup, row, and rowgroup.
• valign: set the vertical alignment of the cell contents. Values baseline, bottom, middle, and top.
• width: deprecated. use style sheets.
• Core Attributes: class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title

<tr> ... </tr>
Unlimited number of rows. Not inside th, td, or other tr tags.

• align: horizontal alignment. Values are center, char, justify, left, and right.
• bgcolor: background color for all of the cells in the row. It can be either a named color (such as red) or a six character hexadecimal RGB color code (such as #e26fa9).
• char: alignement character
• charoff: offset for char
• valign: vertical alignment. Values are baseline, bottom, middle, and top.
• Core attributes:class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title

Scripts <SCRIPT> ... </SCRIPT>

Though server side directives are not scripts, this is a quick note put here to discuss this option. The most used are:
<!--#include file="navfile.html" -->
<!--#include virtual="/menu.html" -->    The path assumes that the base is the root of the site
<!--#echo var="LAST_MODIFIED" -->
<!--#echo var="DATE_LOCAL" -->
<!--#echo var="DATE_GMT" -->
<!--#echo var="DOCUMENT_NAME" -->
Note that the pages must have the extension ".shtml" to tell the server to look at the file before rendering it. Note, however, that not all servers allow server side includes.

Attributes:

• charset: character set used to write the script.
• defer: informs the server that the script will not alter the contents of the page on the server-side. This is intended to allow the server to load the page faster. (In JavaScript, this means no document.write statements.)
• language: deprecated 4.0. Use both type and language attibute.
• src: URL. script loaded and executed as a separate file.
• type: script language being used. text/javascript, text/vbscript , ... See also the header section about types

<SCRIPT LANGUAGE="JavaScript" src=".\file.js">
<!-- Hide script from early browsers
document.writeln("Hello World!")
// End of hiding script -->
</SCRIPT>
<NOSCRIPT>
This page uses javaScript. If you see this message, then the JavaScript is not enabled
</NOSCRIPT>

JavaScript entities: attribute=&{javascript expression};

JavaScript is case sensitive !!!
// comment text
/* multiple line comment text */

if (cond) statement; else statement;
if (cond) { } else { } // Remember parenthesis

Remember double == in condition !

Object.property
Object.method() // parenthesis for methods !
Object.method(param)
Object.EventHandler="MyCode"

switch (cond) {
case value:
     code;
     break; // Remember break; !
case value:
     code;
     break; // Remember break; !
default:
     code;
}

var var-name=value;

function name(param, param) {statements; return value; } // return stops execution in function
function name() {statements; return value; }

do {statements; break;} while (cond);
while (cond) {statements; break; }
for ([init expr]; [cond]; [incr-expr]) {statements; break; }
for (variable in object) {statements; break; }

with(object) {statements}
// if unqualified name in statements,
// then if property of object then take property else take local or global var

Operators

+ // Concatenation of strings
+ , - , * , /
++ , --
    a=5; x=a++; --> x==5, a==6
    a=5; x=++a; --> x==6, a==6
% // integer remaining 9 % 7 --> 2

== Equal. Note 2 == "2" --> true
!= Not equal. 2 != "2" (!!! test this !!!)
=== strict equal: equal and of same type
!== not equal and/or not of the same type
>
>=
<
<=

&& AND (true expr)  && "cheese" --> "cheese"
       "bread"      && "cheese" --> "cheese"
       (false expr) && whatever --> false

|| OR  (true expr)  || whatever --> true
       "bread"      || whatever --> "bread"
       (false expr) || "cheese" --> "cheese"

! NOT  !(true expr)  --> false
       !"cheese"     --> false
       !(false expr) --> true


?:     cond ? expr-for-true : expr-for-false
,      multiple expressions, evaluate both, return value of second
       for(var i=0, j=0; sadf; i++, j++) document.write(a[i][j] + "<BR>"); --> diagonal values
       for(var i=0, j=0; i<3; i++, j++) document.write(a[i, j] + "<BR>"); --> all elements

delete object, property or element in an array, returning true if the operation is possible

new    first define it by writing a function that specifies its name, properties and methods.

this   Often, the calling object

typeof(a)
typeof a

void(expr) evaluates without returning a value




& AND, | OR, ^ XOR, ~ NOT
Shift:
<< drop <-- 10101010000 <-- 0
>> sign --> SSSS0101010 --> drop
>>> 0   --> 00000101010 --> drop

a op= b <== equivalent ==> a = a op b


Special char

\' single quote
\" double quote
\\ backslash
\b backspace
\f form feed
\n new line
\r carriage return
\t tab

Infinity
NaN
Undefined


Functions

escape(string)
unescape(encodedstring) --> single character Latin-1 equivalent.
eval(codestring): if statements, returns value of the last statement (if there is a value).
                  if expression, value returned.
isFinite(testnumber): True if finite and legal number.
isNan(testvalue): true if not a number and false if a number.
                  isNaN(0/0) --> true
                  isNaN("348") --> false
                  isNaN( 348 ) --> false
number(object) No argument --> 0.
string(object)
parseFloat(string)
    First char not a number --> NaN
    Returns only first number.
parseInt(string, radix)
    Radix (2..36) : base of integer.
    If radix is 0 then guess: 1-9 --> 10, 0 --> octal, 0x --> hex
    First non-white char not a number --> NaN
    Returns only first number (until decimal point)
document.write (a_price.toFixed(2));
    Force display of two decimals. May not work in old browsers.



Arrays

new Array(arrayLength)
new Array(element0, element1, ..., elementN)

create an array literal: specify name and the values of all elements: cars = new Array("Mercedes", "Ford", "Chrysler");
Indexed from 0. cars[1]=="Ford"
create array of 7 without content: A = new Array(7); (but no elements yet). Note: javascript 1.2: A = new Array(7) puts 7 into the only element of A.
Assign something to A[10] and more elements will be created.


• object.constructor: contains the function that created an object's prototype.
• object.index: (read-only) The read-only index property for an array created by a regular expression match and containing the zero-based index of that match
• object.input: (read-only) The read-only input property for an array created by a regular expression match and containing the original string against which the match was made.
• object.length: unsigned 32 bit integer representing the length . Can be altered.
• object.prototype: allows the addition of properties to an array.
• Array.concat(arrayName2, arrayName3, ..., arrayNameN) : joins Array objects to produce one new one.
• Array.join(separator): join all elements into a single string with separator (default comma).
• Array.pop(): remove and return last element. Affects the length (Netscape only)
• Array.push(element1, ..., elementN): add elements, returning new length. (Netscape only)
• Array.reverse(): reverses the order of the elements
• Array.shift(): removes and returns the first element. Affects length (Netscape only)
• Array.slice(begin[,end]): creates a new array from a selected section of an array. (Netscape only)
• Array.splice(index, howMany, [element1][, ..., elementN]) : add and/or remove elements of an array. (Netscape only)
• Array.sort(compareFunction) : sorts
• Array.toSource() : inherited from the Object object, returns the source code of the array. (Netscape only)
• Array.toString() : inherited from the Object object, returns a string representation
• Array.unshift(element1,..., elementN) : adds one or more elements to the beginning and returns the new length. (Netscape only)
• Array.valueOf() : inherited from the Object object, returns a primitive value



String


String.split(value) or String.split("char with double quotes")




Printing


Link on page:

<a href="whatever_print.html"
   target="the_print_window"
   onClick="window.open ('','the_print_window',
            'toolbar=no,directories=no,menubar=yes,
             p;scrollbars=yes,resizable=0,width=700,height=500')"
   class="xyz">
Print Page</a>

Page that is formatted for printing:

<html>
...
<body bgcolor="#FFFFFF" text="#000000">
<table width="680" border="0" cellspacing="3" cellpadding="0">
   <tr>
     <td>
       Content
     </td>
   </tr>
</table>
</body>
</html>
<script language="javascript">
window.print();
</script>

Button to close the page:
<INPUT name=closebutton onclick=window.close() type=button value="Close">

JSON

{"name":value - see below, "another name": another value}

The names are always enclosed in DOUBLE quotes

The values can be:

• "string" (with double quotes)
• number without quotes
• a JSON object: {"name": "string", "another name": 234} (curly brackets)
• array: ["n", "o", "p"] (square brackets)
• boolean: true or false
• null: null

Forms <FORM> ... </FORM>

Container for form controls. One form per page recommended. Divide a long form between two or more pages.

• accept: comma-separated list of file types that can be accepted by the server when using the type="file" content.
• accept-charset: comma-separated or space-separated list of the character types that the server must be able to support (process) when the contents of a form are submitted.
• action : URL to which the contents (name/value pairs) will be submitted. Current page or another URL. Or "mailto..."
• enctype: MIME type when encoding for submission" (when the method is post). Default: "application/x-www-form-urlencoded". For type="file", must be set to "multipart/form-data".
• post method (preferred) submits the contents of the form in a two step procedure. First the URL specified by the action attribute is contacted. Second, if the contact is successful, the contents are transmitted to the URL. Note that sometimes firewalls empty the data stream of post.
• get method (default) appends the contents to the end of the URL specified by the action attribute. (A question mark is used to delimit the end of the URL and the start on the contents.)
• name: unique to the document
• onreset: when user resets (clears) the form.
• onsubmit: when user submits the form. Example: client-side form verification
• target: submit the contents of the form to a specified window or frame. Specify if not the same frame or window as page with form.

Simple example for local processing

• accesskey: poorly supported.
• disabled
• name
• onblur
• onfocus
• tabindex: poorly supported.
• type: button, reset, or submit.
• value: Can be changed later using script code.
• Core Attributes: class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title

• alt : alternative text
• disabled : Boolean. if present, prevents the form control (field) from functioning.
• ismap: Boolean. When present, signifies that the image is being used as a mouse-clickable server-side image map.
• maxlength: maximum number of characters that can be entered into a one-line text window.
• name: unique to the document and cannot be reused.
• onblur: when an element loses focus
• onchange: when the control has been changed and loses focus.
• onfocus: when comes into focus
• onselect: when the form control (field) gains focus.
• readonly: allows display of a value in a form control (field) that cannot be changed by the user.
• size: width of a one-line text window by defining how many characters can fit in the window.
• src: URL address or directory/file (path/name) for image file.
• tabindex: poorly supported.
• type: Style sheets also effect the appearence.
  • button : name attribute required. Value defines text to be shown. Text determines minimum size. Use size attibute too.
  • checkbox : name required. Value . Pre-check with check attribute. Value for checked controls are passed, but not for unchecked controls
  • file : name required. No value. Set both the enctype and method attributes of the form tag to <form method="post" enctype="multipart/form-data" action="next.asp">. Then: <input type="file" name="file1">
  • hidden : data not viewed by user. Name/value pair.
  • image : similar to submit type. Use src for image source, alt for alternate text. onclick for action
  • password : note that the password is passed unencrypted
  • radio : a group has same name, different values. Pre-check one with "checked". Values passed only for checked controls.
  • reset : reset all controls. Putting name is good practice. Value for displayed text
  • submit : onclick in submit button to proof contents. (onsubmit attribute of form tag also). Putting name is good practice. Value defines displayed text.
  • text : size and maxlength attributes. Value to pre-define a text. Use textarea tag for texts with several lines.

<INPUT TYPE=text (default), password, hidden, checkbox, radio, reset, submit, image, button, file
   NAME=
   ALIGN=TOP, MIDDLE, BOTTOM
   CHECKED for RADIO or CHECKBOX
   MAXLENGTH=n (use only if really needed)
   SIZE=n
   SRC=url when TYPE=IMAGE
   VALUE=value
   DISABLED
>

<option> ... </option>
Insert one item in a pull-down form control. By default, when an item is chosen, the value that is added to the contents of the form is the text that appears immediately after the opening option tag. However, you can specify a different value by using the value attribute. Place between the opening and closing select tags. The order of the option tags determines the default order of the list. However, you can use the selected attribute to specify one item always to appear at the top of the list. In general, a pull-down list should be treated as a menu. It is recommended that the text for each item in the list be short, such as one or two words. Ending tag recommended

• disabled : if present, prevents the form control (field) from functioning.
• label : short text version of the text that appears after the opening option tag.
• selected : specify item at the top of the list.
• value : set a different value listed in the option tag.

<select size="2">
<option selected>Angel fish</option>
<option>Cardinal tetra</option>
<option>Cat fish</option>
</select>

<select> ... </select>
Pull-down list form control.

• disabled
• multiple: allows multiple choice.
• name
• onblur
• onchange: changed and loses focus.
• onfocus
• size : allows more than one item on display
• tabindex: poorly supported

• accesskey: The accesskey attribute allows you to designate a key on the keyboard that when pressed, along with the alt or meta key, will bring focus to the form element associated with the label. poorly supported.
• for : relate the label tag to a specific form control. exact same value as the id attribute of the form control. Not needed if the control is between the start and end tags of label.
• onblur
• onfocus

• accesskey
• align deprecated 4.0

• accesskey:
• cols: sets how many characters wil be visible across the width of the textbox window.
• disabled: if present, prevents the control from functioning
• name: unique to that document and cannot be reused.
• onblur: when an element loses focus
• onchange: when the control has been changed and loses focus.
• onfocus: when an element comes into focus
• onselect: when the control gains focus.
• readonly: cannot be changed by the user.
• rows: sets how many rows will be displayed in the textarea window.
• tabindex:
• Core Attributes: class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title
• style="display:none;": element does not show, and it does not take up any space. Applies to other element types

Some elements to help disabled persons to use a web-site

• Display text equivalent of non-text elements
• Choose high contrast between foreground and background
• The main functionality of pages must available without scripts or applets
• Avoid movement in pages
• Avoid pop-ups
• Tell user when changing the window
• Group information into manageable chunks
• Clearly identify the target of each link

XML

XHTML:
elements must be properly nested
documents must be well-formed :
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> ... </head><body> ... </body></html>
There are three document types: STRICT, TRANSITIONAL and FRAMESET. See
http://www.w3schools.com/xhtml/xhtml_dtd.asp
Tag names are in lowercase
All XHTML elements must be closed (add extra space before the /)
<p>...</p>
<br />
<hr />
Attribute values are quoted
No minimization: <option selected> should be <option selected="selected">
Replace the name attribute with the id attribute (or keep both for backwards
compatibility)

HTML 4 has events
http://www.w3schools.com/xhtml/xhtml_eventattributes.asp

<?xml version="1.0" > <root_element>...</root_element>
The rest of the XML document must be included in a single root element. All
other elements are child elements of the root element.
<?xml version="1.0" encoding="ISO-8859-1"?>
XML version 1, using the ISO-8859-1 (Latin-1/West European) character set.
Other options are: "UTF-8", "UTF-16". The text editor used to create the
file should have the same encoding!
<a_tag>.. <A_TAG>...</A_TAG>....</a_tag>
Every tag must have a closing tag, and tags must be nested. XML is case
sensitive. Names start with alphabetical characters and can contain numbers
and some punctuation (best not to use "-", ";" and "." though). must no
start with "xml...". Accented characters are fine, but watch compatibility
issues.
<a_tag the_date="2006/06/20">...</a_tag?>
All attributes must be quoted. Use single or double quotes. Note that some
schools of thought say that attributes should not be used. Use child
elements instead. In any case, do NOT use attributes for data. Examples of
what could go in as attributes are unique identifiers of elements and
meta-data.
&amp;lt; and &amp;amp;
"<" and "&amp;" are are illegal. It is best practice to replace "'", "?"
and ">"
<![CDATA[ ... ]]>
This data is not parsed
<!-- comment -->
comment
<?xml-stylesheet type="text/css" href="the_css_sheet.css"?>
Second line in the definition.
<?xml-stylesheet type="text/xsl" href="simple.xsl"?>,
But it is better to use XSL (eXtensible Stylesheet Language). Put reference
in 2nd line of XML document.
<the_prefix:a_tag xmlns:the_prefix="URI (web address)">
This helps resolve name conflicts. Prefix child tabs with <the_prefix:...>
too if needed to prevent name conflicts.

Data Island:

<xml id="the_data_source" src="cd_catalog.xml"></xml>

<table border="1" datasrc="#the_data_source">
<tr>
<td><span datafld="ONE_FIELD"></span></td>
<td><span datafld="ANOTHER_FIELD"></span></td>
</tr>
</table>

The datasrc attribute IN <table> tag binds to XML data island (<xml> tag).
The datasrc attribute corresponds to the id attribute of the XML data
island.
<span> tag refer to corresponding XML elements. <td> tag cannot have datafld
attribute, so use <span> tag.

a document with correct syntax is well formed, a document that is validated
against a DTD is valid.
Check errors with http://www.w3schools.com/dom/dom_validate.asp

Loading into parser:
http://www.w3schools.com/xml/xml_parser.asp

XPath:

7 kinds of nodes:
element, attribute, text, namespace, processing-instruction, comment,
document (root)
Nodes contain other (children) nodes or atomic values. Every node has one
parent.

the_node --> children of the node
/the_node --> children of root
the_node1/the_node2 --> children of the_node2 which is child of the_node1
the_node1//the_node2 --> children of the_node2 which is descendant of
the_node1
//the_node1 --> children of the_node1, wherever it may be
. --> current node
.. --> parent node
@ --> attribute
the_node[1] --> first child of the_node
the_node[last()-1] --> second to last child of the_node
the_node[position()<=4] --> first four children of the_node
the_node[@one_att] --> nodes with attribute "one_att", whatever the value of
the attribute
the_node[@one_att='x'] --> nodes with attribute "one_att" equal to x
the_node[child_node>10] --> selection of child nodes
* --> wildcard
//* --> all elements in the document
node() --> "super wildcard", i.e. all nodes
one_path | another_path --> show both paths
one_node/text() --> select the text of the node
axisname::nodetest[predicate] --> a location step

axis names:
ancestor
ancestor-or-self
attribute
child
descendant
descendant-or-self
following: Everything following the closing tag
following-sibling: The siblings after the current node
preceding
preceding-sibling
namespace: namespace nodes of the current nodes
parent
self

Operators:
| (see above), + - * div(normal division) mod(modulus) = != > >= < <= or and

Stylesheets:

The first line is the <?xml ...> xml declaration tag.
Then follows the root element which is <xsl:stylesheet> or <xsl:transform>
(both are equivalent)
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:transform version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

In the xml document, put a link to the stylesheet (second line):
<?xml-stylesheet type="text/xsl" href="the_stylesheet.xsl"?>

The follows the template(s)
<xsl:template match="/">

Example:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>Simple example</h2>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

<xsl:value-of select="put xpath here"/> --> returns the value of an element
<xsl:for-each /> --> all elements in a set
<xsl:sort /> --> sort the output
<xsl:if test="expression">...</xsl:if> --> conditional
<xsl:choose>
<xsl:when test="expression">...</xsl:when>
<xsl:otherwise>...</xsl:otherwise>
</xsl:choose>

snippet:
<xsl:for-each select="put xpath here">
<xsl:sort select="on of the elements below" />
<xsl:value-of select="one element" />
<xsl:value-of select="another element" />
<xsl:if test="the_element &amp;lt; 10">
<xsl:value-of select="element shown conditionally" />
</xsl:if>
<xsl:for-each>

<xsl:apply-templates/> --> apply templates at this point
<xsl:apply-templates select="title"/> --> apply templates to specified
elements. Is the select attribute equivalent to the match attribute of the
<xsl:template> tag that should follow.

How to XHTML on browser:
=============

<script type="text/javascript">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cdcatalog.xml")
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cdcatalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>

how to XHTML on the server
===========================

<%
'load the xml file
set xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load(Server.MapPath("cdcatalog.xml"))

'Load XSL
set xsl = Server.CreateObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load(Server.MapPath("cdcatalog.xsl"))

'Transform file
Response.Write(xml.transformNode(xsl))
%>

Cascading Style Sheets

priority for styles:
1. Inline style (inside an HTML element)
2. Internal style sheet (inside the <head> tag)
3. External style sheet
4. Browser default

The CSS syntax is made up of three parts: selector {property: value}
The selector is normally the HTML element/tag. The property is the attribute to be changed. Surround the value with quotes if it has more than one word. Separate property-value pairs with semi-colon. If several selectors take on the same property, separate the selectors with commas.

Summary:

• tag[attribute="value"]: applies to <tag attribute="value">
• tag#the_id: applies to <tag id="the_id">
• #the_id: applies to all tags with a particular id <any id="the_id">
• tag:pseudo-class: applies to the tag in a particular state. Use in order: a:link, a:visited, a:hover, a:active

Use the class selector for defining several styles for one tag:
p.right_align {text-align: right}
p.center_align {text-align: center}
In the HTML document:
<p class="right_align">
Right-aligned text.
</p>
<p class="center_align">
Center-aligned text.
</p>

Apply two or more classes:
<p class="center_align red_text">
Center-aligned text with red text (assuming that a red_text style is defined).
</p>

A style without a selector applies to all tags:
.center_align {text-align: center}

Apply styles to HTML elements with particular attributes:
input[type="text"] {background-color: red}

Styles for HTML elements with the id selector. The id selector is defined as a #.
The style rule below will match the element that has an id attribute with a value of "green":
#green {color: green}
The style rule below will match the p element that has an id with a value of "para1":
p#para1
{
text-align: center;
color: red
}

/* This is a comment */

Stylesheet defined in sepatate file:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>

Style sheet defined in same file:
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>

Standalone style:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

margin: 10px 20px 30px 40px -> top right? bottom left?

Examples http://www.w3schools.com/css/css_background.asp

do not start styles with numbers because this will not work in Mozilla/Firefox ; do not leave spaces between the number and the units: 20px, not 20 px

http://htmlhelp.com/reference/css/ http://www.w3schools.com/CSS/CSS_reference.asp