Monday, October 24, 2011

Designing a website

Creating and designing a website is a process that involves a few simple steps at first, but ended up on a site to implement the means and skills very important. A website, this can be a simple page in HTML or PHP MySQL ..., or thousands of pages offering entertainment or not, services programmed in Java, PHP or other server language, forms, assuming a treatment in JavaScript or AJAX .... It may be based on database technologies, such as: MySQL ...     
     
The steps in designing a website

Designing a website is based on the type of site, context and resources available to implement some of these steps are optional. Reflecting on the purpose of the site, its profitability, the financial means to hire ... Reflecting on content: definition of a tree. Reflection on the desired autonomy and type of human resources for the update. Selection of a potential web agency to design a website (in this case some of the following steps are then managed by the agency). Filing a domain name. Choosing a web host.

Establishing a structure of HTML or XHTML. Development of a graphic. Selecting and installing a content management system (SPIP, ...) or choose from a publisher Website of WYSIWYG (eg NVU, Macromedia Dreamweaver, Microsoft FrontPage) or text (eg Bluefish, Emacs, ...). Creating pages using the content management system or the publisher. Pages can be individually created based on a template system. Integrating the graphic via CSS. Optimization: Site preparation for search engines. SEO is the final step.

Friday, April 15, 2011

Table Borders Css

When a table is defined by a tag with no styles specified, a borderless table as wide and as tall as its enclosed data is displayed. From this simple beginning you can structure and style a table to take on virtually any display characteristics you can imagine. table border property is used to set a stylish border for the table in a webpage.

