| Layout |
|
| Line Spacing |
|
| CSS allows you to control the widthand height of an element, as well as increase thespace between two lines, with the use of dimension properties. |
|
| The following CSS code example shows how to increase the space between lines. |
|
<html>
<head>
<style type="text/css">
p
{
line-height: 1cm;
}
p.bigSpace
{
line-height: 1.5cm;
}
</style>
</head>
<body>
<p>
This paragraph has a line height of 1cm. This paragraph has a line height of 1cm. This paragraph has a line height of 1cm. This paragraph has a line height of 1cm. This paragraph has a line height of 1cm. This paragraph has a line height of 1cm.
</p>
<p class="bigSpace">
This paragraph has a line height of 1.5cm. This paragraph has a line height of 1.5cm. This paragraph has a line height of 1.5cm. This paragraph has a line height of 1.5cm. This paragraph has a line height of 1.5cm. </p>
</body>
</html> |
|
| Click on example to view the page produced by above code. |
|
|
|
|
|
| Layout |
|
| CSS Positioning |
|
| The CSS positioning properties allow you to specify the position of an element (element's left, right, top, and bottom position). It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area. |
|
| Positioning Properties |
|
| Property | Description | Values | IE | F | N |
| bottom | Sets how far the bottom edge of an element is above/below the bottom edge of the parent element | auto
%
length | 5 | 1 | 6 |
| clip | Sets the shape of an element. The element is clipped into this shape, and displayed | shapeauto | 4 | 1 | 6 |
| left | Sets how far the left edge of an element is to the right/left of the left edge of the parent element | auto
%
length | 4 | 1 | 4 |
| overflow | Sets what happens if the content of an element overflow its area | visible
hidden
scroll
auto | 4 | 1 | 6 |
| position | Places an element in a static, relative, absolute or fixed position | static
relative
absolute
fixed | 4 | 1 | 4 |
| right | Sets how far the right edge of an element is to the left/right of the right edge of the parent element | auto
%
length | 5 | 1 | 6 |
| top | Sets how far the top edge of an element is above/below the top edge of the parent element | auto
%
length | 4 | 1 | 4 |
| vertical-align | Sets the vertical alignment of an element | baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
% | 4 | 1 | 4 |
| z-index | Sets the stack order of an element | auto
number | 4 | 1 | 6 |
|
|
|
| CSS Relative Positioning |
|
| The following CSS code example shows you how to position an element relative to its normal position. |
|
<html>
<head>
<style type="text/css">
h1.left
{
position:relative;
left:-30px;
}
h1.right
{
position:relative;
left:30px;
}
</style>
</head>
<body>
<h1>
This heading is in the normal default position.
</h1>
<h1 class="left">
This heading is moved 15 pixels to the left of its normal default position.
</h1>
<h1 class="right">
This heading is moved 60 pixels to the right of its normal default position.
</h1>
<p>
Relative positioning moves an element RELATIVE to its original position.
</p>
<p>
The style "left:-30px" subtracts 30 pixels from the element's original left position.
</p>
<p>
The style "left:30px" adds 30 pixels to the element's original left position.
</p>
</body>
</html> |
|
| Click on example to view the page produced by above code. |
|
|
| CSS Absolute Positioning |
|
| The following CSS code example shows you how to position an element using anabsolute value. |
|
<html>
<head>
<style type="text/css">
h1.absolutepositioning
{
position:absolute;
left:50px;
top:50px
}
h1.absolutepositioning2
{
position:absolute;
left:200px;
top:200px
}
</style>
</head>
<body>
<h1 class="absolutepositioning">
Absolute positioning was used to place this heading 50px from the left of the page and 50px from the top of the page.
</h1>
<h1 class="absolutepositioning2">
Absolute positioning was used to place this heading 200px from the left of the page and 200px from the top of the page.
</h1>
<p>
Absolute positioning was used to place both of the headings below.
</p>
</body>
</html> |
|
| Click on example to view the page produced by above code. |
|
|
|
|
|
| Layout |
|
| CSS Layers |
|
| CSS allows you to position HTML elements on top of one another, giving control over which item will appear on top.CSS layers are more flexible and more convenient than other layout management schemas. Layers can be used for effective layout management. In the beginning, you may find it difficult , but as you get more use-to with layers, you will feel that they are more easy then their alternative. |
|
| CSS Layer Example: |
|
| The following CSS code is an example of how position (layer) one item over another. Notice in this example that h1 has a higher value (z-index: 2) than the paragraph(z-index: 1), and therefore has a higher priority, and is positioned on top of the paragraph. |
|
<html>
<head>
<style>
h1
{
position: relative;
top: 30px;
left: 50px;
z-index: 3;
background-color:pink;
}
p
{
position: relative;
z-index: 1;
background-color: cyan;
}
</style>
</head>
<body>
<h1>
This header with its pink background is positioned on top of this paragraph.
</h1>
<p>
You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph. You may not be able to see all of the text in this paragraph.
</p>
</body>
</html> |
|
| Click on example to view the page produced by above code. |
|
|
|
|
|
| Border |
|
| Border Color |
|
| The CSS border properties allow us to specify the style and color of an element's border.With CSS we can create styled border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element. |
|
| Usage: |
border-color: red;
border-color: #454545;
border-color: rgb(123,123,123); |
|
| Definition: |
| The border of any object can be set with any color using the tag/argument border-color. border-color will not take effect with out border style. Border style can be set using "border-style". |
|
| It takes the following values: |
- red: The border color can be set using text names of colors.
- #454545: The border color can be set using hexadecimal color code.
- rgb(x,y,z): The border color can be set rgb code.
|
|
| Example 1: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-style: solid;
border-color: red;
}
</style>
</HEAD>
<BODY>
<div class="border1">testing border color</div>
</BODY>
</HTML> |
|
| Result: |
|
|
|
| Click on example to view the page produced by above code. |
|
|
| Example 2: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 4px;
border-style: solid;
border-color: #454545;
}
</style>
</HEAD>
<BODY>
<div class="border1">testing border color</div>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
| Example 3: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 4px;
border-style: solid;
border-color: rgb(125,125,125);
}
</style>
</HEAD>
<BODY>
<div class="border1">testing border color</div>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
|
|
|
| Border |
|
| Border Width |
|
The width of elements borders is defined by the property border-width, which can have the values thin, medium, and thick, or a numeric value, indicated in pixels.
The border width of any object can be set with any width using the tag/argument border-width. border-width will not take effect with out border style. Border style can be set using "border-style". |
|
| Border Width takes the following values: |
- 5px : The border width can be set in pixels.
- 5pt : The border width can be set in points.
- 1% : The border width can be set in percentage.
|
|
| The figure below illustrates the system: |
|
|
|
|
| Usage: |
border-width: 5px;
border-width: 5pt;
border-width: 2%; |
|
| Example 1: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 4px;
border-style: solid;
border-color: red;
}
</style>
</HEAD>
<BODY>
<div class="border1">testing border width</div>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
| Example 2: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 5pt;
border-style: solid;
border-color: #454545;
}
</style>
</HEAD>
<BODY>
<font class="border1">testing border width</font> </BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
| Example 3: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 2%;
border-style: solid;
border-color: rgb(125,125,125);
}
</style>
</HEAD>
<BODY>
<div class="border1">testing border width</div> </BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
|
|
|
| Border |
|
| Border Style |
|
| There are different types of borders to choose from. Below are shown 8 different types of borders as Internet Explorer 5.5 and Firefox 2 interprets them. All examples are shown with the color "gold" and the thickness "thick" but can naturally be shown in other colors and thicknesses. |
|
| Note: |
| Some border style make not show properly on Firefox 2, because they are non-standard or supports IE only. |
|
| The style of the border can be set using the tag border-style. Border Style takes the following values: |
- dotted- This will create a border with dotted lines.
- dashed- This will create a border with dashed lines.
- solid- This will create a border with solid lines.
- double- This will create a border containing double lines.
- groove- This will create a border that will look like groove.
- ridge- This will create a border that will look like ridge.
- inset- This will create a border with the line looking inset.
- outset- This will create a border with the line looking outset.
|
|
|
|
|
| Usage: |
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset; |
|
| Example: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-width: 2px; border-style: dotted; border-color: red;
}
.border2
{
border-width: 2px; border-style: dashed; border-color: red;
}
.border3
{
border-width: 2px; border-style: solid; border-color: red;
}
.border4
{
border-width: 4px; border-style: double; border-color: red;
}
.border5
{
border-width: 4px; border-style: groove; border-color: red;
}
.border6
{
border-width: 4px; border-style: ridge; border-color: red;
}
.border7
{
border-width: 4px; border-style: inset; border-color: red;
}
.border8
{
border-width: 4px; border-style: outset; border-color: red;
}
</style>
<HEAD>
<body>
<div class="border1"> testing border style[dotted]</div> <br />
<div class="border2"> testing border style[dashed]</div> <br />
<div class="border3"> testing border style[solid]</div> <br />
<div class="border4"> testing border style[double]</div> <br />
<div class="border5"> testing border style[groove]</div> <br />
<div class="border6"> testing border style[ridge]</div> <br />
<div class="border7"> testing border style[inset]</div> <br />
<div class="border8"> testing border style[outset]</div>
</body>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
|
|
|
| Border |
|
| Side Border |
|
| Each side of the border can be handled separately using the these tags. |
|
| Usage: |
| border-top: <border-top-width> || <border-style> || <border-color> ; |
| border-left: <border-left-width> || <border-style> || <border-color> ; |
| border-bottom: <border-bottom-width>|| <border-style> || <border-color> ; |
| border-right: <border-right-width> || <border-style> || <border-color> ; |
|
| Each side of the border can be handled separately using this tags. Border sides takes the following values. |
|
|
- border-top: 5px dotted red - The top border is set using the tag border-top. The values or in the order width, style and color of top border.
- border-left: 5pt dashed green - The left border is set using the tag border-left. The values or in the order width, style and color of top border.
- border-bottom: 2% groove grey - The bottom border is set using the tag border-bottom. The values or in the order width, style and color of top border.
- border-right: 5px solid blue - The right border is set using the tag border-right. The values or in the order width, style and color of top border.
|
|
| Example: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border-top : 2px dotted red ;
border-left : 2pt dashed rgb(100,100,100);
border-bottom: 5px ridge brown;
border-right: 5px groove #733366;
}
</style>
</HEAD>
<BODY>
<div class="border1"> testing side border </div> <br />
</body>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
|
|
|
| Border |
|
| Border |
|
| borders: |
| Instead of setting each side of borders separately, the whole thing can be done using the single property ( the border property). |
|
| Usage: |
| border: <border-width> || <border-style> || <border-color>; |
|
| This will set the border to any object. |
|
- border : 5px dotted green - The border is set using the tag border. The values or in the order width, style and color of border.
|
|
| It sets the border on all four sides. |
|
| Example 1: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Border Example</TITLE>
<style>
.border1
{
border : 2px dotted red ;border : 2px dotted red ;
}
</style>
</HEAD>
<BODY>
<span class="border1"> testing border properties </span>
</body>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
| CSS Border Properties |
|
| Property | Description | Values |
| border | A shorthand property for setting all of the properties for the four borders in one declaration | border-width
border-style
border-color |
| border-bottom | A shorthand property for setting all of the properties for the bottom border in one declaration | border-bottom-width
border-style
border-color |
| border-bottom-color | Sets the color of the bottom border | border-color |
| border-bottom-style | Sets the style of the bottom border | border-style |
| border-bottom-width | Sets the width of the bottom border | thin
medium
thick
length |
| border-color | Sets the color of the four borders, can have from one to four colors | color |
| border-left | A shorthand property for setting all of the properties for the left border in one declaration | border-left-width
border-style
border-color |
| border-left-color | Sets the color of the left border | border-color |
| border-left-style | Sets the style of the left border | border-style |
| border-left-width | Sets the width of the left border | thin
medium
thick
length |
| border-right | A shorthand property for setting all of the properties for the right border in one declaration | border-right-width
border-style
border-color |
| border-right-color | Sets the color of the right border | border-color |
| border-right-style | Sets the style of the right border | border-style |
| border-right-width | Sets the width of the right border | thin
medium
thick
length |
| border-style | Sets the style of the four borders, can have from one to four styles | none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset |
| border-top | A shorthand property for setting all of the properties for the top border in one declaration | border-top-width
border-style
border-color |
| border-top-color | Sets the color of the top border | border-color |
| border-top-style | Sets the style of the top border | border-style |
| border-top-width | Sets the width of the top border | thin
medium
thick
length |
| border-width | A shorthand property for setting the width of the four borders in one declaration, can have from one to four values | thin
medium
thick
length |
|
|
|
|
|
|
| Margin |
|
| Top Margin |
|
| The CSS margin properties define the space around elements. CSS padding properties refer to the white space within the border or we can say that it's internal spacing. Setting the value of a margin is NOT the same as setting the padding value, and you should always remember that padding & margin are two different properties. |
| All four sides (top, bottom, right, left) can be changed independently using separate properties. It is also possible to use negative values to overlap content. |
|
| Usage: |
margin-top: 10px;
margin-top: 10pt;
margin-top: 10%;
margin-top: auto; |
|
| Many a times we would need to set margin for our objects. This will set the top margin of the object. |
|
| It takes the following values. |
- pt: You can set values in points. (e.g: 10pt or 100pt).
- px: You can set values in pixels. (e.g: 10px or 100px).
- %: You can set values in percentage. (e.g: 10% or 100%).
- auto: This will set a automatic margin.
|
|
| The following CSS code example shows how to set the value of the top margin: |
|
<html>
<head>
<style type="text/css">
.topmargin
{
margin-top: 5cm
}
</style>
</head>
<body>
<p>
This paragraph does not have a specified margin.
</p>
<div class="topmargin">
This paragraph has a top margin of 5cm.
</p>
</body>
</html> |
|
| Click on example to view the page produced by above code. |
|
|
|
|
|
| Margin |
|
| Left Margin |
|
| Many times we would need to set margin for our objects. This will set the left marginof the object. |
|
| Usage: |
margin-left: 10px;
margin-left: 10pt;
margin-left: 10%;
margin-left: auto; |
|
| It takes the following values: |
|
- pt: You can set values in points. (e.g: 10pt or 100pt).
- px: You can set values in pixels. (e.g: 10px or 100px).
- %: You can set values in percentage. (e.g: 10% or 100%).
- auto: This will set a automatic / default margin.
|
|
| The following CSS code example shows how to set the value of the left margin: |
|
<html>
<head>
<title>CSS margin example</title>
<style type="text/css">
.leftmargin
{
margin-left: 2cm
}
</style>
</head>
<body>
<p>
This paragraph does not have a specified margin. </p>
<p class="leftmargin"> This paragraph has a left margin of 2cm. </p>
</body>
</html> |
|
| Click on example to view the page produced by above code. |
|
|
|
|
|
| Margin |
|
| Bottom Margin |
|
| Many a times we would need to set margin for our objects. margin-bottom property can be used to set the bottom margin of the object. |
|
| Usage: |
margin-bottom: 10px;
margin-bottom: 10pt;
margin-bottom: 10%;
margin-bottom: auto; |
|
| It takes the following values: |
|
- pt: You can set values in points. (e.g: 10pt or 100pt).
- px: You can set values in pixels. (e.g: 10px or 100px).
- %: You can set values in percentage. (e.g: 10% or 100%).
- auto: This will set a automatic / default margin.
|
|
| The following CSS code example shows how to set the value of the bottom margin: |
|
<html>
<head>
<title>CSS margin example</title>
<style type="text/css">
.bottommargin
{
margin-bottom: 1cm
}
</style>
</head>
<body>
<p>
This paragraph does not have a specified margin.
</p>
<p class="bottommargin">
<p>
This paragraph has a bottom margin of 5cm.
</p>
<p>
This paragraph does not have a specified margin.
</p>
</body>
</html> |
|
| Click example to view the page produced by above code. |
|
|
|
|
|
| Margin |
|
| Right Margin |
|
| Many times we would need to set margin for our objects. margin-right will set the right margin of the object. |
|
| Usage: |
margin-right: 10px;
margin-right: 10pt;
margin-right: 10%;
margin-right: auto; |
|
| It takes the following values: |
|
- pt: You can set values in points. (e.g: 10pt or 100pt).
- px: You can set values in pixels. (e.g: 10px or 100px).
- %: You can set values in percentage. (e.g: 10% or 100%).
- auto: This will set a automatic / default margin.
|
|
| The following CSS code example shows how to set the value of the right margin: |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Mragin example</TITLE>
<style type="text/css">
.rightmargin
{
margin-right: 10cm
}
</style>
</head>
<body>
<p>
This paragraph does not have a specified margin.
</p>
<p class="rightmargin">
This paragraph has a right margin of 10cm.
</p>
</body>
</html> |
|
| Click example to view the page produced by above code. |
|
|
| CSS Margin Properties |
|
| Property | Description | Values |
| margin | A shorthand property for setting the margin properties in one declaration | margin-top
margin-right
margin-bottom
margin-left |
| margin-bottom | Sets the bottom margin of an element | auto
length
% |
| margin-left | Sets the left margin of an element | auto
length
% |
| margin-right | Sets the right margin of an element | auto
length
% |
| margin-top | Sets the top margin of an element | auto
length
% |
|
|
|
|
|
|
| Advance CSS |
|
| Cursor |
|
| The cursor for any element can be set by using the css property "cursor". |
CSS allows you to specify custom cursor that should appear when hovering over an element.
The normal default cursor icons are usually a skewed arrow, an "I" icon that appears when selecting text, and an hourglass. |
|
| Example 1: |
<html>
<head>
<title>CSS Cursor example</title>
<style>
p { cursor: wait; }
h1 { cursor: help; }
h2 { cursor: crosshair; }
h3{cursor:pointer}
</style>
</head>
<body>
<p>
This cursor will show the "wait" icon when you hover over this paragraph.
</p>
<h1>
This cursor will show the "help" icon when you hover over this heading.
</h1>
<h2>
This cursor will show the "crosshair" when you hover over this heading.
</h2>
<h3>This cursor will show the "pointer" when you hover over this heading.
</h3>
</body>
</html> |
|
| Click here to view the page produced by above code. |
|
|
| Example 2: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>css tutorial cursor</TITLE>
<BODY>
<P class=one style="CURSOR: default"
alt="CSS Tutorial Cursor Default Image">
<IMG src="img/fct-images-cursor-default.gif">
style="cursor: default;" </P>
<P class=one style="CURSOR: hand">
<IMG src="img/fct-images-cursor-hand.gif">
style="cursor: hand;" </P>
<P class=one>Note: the "hand" cursor icon is not supported by Firefox, and will
instead appear as the default "text" cursor icon. </P>
<P class=one style="CURSOR: pointer">
<IMG src="img/fct-images-cursor-hand.gif">style="cursor:
pointer;" </P>
<P class=one style="CURSOR: hand">
<IMG src="img/fct-images-cursor-hand.gif"> style="cursor:
pointer; cursor: hand;" </P>
<P class=one style="CURSOR: crosshair">
<IMG src="img/fct-images-cursor-crosshair.gif">
style="cursor: crosshair;" </P>
<P class=one style="CURSOR: text">
<IMG src="img/fct-images-cursor-text.gif"> style="cursor:
text;" </P>
<P class=one style="CURSOR: wait">
<IMG src="img/fct-images-cursor-hourglass.gif">
style="cursor: wait;" </P>
<P class=one style="CURSOR: help">
<IMG src="img/fct-images-cursor-help.gif"> style="cursor:
help;" </P>
<P class=one style="CURSOR: move">
<IMG src="img/fct-images-cursor-move.gif"> style="cursor:
move;" </P>
<P class=one style="CURSOR: e-resize">
<IMG src="img/fct-images-cursor-e-resize.gif">
style="cursor: e-resize;" </P>
<P class=one style="CURSOR: ne-resize">
<IMG src="img/fct-images-cursor-ne-resize.gif">
style="cursor: ne-resize;" </P>
<P class=one style="CURSOR: nw-resize">
<IMG src="img/fct-images-cursor-nw-resize.gif">
style="cursor: nw-resize;" </P>
<P class=one style="CURSOR: n-resize">
<IMG src="img/fct-images-cursor-n-resize.gif">
style="cursor: n-resize;" </P>
<P class=one style="CURSOR: se-resize">
<IMG src="img/fct-images-cursor-se-resize.gif">
style="cursor: se-resize;" </P>
<P class=one style="CURSOR: sw-resize">
<IMG src="img/fct-images-cursor-sw-resize.gif">
style="cursor: sw-resize;" </P>
<P class=one style="CURSOR: w-resize">
<IMG src="img/fct-images-cursor-w-resize.gif">
style="cursor: w-resize;" </P>
<P class=one style="CURSOR: progress">
<IMG src="img/fct-images-cursor-progress.gif">
style="cursor: progress;" </P>
<P class=one style="CURSOR: all-scroll">
<IMG src="img/fct-images-cursor-all-scroll.gif">
style="cursor: all-scroll;" </P>
<P class=one style="CURSOR: col-resize">
<IMG src="img/fct-images-cursor-col-resize.gif">
style="cursor: col-resize;" </P>
<P class=one style="CURSOR: not-allowed">
<IMG src="img/fct-images-cursor-not-allowed.gif">
style="cursor: not-allowed;" </P>
<P class=one style="CURSOR: no-drop">
<IMG src="img/fct-images-cursor-no-drop.gif">
style="cursor: no-drop;" </P>
<P class=one>Note: In Firefox, the "no-drop" cursor icon will appear as a
"not-allowed" cursor icon. </P>
<P class=one style="CURSOR: row-resize">
<IMG src="img/fct-images-cursor-row-resize.gif">
style="cursor: row-resize;" </P>
<P class=one style="CURSOR: vertical-text"><IMG
src="img/fct-images-cursor-vertical-text.gif">
style="cursor: vertical-text;" </P></DIV>
</BODY>
</HTML> |
|
| Click here to view the page produced by above code. |
|
|
|
|
|
| Advance CSS |
|
| Classification |
|
| The CSS classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control thevisibility of an element. |
|
| CSS Classification Properties |
|
| Property | Description | Values |
| clear | Sets the sides of an element where other floating elements are not allowed | left
right
both
none |
| cursor | Specifies the type of cursor to be displayed | url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help |
| display | Sets how/if an element is displayed | 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 |
| float | Sets where an image or a text will appear in another element | left
right
none |
| position | Places an element in a static, relative, absolute or fixed position | static
relative
absolute
fixed |
| visibility | Sets if an element should be visible or invisible | visible
hidden
collapse |
|
|
|
|
|
|
| Advance CSS |
|
| Dimension |
|
| The CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines. |
|
| CSS Dimension properties: |
|
| Property | Description | Values |
| height | Sets the height of an element | auto
length
% |
| line-height | Sets the distance between lines | normal
number
length
% |
| max-height | Sets the maximum height of an element | none
length
% |
| max-width | Sets the maximum width of an element | none
length
% |
| min-height | Sets the minimum height of an element | length
% |
| min-width | Sets the minimum width of an element | length
% |
| width | Sets the width of an element | auto
%
length |
|
|
|
|
|
|
| Advance CSS |
|
| onMouseover Effect |
|
| Using onMouseover property, we can define how a link (or image or any other element) should act when the mouse is moved over the element. It is very simple to do this. Just follow the steps and you can do it. |
|
| In head portion add style that you want the text to change, as follows: |
|
<html>
<head>
<title>onMouseover example</title>
<style>
/*This is how the text will look before mouse over*/
.colc{
font-family: san-serif;
color: red;
}
/*This is how the text will look on mouse over. Note "hover" is the most important change here*/
.colc:hover
{
font-family: san-serif;
color: #456745;
text-decoration:none
}
</style>
</head>
<body>
<h2>onMouserover demo</h2>
<a class="colc" href="#" onMouseOver="window.status'Go to http://www.ebizelindia.com'">Sample link</a>
</body>
</html> |
|
| Click on example to view the page produced by above code. |
|
|
|
|
|
| Advance CSS |
|
| Creating a CSS based menu |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css">
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: -1;
margin-top:-1;
height: 20px;
}
.hovermenu ul li{
list-style: none;
display: inline;
}
.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}
.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
color:#FF9966
}
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>
<TITLE>Simple Hover menu[CSS based]</TITLE>
<META NAME="Generator" CONTENT="">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY bgcolor='#FFCC00'>
<div class="hovermenu">
<ul>
<li><a href="http://www.ebizelindia.com">eBIZ.com</a></li>
<li><a href="http://education.ebizelindia.com">eBIZ education</a></li>
<li><a href="http://ebizgk.com">eBIZ GK</a></li>
<li><a href="http://support.ebizelindia.com">eBIZ.com support</a></li>
<li><a href="http://mail.ebizelindia.com">Web mail</a></li>
</ul>
</div>
</BODY>
</HTML> |
|
| Click here to view the page produced by above code. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
0 comments: