Introduction to Cascading Style Sheets

Cascading Style Sheets Tushar Joshi

Basic Concepts Redefines a HTML tag. User Agent (often the browser) renders the HTML tag with this modified definition. There are around 50 properties used in CSS H1 { color: blue } Selector Declaration property value Simple CSS Rule

Basic Concepts Containment in HTML 1. Using LINK element in the HEAD tag to link to external style sheet. <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 Containment in HTML 2. Using STYLE element to write style definitions in the HTML file itself. <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 Containment in HTML 3. Importing another style sheet using @import notation. <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 Containment in HTML 4. Using style attribute in the HTML element. <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 Grouping Selectors can be grouped in comma separated lists Reduce the size of style sheet H1, H2, H3 { font-family: helvetica }

Basic Concepts Grouping Declarations can be grouped H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; }

Basic Concepts Grouping Some properties have their own grouping syntax H1 { font: bold 12pt/14pt helvetica }

Basic Concepts Inheritance <H1>The headline <EM>is</EM> important!</H1> If EM tag has not been defined it takes (inherits) all the styles of enclosing H1 tag. If color of H1 is blue and EM has no defination for color it will be blue.

Basic Concepts Inheritance BODY { color: black; background: url(texture.gif) white; } Sets default style for whole document as BODY is the enclosing tag for all. Text color will be black and background will be texture.gif graphics. If graphic file is missing background will be white.

Basic Concepts Class as selector Defines “pastoral” as a named style for tag H1 Any elements inside BODY tag can be classed. <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 Class as selector All elements can be addressed by omitting the tag name selector. All elements with class pastoral will be shown in the color defined in the style. <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 ID as selectors #z97y {letter-spacing: 9am } Name starting with # denoted ID selector. Any element having ID z97y will be applied with this style.

Basic Concepts ID as selectors H1#z97y {letter-spacing: 9am } Only H1 tag with ID z97y will be selected for application of this style.

Basic Concepts Contextual Selectors H1 EM { color: red } Only EM elements inside H1 tags will be selected to apply color red. H1 EM becomes the pattern to be searched.

Basic Concepts Contextual Selectors More Examples DIV P { font: small sans-serif } P element only inside any DIV tag .reddish H1 { color: red } H1 element only inside any tag having class attribute reddish #x78y CODE { background: blue } CODE element only inside the tag having ID x78y DIV.sidenote H1 { font-size: large } H1 element only inside DIV element having class as sidenote

Basic Concepts Contextual Selectors Can be grouped together. H1 B, H2 B, H1 EM, H2 EM { color: red } Equivalent to: H1 B { color: red } H2 B { color: red } H1 EM { color: red } H2 EM { color: red }

Basic Concepts Comments in style sheets EM { color: red } /* red, really red!! */ Textual comments in CSS style sheets are just like comments for C language. Comments are ignored by CSS parser.

Basic Concepts Anchor pseudo-classes Different visual states of anchor tags are represented by pseudo-classes A:link { color: red } /* unvisited link */ A:visited { color: blue } /* visited links */ A:active { color: lime } /* active links */

Basic Concepts Anchor pseudo-classes Pseudo classes can be used in conjunction with normal classes. 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 Anchor pseudo-classes Pseudo classes can be used in contextual selectors All IMG tags only inside A tag will have solid red border. A:link IMG { border: solid red } <A class=alpha><IMG SRC=flower.gif></A>

Basic Concepts The Cascade A style sheet designer can combine several (partial) style sheets to reduce redundancy: @import url(http://www.style.org/pastoral); @import url(http://www.style.org/marine); H1 { color: red } /* override imported sheets */ In CSS1, all '@import' statements must occur at the start of a style sheet

Basic Concepts The Cascade Author Reader Balance Both readers and authors can influence the presentation through style sheets. Authors explicitly apply style sheets, readers can selectively use them or not. Conflict resolution is based on each style rule having a weight. By default, the weights of the reader's rules are less than the weights of rules in the author's documents.

Basic Concepts ‘important’ keyword Weights of the declarations can be increased: H1 { color: black ! important; background: white ! important } P { font-size: 12pt ! important; font-style: italic } In the example above, the first three declarations have increased weight, while the last declaration has normal weight.

Basic Concepts Box-oriented formatting model Each formatted element results in one or more rectangular boxes. Elements that have a 'display' value of 'none' are not formatted and will therefore not result in a box. All boxes have a core content area with optional surrounding padding, border and margin areas. Formatting Model

Basic Concepts Block Level Elements <STYLE TYPE="text/css"> UL { background: red; margin: A B C D; padding: E F G H; } LI { color: white; background: blue; /* so text is white on blue */ margin: a b c d; padding: e f g h; } </STYLE> .. <UL> <LI>1st element of list <LI>2nd element of list </UL>

Reference Material http://www.w3.org/TR/REC-CSS1 Save the material available for offline reference Use this material as reference, lexicon for properties and their default values CSS has much more to learn and this session should be taken as a starting point.

Introduction to Cascading Style Sheets

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Introduction to Cascading Style Sheets (20)

More from Tushar Joshi (7)

Recently uploaded (20)

Introduction to Cascading Style Sheets