Thursday, October 14, 2010

XHTML Tag List

XHTML tags are used to mark-up XHTML elements .XHTML tags are case sensitive, All tags in XHTML come in pairs for example <b> and </b>. The text that lies between the start tag and the end tag is called the element content.In these pair of tags,the first tag is the start tag,and the second tag is called end tag

DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict,F=Frameset & T=Transitional

Tag	Description	DTD
<!--...-->	Defines a comment	STF
<!DOCTYPE>	Defines the document type	STF
<acronym>	Defines an acronym	STF
<abbr>	Defines an abbreviation	STF
<a>	Defines an anchor	STF
<address>	Defines an address element	STF
<area>	Defines an area inside an image map	STF
<applet>	Deprecated. Defines an applet	TF
<basefont>	Deprecated. Defines a base font	TF
<base>	Defines a base URL for all the links in a page	STF
<b>	Defines bold text	STF
<big>	Defines big text	STF
<bdo>	Defines the direction of text display	STF
<blockquote>	Defines a long quotation	STF
<br>	Inserts a single line break	STF
<body>	Defines the body element	STF
<button>	Defines a push button	STF
<center>	Deprecated. Defines centered text	TF
<caption>	Defines a table caption	STF
<cite>	Defines a citation	STF
<col>	Defines attributes for table columns	STF
<code>	Defines computer code text	STF
<dd>	Defines a definition description	STF
<colgroup>	Defines groups of table columns	STF
<dir>	Deprecated. Defines a directory list	TF
<del>	Defines deleted text	STF
<dfn>	Defines a definition term	STF
<div>	Defines a section in a document	STF
<dt>	Defines a definition term	STF
<dl>	Defines a definition list	STF
<em>	Defines emphasized text	STF
<fieldset>	Defines a fieldset	STF
<form>	Defines a form	STF
<font>	Deprecated. Defines text font, size, and color	TF
<frameset>	Defines a set of frames	F
<frame>	Defines a sub window (a frame)	F
<h1> to <h6>	Defines header 1 to header 6	STF
<head>	Defines information about the document	STF
<i>	Defines italic text	STF
<html>	Defines an html document	STF
<img>	Defines an image	STF
<hr>	Defines a horizontal rule	STF
<iframe>	Defines an inline sub window (frame)	TF
<input>	Defines an input field	STF
<ins>	Defines inserted text	STF
<isindex>	Deprecated. Defines a single-line input field	TF
<label>	Defines a label for a form control	STF
<kbd>	Defines keyboard text	STF
<legend>	Defines a title in a fieldset	STF
<li>	Defines a list item	STF
<link>	Defines a resource reference	STF
<meta>	Defines meta information	STF
<map>	Defines an image map	STF
<noframes>	Defines a noframe section	TF
<menu>	Deprecated. Defines a menu list	TF
<noscript>	Defines a noscript section	STF
<optgroup>	Defines an option group	STF
<object>	Defines an embedded object	STF
<ol>	Defines an ordered list	STF
<option>	Defines an option in a drop-down list	STF
<pre>	Defines preformatted text	STF
<p>	Defines a paragraph	STF
<param>	Defines a parameter for an object	STF
<q>	Defines a short quotation	STF
<samp>	Defines sample computer code	STF
<s>	Deprecated. Defines strikethrough text	TF
<script>	Defines a script	STF
<small>	Defines small text	STF
<strong>	Defines strong text	STF
<select>	Defines a selectable list	STF
<span>	Defines a section in a document	STF
<strike>	Deprecated. Defines strikethrough text	TF
<style>	Defines a style definition	STF
<sup>	Defines superscripted text	STF
<sub>	Defines subscripted text	STF
<table>	Defines a table	STF
<tbody>	Defines a table body	STF
<thead>	Defines a table header	STF
<td>	Defines a table cell	STF
<textarea>	Defines a text area	STF
<tfoot>	Defines a table footer	STF
<th>	Defines a table header	STF
<title>	Defines the document title	STF
<xmp>	Deprecated. Defines preformatted text
<tt>	Defines teletype text	STF
<tr>	Defines a table row	STF
<u>	Deprecated. Defines underlined text	TF
<var>	Defines a variable	STF
<ul>	Defines an unordered list	STF

XHTML Comments

You can add comments to XHTML documents to remind yourself or a document of what others were trying to make a web page. XHTML comments are just the source code of the page and is invisible to your users page - that is, the browser ignore the XHTML content of the comments. XHTML comment is an example of this:

e.g:
<html>
    <head>
    </head>
    <body>
        <h1>This is XHTML comment</h1>
        <p>XHTML comments are a useful way for Web developers</p>
        
    </body>
</html>

XHTML Encoding

XHTML files, and any other text file is stored using a particular character encoding. Since there are many different character encoding in the world, and have no idea what the settings in your default browser of the visitor, always a good idea to explicitly what the encoding used to make your web page . Here is an example of how to declare the character encoding, in this case, the Unicode encoding is used:
e.g:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

When the browser sees this tag, it will know that the page is UTF-8, and displays the correct. XHTML requires that you declare the encoding, if it is something different then the default UTF-8 or UTF-16. You can also use XML defines the character encoding. Some character encodings are almost identical.

