HTML

Creating an HTML Page

A web page is created using a language called, Hypertext Markup Language, better known as HTML Code. You can write your own coding within a plain text editor, such as Note Pad, or use an HTML editor, which will write the code for you.

HTML codes, also referred to as HTML tags, are enclosed by the lesser than (<) and greater than (>) brackets and may be written in capital or lower case letters.

The opening bracket is followed by an element, which is a browser command, and ends with the closing bracket.

<font size=2>

An element may also be followed by attributes, which are words describing the properties of the element, and further instruct the browser.

<font size=2>

Attributes are only contained in the opening HTML tags to the right of the element and are separated by a space and followed by an equal (=) sign.

The value follows the equal sign and is enclosed in quotes.

<font size=2>

Basic HTML Document Code Structure

Begin writing your HTML tags by creating your document's basic layout. Copy and paste this code into your text or HTML editor.

<html>
<head>
<title>Your Page Title</title>
</head>
<body>

This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded.

For a complete list of HTML codes, tags and examples, see the HTML chart below.

</body>
</html>

<html> - Begins your HTML document.

<head> - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.

<title> - The TITLE of your page. This will be visible in the title bar of the viewers’ browser.

</title> - Closes the HTML <title> tag.

</head> - Closes the HTML <head> tag.

<body> - This is where you will begin writing your document and placing your HTML codes.

</body> - Closes the HTML <body> tag.

</html> - Closes the <html> tag.

HTML Tags Chart

Tag

Name

Code Example

Browser View

<!--

comment

Nothing will show (Tip)

<a -

anchor

<a href="http://www.domain.com/">
Visit Our Site</a>

Visit Our Site (Tip)

<b>

bold

<b>Example</b>

Example

<big>

big (text)

<big>Example</big>

Example (Tip)

<body>

body of HTML document

<body>The content of your HTML page</body>

Contents of your web page (Tip)

<br>

line break

The contents of your page<br>The contents of your page

The contents of your web page
The contents of your web page

center

<center>This will center your contents</center>

This will center your contents

<dd>

definition description

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term

Definition of the term

Definition Term

Definition of the term

<dl>

definition list

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term

Definition of the term

Definition Term

Definition of the term

<dt>

definition term

<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>

Definition Term

Definition of the term

Definition Term

Definition of the term

<em>

emphasis

This is an <em>Example</em> of using the emphasis tag

This is an Example of using the emphasis tag

<embed>

embed object

<embed src="yourfile.mid" width="100%" height="60" align="center">

(Tip)

<embed>

embed object

<embed src="yourfile.mid" autostart="true" hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid" loop="1"></noembed>

Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music.

<font>

font

<font face="Times New Roman">Example</font>

Example (Tip)

<font>

font

<font face="Times New Roman" size="4">Example</font>

Example (Tip)

<font>

font

<font face="Times New Roman" size="+3" color="#ff0000">Example</font>

Example (Tip)

<form>

form

<form action="mailto:you@yourdomain.com">
Name: <input name="Name" value="" size="10"><br>
Email: <input name="Email" value="" size="10"><br>
<center><input type="submit"></center>
</form>

Name: (Tip)
Email:

heading 1
heading 2
heading 3
heading 4
heading 5
heading 6

<h1>Heading 1 Example</h1>
<h2>Heading 2 Example</h2>
<h3>Heading 3 Example</h3>
<h4>Heading 4 Example</h4>
<h5>Heading 5 Example</h5>
<h6>Heading 6 Example</h6>

<head>

heading of HTML document

<head>Contains elements describing the document</head>

Nothing will show

<hr>

horizontal rule

<hr />

Contents of your web page (Tip)

Contents of your web page

<hr>

horizontal rule

<hr width="50%" size="3" />

Contents of your web page

<hr>

horizontal rule

<hr width="50%" size="3" noshade />

Contents of your web page

<hr>
(Internet
Explorer)

horizontal rule

<hr width="75%" color="#ff0000" size="4" />

Contents of your web page

<hr>
(Internet
Explorer)

horizontal rule

<hr width="25%" color="#6699ff" size="6" />

Contents of your web page

<html>

hypertext markup language

<html>
<head>
<meta>
<title>Title of your web page</title>
</head>
<body>HTML web page contents
</body>
</html>

Contents of your web page

<i>

italic

<i>Example</i>

Example

<img>

image

<img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" />

(Tip)

<input>

input field

Example 1:

<form method=post action="/cgi-bin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>

Example 1: (Tip)

<input>
(Internet Explorer)

input field

Example 2:

<form method=post action="/cgi-bin/example.cgi">
<input type="text" style="color: #ffffff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>

Example 2: (Tip)

<input>

input field

Example 3:

<form method=post action="/cgi-bin/example.cgi">
<table border="0" cellspacing="0" cellpadding="2"><tr><td bgcolor="#8463ff"><input type="text" size="10" maxlength="30"></td><td bgcolor="#8463ff" valign="Middle"> <input type="image" name="submit" src="yourimage.gif"></td></tr> </table>
</form>

Example 3: (Tip)

<input>

input field

Example 4:

<form method=post action="/cgi-bin/example.cgi">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>

Example 4: (Tip)

<input>

input field

Example 5:

<form method=post action="/cgi-bin/example.cgi">
<center>
Select an option:
<select>
<option >option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit" value="Submit"></center>
</form>

Example 5: Tip)

Select an option:

<input>

input field

Example 6:

<form method=post action="/cgi-bin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3
<br>
<br>
Select an option:<br>
<input type="checkbox" name="selection"> Selection 1
<input type="checkbox" name="selection" checked> Selection 2
<input type="checkbox" name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>

<li>

list item

Example 1:

<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</MENU>

Example 2:

<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Example 1: (Tip)

List item 1

List item 2

List item 3

Example 2:

List item 1
List item 2
List item 3
List item 4

<link>

link

<marquee>
(Internet
Explorer)

scrolling text

<marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">Example Marquee</marquee>

(Tip)

<menu>

menu

<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>

List item 1

List item 2

List item 3

<meta>

meta

<meta name="Description" content="Description of your site">
<meta name="keywords" content="keywords describing your site">

Nothing will show (Tip)

<meta>

meta

<meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/">

Nothing will show (Tip)

<meta>

meta

<meta http-equiv="Pragma" content="no-cache">

Nothing will show (Tip)

<meta>

meta

<meta name="rating" content="General">

Nothing will show (Tip)

<meta>

meta

<meta name="robots" content="all">

Nothing will show (Tip)

<meta>

meta

<meta name="robots" content="noindex,follow">

Nothing will show (Tip)

<ol>

ordered list

Numbered

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Numbered Special Start

<ol start="5">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Lowercase Letters

<ol type="a">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Letters

<ol type="A">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Letters Special Start

<ol type="A" start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Lowercase Roman Numerals

<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Roman Numerals

<ol type="I">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Capital Roman Numerals Special Start

<ol type="I" start="7">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

Numbered

List item 1
List item 2
List item 3
List item 4

Numbered Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals Special Start

List item 1
List item 2
List item 3
List item 4

listbox option

<form method=post action="/cgi-bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>

Select an option: (Tip)

<p>

paragraph

This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space between lines.

Attributes:

<p align="left">
Example 1:<br />
<br />
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
<p align="right">
Example 2:<br>
<br>
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
<p align="center">
Example 3:<br>
<br>
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>

This is an example displaying the use of the paragraph tag.

This will create a line break and a space between lines.

Attributes:

Example 1:

This is an example
displaying the use
of the paragraph tag.

Example 2:

This is an example
displaying the use
of the paragraph tag.

Example 3:

This is an example
displaying the use
of the paragraph tag.

<small>

small (text)

<small>Example</small>

Example (Tip)

deleted text

<strike>Example</strike>

~~Example~~

strong emphasis

<strong>Example</strong>

Example

<table>

table

Example 1:

<table border="4" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 2: (Internet Explorer)

<table border="2" bordercolor="#336699" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Example 3:

<table cellpadding="2" cellspacing="2" width="100%">
<tr>
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>

Example 1: (Tip)

Column 1

Column 2

Example 2: (Tip)

Column 1

Column 2

Example 3: (Tip)

Column 1	Column 2
Row 2	Row 2

<td>

table data

<table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Column 1

Column 2

<th>

table header

<div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>

Column 1	Column 2	Column 3
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3
Row 4	Row 4	Row 4

<title>

document title

<title>Title of your HTML page</title>

Title of your web page will be viewable in the title bar. (Tip)

<tr>

table row

<table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Column 1

Column 2

<tt>

teletype

<tt>Example</tt>

Example

<u>

underline

<u>Example</u>

Example

<ul>

unordered list

