CSS Tutorial part3

                              CASCADING STYLE SHEET

Part 3.

Transition:

This property is used to animating the elements it can smoothly increase the pixel elements and its look like a animation. This property is the shortand property of all other transition properties.

Syntax: transition: property duration timing-function delay;

Eg: transition: height 2s. Live Example click here.

Transition property: This property is used to set the property value that has the transition effects we can give transition effects for all the elements. If you want to specify more than one property value then use (,) comma as a seperator.

Eg: transition: height,width 2s (or) transition: all 2s. Live Example click here.

Transition duration: This property is used to set the seconds or milliseconds to complete the transition effect. 

Eg: transition-duration: 2s; Live Example click here.

Transition delay: This property specifies transition can start after a short delay i.e., some seconds or milliseconds.

Eg: transition-delay: 2s; Live Example click here. 

Vertical Align:

 This property is used align the element at vertically. We can also give the pixel,cm,em,percentage as the value. These has the following values

• sub
• super
•  top
• middle
• bottom
• text-top
• text-bottom
• baseline

Eg: vertical-align: middle. Live Example click here.

Visibility: 

This property is used to sets the element may visible or not. It has the hidden, collapse, inherit and visible. The difference between the visibility:hidden and display:none is when the visibility is hidden then the element is present in the document and it takes the relevant space for that. In case of display:none the element is not present in the document and its space can be used by another element. 

Eg: visibility: hidden; Live Example click here.

Width: 

This property is used to set the width for the particular element. we can give values in pixel, percentage, cm, em and we can set the value as auto the browser automatically detects the width of the browser. 

Eg: width: 40px; 

Word spacing:

 This property is also same as the letter spacing in here we can give the space between the two words. 

Eg: word-spacing: 10px; Live Example click here.

Word wrap:

This property allows the word can be break into next line.

Eg: word-wrap: break-word;  Live Example click here.

 White space:

This property is used to manage the white space in the element.

Eg: white-space: nowrap; Live Example click here. 

Z-index:

This property is used to set the stack order of the specific elements to display. The having the maximum z-index are present in-front of the document.

Eg: z-index: 5; Live Example click here. 

Refer CSS selector to know more about CSS