Monday, March 17, 2014

CSS - Layers

CSS gives you opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap with each other.
The z-index property is used alongwith position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom.
A z-index property can help you to create more complex webpage layouts. Following is the example which shows how to create layers in CSS.

<div style="background-color:red;
 width:300px;
 height:100px;
 position:relative;
 top:10px;
 left:80px;
 z-index:2">
</div>
<div style="background-color:yellow;
 width:300px;
 height:100px;
 position:relative;
 top:-60px;
 left:35px;
 z-index:1;">
</div>
<div style="background-color:green;
width:300px;
 height:100px;
 position:relative;
 top:-220px;
 left:120px;
 z-index:3;">
</div>

This will produce following result:

CSS - Positioning

CSS helps you to position your HTML element. You can put any HTML element at whatever location you like. You can specify whether you want the element positioned relative to its natural position in the page or absolute based on its parent element.
Now we will see all the CSS positioning related properties with examples:

Relative Positioning:

Relative positioning changes the position of the HTML element relative to where it normally appears. So "left:20" adds 20 pixels to the element's LEFT position.
You can use two values top and left alongwith position property to move an HTML element anywhere in HTML document. Here's a quick reference when moving HTML elements in CSS.

Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

NOTE: You can use bottom or right values as well in the same way as top and left.
Here is the example:

<div style="position:relative;left:80px;top:2px;
            background-color:yellow;">
This div has relative positioning.
</div>

This will produce following result:

This div has relative positioning.

Absolute Positioning:

An element with position: absolute is positioned at the specified coordinates relative to your screen top left corner.
You can use two values top and left alongwith position property to move an HTML element anywhere in HTML document. Here's a quick reference when moving HTML elements in CSS.

Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

NOTE: You can use bottom or right values as well in the same way as top and left.
Here is the example:

<div style="position:absolute;left:80px;top:20px;
            background-color:yellow;">
This div has absolute positioning.
</div>

Fixed Positioning:

Fixed positioning allows you to fix the position of an element to a particular spot on the page - regardless of scrolling. Specified coordinates will be relative to the browser window.
You can use two values top and left alongwith position property to move an HTML element anywhere in HTML document. Here's a quick reference when moving HTML elements in CSS.

Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

NOTE: You can use bottom or right values as well in the same way as top and left.
Here is the example:

<div style="position:fixed;left:80px;top:20px;
            background-color:yellow;">
This div has fixed positioning.
</div>

CSS - Visibility

A property called visibility allows you to hide an element from view. You can use this property alongwith Javascript to create very complex menu and very complex webpage layouts.
You may choose to use the visibility property to hide error messages that are only displayed if the user needs to see them, or to hide answers to a quiz until the user selects an option.
NOTE: Remember that the source code will still contain whatever is in the invisible paragraph, so you should not use this to hide sensitive information such as credit card details or passwords.
The visibility property can take the values listed in the table that follows:

Value	Description
visible	The box and its contents are shown to the user.
hidden	The box and its content are made invisible, although they still affect the layout of the page.
collapse	This is for use only with dynamic table columns and row effects.

Here is the example:

<p>
This paragraph should be visible in normal way.
</p>
<p style="visibility:hidden;">
This paragraph should not be visible.
</p>

This will produce following result:

This paragraph should be visible in normal way.

CSS - Scrollbars

There may be a case when an element's content might be larger than the amount of space allocated to it. For example given width and height properties did not allow enough room to accommodate the content of the element.
CSS provides a property called overflow which tells the browser what to do if the box's contents is larger than the box itself. This property can take one of the following values:

Value	Description
visible	Allows the content to overflow the borders of its containing element.
hidden	The content of the nested element is simply cut off at the border of the containing element and no scrollbars is visible.
scroll	The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content.
auto	The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow.

Here is the example:

<style type="text/css">
.scroll{
 display:block;
 border: 1px solid red;
 padding:5px;
 margin-top:5px;
 width:300px;
 height:50px;
 overflow:scroll;
 }
.auto{
 display:block;
 border: 1px solid red;
 padding:5px;
 margin-top:5px;
 width:300px;
 height:50px;
 overflow:auto;
 }
</style>
<p>Example of scroll value:</p>
<div class="scroll">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
 as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
I am going to keep lot of content here just to show
you how scrollbars works if there is an overflow in
an element box. This provides your horizontal as well
as vertical scrollbars.
</div>

This will produce following result:

Example of scroll value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars.

Example of auto value:

I am going to keep lot of content here just to show you how scrollbars works if there is an overflow in an element box. This provides your horizontal as well as vertical scrollbars.

CSS - Dimension

You have seen the border that surrounds every box ie. element, the padding that can appear inside each box and the margin that can go around them. In this tutorial we will how we can change the dimensions of boxes.
There are following properties that allow you to control the dimensions of a box.

The height property is used to set the height of a box.
The width property is used to set the width of a box.
The line-height property is used to set the height of a line of text.
The max-height property is used to set a maximum height that a box can be.
The min-height property is used to set the minimum height that a box can be.
The max-width property is used to set the maximum width that a box can be.
The min-width property is used to set the minimum width that a box can be.

The height and width Properties:

The height and width properties allow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto.
Here is the example:

<p style="width:400px; height:100px;border:1px solid red;
             padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>

This will produce following result:

This paragraph is 400pixels wide and 100 pixels high

The line-height Property:

The line-height property allows you to increase the space between lines of text. The value of the line-height property can be a number, a length, or a percentage.
Here is the example:

<p style="width:400px; height:100px;border:1px solid red;
             padding:5px; margin:10px;line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high
and here line height is 30pixels.This paragraph is 400 pixels
wide and 100 pixels high and here line height is 30pixels.
</p>

This will produce following result:

This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.

The max-height Property:

The max-height property allows you to specify maximum height of a box. The value of the max-height property can be a number, a length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
Here is the example:

<p style="width:400px; max-height:10px;border:1px solid red;
             padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />

This will produce following result:

This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px

The min-height Property:

The min-height property allows you to specify minimum height of a box. The value of the min-height property can be a number, a length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
Here is the example:

<p style="width:400px; min-height:200px;border:1px solid red;
             padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />

This will produce following result:

This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px

The max-width Property:

The max-width property allows you to specify maximum width of a box. The value of the max-width property can be a number, a length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
Here is the example:

<p style="max-width:100px; height:200px;border:1px solid red;
             padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />

This will produce following result:

This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px

The min-width Property:

The min-width property allows you to specify minimum width of a box. The value of the min-width property can be a number, a length, or a percentage.
NOTE: This property does not work in either Netscape 7 or IE 6.
Here is the example:

<p style="min-width:400px; height:100px;border:1px solid red;
             padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt="logo" src="/images/css.gif" width="95" height="84" />

This will produce following result:

This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px

CSS - Outlines

Outlines are very similar to the borders but there are few major differences in borders and 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.

NOTE: The outline properties are not supported by IE 6 or Netscape 7.
You can set following outline properties using CSS.

The outline-width property is used to set the width of the outline.
The outline-style property is used to set the line style for the outline.
The outline-color property is used to set the color of the outline.
The outline property is used to set all the above three properties in a single statement.

The outline-width Property:

The outline-width property specifies the width of the outline to be added to the box. Its value should be a length or one of the values thin, medium, or thick . just like the border-width attribute
A width of zero pixels means no outline.
Here is the example:

<p style="outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />
<p style="outline-width:thick; outline-style:solid;">
This text is having thick outline.
</p>
<br />
<p style="outline-width:5px; outline-style:solid;">
This text is having 5x outline.
</p>

This will produce following result:

This text is having thin outline.

This text is having thick outline.

This text is having 5x outline.

The outline-style Property:

The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes around an element. It can take one of the following values:

none: No border. (Equivalent of outline-width:0;)
solid: Outline is a single solid line.
dotted: Outline is a series of dots.
dashed: Outline is a series of short lines.
double: Outline is two solid lines.
groove: Outline looks as though it is carved into the page.
ridge: Outline looks the opposite of groove.
inset: Outline makes the box look like it is embedded in the page.
outset: Outline makes the box look like it is coming out of the canvas.
hidden: Same as none.

Here is the example:

<p style="outline-width:thin; outline-style:solid;">
This text is having thin solid  outline.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;">
This text is having thick dashed outline.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;">
This text is having 5x dotted outline.
</p>

This will produce following result:

This text is having thin solid outline.

This text is having thick dashed outline.

This text is having 5x dotted outline.

The outline-color Property:

The outline-color property allows you to specify the color of the outline. Its value should either be a color name, a hex color, or an RGB value, as with the color and border-color properties.
Here is the example:

<p style="outline-width:thin; outline-style:solid;
             outline-color:red">
This text is having thin solid red  outline.
</p>
<br />
<p style="outline-width:thick; outline-style:dashed;
             outline-color:#009900">
This text is having thick dashed green outline.
</p>
<br />
<p style="outline-width:5px;outline-style:dotted;
             outline-color:rgb(13,33,232)">
This text is having 5x dotted blue outline.
</p>

This will produce following result:

This text is having thin solid red outline.

This text is having thick dashed green outline.

This text is having 5x dotted blue outline.

The outline Property:

The outline property is a shorthand property that allows you to specify values for any of the three properties discussed previously in any order but in a single statement.
Here is the example:

<p style="outline:thin solid red;">
This text is having thin solid red outline.
</p>
<br />
<p style="outline:thick dashed #009900;">
This text is having thick dashed green outline.
</p>
<br />
<p style="outline:5px dotted rgb(13,33,232);">
This text is having 5x dotted blue outline.
</p>

This will produce following result:

This text is having thin solid red outline.

This text is having thick dashed green outline.

This text is having 5x dotted blue outline.

CSS - Cursors

The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.
One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a link, the cursor changed from a pointer to a hand. For a submit button on a form this does not happen. Therefore, using the cursor property to change the cursor to a hand whenever someone hovers over an image that is a submit button. This provides a visual clue that they can click it.
The table that follows shows possible values for the cursor property:

Value	Description
auto	Shape of the cursor depends on the context area it is over. For example an I over text, a hand over a link, and so on...
crosshair	A crosshair or plus sign
default	An arrow
pointer	A pointing hand (in IE 4 this value is hand)
move	The I bar
e-resize	The cursor indicates that an edge of a box is to be moved right (east)
ne-resize	The cursor indicates that an edge of a box is to be moved up and right (north/east)
nw-resize	The cursor indicates that an edge of a box is to be moved up and left (north/west)
n-resize	The cursor indicates that an edge of a box is to be moved up (north)
se-resize	The cursor indicates that an edge of a box is to be moved down and right (south/east)
sw-resize	The cursor indicates that an edge of a box is to be moved down and left (south/west)
s-resize	The cursor indicates that an edge of a box is to be moved down (south)
w-resize	The cursor indicates that an edge of a box is to be moved left (west)
text	The I bar
wait	An hour glass
help	A question mark or balloon, ideal for use over help buttons
<url>	The source of a cursor image file

NOTE: You should try to use only these values to add helpful information for users, and in places they would expect to see that cursor. For example, using the crosshair when someone hovers over a link can confuse visitors.
Here is the example:

<p>Move the mouse over the words to see the cursor change:</p>
<div style="cursor:auto">Auto</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:default">Default</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:move">Move</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:text">text</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>

This will produce following result:

Move the mouse over the words to see the cursor change:

Auto

Crosshair

Default

Pointer

Move

e-resize

ne-resize

nw-resize

n-resize

se-resize

sw-resize

s-resize

w-resize

text

wait

help