z-index

  The z-index property decides order in which the elements are displayed in the web page. This property is useful to create layers for the document. This property gives the third dimension to the element. The element having z-index property will be displayed above or in background of other element.

Syntax

z-index: <numeric value>;

There are two values for the z-index auto and “numeric value” or order. The higher the numeric value the more the element is on the top of the other element. Lower(negative also) the value more element is displayed behind the other elements.

  This property works with position property.

Following is the code example of the z-index property:

<div id="zid1" style="border: 1px solid; height: 200px; position: relative; right: 0px; width: 200px;">

<div id="zid2" style="background-color: red; border: 1px solid; height: 100px; position: relative; width: 125px; z-index:10;">

Div 1

</div>

<div id="zid3" style="background-color: green; border: 1px solid; height: 100px; left: 20px; position: relative; top:-50px;  width: 125px;  ">

Div 2

</div>

</div>

Following is the output of the above code:
Now here you can see the red box is above the green box. This is because the z-index property of the element is set to 10.

Div 1

Div 2

Visibility Property

 The visibility property decides whether an element should be visible or not. It has three values:

o   visible: The visible value will make element visible.

o   hidden: The hidden value will hide the element. But the hidden element will not affect flow of the document

o   collapse: The collapse value will work only for table, table columns, table rows, table cells. As like the hidden value the flow of the table will not be altered.

Syntax:

visibility: {visible|hidden | collapse}

Example :

Div {visibility: visible}

P{visibility: hidden}

tr.test{visibility:collapse}

Display Property

The display property is used to display the box. The display property overrides normal flow of the document.  Following are the values for the display property :

  

  o     none:  will not show the element at all.

  o   block: It will display the element as block. This value when applied to the element will leave space on all the sides.

  o   Inline: When element is applied display:inline it will be part of the flow as part of the parent.

  o   list-item: The element will behave like a <li> element.

Syntax:

Display: {none| block| inline| list-item}

Following is the example for the display property: 

Select Display Property

none

block

inline

list-item

This is a sample for display.This is a sample for display.This is a sample for display.

 Div 1

This is a sample for display.This is a sample for display.This is a sample for display.This is a sample for display.This is a sample for display.This is a sample for display.

Float Property

The element with float property can be set to left, right and none. The float property works only in horizontal directions. The element can be floated in left and right side, but not on top and down side.

       The box will float in right and left direction only. There are three values for the float property “left, right, none”

Example of the float property as follows:

The following example shows when you click on the radio button with float value as left or right or none. It will show you the output.

Left

Right

none

 Div 1

This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document.

Clear property

The clear property controls weather element having float property should float around the element with clear property. This property has four values those are      

- left : Element will not float on the left side of the element.

           -   right : Element will not float on the right side of the element having the property clear.

     -  both : The element will not allow any floating element on the both sides .

     - none: It will allow the element to float on both sides.

    Following is the example to demonstrate how the clear and float properties behave when used together:

Select Float Property

Left

Right

none

Select Clear Property

Left

Right

both

none

 Div 1

This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document. Here we are going to put a lot of extra text This will help us to demonstrate how the float property works.This is sample div element for the property. This element shows the output after the float property is set to left or right of the document.

CSS Position property

          To set the element at any position in browser we can use “position” property. We have already studied background-property in “Background properties”. This property sets the element at any given coordinates in the browser. Along with “position” property use the properties “Top, left, bottom, right ” and z-index. This property has following values:

o   static

This is the default value for this property.  With this value element is not positioned but appears in the flow of the element. The properties “top, left, bottom, right” and z-index are ignored by the browser.  You need to set position to static only if you need override the position set by previous element.

o   Relative

The position when set to relative will move the element from the position where it would have appeared in the normal flow of the document. With this property you can use the “top, left, bottom, right” properties. If in your document a image appears in the header of the page when position property is set to static and you change its position to relative with “left:50px”, “top:10px” . Then the image would move left by 50px and down by 10px.

o   Absolute

The element with property absolute will be positioned considering the “top, left”  corner of the parent element as origin. When the position:absolute is set then rest of the document flow will not impact the position of the element.

     
    

  

Following is the simple example for the position properties “static, relative,  absolute” . For relative elements is moved 10px top, 10px left and absolute the elements is moved 10px top, 10px right.

Static
Relative
Absolute

Div 1

Div 2

Margin Border and padding Properties of box model

Margin Property

Margin is the outermost area surrounding the element. It is transparent and does not have background color. Following are the properties that implement margin:

Margin-top:  This will apply the margin to top side of the element.

Margin-left: This will apply the margin to the left side of the element

Margin-bottom: This will apply the margin to the bottom side of the element.

Margin-right: This will apply margin to the right side of the element.

Following is the example for the margin