Any border styles that were introduced earlier can be applied to the external border of a table This will results in.
e.g:
<style type="text/css">
table { border: solid 5px #0000FF}
td {border:outset 2px}
</style>

<table width="241">
  <tr>
    <td width="114">Cell 1.1</td>
    <td width="107">Cell 1.2</td>
  </tr>
  <tr>
    <td>Cell 1.3</td>
    <td>Cell 1.4</td>
  </tr>
</table>

 This will results in

Cell 1.1 Cell 1.2
Cell 1.3 Cell 1.4

The border style is described in below for each table. The stylesheet uses the standard format {border: size or style} for all border crossings stylings.

Dashed

Dotted
Double

Thursday, December 2, 2010

Opacity in CSS

Today we learn of opacity in CSS! I made an example here

Information opacity in CSS:
property has a value of opacity of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below the item shows through. 1.0 is 100% opaque - nothing below element will show through.
So, to set an element of transparency of 50%, you may write: opacity: 0.5;

Neither IE 6 or 7 supports CSS 3 opacity property. But you're out of luck. Instead, IE supports a Microsoft-only property "alpha filter". Alpha filters in IE accept values from 0 (fully transparent) to 100 (fully opaque). So, for your transparency in IE, you must multiply your opacity by 100 and add an alpha filter to your style:

Alpha filter for IE: filter: alpha(opacity=50);
Alpha filter for Mozilla: -moz-opacity:0.5;

Example:
Open notepad type below code
<html>
<title>Opacity in CSS</title>
<head>
<style type="text/css">
body
{
background-image: url("http://travelvacationguides.co.cc/opacity_in_css.jpg");
background-repeat: no-repeat;
font-size: 18px;
}
div
{
width: 200px;
opacity: 0.70;
height: 500px;
margin-left: 5em;
background-color: black;

}
p { padding-top: 20px;
text-align:center;
color:#FFFFFF;
}
</style>
</head>
<body>
<div><p>Learn how to make <a href="http://w3schoolss.blogspot.com/" style="color:#FFFFFF;">opacity in css</a>. this example shows opacity in css in html.</p>
</div>
</body>
</html>


In this example, I create an html page with CSS easy. I put a background image and a div with the background color black. So I make the div opacity to 70%!

This results in:
Opacity in CSS

Tuesday, November 30, 2010

Meta Refresh

Meta refresh is basically a simple way to redirect, it is much easier than Java or PHP.

There are two basic parts to the Meta-Refresh code and they are the content and the url. The content is the amount of time before the actual redirection/refresh, and the url is the location you wish to go to.

In this tutorial I am going to have the code redirect to the homepage of w3schoolss.blogspot.com

<meta http-equiv="Refresh" content="5;URL=http://w3schoolss.blogspot.com" />

Now it's time to break it down:
<meta http-equiv="Refresh"

This part of the code is what tells the document that you want to use the refresh.
content="5;

This is the content, the content is basically the delay and can be however long you want it to be.
URL=http://w3schoolss.blogspot.com" />

This is the URL, or the final destination of the refresh. You can put in different sites, different pages on your site, or the page itself.
<meta http-equiv="Refresh" content="5;URL=http://w3schoolss.blogspot.com" />

This is the final code, as you can see it is very simple and very efficient when you need it.

Monday, November 29, 2010

Create Rollover Image in CSS

I made two buttons for this tutorial, save it if you want to work with them.



Open Notepad and type the next code:
 1.

<!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=windows-1252" />
<title>Create Rollover Image in CSS</title>
<style type="text/css">
a.w3school {
display: block;
background-image: url(http://travelvacationguides.co.cc/w3school.jpg);
background-repeat: no-repeat;
width: 400px;
height: 400px;
}
a.w3school:hover {
background-image: url(http://travelvacationguides.co.cc/w3school-hover.jpg);
}
</style>
</head>

<body>
<p style="text-align:center"><a class="w3school" href="http://w3schoolss.blogspot.com">Create Rollover Image in CSS</a> </p>
</body>
</html>

2.Click on File > Save as and save like HTML

This results in

Thursday, November 25, 2010

Rounded corners in css

CSS3 border-radius feature allows web developers can easily use the rounded corners of the design elements, images without corner, or use multiple div tags and is perhaps one of the most talked about aspects of CSS3.

Since it was first announced in 2005, the property Boder-ray has come to enjoy broad support from the browser (but with some differences) and relative ease of use, web developers have been quick to take full advantage of this emerging technology.

Here’s a basic example:
div.borderradius {
background-color: #eee;
    padding: 20px;
    margin-top: 10px;
    margin-right: 20px;
text-align: center;
border-radius: 15px;
-moz-border-radius: 15px;
}

<div class="borderradius">This box must have rounded edges to Firefox, Safari / Chrome, Opera and IE9.</div>

This results in


This box must have rounded edges to Firefox, Safari / Chrome, Opera and IE9.

Wednesday, November 24, 2010

CSS Vertical List Menu

This tutorial shows how to make vertical css drop down menu. In this tutorial, we do not use images or javascript. Just a simple, cross-browser compatible CSS drop down menu.

First we need the HTML code from our menu of the list is just a regular unordered list.

Example:
<div class="menu">
<ul>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="20">Home</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="21">About</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="22">Contact</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="23">Links</a></li>
<li><a href="http://w3schoolss.blogspot.com/" linkindex="24">HTML</a></li>
</ul>
</div>

in the example above, I added a menu item called div around the list, I want to do because it helps me remember what a piece of code does what, if I ever will more. So le's add some CSS to the surrounding menu div called the list.

.menu{
width:50px;
padding:1px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#FFFFFF;
border:1px solid #437E7E; }

Again, this is a nice and easy. Class menu cover the entire width of the div is inside and has a white background with font(Verdana, Arial, Helvetica, sans-serif), font size(12px).

Then we add to the list Style and elements of the list.

.menu li{
list-style:none;
}

.menu ul li a{
display:block;
padding-left:15px;
height:25px;
margin-top:1px;
line-height:25px;
background-color:#F0F7F7;
border-left:10px solid #C7E2E2;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;;
text-decoration:none;
color:#000000;
}

.menu ul li a:hover, .menu ul li .current
{
background-color:#E5E5E5;
border-left:10px solid #CCCCCC;
color:#666666;}

Once again, it's all quite simple, you should be able to understand a little 'skill CSS code.

This results in:

Saturday, November 20, 2010

CSS Horizontal List Menu

This tutorial will show you how to make a horizontal CSS list menu. in this tutorial we are not using images or javascript. Just a simple, cross browser compatible CSS list menu.

First of all we will need the HTML for our list menu, this is just a normal unordered list.

Example:
<div class="menu">
<ul>
<li><a href="http://w3schoolss.blogspot.com/">Home</a></li>
<li><a href="http://w3schoolss.blogspot.com/">About</a></li>
<li><a href="http://w3schoolss.blogspot.com/">Contact</a></li>
<li><a href="http://w3schoolss.blogspot.com/">Links</a></li>
<li><a href="http://w3schoolss.blogspot.com/">HTML</a></li>
</ul>
</div>

in above example I have added a div called menu around the list, I want to do because it helps me remember what part of the code does what, if I ever do it again. Then let's add some CSS to the div called menu surrounding the list.

.menu{
width: 100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#ffffff;
background-color: #333; }

Again, this is a nice and easy. Class menu cover the entire width of the div is inside and has a dark gray background with font(Verdana, Arial, Helvetica, sans-serif), font size(12px).

Then we add to the list Style and elements of the list.

.menu ul{
margin: 0; padding: 0;
float: left;}

.menu ul li{
display: inline;}

.menu ul li a{
text-decoration: none;
color:#ffffff;
float: left;
background-color: #333;
padding: 10px 10px;
 }

.menu ul li a:visited
{
color:#ffffff;
}

.menu ul li a:hover, .menu ul li .current
{
color: #fff;
background-color:#0b75b2;
}

Once again, it's all quite simple, you should be able to understand a little &#39;skill CSS code.

This results in:

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>
        <!-- This is XHTML comment -->
    </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.
ValueResult
texttext symbol
pointera hand symbol
waitloading symbol
helpquestion symbol
movemove symbol
crosshair+ symbol
ne-resizemove north-east cursor
w-resizemove west cursor
n-resizemove north cursor
nw-resizemove north-west cursor
sw-resizemove south-west cursor
se-resizemove south-east cursor
e-resizemove east cursor
s-resizemove south cursor
urluser defined image as cursor
defaultdefault cursor