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

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.

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.

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>

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’]; ?>

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>

<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.

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

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

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

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

1

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

1

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).

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

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

Drawing in HTML5 using Canvas element
Another new element in HTML5 is the <canvas> tag. It’s just what it sounds like——a 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 you’re using jQuery and it’s 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 don’t support the canvas element. Here is a simple example of using the canvas to draw. (I’m attempting to draw the flag of Scotland. Please forgive any inaccuracies.)

Now let’s 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 doesn’t 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 canvas’s 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 corner——draw 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 path’s 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 corner——and 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. (I’ll 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 isn’t 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 can’t 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>

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

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, it’s 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. Don’t you? Here’s what the audio controls look like in Internet Explorer: e’s

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.

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 you’d 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, let’s 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:

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
We’ve 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 can’t possibly adopt HTML5 when many of your users don’t 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 don’t 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 doesn’t. Let’s 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).

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, it’s not actually that bad. The reason that this doesn’t work is that IE8 doesn’t recognize the new HTML5 elements that I’m using, so it doesn’t add them to the DOM, so you using, can’t 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 don’t actually need the jQuery reference at actually this point, but we will need it for the next script, so I’m adding it now. Just this simple change now gets my site to this state in Internet Explorer 8:

It’s 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 didn’t understand into the DOM, and since they were in the DOM, we could style them using CSS.

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 doesn’t. 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, we’re 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 doesn’t 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.

Now, by using either of those scripts, our Internet Explorer 8 version (which doesn’t 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 there’s a lot we didn’t cover: microdata, storage, CSS3, etc.

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.

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 */

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>

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>

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 Mary’s 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>

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>

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.

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>

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.

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.

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.

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: }

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.

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():

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; }

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; }

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>

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

1

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

1

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).

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; }

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.