Thursday, December 6, 2012

Content Property

The content property is used to insert the predefined content using the style sheet. The content property is used with ":after" and ":before" Pseudo elements

syntax:


<element>:after{content: <value>}


<element>:before{content: <value>}



Following are the values that are used for "content" property :


  1. string: sets a string the string before or after the content of the element
  2. counter: sets the counter value before or after the element.
  3. attr(attribute): sets the content as the selector elements attribute.
  4. open-quote: sets opening quote as content
  5. close-quote: sets closing quote as content.
  6. no-open-quote: Removes any open quote present before or after the element.
  7. no-close-quote: removes any close quote present before or after the element.
  8. url(url): sets the content as specified by the url. It can be image, video etc..
  9. normal : sets the content to the normal.
  10. none: sets content to nothing, if present 

Example 1: 




div.test_after:after
{
content: "This is test after";
font-size: 15px;
text-decoration: underline;
color:red;
}


output of the above code :


    This is the test for the content class. 

Example 2:

div.test_content:before
{
content: "<"attr(class)">";
font-size: 15px;
text-decoration: underline;
color:red;
}


    This is sample with with attr().

Example 3: using counter

         

span.count_inc
{
   counter-increment: counter_val;
}
span.count_inc:before
{
 content: counter(counter_val);
}

        
           Output when above classes are applied to the span tag.

             Test value
             Test value
             Test value


Monday, December 3, 2012

Pseudo Elements and Pseudo Classes

Pseudo elements and Pseudo classes are very interesting part of CSS, these are the elements and classes that are not present in the document. But the Pseudo elements and classes apply the style to elements based on their state or position in the document.
            For "Pseudo classes" you can go through the post posted earlier CSS Link Styling.The classes used apply style according to the state ":link, :visited, :hover, :active"

Pseudo Elements

Pseudo elements will start with (:)or (::). These pseudo elements are like a virtual element, by using these we apply styles to the elements in the html/xhtml document. The pseudo elements and classes can be combined. Following are the Pseudo elements that are used in CSS :



  • :after : This pseudo element will insert the content after the content of the element.
          Syntax :               

<class\element>:after{style}
      
         
       Example: 

       

div.test_after:after
{
content: "This is test after";
font-size: 15px;
text-decoration: underline;
color:red;
}

    This is the test for the after class.

  • :before : This pseudo element will insert the content before the content of the element.

              Syntax :               

    <class\element>:before{style}
          
             
           Example: 

           

    div.test_before:before
    {
    content: "This is test before";
    font-size: 15px;
    text-decoration: underline;
    color:red;
           
This is the test for the before class.


Note: The :after and :before use "content property" to set the content before or after element.
  • :first-letter : This pseudo element will apply the style to the first character of the text.

          Syntax :               

<class\element>:first-letter{style mentioned}
   


         
       Example: 

       
div.test_firstletter:first-letter

{

font-size: 15px;
text-decoration: underline;
color:red;
font-weight: bold;
}

This the test for the first letter of the line. It will be styled as per the style in the above class.     
                         

  • :first-line : This pseudo element will apply the style to the first line of the text.


          Syntax :               

<class\element>:first-line{style mentioned}
      
     
    
       Example: 

       

div.test_firstline:first-line
{
content: "This is test before";
font-size: 15px;
text-decoration: underline;
color:red;
font-weight: bold;
}


This is the test to show first-line of the paragraph will be styled. The rest of the text will appear as it is. There will be no changed in it. first-line pseudo element is very useful to apply styles to first line in paragraph on any other tag.

Tuesday, November 27, 2012

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

Monday, November 26, 2012

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}

Sunday, November 25, 2012

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.

Saturday, November 24, 2012

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.









Thursday, November 22, 2012

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

Friday, November 16, 2012

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;}  

Tuesday, November 13, 2012

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.



Saturday, November 3, 2012

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