Tuesday, August 30, 2011

CSS3 Implementation and Detailed Description


"Introduction"

css3 implementation"Cascading Style Sheets (CSS) are the modern standard for website presentation. When combined with structural markup language like HTML5, XHTML, or XML, CSS provide Internet browsers with the information that enables them to present all the  visual aspects and elements of a web document."

"Cascading Style Sheets is a simple design language intended to simplify the process of making web pages presentable. It means we can say that, CSS handles the look and feel part of a web page or a whole website."


                  "Browser Compatibility"

Along with HTML5 it’s really going to improve the way that we design for the web, making the implementation of seemingly simple design elements, But as always with emerging web technologies, there are problems with uptake. If you’ve been playing around with CSS3 then you’ll probably know which browsers recognize it. The newest versions of Chrome, Safari, Opera, and Firefox render most of the basics at the moment, but IE6 – 8 doesn’t. 
CSS3 has very limited compatibility as we have to wait for Apple, or Firefox, or Google etc. to decide to adapt their browsers in order to recognize the new semantics.

Latest version of: Opera, Safari, Crome, firefox  and IE9 support is CSS3.
 Let us check out with some CSS3 properties:

css3 compatibility with browser



                  "Styling with CSS3"
  1. body
    {
      margin:0 auto;
      width:940px;
      font:13px/22px Helvetica,Arial, sans-serif;  
      background: #f0f0f0;  
    }

    {  
     margin: 0;  
     padding: 0;  
    }   
      
    header, footer, aside, nav, article 
    {  
    css3 and html5 example display: block;  

    h2 
    {  
     font-size: 28px;  
     line-height: 44px;  
     padding: 22px 0;  
    }  

    h3 
    {  
     font-size: 18px;  
     line-height: 22px;  
     padding: 11px 0;  
    }
      
    {  
     padding-bottom: 22px;  


Naming Convention:


Giving precise and clear class names to your elements is a key. This will seriously avoid confusion & let you understand your CSS better and faster.

css3 features and advantages

CSS3 Selectors: These are some importent CSS selectors.


Pattern Description

E[att^=”val”] Matches any E element whose att attribute value begins with “val”.

E[att$=”val”] Matches any E element whose att attribute value ends with “val”.

E[att*=”val”] Matches any E element whose att attribute value contains the substring “val”.

E:root Matches the document’s root element. In HTML5, the root element is always the HTML element.

E:nth-child(n) Matches any E element that is the n-th child of its parent.

E:nth-last-child(n) Matches any E element that is the n-th child of its parent, counting from the last child.

E:nth-of-type(n) Matches any E element that is the n-th sibling of its type.

E:nth-last-of-type(n) Matches any E element that is the n-th sibling of its type, counting from the last sibling.

E:last-child Matches any E element that is the last child of its parent.

E:first-of-type Matches any E element that is the first sibling of its type.

E:last-of-type Matches any E element that is the last sibling of its type.

E:only-child Matches any E element that is the only child of its parent.

E:only-of-type Matches any E element that is the only sibling of its type.

E:empty Matches any E element that has no children (including text nodes).

E:target Matches an E element that is the target of the referring URL.

E:enabled Matches any user interface element (form control) E that is enabled.

E:disabled Matches any user interface element (form control) E that is disabled.

E:checked Matches any user interface element (form control) E that is checked.

E::selection Matches the portion of an element E that is currently selected or highlighted by the user.

E:not(s) Matches any E element that does not match the simple selector s.

E ~ F Matches any F element that is preceded by an E element.

Short hand:
Always try to define several properties of the same kind as one single property.


Automatic CSS Generator Tool: Find the required CSS3 code without any effort. Its too easy task.


0 comments:

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Code Imagine