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.