Example 1:<br>
<br>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<br>
Example 2:<br>
<ul type="disc">
<li>List item 1</li>
<li>List item 2</li>
<ul type="circle">
<li>List item 3</li>
<li>List item 4</li>
</ul>
</ul>

Example 1:

List item 1
List item 2

Example 2:

List item 1
List item 2

List item 3
List item 4

TIPS

Creating an HTML Status Bar Link Description

You can display your HTML link description in the status bar of your browser. When the mouse is placed over a link, the text link description will be viewed in the status bar.

<A HREF="http://www.domain.com" onmouseover="window.status='Your text description'; return true" onmouseout="window.status='';return true">Your linked text</a>

Example:

Place your mouse over this link

Change the text where indicated in red.

This code will enable you to hide affiliate links, display a special links descriptions or whatever you'd like.

Creating an HTML Mouseover Text Description (IE)

You can create an HTML mouseover text description, similar to an image alt tag or pop up text description, that will be viewed when your mouse is placed over the text link. Place "title="your text description"" within your HTML link code.

Example:

Your Text

In addition, you can display your description text in a list by adding these characters 
.

The above TITLE description would be displayed like this when you place your mouse over the link:

Example:

Your Text

Edit the text indicated in red to suit your needs.

Creating an HTML Escape From Frame Link

If your web site gets trapped within someone's frames, you can create a link to help your visitor escape. Place the following code within your HTML where you would like the link to appear.

<A HREF="http://www.yourdomain.com/" TARGET="_top">Escape From Frame</A>

You're actually just creating a link to your own website with the TARGET set to "Top."

At one time, there were many sites designed with frames. However, as more and more people have realized that frames are not a good choice for designing a web site, the number of sites designed in frames has dropped considerably. For this reason, the chance of your site being trapped within someone's frames is slim. However, you may still want to include this link at the bottom of your site.

Creating HTML Links within the same Web Page

You can create a link within the same page by adding the following codes.

STEP 1

Select the area you want the link to take you to when clicked on and place the following code within your HTML. Change the name indicated in bold to anything you'd like. This will create an anchor for your link.

STEP 2

Create your link and make sure you use the same name as you used in your anchor.

<A HREF="#Anyname">Click Here</A>

Removing an HTML Web Page Link Underline

You can remove the underline of an individual HTML web page link, also known as a hyperlink, by adding the STYLE tag to your link HTML.

Example Code:

Browser View:

Your Link

HTML Codes and Tips

Changing Table Background Colors on Mouseover (IE ONLY)

If you're looking for a great way to spice up your HTML tables, this HTML mouseover code may be just what you're looking for.

Place your mouse pointer over each of the HTML table cells below to view this HTML mouseover effect. The HTML table cells will change to a specified color when you place your pointer over the cells.

This HTML code will enable you to give your HTML tables a more professional look and feel, as it will greatly improve the presentation of your HTML table data.

However, when using this HTML code, please ensure that you only use light colors within your HTML table cells to ensure your text can be easily viewed.

HTML table data 1

HTML table data 2

HTML table data 3

onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'"

Your table code might look something like this:

<TABLE BORDER="2" CELLPADDING="2" WIDTH="100%">
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
</TABLE>

Change the text indicated in bold to suit your needs. However, make sure you select a background color that will enable your text to be easily viewed.

Embedding Web Pages within Web Pages

If you're looking for a way to display a web page within a web page, this HTML code may be just what you're looking for.

As you can see in the example below, we are displaying a web page within the web page that you are viewing right now.

This HTML code will enable you to display rotating tips, images or whatever you'd like.

Copy and paste the code below into your web page where you would like to embed the additional page.

Change the text indicated in bold to suit your needs.

Replacing Your Standard HTML List Bullets With Graphic Bullets

If you're looking for a way to spice up your HTML list bullets, this HTML tip is for you. You can use graphic bullets to replace the standard text bullets by using the "Definition List" tag. <DL>

The key to using this technique effectively is to select or create a small graphic that will compliment your list text and enhance your visitors experience on your web site.

Copy and paste the following HTML list code into the HTML portion of your web page.

<DL>
<DD><IMG SRC="yourimage.gif">List Item One</DD>
<DD><IMG SRC="yourimage.gif">List Item Two</DD>
<DD><IMG SRC="yourimage.gif">List Item Three</DD>
<DD><IMG SRC="yourimage.gif">List Item Four</DD>
</DL>

Edit the text indicated in red to suit your needs.

Using graphic bullets within your HTML web pages will enable you to give your lists your own customized look.

Creating A Placeholder For An Empty Table Cell

If you've ever tried to display an HTML table with borders within your web page, you may have discovered that unless you are displaying some text or an image within a table cell, the border will not display. However, this HTML tip will enble you to display an HTML table with borders even if some of your cells are empty.

Following is an HTML table that contains some empty table cells. Notice the borders do not display within the empty table cells.

Your Text		Your Text
	Your Text

Simply by adding the special   character code within your HTML code, your HTML table cells will be visible.

Your Text		Your Text
	Your Text

Copy and paste the following HTML code into the HTML portion of your web page.

Place the   character within the table cells that will be empty.

HTML web page tables can be a bit tricky sometimes, but they will enable you to give your web pages a great layout and are well worth the trouble.

Displaying Text With An Image Within HTML Code

If you're trying to place text directly beside an image within your web page HTML code, you may have discovered it's not as easy as it appears. When you place your image HTML code and text within your HTML code, instead of the text and image displaying side by side like a newspaper, it will display like this:

http://www.web-source.net/graphics/manonphone.jpg

The text is displaying at the bottom of the image.

To enable your image and text to display properly together, you will need to add an ALIGN attribute to your image HTML code.

Following is an example image displaying on the left with the text wrapping around the image to the right.

By placing the above code within your HTML, your image will be displayed on the left hand side with your text displayed on the right.

As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. This example has been set up with a table to keep the text neatly aligned within a limited amount of space. This table's width is set up to span 50% of the page width.

To align your image to left and your text to the right, add ALIGN="left" to your image HTML code like this:

<IMG BORDER="0" ALIGN="Left" SRC="yourimage.jpg"> Your Text

Following is an example image displaying on the right with the text wrapping around the image to the left.

By placing the above code within your HTML, your image will be displayed on the right hand side with your text displayed on the left.

As you continue to type your text, it will automatically format itself to wrap around the left side and the bottom of your image. This example has been set up with a table to keep the text neatly aligned within a limited amount of space. This table's width is set up to span 50% of the page width.

To align your image to right and your text to the left, add ALIGN="right" to your image HTML code like this:

<IMG BORDER="0" ALIGN="Right" SRC="yourimage.jpg"> Your Text

Wrapping your text around your image will enable you to give your content a much more professional look.

Creating an HTML Email Form

If you would like to provide your web site visitors with a simple way to contact you from your web site, but really don't want to display your email address, this HTML form code may be what you're looking for.

You can create a simple form, as displayed below, to enable your visitors to send you comments, questions, product support requests, or whatever you'd like.

Name:
Email:
Comment:

Copy and paste the following HTML code into the HTML portion of your web page:

<FORM action="mailto:you@yourdomain.com" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD> </TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>

Change the text indicated in red to your email address.

Displaying an email form on your web page provides a great way to enable your visitors to contact you.

Removing An HTML Hyperlink Underline

When designing your web pages, there may be a time when you will want to remove the underline of an individual text hyperlink. Although it is always best to leave hyperlinks at their default settings, as this is what your visitors will be used to, this HTML tip will assist you removing the link underline.

Following is an example of a link displayed without the underline:

Example Link

To remove a link underline, add STYLE="TEXT-DECORATION: NONE" to your link code:

Although the above code will enable you to remove the underline within a hyperlink, please use this code with caution to ensure that you don't confuse your visitors.

Changing Web Page Hyperlink Colors

When designing web pages, there may be times when you would like to change the standard web page hyperlink color to a color that will match your web site design. Although it is always best to leave your link colors at their default settings, as this is what your visitors are used to, the following html tip will assist you in changing your link color.

Following is an example link that is displayed in a different color than the default:

Example Link

To change the color of an individual link, add a FONT tag within your link code:

Although the above code will enable you to change the color of an individual hyperlink, please use this code with caution, as you don't want to confuse your visitors.

Linking to a Specific Location in a Web Page

When designing a web page, many times you may want to create a link from one section of a web page to another. This isn't a standard link we're referring to, but a link that actually takes you to another section within the same web page. For example, maybe you have information at the top of your web page and would like to link to further information at the bottom of your web page. This html code will enable you to do just that.

You can create a link within the same web page. The example link below is linked to a word at the bottom of this page.

Example Link