International Character Set Codes
World Wide Web Consortium (W3C) recommends the use of UTF-8 if possible - UTF-8 can be used in all languages, and is recommended charset on the Internet. Support is growing fast. However, here is a partial list of countries,languages, & the older characters are generally used for:

Language (country)	Charset
Afrikaans (AF)	iso-8859-1, windows-1252
Catalan (CA)	iso-8859-1, windows-1252
Bulgarian (BG)	iso-8859-5
Basque (EU)	iso-8859-1, windows-1252
Byelorussian (BE)	iso-8859-5
Croatian (HR)	iso-8859-2, windows-1250
Czech (CS)	iso-8859-2
Danish (DA)	iso-8859-1, windows-1252
Dutch (NL)	iso-8859-1, windows-1252
English (EN)	iso-8859-1, windows-1252
Finnish (FI)	iso-8859-1, windows-1252
Albanian (SQ)	iso-8859-1, windows-1252
Esperanto (EO)	iso-8859-3*
Estonian (ET)	iso-8859-15
Hungarian (HU)	iso-8859-2
Faroese (FO)	iso-8859-1, windows-1252
Hebrew (IW)	iso-8859-8
French (FR)	iso-8859-1, windows-1252
Galician (GL)	iso-8859-1, windows-1252
German (DE)	iso-8859-1, windows-1252
Icelandic (IS)	iso-8859-1, windows-1252
Inuit (Eskimo) languages	iso-8859-10*
Macedonian (MK)	iso-8859-5, windows-1251
Irish (GA)	iso-8859-1, windows-1252
Italian (IT)	iso-8859-1, windows-1252
Japanese (JA)	shift_jis, iso-2022-jp, euc-jp
Korean (KO)	euc-kr
Latvian (LV)	iso-8859-13, windows-1257
Lapp	iso-8859-10* **
Lithuanian (LT)	iso-8859-13, windows-1257
Portuguese (PT)	iso-8859-1, windows-1252
Maltese (MT)	iso-8859-3*
Polish (PL)	iso-8859-2
Norwegian (NO)	iso-8859-1, windows-1252
Serbian (SR) latin	iso-8859-2, windows-1250
Swedish (SV)	iso-8859-1, windows-1252
Russian (RU)	koi8-r, iso-8859-5
Romanian (RO)	iso-8859-2
Serbian (SR) cyrillic	windows-1251, iso-8859-5***
Turkish (TR)	iso-8859-9, windows-1254
Slovak (SK)	iso-8859-2
Slovenian (SL)	iso-8859-2, windows-1250
Spanish (ES)	iso-8859-1, windows-1252
Scottish (GD)	iso-8859-1, windows-1252
Ukrainian (UK)	iso-8859-5
Arabic (AR)	iso-8859-6

XHTML DOCTYPES

There are three current flavors of both HTML 4 and XHTML 1.0: strict, transitional, and frameset. These different levels of support for XHTML are designed to help separate a web page, design of the structure - in essence, the W3C was the allocation of items for the eventual withdrawal of the specifications. XHTML Strict is characterized by the ban of these tags is called depricated. The two levels of support frames and the transition will depricated labels, with the only difference that allows the use of HTML frames.

XHTML 1.0 Strict:
If you plan to use strictly Cascading Style Sheet and does not write most of the XHTML attributes so it is recommended to use this DTD. A document in accordance with this DTD will be better.
If you want to use DTD XHTML 1.0 Strict then you need to put the following in the top of the XHTML document.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional:
If you plan to use a number of XHTML attributes as well as a few CSS style sheet, you should accept this DTD, and you should write a document based on DTD XHTML.
If you want to use XHTML 1.0 Transitional DTD then you need to pur following line at the top of your XHTML document.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset:
You can use it when you want to use HTML Frames to partition the browser window into two or more frames.
If you want to use XHTML 1.0 Frameset DTD then you need to pur following line at the top of your XHTML document.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML vs HTML

XHTML is not very different from the HTML 4.01 standard.So, bring your code up to 4.01 standard is a good start.

Given the fact that XHTML is an XML application, certain practices that were perfectly legal in SGML-based HTML 4 has been amended accordingly. You've already seen the XHTML syntax in the previous chapter, then the differences in XHTML and HTML are very clear:

XHTML documents must be well formed:
This means that all elements must have closing tags and all the elements must nest properly.
e.g:
<p>XHTML documents must be well formed:</p>

Attribute names must be in lower case:
XHTML documents must use lower case for all the names of HTML elements and attributes. This distinction is necessary because the document is considered XML XHTML, XML, and uppercase and lowercase letters.
e.g. <p>.....</p>

Document is a XHTML DOCTYPE declaration at the top of the document.
e.g:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML</title>
</head>

<body>
</body>
</html>

All the attribute values must be quoted.
All attribute values must be quoted, even those which appear to be numeric.
e.g:
<td rowspan="3">

Wednesday, October 13, 2010

XHTML Syntax

XHTML syntax is very similar to HTML syntax, and almost all HTML elements are valid in XHTML as well. But when you write an XHTML document must pay a little more attention to your HTML document to XHTML compliance.

Here are important things to remember when writing a new XHTML document, or edit the HTML document, an XHTML document:

document is a XHTML DOCTYPE declaration at the top of the document.
Attribute names must be in lower case
All XHTML tags will have their end tags.
All the attribute values must be quoted.
Id attribute replaces the name attribute.
All tags must be properly nested

XHTML

XHTML is the next generation of HTML and is a hybrid between HTML and XML.

XHTML stands for Extensible HyperText Markup Language.
XHTML is a stricter and cleaner version of HTML .

XHTML is almost identical to HTML 4.01 with only a few differences. This version is cleaner and more strict HTML 4.01.XHTML was developed by the W3C to help Web developers make the transition from HTML to XML. By migrating to XHTML today, web developers in the XML world with all its benefits, but still feel safe on their content and backward compatibility.
Developers to migrate their content to XHTML 1.0 will realize the following benefits:

XHTML compliant XML documents. As such, they are easily viewed, edited and validated with standard XML tools.
XHTML documents can be written to work better than before in the existing browsers as well as new browsers.

CSS Images

The pictures are a very important part of any web page. Although it is not appropriate to include lots of photos, but it is important to use good images, where it is needed.

CSS played a good role to control the display of images. You can set the following attributes image using CSS.

border property is used to set the width of the border.
height property is used to adjust the height of an image.
Width property used to set the image width.

e.g:
<img src="http://www.blogger.com/img/logo40.png" style="border:1px double #000000; height:10%" />
<br />
<img src="http://www.blogger.com/img/logo40.png" style="border:2px double #000000; height:20%" alt="" />

This results in:

CSS Outlines

Outlines are very similar to the borders but there are are some important differences in borders & outlines:

An outline does not take up space.
Outlines do not have to be rectangular.
Outline is always the same on all sides; you cannot specify different values for different sides of the element.

We can use following properties:

outline-width property is used to set the width of the outline.
outline-style property is used to set the line style for the outline.
outline-color property is used to set the color of the outline.

outline-width property
Its value should be a length or one of the values thin, medium, or thick.

example:
<p style="outline-width:thin; outline-style:dotted;outline-color:#00FF00">
This text is having thin outline.
</p>

<p style="outline-width:thick; outline-style:solid; outline-color:#FF0000">
This text is having thick outline.
</p>

<p style="outline-width:5px; outline-style:dashed; outline-color:#0000FF">
This text is having 5x outline.
</p>

This Result in

This text is having thin outline.

This text is having thick outline.

This text is having 5x outline.

onMouseOver Effects

make the link color or background color change when mouse is moved over by using CSS.

using onMouseOver Effects in CSS very simple. to do this, just follow steps.

Step 1:
In head portion add style that you want the text to change, as follows
<head>
<style>
/*This is how the text will look before mouse over*/
.onmouseover{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color: #000000;
text-decoration:none;
}

/*This is how the text will look on mouse over. Note "hover" is the most important change here*/
.onmouseover:hover
{
font-family:"Times New Roman", Times, serif;
font-size:12px;
text-decoration:underline;
color:#FF0000;
}
</style>
</head>

Step 2:
Sets the text style you want the mouse over effects occurring
e.g:
This is the Mouse Over Text

Note: Here we set the style with the tag "class". The style name is "onmouseover" that was created in header portion

For the background color to change, simply add "background-color" property in style tags, as explained above.
e.g :
<head>
<style>
/*This is how the text will look before mouse over*/
.onmouseoverb{
font-family:"Times New Roman", Times, serif;
font-size:12px;
color: #000000;
text-decoration:none;

}

/*This is how the text will look on mouse over. Note "hover" is the most important change here*/
.onmouseoverb:hover
{
font-family:"Times New Roman", Times, serif;
font-size:12px;
text-decoration:underline;
color:#FF0000;
background-color:#009966;
}
</style>
</head>

This results in:
This is the Mouse Over Text

CSS Line Spacing

line-height property is used to specify the amount of vertical space between lines of text. line-height indicated in the units, percentage or a multiplier.

following example shows how to set line-height.
1.<div style="background-color:#0099FF; line-height: 1cm;">
Line height - This is line 1 <br>
Line height - This is line 2 <br>
</div>

This result in:

Line height - This is line 1

Line height - This is line 2

2.
<div style="background-color:#0099FF; line-height: 30px;">
Line height - This is line 1 <br>
Line height - This is line 2 <br>
</div>

This results in:

Line height - This is line 1

Line height - This is line 2

Custom Cursors

When the user mouse over an element on the page, the mouse cursor changes to indicate what the user can (or cannot) do with that element.

The syntax for specifying a cursor property is shown below:
Syntax

selector { cursor: value; }

The cursor for any element can be set by using the css property "cursor".

Example Tag:
<div style="cursor: move;"> this is a move type cursor </div>

This result in:

this is a move type cursor

The table below shows the most common values used for the cursor property.

Value	Result
text	text symbol
pointer	a hand symbol
wait	loading symbol
help	question symbol
move	move symbol
crosshair	+ symbol
ne-resize	move north-east cursor
w-resize	move west cursor
n-resize	move north cursor
nw-resize	move north-west cursor
sw-resize	move south-west cursor
se-resize	move south-east cursor
e-resize	move east cursor
s-resize	move south cursor
url	user defined image as cursor
default	default cursor

Tuesday, October 12, 2010

CSS Scrollbars

