advertisement

Introduction to Cascading Style Sheets

29 %
71 %
advertisement
Information about Introduction to Cascading Style Sheets

Published on March 15, 2008

Author: tusharvjoshi

Source: slideshare.net

Description

Introduction to Cascading Style Sheets used in HTML documents.
advertisement

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

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

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=&quot;text/css“ HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;> <STYLE TYPE=&quot;text/css&quot;> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE=&quot;color: green&quot;> While the paragraph is green. </BODY> </HTML>

Containment in HTML

1. Using LINK element in the HEAD tag to link to external style sheet.

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=&quot;text/css“ HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;> <STYLE TYPE=&quot;text/css&quot;> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE=&quot;color: green&quot;> While the paragraph is green. </BODY> </HTML>

Containment in HTML

2. Using STYLE element to write style definitions in the HTML file itself.

Basic Concepts Containment in HTML 3. Importing another style sheet using @import notation. <HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE=&quot;text/css“ HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;> <STYLE TYPE=&quot;text/css&quot;> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE=&quot;color: green&quot;> While the paragraph is green. </BODY> </HTML>

Containment in HTML

3. Importing another style sheet using @import notation.

Basic Concepts Containment in HTML 4. Using style attribute in the HTML element. <HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE=&quot;text/css“ HREF=&quot;http://style.com/cool&quot; TITLE=&quot;Cool&quot;> <STYLE TYPE=&quot;text/css&quot;> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE=&quot;color: green&quot;> While the paragraph is green. </BODY> </HTML>

Containment in HTML

4. Using style attribute in the HTML element.

Basic Concepts Grouping Selectors can be grouped in comma separated lists Reduce the size of style sheet H1, H2, H3 { font-family: helvetica }

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; }

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 }

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.

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.

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=&quot;text/css&quot;> H1.pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1> </BODY> </HTML>

Class as selector

Defines “pastoral” as a named style for tag H1

Any elements inside BODY tag can be classed.

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=&quot;text/css&quot;> .pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1> <P CLASS=pastoral>My Paragraph</P> </BODY> </HTML>

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.

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.

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.

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.

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

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 }

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.

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 */

Anchor pseudo-classes

Different visual states of anchor tags are represented by pseudo-classes

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>

Anchor pseudo-classes

Pseudo classes can be used in conjunction with normal classes.

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>

Anchor pseudo-classes

Pseudo classes can be used in contextual selectors

All IMG tags only inside A tag will have solid red border.

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

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 */

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.

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.

‘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

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.

Basic Concepts Block Level Elements <STYLE TYPE=&quot;text/css&quot;> 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>

Block Level Elements

<STYLE TYPE=&quot;text/css&quot;> 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.

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.

#00ff00 presentations

Add a comment

Related pages

Introduction to CSS - W3Schools

What is CSS? CSS stands for Cascading Style Sheets; CSS describes how HTML elements are to be displayed on screen, paper, or in other media; CSS saves a ...
Read more

Introduction to Cascading Style Sheets - CODE Online

Cascading Style Sheets (CSS) are a powerful way to separate content from design in your Web Forms applications. An effective use of CSS is an easy way to ...
Read more

An Introduction to Cascading Style Sheets - nwalsh.com

Style Sheets on the Web. At present, there are basically two style sheet proposals on the Web: Cascading Style Sheets, level 1 (CSS1) from the W3C ...
Read more

Guide to Cascading Style Sheets

The Web Design Group's guide to Cascading Style Sheets. ... A basic introduction to Cascading Style Sheets. ... and cascading order.
Read more

Introduction to Cascading Style Sheets - PageResource.com

An introduction to using css on your web pages. ... Style sheets let you place things exactly where you want them to be on the page, using the distance in ...
Read more

Introduction to Cascading Style Sheets - Start Here. Get ...

Introduction to Cascading Style Sheets Welcome to the CSS workshop! Before you begin this workshop you should have some basic understanding of HTML and ...
Read more

Introduction to Cascading Style Sheets (CSS) - Lynda.com

CSS Web Site Design. ... Introduction to Cascading Style Sheets ... cascading style sheets, ...
Read more

WebD2: Introduction to Cascading Style Sheets

Module 1: Introduction to Cascading Style Sheets Overview. This module will introduce students to stylizing web pages using cascading style sheets.
Read more

Introduction to Cascading Style Sheets - University of Hawaii

Introduction to Cascading Style Sheets ... Introduction. Cascading Style Sheets ... Style sheets make managing the look of multiple web pages MUCH ...
Read more

An Introduction to Cascading Style Sheets (CSS) - SitePoint

This introduction isn’t meant to teach you everything about Cascading Style Sheets, but is rather meant as an overview of what can be done ...
Read more