Step #1

Select the area of text that you want the link to take you to when clicked on. In the above example, the text we linked to below is HTML, which is located within the "Submit your HTML code snippets" sentence below.

Once you select the word that you would like to link to, you will need to create an anchor link like this:

The text indicated in bold will be the text you select, which in our example on this page was HTML. Although you can change the text indicated in red to whatever you'd like, it's a bit easier to remember if you just use the same text a what you have selected your anchor text to be. So again, in the above example, we used HTML. When we created our anchor, it looked like this: Submit your <A NAME="HTML">HTML</A> code snippets.

Step #2

Your final step will be to create your actual link that when click on will take you to your anchor text:

<A HREF="#Text">Click Here</A>

In the example above, we selected HTML for our anchor text and the 'Example Link' text above was used to create the link. When clicked on, the page will jump to the HTML anchor text we selected below.

When you create your link, you must use the same name within your link as you used in your anchor. In our example, we used HTML within our anchor tag and HTML within our actual link. When we created our link, it looked like this: <A HREF="#HTML">Example Link</A>

Escape From Frame HTML Hyperlink

You can create your own escape from from HTML hyperlink within your web page.

If you've ever discovered that someone has linked to your web site within a frame, which means your site is stuck in their frame with their information displaying within another frame, you know how frustrating this can be. You want your visitors to visit your web site within their standard browser window - not within another web site's frame. However, there is a way you can enable your visitors to escape. The following HTML tip will assist you.

If your web site gets trapped within someone else's frames, you can create a link to help them escape. You simply create a link to your own web site at the bottom of your web page. However, the key is to place TARGET="_top" within your link code. This will display your web site in its own window and not someone else's frame.

Example Link

<A HREF="http://www.yourdomain.com" TARGET="_top">http://www.yourdomain.com</A>

Change the text indicated in red to your web address.

Although the number of web sites designed in frames has decreased over the years, it may still be worth your time to add an escape from frame HTML hyperlink to your web page.

Resizing Your Images

If you have a small web page image in JPG format and need to make it just a little bit smaller, you can do so simply by changing your image's HEIGHT and WIDTH values within your image tag. However, if you need to make a substantial change in the size of your image, this method is not recommended, as your file size will be the same.

Following is an example of a standard image and then the same image resized by changing the HEIGHT and WIDTH values:

Original Image

Resized Image

When resizing a web page image, please ensure that you make the same amount of change to both the HEIGHT and the WIDTH values to ensure the image will display properly.

Changing Web Page Margins

If you would like to change or remove your web page margins, you can change them by placing the following attributes within your <body> tag.

To change or remove the top, bottom and side page margins on a web page, place the following code within your <body> tag:

This code is compatible with both Internet Explorer and Netscape Navigator.

Internet Explorer supports:

topmargin=0
bottommargin=0
leftmargin=0
rightmargin=0

Netscape Navigator supports:

marginheight=0
marginwidth=0

Make sure you use them all to enable your web page to be properly viewed in both browsers.

Web Page HTML Mouseover Text Description (Internet Explorer)

You can create a web page HTML mouseover text description, similar to an image alt tag, that will be viewed when your mouse is placed over the text link. Not only will this provide your visitors with further information in regard to your link, but it also provides a good way to place additional keywords within your web page for better Search Engine ranking.

Example:

Your Text

Place "TITLE="your text description"" within your HTML link code.

In addition, you can display your description text in a list by adding the 
 characters following each text line.

Edit the text indicated in red to suit your needs.

The above TITLE description would be displayed like this when you place your mouse over the link:

Your Text

Highlighting Links and Text

If you're looking for a way to highlight certain links and/or text within your web page, this HTML tip may be your answer. You can highlight your links and text in any color you'd like simply by using STYLE tags.

Highlighting a Link:

http://www.yourdomain.com/

Copy and paste the following code into the HTML portion of your web page where you would like the link to appear:

<A HREF="http://www.yourdomain.com" STYLE="background:yellow; color:black">Linked Text</A>

Edit the text in bold to suit your needs.

Highlighting Text:

Example: Example of highlighted text

Copy and paste the following code into the HTML portion of your web page where you would like the link to appear:

<SPAN style="BACKGROUND-COLOR: #ffff00">Example of highlighted text</SPAN>

Edit the text in bold to suit your needs. However, keep in mind, the text must be visible through the background color you select, so please ensure you select a light color.

Ad Tracking With A Link

Tracking your advertising strategies is an important part of doing business. However, purchasing an ad tracking software program can be expensive. If you're looking for a simple way to track your advertising, this HTML tip may be your answer.

You can track your classified ads using a simple code; however, you must have access to your web site logs to view your results. When you place your ads, instead of using your regular web address, use something similar to the code below:

http://www.yourdomain.com?ad_one

Change the name after the question mark for each ad you place. When you view your logs, you will be able to see exactly which ads are effective and which ads aren't.

Preventing Browser Cache

If you're looking for a way to prevent browser cache, this HTML tip will assist you.

Meta tags are used to give detailed instructions in regard to a web page to the Search Engines and browsers.

When you get visitors coming to your web site, your visitors browser will cache or make a copy of your web site for faster viewing their next visit. This will prevent your regular visitors from seeing your new content unless they manually reload their browser.

If you don't regularly update your web site, browser cache may not be a problem. However, if you're continuously updating your web site, you may want to prevent browser cache to ensure your regular visitors will see the latest version of your web site.

You can prevent browser cache simply by including a special META tag within your HTML code.

Add the following code between the <HEAD> and </HEAD> tags of your HTML.

Preventing Search Engine Indexing

If you're looking for a way to prevent Search Engines from indexing certain web pages within your web site, this HTML tip is for you.

Meta tags are used to give detailed instructions in regard to a web page to the Search Engines and browsers.

Many times, you may have a web page that you don't want the Search Engines to index, such as download pages or private membership sites. To help with this problem, add one of the following META tag codes between the <HEAD> and </HEAD> tags of your HTML.

The following META tag tells the Search Engine robots not to index this page and not to follow any links within the page:

The following META tag tells the Search Engine robots not to index this page, but follow any links within the page:

Create a Gradient Background Effect

A gradient background effect will display your selected HTML background colors in ascending or descending color variations - from lightest to darkest or darkest to lightest.

This powerful HTML code effect can be used to give your web pages a unique look and feel. However, it must be used very cautiously.

Please ensure that you select your HTML web page background colors very carefully, as your text must be clearly visible through the background colors you select.

In addition, you must select one light color and another color that is several shades lighter in order for this HTML gradient background effect to display properly.

This effect can be used for your entire web page background, or within your table cells.
To use the gradient effect as your web page background, use the following BODY tag:

To use the gradient effect within your HTML tables, place the following code within your table tag:

style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"

Although you can edit the gradient colors indicated in red, keep in mind, in order for the gradient effect to display properly, you must select one light color and another color that is several shades lighter.

Auto Fill Email Subject and Body

If you're using a list management system that requires specific text to be placed within the email subject or body of your email, this HTML code is for you.

Many times, if you request your visitors to type in a specific email subject or body text in order to subscribe to your publication, they may not type the required text correctly. This mistake will cause you to lose your subscriber, as your system will reject the subscription request.

To prevent this problem, you can create an email link that will automatically fill in the subject line and body when clicked on.

you@yourdomain.com
Add the following code to your HTML.

<A HREF="mailto:you@yourdomain.com?subject=Your Subject&body=Message for the body">you@yourdomain.com</a>

Open a new window on page unload

If you're looking for a way to open a new window when you leave a web page, this code may be what you're looking for.

This HTML code will open the web page you specify as soon as you leave the original web page.

This provides a great way to gain new subscribers to your publication, introduce a product or whatever you'd like.

Opening a new window on page unload, or in other words, when your visitor is leaving your page is also a great way to make one last try to make a sale. You're visitor is leaving your site anyway, so this is your last chance to sell them. Make it count.

If you don't have a special offer of your own to introduce, use the window to open an affiliate site that you may be promoting. This provides a great way to bring the affiliate site to their attention and even make a sale.

Place the following code, indicated in bold, within your web page's BODY tag:

Change the web address to the page you would like to open.

Spacing Your Images

If you're in need of an HTML code that will enable you to specify the spacing between your images, this HTML code is for you.

In the example below, although the images are the same, they aren't diplaying the same, as their vertical and horizontal alignment is different.

These images haven't been placed within an HTML table and aren't aligned via CSS. They are being displayed via the HSPACE and VSPACE attributes, which will enable you to specify the horizontal and vertical spacing between your images.

You can specify the horizontal and vertical spacing by editing the VSPACE and HSPACE values.

Protect Your Email Address From Spam Robots