You can use inline CSS to create your own scrollers through the creation of a smaller box than its contents are defined overflow: scroll This is the equivalent effect of inline frames.

Example
<html>
<head>
<style type="text/css">
.scrollbox {
    display:block;
    width:300px;
    border-width: 2px;
    border-style: solid;
    padding:10px;
    border-color:#000000;
    margin-top:5px;
    height:50px;
    overflow:scroll;
    }
</style>
</head>
<body>
<div class="scrollbox">
Property effluent tells the browser what to do if the contents of the box is larger than the box itself. You can also set to hide hidden content that does not fit in the box and visible to automatically extend the box to fit the contents</div>
</body>
</html>

This result in

Property effluent tells the browser what to do if the contents of the box is larger than the box itself. You can also set to hide hidden content that does not fit in the box and visible to automatically extend the box to fit the contents

CSS Hyperlinks

You can use CSS to change the appearance and behavior of hyperlinks.Links can be styled in different ways.

Links can be style with any CSS property

To do this, you can use the following selectors

a
a:link
a:visited
a:hover
a:active

above selectors represent the 'anchor' element.

Examples
a {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px}
a:link {color:red;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}
a:active {color: #ff0000;text-decoration: none}

For result copy below code & try it on your browser
<head>
<style type="text/css">
a {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:12px}
a:link {color:red;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}
a:active {color: #ff0000;text-decoration: none}
</style>
</head>
<body>
<p><a href="http://www.w3schoolss.blogspot.com/">Hyperlinks</a></p>
</body>

CSS Float

CSS float property lets you decide where to place an element relative to other elements on the page. When using the float property, other elements simply wrap around the item you have applied to float.

Example code:
<div style="width:250px;">
<h1 style="float:left;margin-right:20px;">Text float</h1>
<p>If your browser supports CSS float property, this text will flow around the position. If this does not seem to work, could be a browser compatibility thing ...</p>
</div>

This results in:

Text float

If your browser supports CSS float property, this text will flow around the position. If this does not seem to work, could be a browser compatibility thing ...

CSS Height and Width

CSS includes properties height and width to help you specify the size of your items.

'height' & 'width' Properties
Applies to all HTML elements except non-replaced inline, table columns and column groups.
Example
<div style="background-color:#FF0000;height:130px;width:100px;">
This div has height and width applied.
</div>

This results in:

This div has height and width applied.

CSS Lists

CSS includes a number of list properties to help you style your HTML lists.

List Style Type
If you want something different from the default numbering of ordered lists, discs, or bullets, then all you have to do is choose a different style to their lists.
CSS allows you to select from a wide variety of different list item shapes.

Unordered list styles: square, circle, disc, and none
Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none

Example:
1.
<ul style="list-style-type:circle;">
<li>This list is 1</li>
<li>This list is 2</li>
</ul>

This results in:

This list is 1
This list is 2

2.
<ul style="list-style-type:upper-roman;">
<li>This list is 1</li>
<li>This list is 2</li>
</ul>

This results in:

This list is 1
This list is 2

3.
As we said before, lists of CSS allow you to insert an image instead of normal bullets. A good choice for a ball, an image that is less than the height of your text and graphics is a relatively simple / plain.
<ul style="list-style-image:url(name.gif);">

CSS Text

In addition to the different properties of CSS sources, there are other properties that may help in the style of text. e.g: you can change the color of the text, align text, add the internal features and more.

CSS Text can be styled using the properties listed below.

CSS Text Color
<p style="color:#FF0000;">This CSS text color is red</p>

This results in:

This CSS text color is red

CSS Text Align
<p style="text-align:center;">This CSS text is aligned center</p>

This results in:

This CSS text is aligned center

CSS Letter Spacing
<p style="letter-spacing:10px;">This text has letter spacing applied</p>

This results in:

This text has letter spacing applied

CSS Word Spacing
<p style="word-spacing:20px;">This text has word spacing applied</p>

This results in:

This text has word spacing applied

CSS Text Transform
<p style="text-transform:capitalize;">this text has been capitalized.</p>
<p style="text-transform:lowercase;">THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE</p>
<p style="text-transform:uppercase;">This text has been transformed to uppercase</p>

This results in:

this text has been capitalized.

THIS TEXT HAS BEEN TRANSFORMED TO LOWERCASE

This text has been transformed to uppercase

CSS Text Decoration
<p style="text-decoration:blink;">This text is blinking</p>
<p style="text-decoration:underline;">This text has a line underneath</p>
<p style="text-decoration:overline;">This text has a line over the top</p>
<p style="text-decoration:line-through;">This text has a line through the middle</p>

This results in:

This text is blinking

This text has a line underneath

This text has a line over the top

This text has a line through the middle

Monday, October 11, 2010

CSS Padding

Padding defines the space between the element's border and its content. CSS padding is specified just like margins - they can be set individually for each side, or all sides at once.

Padding on all Sides
This example uses the padding property to set padding on all sides of an element.
<p style="border:2px solid red;padding:10px;">
This text has padding of 10 pixels on all four sides.
</p>

This results in:

This text has padding of 10 pixels on all four sides.

You can also declare all the padding of an element in a single property as follows:
padding: 10px 10px 10px 10px;
If you declare all 4 values as I have above, the order is as follows:

top
right
bottom
left

Example:
<p style="border:1px solid red;padding-left:30px;">This text has left padding of 30 pixels.</p>

This result in

This text has left padding of 30 pixels.

CSS Margin

Margins define the space around the element. CSS margins are specified in a similar way to borders - they can be set individually for each side, or all sides at once.The margin property can be set for the top, left, right and bottom of an element. (see example below)

  margin-top: length percentage or auto;
  margin-left: length percentage or auto;
  margin-right: length percentage or auto;
  margin-bottom: length percentage or auto;

Possible Values

Value	Description
auto	The browser sets the margin. The result of this is dependant of the browser
length	Defines a fixed margin (in pixels, pt, em, etc.)
%	Defines a margin in % of the containing element

You can also declare all the margins of an element in a single property as follows:
margin: 10px 10px 10px 10px;

If you declare all 4 values as I have above, the order is as follows:

top
right
bottom
left

If only one value is declared, it sets the margin on all sides. (see below)
margin: 10px;

If only 2 values are declared (see below)
margin:10px 20px;

Top and bottom have a margin of 10 pixels.
Right and left have a margin of 20 pixels.

If only 3 values are declared (see below)
margin:10px 20px 30px;

Top is 10px
Left and right are 20px
Bottom is 30px

If only 4 values are declared (see below)
margin:10px 20px 30px 40px;

Top is 10px
Right is 20px
Bottom is 30px
Left is 40px

CSS Border

CSS allows you to set styles for the border of any HTML element. It also provides you with a way of setting border styles for one or more sides of an element.

The border-style property specifies what kind of border to display. You can set the color, style and width of the borders around an element in one declaration by using the border property.

border-style values:
border: 1px solid #000000;

Values:

color
style
width

Or you can set each property individually.

Border Color
The border-color property is used to set the color of the border. The color can be set by:

color name
hexadecimal number
RGB color code
transparent

Border Style
Borders can have the following styles.

<p style="border:2px solid blue;">This text has a border style of 'solid'.</p>
<p style="border:2px dotted blue;">This text has a border style of 'dotted'.</p>
<p style="border:2px dashed blue;">This text has a border style of 'dashed'.</p>
<p style="border:2px double blue;">This text has a border style of 'double'.</p>
<p style="border:2px groove blue;">This text has a border style of 'groove'.</p>
<p style="border:2px ridge blue;">This text has a border style of 'ridge'.</p>
<p style="border:2px inset blue;">This text has a border style of 'inset'.</p>
<p style="border:2px outset blue;">This text has a border style of 'outset'.</p>
<p style="border:2px hidden blue;">This text has a border style of 'hidden'.</p>

This results in:

This text has a border style of 'solid'.

This text has a border style of 'dotted'.

This text has a border style of 'dashed'.

This text has a border style of 'double'.

This text has a border style of 'groove'.

This text has a border style of 'ridge'.

This text has a border style of 'inset'.

This text has a border style of 'outset'.

This text has a border style of 'hidden'.

Border Width
You can set the width of a border independently with the border-width property.
border-width: value;

Values:

Length
Thin
Medium
Thick

Or you can set the elements for each borders side individually

CSS - Backgrounds

This tutorial will teach you how to set backgrounds of various HTML elements. You can set following background properties of an element:

Background-color : property is used to set the background color of an element.
Background-image: property is used to set the background image of an element.
Background-repeat: property is used to control the repetition of an image in the background.
Background-position :property is used to control the position of an image in the background.
Background-attachment: property is used to control the scrolling of an image in the background.

The following is an example that shows how to set the background color of an element.
<p style="background-color:#0000FF;">
This text has a blue background color.
</p>

This will produce following result:

This text has a blue background color.

The following is an example that shows how to set the background image of an element.
<p style="background-image:url(http://www.blogger.com/img/logo40.png);">
This text has a background image set.
</p>

This will produce following result

This text has a background image set.

Repeat the background image:
The following is an example that shows how to set the repeat background image of an element.
<div style="background-image: url(http://www.blogger.com/img/logo40.png); background-repeat: repeat;">
This text has a repeat background image set.</div>

This will produce following result

This text has a repeat background image set.

ID STYLES

IDs allow you to assign a unique identifier to an HTML element. This allows you to define a style that can only be used by the element you assign the ID to.

CSS ID Syntax
syntax of declaring id is same as class except that instead of using a dot, you use a hash (#).

#id-name { property:value; }

You should use IDs if only one element on the page should have the style applied, and/or you need a unique identifier for that element. For example, you might assign an ID to a div tag which contains your right menu. The styles for this ID could contain the position, font-color, float properties, font-size, height,background-color,width, etc. You probably wouldn't want any other element on the page to use this particular style.

CSS ID Example
<head>
<style type="text/css">
#section{
font-family:"Courier New", Courier, monospace;
font-size:12px;
color:#000000;
}

#css-section{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#FF0000;
}
</style>
</head>
<body>
<p id="section">This is Paragraph</p>
<p id="css-section">This is Paragraph2</p>
</body>

CSS Class

In CSS, classes allow you to apply a style to a given class of an element. To do this, you link the element to the style by declaring a style for the class, then assigning that class to the element.

CSS Class Syntax
You declare a CSS class by using a dot (.) followed by the class name. You make up the class name yourself. After the class name you simply enter the properties/values that you want to assign to your class.
.class-name { property:value; }

If you want to use the same class name for several elements, but each with its own style, you can prefix the dot with names of HTML elements.
html-element-name.class-name { property:value; }
CSS Class Example:
<head>
<style type="text/css">
.section{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

.css-section{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#FF0000;
}
</style>
</head>
<body>
<h1 class="section">This is Heading</h1>
<p class="css-section">This is Paragraph</p>
</body>
</html>
This results in:

This is Heading

This is Paragraph

Implementing CSS

There are 4 ways of implementing CSS: declare inline, embed into the head of your document, link to an external CSS file, import a CSS file.

Inline CSS
Style sheet information is applied to the current element. Instead of defining the style once, then applying the style against all instances of an element (say the <h1> tag), you only apply the style to the instance you want the style to apply to.

For example:
<h1 style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#0000FF">This is Heading.</h1>

Embedded CSS
You embeded css information into an HTML Document by using "style" element. you do this by css embeddinng the information between <style type="text/css">....</style> tags in the head section of the document.

For example:
<style type="text/css">
h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#0000FF;
}
</style>
now, whenever any of those elements are used within the body of the doucment, they will be formatted as mention in above css.

External CSS
An external stylesheet is a separate file, where you can declare all the styles you want to use through their website. You then link to the external style sheet from all your HTML pages.This means that you must set the styles for each element once. To update the style of your site, just to do in one place.

For example:
create new file naming style.css & insert following code in stylesheet(style.css).
h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#0000FF;
}