p{

margin-top: 10px;

margin-left: 10px;

margin-bottom: 10px;

margin-right: 10px;

}

You can also set the property for top, right, bottom, left using the “margin” property alone

p{

margin: 10px 10px 10px 10px

} 

The above example will set the margin for all the sides to 10px.

If you don’t want margin on left and the right side of the element but want 5px margin on the top and bottom side of the element. Following example shows how to do it.

p{

margin: 10px 0px 10px 0px

} 

Always remember when using the margin property it will be applied in order “top, left, bottom, right”.

p{margin: 5px;} 

The above example will set the property for all the sides to 5px.

Border Property

The border is the area between the padding and margin of the element.  The border property allows us to decide the display of the border.  The border has three important properties those are as follows:

-          border-width

This property will set the width for the property. It has following values.

o   Thin

o   medium

o   thick

o   Length

  For example with output :

<p style="border-style: solid; border-width: thin; width:200px; " >border-width:thin</p>

 <p style="border-style: solid; border-width: medium;  width:200px;" >border-width:medium</p>

  <p style="border-style: solid; border-width: thick;  width:200px;" >border-width:thick</p>

  <p style="border-style: solid; border-width: 10px;  width:200px;" >border-width:10px</p>

Output of above code is as follows:

border-width:thin

border-width:medium

border-width:thick

border-width:10px

-          border-style

 The border style property sets the style for the border. There are different values for the style property. Those are shown below with example:

      <p style="border-style: none; border-width: medium; width:200px; padding:5px;" >border-style:none</p>

       <p style="border-style: hidden; border-width: medium; width:200px; padding:5px;" >border-style:hidden</p>

              <p style="border-style: dashed; border-width: medium; width:200px; padding:5px;" >border-style:dashed</p>

       <p style="border-style: dotted; border-width: medium; width:200px; padding:5px;" >border-style:dotted</p>

       <p style="border-style: solid; border-width: medium; width:200px; padding:5px; " >border-style:solid</p>

       <p style="border-style: inset; border-width: medium; width:200px; padding:5px; " >border-style:inset</p>

       <p style="border-style: outset; border-width: medium; width:200px; padding:5px; " >border-style:outset</p>

       <p style="border-style: ridge; border-width: medium; width:200px; padding:5px; " >border-style:ridge</p>

       <p style="border-style: groove; border-width: medium; width:200px; padding:5px; " >border-style:groove</p>

Output of the above code is as follows:

border-style:none

border-style:hidden

border-style:dashed

border-style:dotted

border-style:solid

border-style:inset

border-style:outset

border-style:ridge

border-style:groove

-          border-color

This property sets the property for border of the element.  Values can be set directly by color name, rgb function or by using hexadecimal values. Following is the example for border-color property:

<p style="border-style: solid; border-width: medium; width:200px; padding:5px; border-color: red " >border-color: red </p>

       <p style="border-style: solid; border-width: medium; width:200px; padding:5px; border-color: rgb(255,255,0) " >border-color: rgb(255,255,0) </p>

       <p style="border-style: solid; border-width: medium; width:200px; padding:5px; border-color: #0000FF " >border-color: #0000FF</p>

Output of the above code is as follow :

border-color: red

border-color: rgb(255,255,0)

border-color: #0000FF

Also you can set the border property using the “border” keyword. For setting the border property set it in the sequence of width, style and color and following is the example for the same:

        border: 5px dashed red;

The border has four sides top, bottom, left, right now if you want to set the different settings for all the sides you can do it by using following set of properties :

-          top

o   border-top-width: sets the width of the top border

o   border-top-style: sets the style of the top border

o   border-top-color: sets the color of the top border

o   border-top: sets all the above three properties.

-          bottom

o   border-bottom-width: sets the width of the bottom border

o   border-bottom-style: sets the style of the bottom border

o   border-bottom-color: sets the color of the bottom border

o   border-bottom: sets all the above three properties.

-          left

o   border-left-width: sets the width of the left border

o   border-left-style: sets the style of the left border

o   border-left-color: sets the color of the left border

o   border-left: sets all the above three properties.

-          right

o   border-right-width: sets the width of the right border

o   border-right-style: sets the style of the right border

o   border-right-color: sets the color of the right border

o   border-right: sets all the above three properties.

Following is the example where different settings are set for left,right, top, bottom using the properties mentioned above.

<p style="width: 500px;border-right: 5px inset black ;border-bottom: 5px dotted green ;border-left: 5px outset blue; text-wrap: wrap; border-top: 5px dashed red " >This is example of the border propert where different setting is set for top, left, bottom, right</p>

Output of the above code as follow :

This is example of the border propert where different setting is set for top, left, bottom, right

Padding property