If you're displaying your email address on your web site, you may be unknowingly setting yourself up to receive a ton of spam email. Unfortunately, spam robots are continuously crawling the Internet in search of email addresses they can use to not only send spam, but also sell to other spammers.

However, although it's very difficult to protect yourself from receiving spam email, there is a way you can still display your email address on your web site and protect it at the same time.

Instead of displaying the usual mailto:you@yourdomain.com email link within your web page, use the following code within your HTML:

<A HREF="mailto:you@yourdomain.com">Contact Us</A>

When your email link is clicked on, it will display your email address correctly.

Change the email address in the example above to the email address you would like to display.

By using this simple little code, you can protect your email address from spam bots.

Open a web page in a new window

If you're linking to other web sites within your web pages, you certainly don't want to just give your visitors away. For this reason, it is highly recommended that you open links to other web sites within in new window.

This will enable your web page to stay open within a window, even if your visitor clicks on an outside link, and prevent you from completely losing your visitors.

The following HTML code will enable you to open a web page in a new window:

Edit the text in red and add TARGET="_blank" to your link code.

Open all links in a new window

If you're linking to a lot of other web sites within your web page and would like to open all of your links in a new window, this HTML code is for you.

The following HTML code will enable you to open all of your links in a new window. Place this code between your <HEAD> and </HEAD> tags within your HTML:

Redirect to a New Page

If you need to redirect your visitors to a new page, this HTML redirect code may be just what you're looking for.

When designing a web site, many times you must change the location of a web page. However, if the page is popular, your visitors may have already linked to it. In addition, the Search Engines have most-likely already indexed the page.

For this reason, it is best to replace your page with a new page that will redirect your visitors to the new page. This provides a great way to provide your visitors with the information they were looking for and prevent you from losing your traffic.

However, when using this HTML redirect code, please ensure that you don't use it to trick the Search Engines, as this could get your web site banned. It is always best to work hard and learn quality ways in which to drive traffic to your web site.

Place the following HTML redirect code between the <HEAD> and </HEAD> tags of your HTML code.

The above HTML redirect code will redirect your visitors to another web page instantly. The content="0; may be changed to the number of seconds you want the browser to wait before redirecting.

Colored Text Boxes

(Internet Explorer)

Are you looking for a way to spice up your HTML forms? You can change the colors of your web page's text boxes to match the look of your web site.

Although you can change the color of your text boxes, it is highly recommended that you only use background and font colors that will enable the text to be easily viewed. For example, if you'd like to use a darker background color, you may want to consider using white for your text color.

Edit the text indicated in bold to suit your needs.

Using an Image Submit Button within an HTML Web Page Form

If you're using an HTML form on your web site and would like to use an image submit button instead of the boring standard submit button, this HTML code is for you.

In order for your form's input box and your image submit button to line up properly, you will need to place it within an HTML table. In addition, unless your image has a transparent background, you will need to set the table background color to the same color as the image background so that it will seamlessly blend together.

Note: In order for your form to function properly, you must have a form processing script that resides on your web server and then link to it within your form code. If you don't have one or aren't familiar with HTML forms, you may want to contact your server administrator for assistance.

Edit the text indicated in bold to suit your needs.

Using an image submission button within your HTML web page forms will enable you to easily spice up your forms.

Customizing HTML Web Page Horizontal Rules (Line Dividers)

The HTML web page horizontal rule <HR>, also known as a line divider, is used to divide content areas within a web page.

These HTML horizontal rules can be used to divide your web page content subjects, products, navigational menus or whatever you'd like. They provide a great way to add color to your pages without using images and will enable you to improve the appearance of your web pages.

If you're using line dividers (horizontal rules) within your web page, you can change the color, width and height of the line dividers by adding some attributes to your <HR> HTML code.

The examples below show various styles of the HTML <HR> tag. They are displayed in a table and the width attributes span the set percentage of the table. When used without a table, the width will span the set percentage of the entire web page.

<HR>

Edit the text indicated in bold to suit your needs.

Using customized HTML web page horizontal rules or line dividers will enable you to quickly and easily spice up your web pages.

Adding Color To Your HTML Web Page Table Background

HTML web page tables are used within a web page to organize content. They can be displayed with background colors, with or without borders, and can contain rows and columns displayed in an unlimited number of ways.

For example, if you look toward the top of this web page, right below the tabs, you will see our navigational links displayed within an HTML web page table with a grey background. We use color table backgrounds throughout this web site.

HTML Web Page Table

In this example, the HTML table below contains 2 columns and 1 row. The left column has the background color set to #72A4D2. The right column has the background color set to #EAE8E8.

This is an example of a table with background colors. This HTML table has 2 columns and 1 row.

Edit the text indicated in bold to suit your needs.

Using HTML web page tables with color backgrounds is a great way to add color to your web pages without using graphics.

Adding An Image Background To Your HTML Web Page Tables

HTML tables are displayed within a web page to neatly align content. They can contain image backgrounds, colored backgrounds, borders of different sizes, and an unlimited number of rows and columns.

In this example, the HTML table below contains 2 columns and 1 row. The left column contains the image. The original image appears below to enable you to see the actual size.

This is an example of an HTML table with an image background. This HTML table has 2 columns and 1 row.

Edit the text indicated in bold to suit your needs.

This is the actual image used within the above table:

Notice how the image duplicated itself to fill the table's background? Keep this in mind when creating your own image.

If you'd like to use the above image as an example to assist you in creating your own image, you're welcome to copy it.

Here's how:

Place your mouse pointer over the image above and right click on your mouse. Go to 'Save Picture As' - a window will load and enable you to select the folder on your computer in which you'd like to save the image.

Adding Color To Your Table Borders

(Internet Explorer)

If you're using HTML tables within your web page and would like to add a color border, this HTML code will assist you.

In this example, the table below contains 1 column and 1 row. The background color is set to #EAE8E8 and the border color is set to #C6C6C6.

This is an example of an HTML table with a color border and background.

This is an example of an HTML table with the standard border.

Edit the text indicated in bold to suit your needs.

Using a color border and background with your HTML web page tables looks much more professional than simply using the standard HTML table borders and backgrounds. Give it a try, you will most likely be very pleased with the new look.

Using CSS Style Tags For Mouseover Link Effects

If you're looking for a great way to spice up your HTML web page links, you can easily do so with style tags.

In this example, the active text link is underlined with the color set to #0000FF. When the mouse is placed over the link, the text color will change to #FF0000 and the underline disappears.

Place the <STYLE> tag between your <HEAD> and </HEAD> tags.

Example Link

Edit the text indicated in bold to suit your needs.

Style tags provide a great way to add some special effects to your pages. You can learn more about using style tags within the CSS Tutorial section.

How To Make Your Web Page Background Image Stationary

(Internet Explorer)

If you'd like to display a stationary image behind your text, you can do so by adding attributes to your HTML body tag.

Stationary background images remain in one place even when scrolling through the page. Only the text will move. To create this effect, place the code below within your <BODY> tag.

Edit the text indicated in bold to suit your needs.

When selecting your background image, keep in mind that your text will be moving over your image, so try to select an image that won't make your text difficult to read. To prevent your background image from tiling (repeating), place the following code between your <HEAD> and </HEAD> tags.

Using a stationary image background provides a great way to enhance your web page.

CSS Tutorial: An Introduction to Cascading Style Sheets

Cascading Style Sheets, better known as CSS, enable you to control the style and layout of a web page. They will enable you to specify link styles, fonts, margins, tables, colors, sizes, alignments and much more throughout your entire web page.

They can also be used to create a template like style sheet (stored within a separate file) that can be used throughout your web site. You can simply link to your style sheet within each of your web pages and have the ability to update the styles for your entire web site with just one file.

The Benefits of Using Cascading Style Sheets (CSS)

CSS will save you a great deal of time. When it comes to the Internet, there are really only two elements: Content and the way that content is presented. With HTML, we provide content, and define how that content will be presented within the HTML code. However, we are very limited as to what we can do with HTML.

Each browser is different and they see things differently. This is why webmasters are instructed from the very beginning to view their web pages in many different browsers, such as Internet Explorer, Netscape, Firefox, and Opera (among many others), to make sure that their web pages appear as they intended and expected them to from one browser to another.

Overall, the HTML code on the web page polices the content, and the CSS polices the HTML. This allows you to create web pages that are suitable for all browsers.

One of the best benefits of using CSS within your web pages is the ease of updating your web pages. If you'd like to make a change to your design, instead of having to change hundreds of web pages on your site, you can make one simple change to the CSS file, and it will automatically update all of the pages on your web site. CSS enables you to do in seconds what would take hours to do in HTML.

