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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (7)

Ähnlich wie How Cascading Style Sheets (CSS) Works

Ähnlich wie How Cascading Style Sheets (CSS) Works (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

How Cascading Style Sheets (CSS) Works