p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#000000;

}

add the following between <head><head> section of HTML document that you want to refernece the external style sheet.
<link rel="stylesheet" href="style.css" type="text/css">

Import CSS
You can use the @import rule to import rules from other style sheets.
Add either of the following between the <head></head> tags of all HTML documents that you want to import a style sheet into.
@import "style.css";
@import url("style.css");

Sunday, October 10, 2010

CSS Syntax

The syntax of CSS is different from (X) HTML markup. Although it is not too confusing when you take a look. It consists of only 3 parts.
selector { property: value }

The selector is the element (X) HTML style you want. The property is the title of real property and the value is the style applied to this property.

Each selector can have several properties and each property within this selection can have independent values. The property and value are separated by a comma and keys. Several properties are separated by a semicolon. various property values are sperate coma, and if a single value containing more than one word in quotation marks to surround you. As shown below.

body {
background: #eeeeee;
font-family: "Trebuchet MS", Verdana, Arial, serif;
}

As you can see in the code above, I left the font color of the family with a semicolon, different fonts, separated by commas and containing "Trebuchet MS" in quotes. The end result sets the color of body light gray, and sets the font to ones that most users will have installed on there computer.

Combining Selectors
You can combine elements within one selector in the following fashion.

h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}

As you can see in the above code, I have grouped all the header elements into one selector. Each one is separated by a comma. The final result of the above code sets all headers to green and to the specified font. If the user does not have the first font I declared it will go to another sans-serif font the user has installed on their computer.