Creating Cascading Style Sheets (CSS)

Learning, creating, and working with CSS doesn't require much. You do not need any type of editor, as Cascading Style Sheets can be created using a plain text editor, such as Note Pad.

However, you will need a web browser. Internet Explorer and Firefox are the most popular ones, but there are many others. Once you create your pages and are using CSS, you must ensure that you view your web pages through multiple browsers to ensure they are displaying just as you had intended. Visit Any Browser to view your pages through different browsers.

You may also need a way to upload your pages to your web server. This is typically done with an FTP client, and there are many nice free one's available. You may also upload your files through the control panel of your web hosting service.

Internal and External Cascading Style Sheets (CSS)

CSS can be used in two ways. It can be used internally, which may be referred to as embedded or inline, or it can be used externally, which is often referred to as a linked style sheet. Ideally, you will be using linked styled sheets when you finish this tutorial.

The only time you may be using embedded CSS is if you would like to change an individual link or text, or have a one or two page web site. If you will have more than that, however, a linked style sheet is definitely the way to go.

CSS can be used in three different ways:

Inline CSS

Added to your standard HTML tags.

Embedded CSS

An embedded CSS is exactly as it sounds. The CSS code is actually placed within the HTML web page between the <HEAD> and </HEAD> tags.

Linked CSS

A linked style sheet, on the other hand, is a completely separate document that is linked to within a web page.

Prioritizing CSS and HTML tags

When using CSS, certain tags take precedence over others. Here's how the tags are prioritized:

HTML tags override all other tags.
CSS inline tags override embedded and linked tags.
CSS embedded tags override linked tags.
CSS linked tags won't override any other tags.

Formatting CSS Tags

CSS tags are formatted like this:

selector {property: value;}

The selector is a browser command and is followed by a property. The property is a word describing the selector, which further instructs the browser. The value specifies the value of the property.

Although this may sound a little confusing, CSS is formatted much like standard HTML. Let's compare the two formats:

HTML

<font size="2">

CSS

body {font-size:16px;}

As you can see in the comparison diagram above, the Element is equivalent to the Selector, the Attribute is equivalent to the Property and the Values are the same.

Inline Cascading Style Tags

Inline cascading style tags are used within standard HTML code using the STYLE parameter. The following example will remove the underline of an individual link:

Browser View:

Your Link

The STYLE parameter is added directly to your original HTML link code.

Inline style tags enable you to specify how each individual link will look.

Embedded Cascading Style Sheets

Embedded cascading style sheets (CSS) can perform the same tasks as the inline style tags. However, the coding is placed between the <HEAD> and </HEAD> tags within your HTML. You can specify how your entire page will appear including links, fonts, text and more, simply by using embedded style tags.

The following example will display your active text links (after a link has been clicked on) in a specific color. The hover color (when the mouse is placed over the link) will be displayed in an alternate color and the underline will disappear.

Browser View:

Example Link (Place your mouse over the link to view this example.)

The above code will display all of your links in a specific style.

Notice the code is placed within the comment tags? Comment tags look like this:


The comment tags are used to prevent older browsers that don't support style tags from displaying the CSS codes within their page.

The great thing about embedding style codes is that you can create your own classes of code. What this means is that you can specify different styles throughout your page and then call them within your page.

For example, you can add a class of code to a paragraph selector like this:

Notice the text highlighted in bold? This is a class name I made up. You can call it whatever you'd like. Simply add .yourtext following your selector.

To put this style into action or call it, simply place the following code within your HTML where you would like the style to be used:

Keep in mind, the text you place after your CSS selector (.yourtext) must be the same name as the code you place to call the style.

For example, if your class code looks like this:
p.text

the code you use to call the style will look like this:
<p class="text">

See how that works?

Linking CSS

The linking CSS method involves creating a file that defines specific styles. This CSS file can be used throughout your entire web site to specify everything from body styles and headings to paragraphs and HTML tables.

This file might look something like this:

BODY {font-family: Arial;
font-size: 12px;}
H1 {font-family: Georgia;
font-size: 16px;
font-weight: bold; color: blue}
P { font-weight: normal;
color: blue}

This file should be saved as style.css and uploaded to your server where you store your HTML files.

When using a style sheet, you must place a link to your style.css file within your HTML between your <HEAD> and </HEAD> tags like this:

<html>
<head>
<title>Your Page Title</title>
<link rel=stylesheet href="http://www.yourdomain.com/style.css" type="text/css">
</head>
<body>
Page Content
</body>
</html>

You can link to your style sheet within as many of your pages as you would like. This will give you the ability to update all of your pages at one time, simply by changing the styles within your style.css file.

CSS Tutorial: Getting Started - Creating a Basic HTML Web Page

Creating a Folder for Your Web Page

Prior to creating your web page, your first step should be to create a folder on your desktop or within your My Documents folder to hold your new web page files. You can call it web site or whatever you'd like.

Your next step will be to create a basic HTML page. Simply open a plain text editor, such as Note Pad, and type or paste in the HTML code that you see in the box below. Each element of that code will be explained below, as it is important that you understand what these codes are and what they mean.

Here is the code that you should copy and paste into your text editor:

<html>
<head>
<title>Your Page Title</title>
</head>
<body>

Your Web Page Content

</body>
</html>

HTML Tags

Everything you see between the < and > symbols are html codes, which are also referred to as html tags. These tags are telling the web browser how they should display the page.

The <html> tag tells the browser that it is about to see HTML coding.
The <head> tag contains information about the page, such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.
The <body> tag tells the browser that the part of your web page that should be viewable by others is about to start. The various tags used inside the body tag tell the browser how to display the page.

For a complete list of HTML codes and examples, visit our HTML Codes Chart section.

Each HTML tag contains an opening tag and a closing tag. The opening tag is written with the command enclosed with brackets.

Example: <HTML>

The closing tag contains a forward slash followed by the command enclosed with brackets.

Example: </HTML>

The opening tag is telling the browser to begin the specified action and the closing tag is telling the browser to end the action.

Saving Your HTML Document

Once you have copied and pasted the above HTML code into your text editor, your next step will be to save the document into the new folder you created. If your new web page will be your main or starting page, you should save it as index.htm or index.html, as index is the file name most web servers will look for when someone types your web address into a web browser. Secondary pages should be saved using the pages most relevant keyword phrase. For example, if your page is about dog grooming tips, then you might save your page as dog_grooming_tips.htm.

Next, place some content in your new web page between the <body> and </body> tags. The content may be an article or whatever you'd like:

<body>

This Is Content.

This is content that others will be able to see when they visit your web page. When content is pasted in, it won't have any formatting. It will just be text that reads from left to right, in one long paragraph. It should have a heading, followed by the actual content. In this section, you will learn how to format the text so that it is easier to read and understand. Use any article or content that you have written, and simply copy and paste it into the HTML document that you have created.
</body>

Formatting HTML Text

Now, as you can see, the text isn't formatted. It isn't laid out in paragraphs, and it's not that special. Even if you copy text in that is formatted and separated into paragraphs, you will find that when you view it in a web browser, the formatting is gone. That is because the format requires special tags.

Heading Tags

Let's start with the heading of the page. In the example above, the heading says This Is Content. To turn that into something that looks like a heading, we use the heading tags. Heading tags are presented as <H1></H1> and may go as high as <H6></H6>. The lower the number, the bigger the text will appear. The title or heading of the page goes between these tags, so that it appears like this: <H1>This Is Content</H1>.

Paragraph Tags

Your next step will be to divide the content into paragraphs. This is done by enclosing each paragraph with the <p></p> tags. The opening <p> tag is used at the beginning of a paragraph, and the closing </P> tag is used at the end of each paragraph.

If you'd like to move a sentence or some text to the next line, you can do so by using the <br> (break) tag at the end of or in between your paragraphs.

Bold, Italics and Underline

To further format your text, you can use additional HTML tags, such as <b></b> tag, which will make any text between the opening and closing <b> tags bold. To italicize your text, use the <i></i> tags. You can underline your text with the <u></u> tags.

You can find many more tags you can use within the HTML Codes Chart section.

This is very easy to memorize: b stands for bold, I stands for italicize, and u stands for underline. P stands for paragraph, and br stands for break. H1 stands for heading 1.

By implementing these tags, you will see that your code looks like the following example:

<html>
<head>
<title>Your Page Title</title>
</head>
<body>

<u><H1>This Is Content</u></H1>

<p>This is content that others will be able to see when they visit your webpage. When content is pasted in, it won't have any formatting. It will just be text that reads from left to right, in one long paragraph. It should have a heading, followed by the actual content. </p>

