Introduction to Cascading Style Sheets

Cascading Style Sheets Tushar Joshi

Basic Concepts ,[object Object],[object Object],[object Object],H1 { color: blue } Selector Declaration property value Simple CSS Rule

Basic Concepts ,[object Object],[object Object],<HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE="text/css“ HREF="http://style.com/cool" TITLE="Cool"> <STYLE TYPE="text/css"> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE="color: green"> While the paragraph is green. </BODY> </HTML>

Basic Concepts ,[object Object],[object Object],[object Object],[object Object]

Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Basic Concepts ,[object Object],[object Object],[object Object]

Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Basic Concepts ,[object Object],[object Object],[object Object],<HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE="text/css"> H1.pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1> </BODY> </HTML>

Basic Concepts ,[object Object],[object Object],[object Object],<HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE="text/css"> .pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1> <P CLASS=pastoral>My Paragraph</P> </BODY> </HTML>

Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Basic Concepts ,[object Object],[object Object],A:link { color: red } /* unvisited link */ A:visited { color: blue } /* visited links */ A:active { color: lime } /* active links */

Basic Concepts ,[object Object],[object Object],A.alpha:link { color: red } /* unvisited link */ A.beta:visited { color: blue } /* visited links */ A.gamma:active { color: lime } /* active links */ <a class=alpha>Click Me</a>

Basic Concepts ,[object Object],[object Object],[object Object],A:link IMG { border: solid red } <A class=alpha><IMG SRC=flower.gif></A>

Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object],In CSS1, all '@import' statements must occur at the start of a style sheet

Basic Concepts ,[object Object],[object Object],[object Object],[object Object],[object Object]

Basic Concepts ,[object Object],[object Object],[object Object],[object Object],Formatting Model

Basic Concepts ,[object Object],[object Object]

Reference Material ,[object Object],[object Object],[object Object],[object Object]

Introduction to Cascading Style Sheets

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Introduction to Cascading Style Sheets

Ähnlich wie Introduction to Cascading Style Sheets (20)

Mehr von Tushar Joshi

Mehr von Tushar Joshi (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction to Cascading Style Sheets