Comment tags
Comments can be used to explain why adding a few options in the CSS file. In order to help others who may see a file or to help you remember what we think later. To add comments, do not consider the browser as follows.

/* This is a comment */

You will note that it begins with a / (forward slash) and than an * (asterisks) then the comment, then the closing tag which is just backward from the opening tag * (asterisks) then the / (forward slash).

CSS Introduction

CSS stands for Cascading Style Sheets.Cascading Style Sheets (CSS) are a way to control the look and feel of your HTML documents into an organized and efficient manner. A CSS file must have a .css file extension .it can be created using a simple text editor.there are 3 types of css, Internal, External, Inline stylesheet.

with use of CSS you will be able to:

Add new look to your old HTML
Completely restyle a web site with only a few changes into your CSS code
Use the "style" you can create on any webpage you wish

You can change the look and layout of all the Web pages using external style sheets, simply by changing a single CSS document! CSS allows developers to control the style and layout of multiple Web pages at once so that it is a breakthrough in Web design. it can define a style for each HTML element and use it as many Web pages when want.To make global change, all elements of the Web will be automatically updated by simply changing the style.

HTML Images

The images are very important to beautify and representative of many concepts to your web page. Its is true that a picture is worth thuasands words. So, as a web developer, you should have a clear understanding on how to use images in your web pages.

In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
Following is the simple syntax to use this tag.
<img src="http://www.blogger.com/img/logo40.png" alt="Blogger" border="1" width="150px" height="40" />

This will produce following result:

Following are most frequently used attributes for <img > tag

width: sets width of the image. This will have a value like 150px or 10%etc..
height: sets height of the image.
border: sets a border around the image.
alt:It is an alternative text that will appear if the image is missing.
align: This sets the horizontal alignment of the image and takes the value either to the left, right or center.

HTML Email Tag

HTML <a> tag provides you facility to specifiy an email address to send an email. While using <a> tag as an email tag then you will use mailto:email address along with href attribute. Following is the syntax of using mailto instead of using http.

<a href="mailto:abhi@gmail.com">Send Email</a>

This code will generate following link:
Send Email

Now if a user will click this link then it will lanuch one Email Client ( like Outlook Express, Lotus Notes, etc. ) installed on your user's computer.

