How Cascading Style Sheets (CSS) Works

How CSS works By Amit Tyagi [email_address]

What is CSS ,[object Object],[object Object],[object Object],[object Object],[object Object]

CSS – brief history ,[object Object],[object Object],[object Object],[object Object]

Sources of Styles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Sources of Styles(contd.) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Cascade ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS Selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Class based selector ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Tag based selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Grouping ,[object Object],[object Object],[object Object],[object Object]

Descendant selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Child selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Universal selectors ,[object Object],[object Object],[object Object],[object Object]

Adjacent sibling selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Attribute selectors ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS Pseudo-classes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

CSS Values ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Categories of CSS properties ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

The Display Property ,[object Object],HTML <body> <div id=“div1”></div> <div id=“div2”></div> <div id=“div3”></div> </body> CSS #div1 { width:300px;background:yellow;} #div1 { width:300px;background:blue;} #div1 { width:300px;background:orange;}

Inline Elements ,[object Object],<div id="row1" > <span class="norm">This is small text and </span> <span class="big">this is big</span> <span class="italicText"> I am Italic</span> </div> .norm { color : red ; } .big { color : blue ; font-weight : bold ; } .italicText { color : green ; font-style : italic ; } #row1 { padding :10px; border : solid 1px #000; }

Display property ,[object Object],[object Object]

Visibility ,[object Object],[object Object],.big { visibility : hidden ; }

z-index ,[object Object],[object Object],[object Object]

Default page flow ,[object Object]

Floating ,[object Object],[object Object],IMG { float : left ; }

Floating multiple elements ,[object Object],<ul> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact Us</li> </ul> After applying LI { float:left; }

Clearing Floats ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Positioning - static ,[object Object]

Positioning - relative ,[object Object]

Positioning - absolute ,[object Object]

Positioning - fixed ,[object Object]

Inheritance ,[object Object],[object Object]

Refrences ,[object Object],[object Object],[object Object]

How Cascading Style Sheets (CSS) Works

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to How Cascading Style Sheets (CSS) Works

Similar to How Cascading Style Sheets (CSS) Works (20)

Recently uploaded

Recently uploaded (20)

How Cascading Style Sheets (CSS) Works