Padding is area surrounding the element content. This property is affected by the element background color. It creates a space between element content and border of the element. Like the border and margin property this property has four sides “top, bottom, left, right”. Following are the keywords that are used to set values for this element:

-          Padding-top

Padding top property will set the padding for top side of the element content.                                   Padding-top: 10px;

-          Padding-left

Padding left property will set the padding for left side of the element content.

Padding-left: 10px;

-          Padding-bottom

Padding bottom property will set the padding for bottom side of the element content.

Padding-bottom: 10px;

-          Padding-right

Padding right property will set the padding for right side of the element content.

Padding-bottom: 10px;

         Example with output:

<p style="border-style: solid; border-width: medium; width:200px; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px;border-color: #0000FF " >This example sets the padding  for top, bottom, right, left to 10 px</p>

Output of the above code as follows :

This example sets the padding for top, bottom, right, left to 10 px

You can also set the above properties under single name.

-          padding

You can set the property under one name. Following are some examples of padding.

The below example will set the padding for element on the all sides.

p{padding: 5px;} 

Below example set the padding on the top and bottom side=10px, left and right side =5px.

p{padding: 10px 5px 10px 5px;}  

CSS Box Model

Every element is considered as box consisting of margin, border, padding properties. The box model is used for adjusting the margin, border, padding and content of the element. The box model is shown in the following image:

Explanation of the above image:

Element Content: The inner most box, where text and image are placed.

 Padding: It is a space between the element content and border of the element.

Border : The border goes around the element content and padding.

Margin: It is the area around border of the element.

The above properties have four edges “top, right, bottom, left”. Whenever we set height and width of the element we set it only for element content of the element. To calculate the total area of the element we need calculate the area of element with margin, padding and border.

Following is simple example for the box model:

p{

Height: 10px;

Padding: 10px;

Margin: 10px;

Border: 10px;

}

Total height of the element:10 height + 20(padding) +20(margin)+20(bordefr)= 70px.

Now the question is the defined value of the padding is 10 but we are calculating with 20px, it is because when the padding implemented it is on all the sides for left, right, bottom, top so each side will have 10px of padding. So the height will contain the total padding of the top+ bottom. Same will be applied to the border and margin properties.

Total width of the element:10 width + 20(padding) +20(margin)+20(bordefr)= 70px.

CSS Link Styling

We can style links with text and font properties. The links can be created using the <a>.  We can style the links depending upon their state. You can set them when cursor is hovering over the link or when a link is visited by the user.  Following are the states for the link:

o   Link:  This is for simple link.

o   Visited: This for the links that are clicked.

o   Hover: The links on which mouse is hovering.

o   Active: This for the links that are about to be linked.

 The mentioned states are also called as pseudo classes. When defining the CSS the above pseudo class should be defined in the order link, visited, hover, active.

For example:

The below example will set style for the links in the html page.

     a:link{ font: italic lighter 10px Arial #0011CC }

Following example will set the style for the links visited by the user

     a:visited{ font: italic lighter 10px Arial #FF0000 }

Following example sets the style and is displayed when mouse is hovering on the link

     a:hover{ font: italic bold 10px Arial #0011CC }

Following example sets the style and is displayed when user is about to click the link

     a:active{ font: italic bold 10px underline Arial #0011CC }

  Live example :  Link Pseudo class

Font Properties

The font properties allows set font style, size, variant.

-          Font-family

             The font-family sets the font for element.  There are two types of values for this property.

1.       Family name: like “Helvetica”

2.       Generic name:  like “Arial”

           Following is the example of font-family. The following code will apply fonts to <p> element.

                p{ font-family: Arial, Times New Roman}

-          Font-size

This property will set the size of the text in the element. There are several values for this property, these are as follows:

     o   xx-large

     o   x-large

     o   larger

     o   large

     o   medium

     o   small

     o   smaller

     o   x-small

     o   xx-small

     o   length

     o   % (percent)

Various properties can be set from extra small to extra large. Also length can be set for font-size property.

For example using length property:

        p{ font-size:20px}

-          Font-style

The font style property sets the font style. Following are the values for this property.

o   normal

o   italics

o   oblique

     p{ font-style: normal}

     

-          Font-variant

You can set variant of the text within the element. Following are the values for font-variant:

o   normal: It displays the normal font.

o   small-caps: In this case the all the characters are in uppercase but they are displayed smaller than other fonts.

Example:

     p{ font-variant: small-capsl}

-          Font-weight

You can set the weight of the font using this property. It has a fixed set of values those are as follows:

• lighter
• normal
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• bold
• bolder

     p{ font-weight: lighter}

-          Font

We can set all the properties mentioned above by grouping them under the “font” property.

We can set font family, size, variant, weight under one name.

For example :

     p{ font: italic lighter 10px Arial }