HTML Marquees

HTML is a big piece of rolling text displayed either horizontally or vertically down your website page based on the parameters. This is created using HTML tag <marquees> .

A simple syntax to use marquee is as follows:
<marquee>This is basic example of marquee</marquee>

This will produce following result:
This is basic example of marquee

<marquee direction="right">This text will scroll from left to right</marquee>
This will produce following result: This text will scroll from left to right

<marquee direction="up">This text will scroll from bottom to up</marquee>
This will produce following result:
This text will scroll from bottom to up

HTML Text Links

Web pages can contain links that lead directly to other pages and even individual parts of a given page.These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between pages by clicking on words, phrases and images. This allows you to create hyperlinks using text and images available in your webpage.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand. Links are specified in HTML using the <a> tag.

The <a>tag can be used in two ways:

To create a link to another document using the href
To create a bookmark in a document with the name attribute

Following is the simple syntax to use this tag.
<a href="http://www.w3schoolss.blogspot.com/">Learn HTML Online</a>
which will display like this
Learn HTML Online

Following are most frequently used attributes for <a> tag.

href: Specifies the URL of the target of a hyperlink. Its value is a valid document URL, absolute or relative, including a fragment identifier or a fragment of JavaScript code.
target: specify where to display the contents of a selected hyperlink. If set to "_blank" then a new window will be opened to display the loaded page, if set to "_top" or "_parent" then same window will be used to display the loaded document, if set to "_self" then loads the new page in current window. By default its "_self".
event: attributes like onClick, onMouseOver etc. are used to trigger any Javascript of VBscript code.

HTML List

This section lists the tags often used with HTML lists:
<ol>, <ul>, and
<li>.
<ol>The <ol>tag specifies that the following list is ordered. <ul>The <ul>tag specifies that the following list is unordered.
<li>
The </li>
<li> tag lists each item, whether ordered or numbered. Note that each item is indented.

Example 1: Ordered list.

HTML:
<ol>
<li>list 1.</li>
<li>list 2.</li>
</ol>

Display

list 1.
list 2.

Example 2: Unordered list.
HTML:

<ul>
<li>Unordered list 1.</li>
<li>Unordered list 2.</li>
</ul>

Display:

Unordered list 1.
Unordered list 2.

You can use type attribute to specify the type of bullet you like. By default its is a disc. Following are the possible way:

<ul type="square">
<ul type="disc">
<ul type="circle">

HTML Tables

The tables are very useful for organizing and HTML are used very often, almost all web developers. Tables are like spreadsheets, and are composed of rows and columns.

Will create a table in HTML / XHTML using <table> tags. Inside <table> array element is written row by row. A row is contained in a <tr> tags. which means that the row of the table. And each cell is written in row with <td> tags. representing the data tables.

Example:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

This will produce following result:

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

HTML Tables and the Border Attribute
If you do not specify an attribute of the border, the table will be displayed without borders. Sometimes it can be useful, but mostly, we want the border to display the attribute. To view a table with borders, set the attribute:
Example:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

This will produce following result:

Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2

Table Cellpadding and Cellspacing:
There are two known attribiutes cellpadding and cellspacing to be used to adjust the white space in table cell. Cellspacing sets the width of the border, while cellpadding is the distance between cell borders and content. Here is an example:
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>

This will produce following result:

Name	Salary
Ramesh Raman	5000
Shabbir Hussein	7000

HTML Colors

Color Name	HEX	Color
AliceBlue	#FF8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4
Black	#000000
BlanchedAlmond	#FFEBCD
Blue	#0000FF
BlueViolet	#8A2BE2
Brown	#A52A2A
BurlyWood	#DEB887
CadetBlue	#5F9EA0
Chartreuse	#7FFF00
Chocolate	#D2691E
Coral	#FF7F50
CornflowerBlue	#6495ED
Cornsilk	#FFF8DC
Crimson	#DC143C
Cyan	#00FFFF
DarkBlue	#00008B
DarkCyan	#008B8B
DarkGoldenRod	#B8860B
DarkGray	#A9A9A9
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
Darkorange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGray	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGray	#696969
DodgerBlue	#1E90FF
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Gray	#808080
Green	#008000
GreenYellow	#ADFF2F
HoneyDew	#F0FFF0
HotPink	#FF69B4
IndianRed	#CD5C5C
Indigo	#4B0082
Ivory	#FFFFF0
Khaki	#F0E68C
Lavender	#E6E6FA
LavenderBlush	#FFF0F5
LawnGreen	#7CFC00
LemonChiffon	#FFFACD
LightBlue	#ADD8E6
LightCoral	#F08080
LightCyan	#E0FFFF
LightGoldenRodYellow	#FAFAD2
LightGrey	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateGray	#778899
LightSteelBlue	#B0C4DE
LightYellow	#FFFFE0
Lime	#00FF00
LimeGreen	#32CD32
Linen	#FAF0E6
Magenta	#FF00FF
Maroon	#800000
MediumAquaMarine	#66CDAA
MediumBlue	#0000CD
MediumOrchid	#BA55D3
MediumPurple	#9370D8
MediumSeaGreen	#3CB371
MediumSlateBlue	#7B68EE
MediumSpringGreen	#00FA9A
MediumTurquoise	#48D1CC
MediumVioletRed	#C71585
MidnightBlue	#191970
MintCream	#F5FFFA
MistyRose	#FFE4E1
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
Navy	#000080
OldLace	#FDF5E6
Olive	#808000
OliveDrab	#6B8E23
Orange	#FFA500
OrangeRed	#FF4500
Orchid	#DA70D6
PaleGoldenRod	#EEE8AA
PaleGreen	#98FB98
PaleTurquoise	#AFEEEE
PaleVioletRed	#D87093
PapayaWhip	#FFEFD5
PeachPuff	#FFDAB9
Peru	#CD853F
Pink	#FFC0CB
Plum	#DDA0DD
PowderBlue	#B0E0E6
Purple	#800080
Red	#FF0000
RosyBrown	#BC8F8F
RoyalBlue	#4169E1
SaddleBrown	#8B4513
Salmon	#FA8072
SandyBrown	#F4A460
SeaGreen	#2E8B57
SeaShell	#FFF5EE
Sienna	#A0522D
Silver	#C0C0C0
SkyBlue	#87CEEB
SlateBlue	#6A5ACD
SlateGray	#708090
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