<p>In this section, you will learn how to <b><i>format</i></b> the text so that it is easier to read and understand. Use any article or content that you have written, and simply copy and paste it into the HTML document that you have created. </p>

</body>
</html>

All of the HTML tags are in red so that they are easier for you to see, but they will not actually be in red within your HTML document. When you view the web page in your browser, you will see that it looks like this:

This Is Content

This is content that others will be able to see when they visit your webpage. When content is pasted in, it won't have any formatting. It will just be text that reads from left to right, in one long paragraph. It should have a heading, followed by the actual content.

In this section, you will learn how to format the text so that it is easier to read and understand. Use any article or content that you have written, and simply copy and paste it into the HTML document that you have created.

If any of your tags appear within the document when you view it in your browser, this usually means that you didn't close a tag that you opened. Now, you are ready to learn how to use CSS.

CSS Tutorial: Embedding Cascading Style Sheets (CSS) within a Web Page

Embedding Cascading Style Sheets within a web page can be done in two ways - with the code placed between the the <head> and </head> tags or inline, which requires the code to be placed directly within the HTML tag.

We will begin with an example of embedding CSS inline.

Inline Cascading Style Sheets (CSS)

Inline cascading style tags are used within standard HTML code using the STYLE parameter.

The following example will remove the underline of an individual link:

Your Link

Edit the web address to suit your needs.

STYLE="TEXT-DECORATION: NONE" - Specifies the text decoration of the link.

In the next example, the linked text has a highlightd background:

Linked Text

<A HREF="http://www.yourdomain.com" STYLE="background:yellow; color:black">Linked Text</A>

Edit the text in bold to suit your needs.

STYLE="background:yellow; - Specifies the background color of the linked text.
color:black - Specified the text color of the linked text.

The next example will display an HTML form input box with a colored background:

To view this example, place your cursor within the above input box and type.

Edit the text indicated in bold to suit your needs.

STYLE="color: #FFFFFF; - Specifies the text color when typing in the input box.
background-color: #72A4D2; - Specifies the input box background color.

Visit the 216 Safe Colors section to find additional color codes.

Embedding Style Tags between the Head Tags

Now that you have a basic understanding of inline style tags, we'll move on to embedding style tags between the <head> and </head> tags.

In the previous lesson, we focused on creating a basic HTML web page that looks like this:

<html>
<head>
<title>Your Page Title</title>
</head>
<body>

<u><H1>This Is Content</u></H1>

<p>This is content that others will be able to see when they visit your webpage. When content is pasted in, it won't have any formatting. It will just be text that reads from left to right, in one long paragraph. It should have a heading, followed by the actual content. </p>
<p>In this section, you will learn how to <b><i>format</i></b> the text so that it is easier to read and understand. Use any article or content that you have written, and simply copy and paste it into the HTML document that you have created. </p>
</body>
</html>

To embed Cascading Style Sheets (CSS) within your web page, we will start with the basic style tag. Type or copy and paste the following code into the HTML portion of your web page between the <head> and </head> tags:

Here is how your page should look:

<html>
<head>
<title>Your Page Title</title>

By using the <style> tag, you are telling the browser that you are about to define the style of your page. The additional tags within the <style> tag are providing the browser with some additional information.

The first tag is type= "text/css". This tag tells the browser that the style of the page will be defined using plain text. The title="styleid" portion of the tag isn't for the browser at all. It is for you, so that you can define the style that you are using. It can be called anything, such as style, mystyle, or anything you want.

The last portion of the style tag is media="all". This tells the browser how the page should appear. For instance, you could just use the tag media="screen" in which case the page would only display suitably on a computer screen. If you used the media="print" tag, the browser would display the content in a format that was suitable for printing only. By using the media="all" tag, you are specifying that the browser should display the page in a media type that is suitable for everything.

Comment Tags

The comment tags  enable you to hide certain text within a web page. Although it displays within your HTML code, it will not display within the browser view of your web page.
Following the <style> tag, you will see the following:


In the next section, you will learn how to use CSS to specify all aspects of your web page formatting.

CSS Tutorial: Using Cascading Style Sheets (CSS) to Specify Web Page Formatting

Formatting Your Web Page

CSS will enable you to specify all aspects of your web page formatting, such as your web page background color, font size, font color, font face, page margins and much more simply by including special CSS tags between the comments.

Let's start with defining the body of the web page. Using HTML code, this is done inside the <body> tag. But using CSS, it is done within the comment section of the <style> tag. Therefore, there is no need to define anything inside the HTML <body> tag. In CSS, the body tag looks like this: body { }. The information that concerns how the body will be styled goes inside the brackets. The upper portion of your code should now look like this:

<html>
<head>
<title>Your Page Title</title>

Formatting the Background and Foreground Color of a Web Page with Cascading Style Sheets (CSS)

Next, we define the background color of the page. Colors are defined, in both HTML and CSS with a series of letters and numbers. These numbers are referred to as hexadecimal numbers, and each one represents a color. For instance, the hexadecimal for the color white is #FFFFFF. The hexadecimal is always represented with the # sign followed by a combination of six letters or numbers.

Visit the 216 Safe Colors section to find a complete color code chart.

With CSS, we can define different colors for the background and foreground of our web page. This is done as follows:

Body { background-color: 000000; color: ffffff }

Our page now has a black background with a white foreground. However, please note, defining a foreground color is optional. In addition, defining the background color is also optional. This should only be defined if you'd like a background color other than the default color of white.

Anytime you are defining a format in CSS, you must first state what you are defining, followed by a colon, and then the value. If you would like to include additional tags, they must be separated with a semicolon.

In our example, we are first defining the background color. Following the background color is a colon, which is followed by the value (hexadecimal color code). A semicolon is placed at the end to tell the browser that this definition is complete.

Formatting the Margin of a Web Page with Cascading Style Sheets (CSS)

In the next example, we will be defining the web page margins. Type in margin: 100px.
PX stands for pixels and is telling the browser to display the margin at 100 pixels.

Body { background-color: 000000; color: ffffff; margin: 100px }

Formatting the Font Face within a Web Page with Cascading Style Sheets (CSS)

Next, we need to give our fonts more style. We are still working in the <style> tag, inside the comment tag. Starting with the font face or typeset, it is important to use font faces that are commonly installed on computers. If the font face that you select is not on your user's computer, the page will be displayed with their default font face. Therefore, the text may not appear on that user's computer screen as you had intended.

You can specify more than one font face. By doing this, the browser will look to see if the first font is installed on the users computer. If it is not, it will look for the second, and then the third, and so on, until it finds one that is installed. In CSS terms, this is known as a font family.

A good selection of fonts would be Arial, Verdana, Georgia, Times New Roman, and Sans-Serif.

Add this to your CSS as follows:

Font-family: Arial, Verdana, Georgia, "Times New Roman", Sans-Serif;

Note that each font face is separated by a comma, and Times New Roman is in quotation marks, while others are not. Any time you use a font face that has more than one word in its name separated by spaces, you must use quotation marks.

Formatting Font Size within a Web Page with Cascading Style Sheets (CSS)

Next, define the size of the fonts, either using terms, such as small, or numbers, such as 1 or +1. It can also be defined in pixels. Browsers recognize and accept font sizing in a variety of ways.

We will be using pixels within the following example:

Font-size: 12px;

Formatting Spacing between Lines within a Web Page with Cascading Style Sheets (CSS)

The spacing between lines can also be defined. If you don't want to define the line spacing, it will naturally be set to 120% of the size of the font. However, if you want more line spacing than that between lines of text, you can specify a different amount.

Line-height: 160%

Notice that there is no semicolon after 160%. This is because we are finished defining the body section of the CSS. The final definition needs no semicolon after it.

The upper portion of your HTML/CSS code should now look like this:

</body>
</html>

Formatting Head Tags within a Web Page with Cascading Style Sheets (CSS)

You can use CSS to specify how your Head tags should be formatted. For example, you can specify the font face and color of the <H1> tag within your web page like this:

H1 { color: ff0000; font-family: Arial, "Times New Roman"; }

Your HTML code would look like this:

</body>
</html>

As you can see, we are still working inside the comment tag of the <style> tags. Now that the H1 definition has been added, anywhere the H1 tag appears within the web page, the color of that text will be red, and it will appear in the Arial font.

Formatting Paragraph Indentions and Letter Spacing within a Web Page with Cascading Style Sheets (CSS)

With CSS, you can even control the indention of paragraphs and the spacing between letters in words. To define the indention that should be used for each paragraph, include the following code:

P { text-indent: 5em }

This will cause a five space indention at the beginning of each paragraph. To specify spacing between letters, use the following example:

P { text-indent: 5em; Letter-spacing: 0.5em }

