Advance Css

By: Vijayta Panchal Vinayak Solutions

Introduction ,[object Object],Vinayak Solutions

Box Model ,[object Object],Vinayak Solutions

The CSS box model is made up of four parts: ,[object Object],[object Object],[object Object],[object Object],Vinayak Solutions

[object Object],[object Object],[object Object],[object Object],Vinayak Solutions Continue…

Box Model Issues ,[object Object],[object Object],[object Object],Vinayak Solutions

Box Model Issues Vinayak Solutions

Styling List (CSS navigation) ,[object Object],[object Object],[object Object],[object Object],[object Object],Vinayak Solutions ,[object Object],[object Object],[object Object],[object Object]

CSS button ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Vinayak Solutions

Rounded corner without images ,[object Object],Vinayak Solutions

Vinayak Solutions <html> <head> <style> #container p{background:red; padding:none; margin:0; width:100px} .rtop, .rbottom{display:block} .rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; } .r1{margin: 0 5px; background:#999;} .r2{margin: 0 3px; background:#999;} .r3{margin: 0 2px; background:#999;} .r4{margin: 0 1px; height: 2px; background:#999;} </style> </head> <body> <div id="container"> Your Test Goes Here. </div> </body> </html>

Working with divs ,[object Object],[object Object],Vinayak Solutions

Float ,[object Object],[object Object],Vinayak Solutions

Clear ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Vinayak Solutions

Tableless designs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Vinayak Solutions

CSS Hacks ,[object Object],[object Object],Vinayak Solutions

Some Important hacks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Vinayak Solutions Continue…

!important ,[object Object],[object Object],[object Object],[object Object],Vinayak Solutions

CSS box model hack ,[object Object],Vinayak Solutions #box { width: 150px; } #box div { border: 5px; padding: 20px; } #box { width: 100px; border: 5px; padding: 20px; } Code with Hack Regular Code

@import "non-ie.css" all; ,[object Object],[object Object],[object Object],Vinayak Solutions

Grouping styles ,[object Object],[object Object],Vinayak Solutions h2 { color: red; } .thisOtherClass { color: red; } .yetAnotherClass { color: red; } h2, .thisOtherClass, .yetAnotherClass { color: red; } Normal CSS Grouped CSS h1, h2, h3, h4, h5, h6 { color: blue; }

Nested Styles ,[object Object],Vinayak Solutions #top { background-color: #ccc; padding: 1em } # top h1 { color: #ff0; } # top p { color: red; font-weight: bold; }

Conditional CSS ,[object Object],[object Object],Vinayak Solutions

Another Example ,[object Object],[object Object],[object Object],Vinayak Solutions

Conditional CSS ,[object Object],Vinayak Solutions

Vinayak Solutions Continued…

Validation ,[object Object],[object Object],[object Object],Vinayak Solutions

Overview of XHTML ,[object Object],Vinayak Solutions

How do I convert to XHTML?” ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Vinayak Solutions

Benefits to XHTML ,[object Object],[object Object],[object Object],[object Object],[object Object],Vinayak Solutions

Advance Css

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Advance Css

Similar to Advance Css (20)

Recently uploaded

Recently uploaded (20)

Advance Css