HTML Fonts

Font and color depends entirely on the computer and browser used to view your page. But <font>the</font> tag <font>is used to add style, size and color for text on your site. You can use a code to define all of your text the same size, face and color.</font>

The font tag is known to have three attributes of size, color and face to customize fonts.

To change the font attributes at any time in your site, simply use <font>the </font> tag.

Font Size:
You can set the size of your font with size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.
Example:
<font size="1">Font size="1"</font>
<font size="2">Font size="2"</font>
<font size="3">Font size="3"</font>
<font size="4">Font size="4"</font>
<font size="5">Font size="5"</font>
<font size="6">Font size="6"</font>
<font size="7">Font size="7"</font>

This will produce following result:
Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"

Font Face:
You can configure all the fonts you want to face attribute, but be aware that if the user visits the page did not install the font, they will not be able to see it. Instead, the default Times New Roman for your font size attribute. See below some examples of using different fonts
Example:

<font face="Times New Roman" size="5">Times New Roman</font>
<font face="Verdana" size="5">Verdana</font>
<font face="Comic sans MS" size="5">Comic Sans MS</font>
<font face="WildWest" size="5">WildWest</font>
<font face="Bedrock" size="5">Bedrock</font>

This will produce following result:

Times New Roman
Verdana
Comic Sans MS
WildWest
Bedrock

Font Color:
You can choose any font color you like color attribute. You can specify the color you want by color name or hexadecimal code for that color. See the complete list of HTML color names with codes.
Example:<font color="#FF00FF">This text is hexcolor #FF00FF</font>
<font color="red">This text is red</font>

This will produce following result:

This text is hexcolor #FF00FF
This text is red

HTML Comments

And well comment code, especially for complex documents to show parts of the document should be, and any comment to anyone looking at the code. And comments will help others understand the code.
HTML comment lines are marked with a special tag to the start  placed at the beginning and end of each line is considered a comment.

For example: Given line is a valid comment in HTML

HTML Formatting Tags

This section includes the tags often used for formatting the HTML text. HTML uses diffrent types tags like <i> for italic, <b> for bold to formatting text of web page. formatting must to your web page. formatting also attracts users.

examples of formatting text:-
example 1:
HTML:
<font size=2 face="Helvetica" color=red>This illustrates the attributes of the font tag.</font>

Display:
This illustrates the attributes of the font tag.

example 2:
HTML:
<font size="+1" face="Verdana" color="#AA5088">This illustrates the attributes of the font tag.</font>

Display:
This illustrates the attributes of the font tag.

example 3:
HTML:
This <b>example</b> shows how <i>important</i> it is to use <u>tags</u>.

Display:
This example shows how important it is to use tags.

Header Tags
The header tags <h1>, ... <h6> allows us to place additional importance on the text within such tags. <h1> has the largest size, and <h6> the smallest. Many search engines put additional weight on the texts within the header tags.

example 4:
HTML:
<h1>This is h1 text.</h1>
<h2>This is h2 text.</h2>
<h3>This is h3 text.</h3>
<h4>This is h4 text.</h4>
<h5>This is h5 text.</h5>
<h6>This is h6 text.</h6>

Display:

This is h1 text.

This is h2 text.

This is h3 text.

This is h4 text.

This is h5 text.

This is h6 text.

<center>
The <center> tag causes all the text within the tag to be centered. An example is as follows:
Example 5:
HTML:
<center>This is centered text.</center>

Display:
This is centered text.

<br>
The <br> tag indicates a line break. This tag is most often used by itself, without a corresponding closing tag.

<p>
The <p> tag indicates a new paragraph. It is the same as <br><br>. This tag is most often used by itself, without a corresponding closing tag.

HTML Attributes

Attributes are another important part of HTML markup language.Attributes provide additional information about an element. Attributes are always specified in the start tag. Attributes come in name/value parts like: name="value".
The name is the property & the value is what you want the value of the property to be.
below is example of HTML Attributes.
<font face="arial" color="#CC0000">
in above example font is name & arial, #CC0000 are values. values should be put in double quotation marks.