Now, the paragraphs will be indented five spaces, and the spacing between each letter will be half a space. This also works when defining headings, such as:

H1 {color: ff0000; font-family: Arial, "Times New Roman"; letter-spacing: 0.5em}

As you are beginning to see, CSS allows you to manipulate all of the text within the page in ways that HTML doesn't allow. In the following lessons, you will learn how to manipulate other HTML tags with CSS.

CSS Tutorial: Formatting Bulleted and Numbered Lists with Cascading Style Sheets (CSS)

In HTML, to create a list, you use either the <ul></ul> tag or the <ol></ol> tag with the <li></li> tag used in between to define list items. The <ul></ul> tag defines an unordered list, which will have bullet points beside each list item, while the <ol></ol> tag defines an ordered list that will have numbers beside each item. The first example below is an HTML unordered list, and the second sample is an ordered list.

HTML Unordered List

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three<li>
</ul>

In a web browser, this code would appear as:

Item one
Item two
Item Three

HTML Ordered List

<ol>
<li>Item one</li>
<li> Item two</li>
<li> Item three</li>
</ol>

In a web browser, this code would appear as:

Item one
Item two
Item three

However, you may want to use squares instead of round bullet points, or roman numerals instead of numbers. In HTML, you must specify this in each <li> tag, using either <li type="square"> for square bullets or <li type="I"> for roman numerals. Remember, in HTML, this must be done inside each HTML <li> tag.

However, if you are using CSS, this can be done once and it will be applied anywhere that the <li> tag occurs within your page. You can also use images instead of bullet points, numbers, or roman numerals.

For example, to use square bullets within an unordered list:

ul { list-style-type: square }

If you would like to use an image, use the following code:

ul {list-style-image: url (images/bullet.gif)}

Of course, the image that you use needs to be uploaded to the images directory on your web server before it will appear on your page. Again, this code goes in the comment section of the <style> tag, which is inside the <head> tag inside the HTML coding.

CSS Tutorial: Formatting Hyperlinks with Cascading Style Sheets (CSS)

Links are pieces of text that are hyperlinked to other web pages. They are 'clickable' meaning that a user can put their mouse cursor over the link, click, and go to the designated web page. There are four states that a link may be in on an HTML web page: the link, a visited link, an active link, and a hovered link.

The link, of course, is just the link as it appears when no action has been taken, and the cursor isn't over the link. The default color for links is blue, and they are usually underlined. However, with CSS, you can change this. A visited link is one that the user has visited, and it is usually no longer blue to the user - but it is still clickable.

An active link is a link that has just been clicked. The link turns a different color between the time that the user clicks the mouse button down and then let's goes of the mouse button, meaning that they have activated the link. A hovered link refers to the time that the user has their mouse cursor over a link, but has not clicked.

To manipulate these links, we use the following in our CSS:

a:link {color: #008000; text-decoration: none}
a:visited {color: #cccccc; text-decoration: none}
a:active {color: #ff0000; text-decoration: underlined}
a:hover {color: #3300ff; text decoration: underlined}

When we put the above code within our HTML web page CSS, all of the links on the web page will be green. When the user puts their mouse cursor over the link, it will turn blue, and be underlined. When they click the link, it will temporarily turn red and be underlined, and when they return to this page, the link that they clicked will be gray.

The upper portion of the web page code now looks like this:

</body>
</html>

HTML allows us to format and manipulate text to make our web pages more attractive and appealing; however, Cascading Style Sheets enable us to make them even more attractive and appealing. This is one of the biggest benefits of CSS, other than the fact that using CSS saves loads of time when creating or changing web pages.

In the next section, you'll learn how to display tables with Cascading Style Sheets.

CSS Tutorial: Creating Tables within a Web Page with Cascading Style Sheets (CSS)

Here is what we have so far:

<p>In this section, you will learn how to <b><i>format</i></b> the text so that it is easier to read and understand. Use any article or content that you have written, and simply copy and paste it into the HTML document that you have created. </p>

</body>
</html>

Now, let's assume that we want to add a navigational menu on the left hand side of the page. Normally, using HTML, we would create this with the use of tables. But we don't have to do that with CSS. Let's say that we want to include the navigational menu, which will have four links and a green background.

The first thing we want to do is to set up a class. A class in CSS is a period followed by a codename for the class. In this example, we are going to set up a class called navigation, so, our code will look like this:

<html>
<head>
<title>Your Page Title</title>

<style type= "text/css" title="styleid" media="all">

</style>

</head>
<body>

</body>
</html>

The class that we just added is in bold green in the sample above. Don't forget the period in front of the codename. Now, in this class, we have a left column with an absolute position. This means that the element will appear exactly and absolutely where we want it to appear, which in this case is 20px from the top of the page and 10 pixels from the left side. However, that isn't quite enough.

Now, in the HTML code, we have to specify where we want our navigation to appear. This is done by using the .leftcolumn code name we set up. Since we've set our position as absolute, the CSS will align it just as we specified.

The following code should be added to our HTML document:

Next, we need to place the codename into the HTML coding where we would like the CSS navigational menu to appear:

Here is how the HTML document will look:

Since we have created a left column, however, we must also create a right column. It's actually already there. That portion of the page where we want content. We just have to assign a class to it, as follows:

Add to CSS:

.rightcolumn { position: absolute; top-margin: 20px; left-margin: 150px; background-color: #FFFFFF }

Add to HTML:

<DIV class="rightcolumn">

<u><H1>This Is Content</H1></u>

<p>This is content that others will be able to see when they visit your webpage. When content is pasted in, it won't have any formatting. It will just be text that reads from left to right, in one long paragraph. It should have a heading, followed by the actual content. </p>
<p>In this section, you will learn how to <b><i>format</i></b> the text so that it is easier to read and understand. Use any article or content that you have written, and simply copy and paste it into the HTML document that you have created. </p>

</DIV>

</body>
</html>

CSS Tutorial: Cascading Style Sheets (CSS) Classes and ID's

Classes and ID's are used much the same way in CSS. However, classes are often used to identify groups of selectors, while ID's are used to identify one selector or element. Class is used for plain HTML documents, while ID's are usually used for documents that contain JavaScript or Dynamic HTML (DHTML).

A class is created, as explained above, with the use of a period and a codeword for the class. An ID, however, is denoted with the # symbol, followed by the codeword. So, using our example above, if you wanted to use an ID instead of a class, you would change .leftcolumn to #leftcolumn.

You can use either classes or ID's with just about any HTML tag. It can be used with the <i></i>, <u></ul> and <p></p> and many others. Furthermore, even if you use tables in your HTML, you can define how those tables behave using classes and ID's in CSS as well, however, that is more advanced.

Linked Style Sheets

Thus far, we have covered how to use embedded CSS. Embedded CSS goes directly into the <head></head> tags of the HTML code. However, one of the wonderful things about CSS is that it can help you to quickly create or change web pages. In this case, you really need to use a separate CSS document along with your HTML document.

For instance, you wouldn't want to place the CSS within the HTML document, as if you need to make any changes to your design, you would have to change every single HTML document on your web site to make them all look the same. For this reason, you will be much better off creating a Cascading Style Sheet (CSS) file and then link to it within your web pages. This will enable you to change your background color, link colors, or whatever you'd like simply by changing the code within your CSS file. The changes you make will automatically affect all of your web pages.

Linking to a Cascading Style Sheet within a Web Page

Linking your web pages and CSS pages together is incredibly easy. Let's start with the HTML. The HTML document that we started with was:

<html>
<head>
<title>Your Page Title</title>
</head>
<body>

<DIV class="rightcolumn">

<u><H1>This Is Content</H1></u>

<p>This is content that others will be able to see when they visit your webpage. When content is pasted in, it won't have any formatting. It will just be text that reads from left to right, in one long paragraph. It should have a heading, followed by the actual content. </p>
<p>In this section, you will learn how to <b><i>format</i></b> the text so that it is easier to read and understand. Use any article or content that you have written, and simply copy and paste it into the HTML document that you have created. </p>

</DIV>

</body>
</html>

Now, in the <head></head> tag, we want to link to the style sheet by adding the following:

The above code will look something like this within your HTML code:

<html>
<head>
<title>Your Page Title</title>
<link type="text/css" rel="stylesheet" href="mycss.css">
</head>
<body>
<DIV Class="leftcolumn">
<a href="link1.html>Link 1</a><br>
<a href="link2.html>Link 2</a><br>
<a href="link3.html>Link 3</a><br>
<a href="link4.html>Link 4</a><br>
</DIV>

<DIV class="rightcolumn">

<u><H1>This Is Content</H1></u>

<p>This is content that others will be able to see when they visit your webpage. When content is pasted in, it won't have any formatting. It will just be text that reads from left to right, in one long paragraph. It should have a heading, followed by the actual content. </p>
<p>In this section, you will learn how to <b><i>format</i></b> the text so that it is easier to read and understand. Use any article or content that you have written, and simply copy and paste it into the HTML document that you have created. </p>

</DIV>

</body>
</html>

For our example web page, that is all of the HTML we need. Now, we need to make our style sheet. All the style sheet requires is the elements that pertain to the HTML document. Unlike HTML, a style sheet does not require any special tags at the beginning or end of the document to indicate a beginning or ending - it simply needs the elements that pertain to your web page.

Also note, you do not have to tell the web browser what it is seeing. Since the CSS isn't embedded, you don't need to include the following tag:

However, if you would like to define the title of the style sheet and the media that should dictate how your pages are displayed, you can also choose to include it.

Finally, here is our finished style sheet to go along with the finished HTML document above:

body { background-color: 000000; color: ffffff;
margin: 100px;
font-family: Arial, Georgia, "Times New Roman", Verdana, Sans-Serif;
font-size: 12px;
Line-height: 160%
}
H1 { color: ff0000; font-family: Arial, "Times New Roman"; }
ul {list-style-image: url (images/bullet.gif)}
a: link {color: #008000; text-decoration: none}
a: visited {color: #cccccc; text-decoration: none}
a: active {color: #ff0000; text-decoration: underlined}
a: hover {color: #3300ff; text decoration: underlined}
.leftcolumn { position: absolute; width: 150px; top-margin: 20px; left-margin: 10px; background-color: #009900 }
.rightcolumn { position: absolute; top-margin: 20px; left-margin: 150px; background-color: #FFFFFF }

The above text should be placed within any text editor, and saved as mycss.css - this document and the HTML document, which is named index.htm or index.html should be uploaded to a web server. That's all there is to it.

Now that you see how easy using and implementing CSS is, you can have the ability to create and edit the style of your web pages very quickly.

In the following pages, you will find a CSS property index that will greatly help you understand what you can do with CSS. Note that these are not the only possible properties. There are literally thousands of different properties that can be used in CSS.

SAGAR S BHANUSHALI

CSS Tutorial: Cascading Style Sheet Codes Chart - Property Index

Property	Possible Values	Description
background	background-color background-image background-repeat background-attachment background-position	Sets all background properties
border	border-style border-color- border-width- border-bottom-width thin medium thick length color border-right-width border-top-width none hidden dotted dashed solid double groove ridge inset outset	Controls border properties
clear	left right both none	Prevents a floating element from being placed near the specified edge of another element.
cursor	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize sz-resize w-resize	Allows you to determine what type of cursor appears on the users screen.
display	none inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption	Determines how an element is displayed, or even if it is displayed.
float	left right none	Determines where text or an image will appear within a separate element.
position	static relative absolute fixed bottom clip left overflow right top vertical-align z-index	Determines how an element will be positioned.
visibility	visible hidden collapse	Determines whether an element is visible, invisible, or collapsed.
height	auto length %	Determines the height of an element.
line-height	normal number length %	Determines the space between lines.
max-height	none length %	Determines the maximum height of an element.
width	auto % length	Determines the maximum width of an element.
max-width	none length %	Determines the minimum width of an element.
min-height	length %	Determines the minimum height of an element.
min-width	length %	Determines the minimum width of an element.
font	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar	Determines all font properties.
font-family	family-name generic-family	Determines fonts that will be used. If a font is not installed on a user's computer, the browser will try each font in the font family until one is found.
font-size	xx-small x-small small medium large x-large xx-large smaller larger length %	Determines the size of the font.
font-size-adjustment	none number	Used to adjust the font size if other elements or factors change the size of it.
font-style	normal italic oblique	Determines the size of the fonts.
font-stretch	normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded	Used to shrink or enlarge the span of the fonts.
font-variant	normal small-caps	Used to cause fonts to be displayed either as fonts in small capital letters or in normal letters.
font-weight	normal bold bolder lighter 100 200 300 400 500 600 700 800 900	Determines the weight or boldness of a font.
content	string url counter(name) counter(name, list-style-type) counters(name, string) counters(name, string, list-style-type) attr(X) open-quote close-quote no-open-quote no-close-quote	Creates specific content in a document.
quotes	none string string	Determines the type of quotation marks used.
list-style	list-style-type list-style-position list-style-image	Determines the style of a list.
list-style-image	none url	Determines what image should be used for a list.
list-style-position	inside outside	Determines whether the list element is on the inside or the outside of the list item.
list-style-type	none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha	Determines the style of a list.
margin	margin-bottom margin-top margin-left margin-right	Used to determine and set margins on the page.
outline	outline-color outline-style outline-width	Determines the properties of an outline.
padding	padding-top padding-right padding-bottom padding-left	Sets padding properties.
text	color direction line-height letter-spacing text-align text-decoration text-indent text-shadow text-transform Unicode-bidi white-space word-spacing	Determines text properties.
a	:link :visited :focus :hover :first-child :lang :active	Determines link properties

HTML Complete Sollution

HTML

Creating an HTML Page

Basic HTML Document Code Structure

HTML Tags Chart

Creating an HTML Status Bar Link Description

Creating an HTML Mouseover Text Description (IE)

Creating an HTML Escape From Frame Link

Creating HTML Links within the same Web Page

Removing an HTML Web Page Link Underline

HTML Codes and Tips

Changing Table Background Colors on Mouseover (IE ONLY)

Embedding Web Pages within Web Pages

Creating A Placeholder For An Empty Table Cell

Displaying Text With An Image Within HTML Code

Creating an HTML Email Form

Removing An HTML Hyperlink Underline

Changing Web Page Hyperlink Colors

Linking to a Specific Location in a Web Page

Escape From Frame HTML Hyperlink

Resizing Your Images

Changing Web Page Margins

Web Page HTML Mouseover Text Description (Internet Explorer)

Highlighting Links and Text

Ad Tracking With A Link

Preventing Browser Cache

Preventing Search Engine Indexing

Auto Fill Email Subject and Body

Open a new window on page unload

Spacing Your Images

Protect Your Email Address From Spam Robots

Open a web page in a new window

Redirect to a New Page

Colored Text Boxes

Using an Image Submit Button within an HTML Web Page Form

Customizing HTML Web Page Horizontal Rules (Line Dividers)

Adding Color To Your HTML Web Page Table Background

HTML Web Page Table

Adding An Image Background To Your HTML Web Page Tables

Adding Color To Your Table Borders

Using CSS Style Tags For Mouseover Link Effects

How To Make Your Web Page Background Image Stationary

CSS Tutorial: An Introduction to Cascading Style Sheets

The Benefits of Using Cascading Style Sheets (CSS)

Creating Cascading Style Sheets (CSS)

Internal and External Cascading Style Sheets (CSS)

Inline CSS

Embedded CSS

Linked CSS

Prioritizing CSS and HTML tags

Formatting CSS Tags

Inline Cascading Style Tags

Embedded Cascading Style Sheets

Linking CSS

CSS Tutorial: Getting Started - Creating a Basic HTML Web Page

Creating a Folder for Your Web Page

HTML Tags

Saving Your HTML Document

Formatting HTML Text

CSS Tutorial: Embedding Cascading Style Sheets (CSS) within a Web Page

Inline Cascading Style Sheets (CSS)

Embedding Style Tags between the Head Tags

Comment Tags

CSS Tutorial: Using Cascading Style Sheets (CSS) to Specify Web Page Formatting

Formatting Your Web Page

Formatting the Background and Foreground Color of a Web Page with Cascading Style Sheets (CSS)

Formatting the Margin of a Web Page with Cascading Style Sheets (CSS)

Formatting the Font Face within a Web Page with Cascading Style Sheets (CSS)

Formatting Font Size within a Web Page with Cascading Style Sheets (CSS)

Formatting Spacing between Lines within a Web Page with Cascading Style Sheets (CSS)

Formatting Head Tags within a Web Page with Cascading Style Sheets (CSS)

Formatting Paragraph Indentions and Letter Spacing within a Web Page with Cascading Style Sheets (CSS)

CSS Tutorial: Formatting Bulleted and Numbered Lists with Cascading Style Sheets (CSS)

CSS Tutorial: Formatting Hyperlinks with Cascading Style Sheets (CSS)

CSS Tutorial: Creating Tables within a Web Page with Cascading Style Sheets (CSS)

CSS Tutorial: Cascading Style Sheets (CSS) Classes and ID's

Linked Style Sheets

Linking to a Cascading Style Sheet within a Web Page

CSS Tutorial: Cascading Style Sheet Codes Chart - Property Index

Comments