A basic CSS markup contains three essential parts: the selector, the property of that selector and the value for the property. Notice that the property and the value are enclosed in curly braces, and that the property and value are separated by a colon.

By setting margin properties, we can define the space around an element. The margin properties also give us the opportunity to have certain elements overlap by using negative values. We can set margins independently, or we can specify margins in one single declaration. Another option to have the browser set the margins automatically, have the margins of fixed length, or to have them be a percentage of the total height or width (or both) of the document.

Zero means 0. In this example, we can see that the top and bottom margins are set to different values, but the left and right margins are set to 0. It doesn’t matter if the value is 0px, 0pt or 0, 0 is still 0.

CASCADING STYLE SHEET

Sahil Bhosle(5)
Sachin Sinha(53)
Varun Singh(62)
Vishal Thakkar(55)
Bharat Joshi(20)
Sumit Kumar(28)



Presentation by Group 4

INDEX

BRIEF IDEA OF CSS
VARIOUS LEVELS OF CSS
BOX PROPERTIES:
BORDER PROPERTIES
MARGIN PROPERTIES
SELECTORS
TYPES OF SELECTORS

7-Oct-08

CSS

2

7-Oct-08

CSS

What is CSS?


CSS stands for Cascading Style Sheets.
CSS was developed by W3C.
Styles define how to display HTML elements.
Styles are normally stored in Style Sheets.
You can use CSS to control typography, colors, backgrounds, and other design characteristics


3

Understanding the Cascade

Cascading
Determining rule weight by specificity
Rules with more specific selectors take precedence over rules with less specific selectors
Determining rule weight by order
Based on order of rule within style sheet
Those listed later take precedence over those listed earlier in the style sheet



7-Oct-08

CSS

4

Understanding the Cascade

Inheritance
Based on hierarchical structure of documents
CSS rules inherit from parent elements to child elements:
thus <LI> elements will inherit style rules from <UL> elements unless a style rule is specifically set for the <LI> element


7-Oct-08

CSS

5

Cascading Style Sheets

A style sheet is:
Any rule or sequence of rules that affects the appearance of a document.
Thus
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, and spacing) to Web documents


7-Oct-08

CSS

6

7-Oct-08

CSS

Basic CSS Syntax

Three parts:
selector
property
value

selector {property: value}




7

TYPES OF STYLE SHEETS

BROWSER DEFAULT
EXTERNAL STYLE SHEET
INTERNAL STYLE SHEET (inside the head tag)
INLINE STYLE(inside HTML element)

7-Oct-08

CSS

8

BASIC CSS SYNTAX

selector {property: value}

selector: the basic HTML element tag you wish to define

body


7-Oct-08

CSS

9

BASIC CSS SYNTAX

selector {property: value}

property: the attribute of the selector that you wish to change
The property is a quality or characteristic, such as color, font size, or margin, followed by a colon (:)

body {color

7-Oct-08

CSS

10

BASIC CSS SYNTAX

The value is the precise specification of the property, such as blue for color, 12 pt (point) for font size, or 30 px (pixels) for margin, followed by a semicolon (;)

body {color : black}
If the value has multiple words, put the value in quotes
p {font-family: “sans serif” }



7-Oct-08

CSS

11

COMMON CSS PROPERTIES

7-Oct-08

CSS

12

VARIOUS LEVELS OF CSS

CSS 1
CSS 2
CSS 3

7-Oct-08

CSS

13

CSS 1

The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for:
Font properties such as typeface and emphasis
Color of text, backgrounds, and other elements
Text attributes such as spacing between words, letters, and lines of text
Alignment of text, images, tables and other elements
Margin, border, padding, and positioning for most elements
Unique identification and generic classification of groups of attributes


7-Oct-08

CSS

14

CSS 2

CSS level 2, also known as CSS-P (positioning), uses style sheets to control a page’s layout, much like the traditional nested table approach.
CSS level 2 was developed by the W3C and published as a Recommendation in May 1998.
A superset of CSS1, CSS2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows.

7-Oct-08

CSS

15

WHY CSS 2 BETTER THAN CSS 1?

Offers many new options for accessibility
Supports most of the Browsers
Positioning is more flexible
More options to the designer
Special support for cursors
Dynamic outlining

7-Oct-08

CSS

16

CSS 3

CSS level 3 is currently under development.
The W3C maintains a CSS3 progress report.
CSS3 is modularized and will consist of several separate Recommendations.
The W3C CSS3 Roadmap provides a summary and introduction.

7-Oct-08

CSS

17

ADVANTAGES OF CSS

More Precise Formatting
Separation of HTML Content from Appearance
Saves Time
Easier Site Maintenance
Web Accessibility



7-Oct-08

CSS

18

DISADVANTAGES TO CSS

Inconsistent Browser Support
Larger Initial Time Commitment
Not Perfect
Bugs


7-Oct-08

CSS

19

BROWSERS SUPPORTING CSS

INTERNET EXPLORER
OPERA
NETSCAPE NAVIGATOR
SAFARI(MAC PCs)
NOTE : There are different versions of the above browser which support CSS accordingly


7-Oct-08

CSS

20

BOX PROPERTIES
Border Properties
Margin Properties

7-Oct-08

CSS

21

7-Oct-08

CSS

Box Properties


An important part of mastering CSS layout is understanding the basics of the box model.


The aspects of boxes that can be controlled with CSS include the following:
Border properties   Determine the visual characteristics of a border surrounding an element's edges
Margin properties   Determine the distance between edges of an element's box and the edges of adjacent elements.



22

7-Oct-08

CSS

Example

23

6/10/2008

CSS

Border properties

The border of an element is simply a line (sometimes more than one) that surrounds the content and padding of an element

Thus, the background of the element will stop at the outer edge of the border, since the background does not extend into the margins, and the border is just inside the margin

Many different properties can be applied

You can specify the width, style, color, thickness and on which sides the border appears

7-Oct-08

CSS

24

Border properties contd….

Elements can be completely or partially surrounded by borders placed between their margins and their padding

The border properties control the edges of block elements by setting whether they should have a border, what the borders look like, their width, their color, and so on.

Borders are supposed to work with both block-level and inline elements.

7-Oct-08

CSS

25

Border properties contd….


Every border has three aspects: its style or appearance; its width or thickness and its color.

The default value for the style property is none, which means no border is drawn, regardless of any other setting
The default value for the width of a border is medium (two or three pixels.)
The default border color is the foreground color of the element itself..
If no color has been declared for the border, then it will be the same color as the text of the element

7-Oct-08

CSS

26

Border properties


Border-style
Border-width
Border-color


Border-bottom
Border-bottom-color
Border-bottom-style
Border-bottom-width

Border-top
Border-top-color
Border-top-style
Border-top-width


7-Oct-08

CSS





Border-left
Border-left-color
Border-left-style
Border-left-width

Border-right
Border-right-color
Border-right-style
Border-right-width
border



27

Border-style

Most important part of a border because without a style there would be no border at all
To set the appearance of the borders
Sets border for each of the sides of the element
Border-style property acts as a shorthand notation and can take up to four values starting from top, left, bottom, right

Example:
p{ border-style: solid double none dotted; } P { border-top-style: solid ; border-right-style: dotted ; border-bottom-style: double; border-left-style: none; }

7-Oct-08

CSS

28

Border-style: values

7-Oct-08

CSS

border-style

Values
none | dotted | dashed | solid | double | groove | ridge | inset | outset

Initial value
none

Inherited
no

Applies to
all elements




An etched border

An extruded border

Making on object look like it is set into the page

A beveled border making an object look raised

29

Example Border-Style Values

Border widths can be expressed using units of length or with the keywords thin, medium, or think.

The border color can be defined using color names or color values.

This figure shows that each of the nine different styles that can be applied to a border.

7-Oct-08

CSS

31

Applying an outset border to a hyperlinked image


Example
A:link IMG {border-style: outset;}




7-Oct-08

CSS

32

Multiple styles


It's also possible to define more than one style for a given border.
For example


7-Oct-08

CSS

33

Multiple border styles on a single element

Example

7-Oct-08

CSS

34

Border-width

After assigning a style, the next step in customizing a border is to give it some width
This is done with the property border-width
Sets all four border widths at once and takes from one to four values.
Cousin properties: border-top-width , border-right-width ,border-bottom-width , and border-left-width.

Example:
H1 {border-style: border-width: thin thick medium none }
p {border-style: solid; border-width: 10px;}
p.double {border-style: double; border-width: thick;}
p.thickandthin {border-style: solid; border-width: thick thin;}
.fun { border-style: double none; border-width: thick;}





7-Oct-08

CSS

35

Border-width values

7-Oct-08

CSS

border-width

Values
[ thin | medium | thick | <length> ]{1,4}


Initial value
not defined for shorthand properties


Inherited
no

Applies to
all elements

36

Border-width values contd….

7-Oct-08

CSS

Each of these is used to set the width on a specific border side, of course, just as with the margin properties.
border-top-width, border-right-width, border-bottom-width,

border-left-width

Values
thin | medium | thick | <length>

Initial value
medium

Inherited
no

Applies to
all elements

37

Example for border width

7-Oct-08

CSS

38

Applying border width

P {margin: 5px; background-color: silver; border-style: solid; border-width: 20px;}



7-Oct-08

CSS

39

Applying border width contd….

H1 {border-style: none none dotted; border-bottom-width: thin;}
P {border-style: solid; border-width: 15px 2px 7px 4px;}




7-Oct-08

CSS

40

Border-color

Sets the color of the four borders. This property can take one to four colors
This is the single property border-color, which can accept up to four color values at one time
Border colors are specified using standard CSS color values

Example:
H1 {border-style:solid border-color: red green blue yellow;}
p {border-style: solid; border-color: green;}
p.all {border-style: solid; border-top-color: green;
border-right-color: #FF0000;
border-bottom-color: yellow;
border-left-color: blue;}


6/10/2008

CSS

7-Oct-08

CSS

41

Border-color values

border-color

Values
<color>{1,4}

Initial value
the value of <color> for the element


Applies to
all elements

7-Oct-08

CSS

42

Example for border-color

H1 {border-style: solid; border-width: thin thick; border-color: black gray;}

P {border-style: solid; border-color: gray;}

7-Oct-08

CSS

43

Example of default color & declared color

As previously discussed, if no colors are defined, then the default color is the foreground color of the element. Thus, the following declaration will be displayed as shown in
P.shade1 {border-style: solid; border-width: thick; color: gray;} P.shade2 {border-style: solid; border-width: thick; color: gray; border-color: black;}


7-Oct-08

CSS

44

The following brief example shows all the border properties used

Example

7-Oct-08

CSS

45

7-Oct-08

CSS

46

MARGIN PROPERTIES

7-Oct-08

CSS

47

7-Oct-08

CSS

Margin properties

Define the space around elements

Margins can be set independently or collectively

Margins are transparent and have no color or decoration of their own

48

Can be set to auto, a fixed length or a % of the total height of the document

You can use negative values to overlap content

The default value for length is zero.


Margin properties

7-Oct-08

CSS

49

Margin Properties

7-Oct-08

CSS

50

Margin properties

7-Oct-08

CSS

51

Can be set in one declaration
Think clock face
top, right, bottom, left
i.e. h1 {margin: 10px 20px 30px 40px}

Margin settings can be paired (top and bottom,left and right)
i.e. h1 {margin: 40px 5%}

In this example, the top and bottom margins would be 40 pixels,While the left and right margins would be 5% of the total height of the document.



Margin properties

7-Oct-08

CSS

52

7-Oct-08

CSS

Margin properties

0 size margins do not need to be specified. 0px, 0pt and 0 are all equivalent.

h1 {margin: 40px 0 5% 0}

In this example, the top margin would be 40 pixels, the left and
right margins would be 0, and the bottom margin would
be 5% of the total height of the document.

53

7-Oct-08

CSS

<html>
<head><title>Working with style sheets using margin Attributes</title>
<STYLE Type="text/css">
BODY {margin-top:15%;margin-left:15%}

P{font-size:15pt;margin-right:15%;margin-left:15%}

h1{font-size:25pt;margin-left:5%} OUTPUT
</STYLE>
</head>
<BODY>
<h1>Ernest Hemmingway</h1>
<p>Ernest Miller Hemmingway was born in 1899 in a small sub-urb in Chicago.
He was one of the greatest writers of his era.
Some of his most well-known novels are A Farewell to Arms,
For Whom the Bell Tolls and last but not the least "The Old Man and The Sea".
</p>
</BODY>
</html>


Margin properties

54

Summary for border and mrgin

Summary chart for border and margins.




7-Oct-08

CSS

55

7-Oct-08

CSS

SELECTOR

56

What is a selector ???

CSS selector is equivalent of HTML element(s).

It is a string identifying to which element(s) the corresponding declaration(s) will apply

The general syntax for a selector is:
Selector {Property:Value;}

**Note: If we consider an HTML tag for e.g. <p>…</p>, the selector is only (p) i.e. minus the angle brackets ‘<‘ & ‘>’ from the HTML tag. Here we form a simple selector.

7-Oct-08

CSS

57

What do Selectors do?

Act as a link between the HTML and Style sheet.
Avoids repetition.
Allows Grouping.
Redefines general look of an HTML tag.


7-Oct-08

CSS

58

Example of Grouping:

We condense three rules with identical declarations into one.
Thus,

H1 { font-family: sans-serif; color: red;}
H2 { font-family: sans-serif; color: red;}
H3 { font-family: sans-serif; color: red;}

is equivalent to:

H1, H2, H3 { font-family: sans-serif; color: red;}

7-Oct-08

CSS

59

7-Oct-08

CSS

10 TYPES OF SELECTORS

Universal Selector
Type Selectors
Class Selectors
ID Selectors
Pseudo-Element Selectors
Attribute Selectors
Contextual Selectors
Parent-Child Selectors
Adjacent Selectors
Pseudo-Class Selectors


60

CSS Length Units

7-Oct-08

CSS

61

7-Oct-08

CSS

1.Universal Selector

The universal selector (i.e. the asterisk mark ‘*’) matches every element type.
It is used to represent any element used in HTML coding.
The following rule means that all the text will have a size of 40px
*{font-size: 40px}

62

Universal Selector (contd..)

For e.g.
To apply text color blue for the whole document, instead of using:

BODY, H1, P, TABLE, TR, TD, TH, PRE, UL, LI {color: purple;}

we can use universal selector, and write the code as
* {color: purple;}

7-Oct-08

CSS

63

<HTML>
<HEAD>
<STYLE type="text/css">

*{color: blue;}
H1, H2, H3 { font-family: sans-serif; color: red;}

</STYLE>
</HEAD>
<div><b>Following is the example of grouping:</b></div>
<BODY>
<H1>This is Heading 1</H1>
<H2>This is Heading 2</H2>
<H3>This is Heading 3</H3>
<p>Note: Here, the universal selector '*' is applied to <br>paragraph tag and bold tag, as no other <br>selector is specified in style tag for paragraph<br> and bold tag.</p>
</BODY>
</HTML>

7-Oct-08

CSS

64

6/10/2008

CSS

2.Type Selector

A type selector is the name of an element type
Type selectors select any of the elements on a page that match the selector.



So in the above example the selector p and div will select every elements marked up as <p>…</p> and <div>…</div> respectively in the HTML code.
So the simple selector is also known as Type selector.

7-Oct-08

CSS

65

Example of Type Selector:

<HTML>
<HEAD>
<STYLE type="text/css">
P {color: green; font-size: 1.5em; font-style: italic}
DIV {color: red; font-size: 15pt}
</STYLE>
</HEAD>
<div>This is the example of Type selector</div>
<p>Using a type selector, you can change <br>the appearance of any or every element <br>on your page.</p>
</HTML>

7-Oct-08

CSS

66

7-Oct-08

CSS

3.Class Selectors

Applies styles to specific part of the document.

Syntax:
<STYLE>
.ClassName(Property: Value)
</STYLE>
<BODY>
<P Class=“ClassName”>…..</P>
</BODY>

67

Class Selectors (cont’d)

Style rules for the class
P.introductoryparagraph {color: blue}
applies to P elements with the class name introductorypargraph
.introductoryparagraph {color: blue}
applies to any element with the class name introductoryparagraph



7-Oct-08

CSS

68

7-Oct-08

CSS

Class Selectors (cont’d)

An element may have more than one class, e.g., <P class="green quote new”>
This element matches the following selectors
P.quote.green
P.new
P.quote.new.green
It does not match P.new.old
Few browsers support it


69

7-Oct-08

CSS

4.ID Selectors

IDs are identical to classes, except that there can only be one element with a given ID in a document
In the HTML (or XML) document:
<BODY id="introduction">
In the style sheet:
BODY#introduction {font-size: 3px}
#introduction {font-size: 3px}


70

5.Attribute selector


Attribute selector is a selector defined by

1) the attribute set to element(s),
2) the attribute and value(s), 
3) the attribute and value parts:

P[class=example] { color: blue; }


7-Oct-08

CSS

71

7-Oct-08

CSS

6.Pseudo-Element Selector

A pseudo-element selector matches part of an element (whereas a pseudo-class selector matches a complete element)
:first-line and :first-letter match the first line and the first letter of an element, respectively
Examples:
P:first-line {text-transform: capitalize}
P:first-letter {font-size: 48px; color: red}

72

7.Contextual selector


Contextual selector is a selector that addresses specific occurrence of an element. It is a string of individual selectors separated by white space, where only the last element in the pattern is addressed providing it matches the specified context.

7-Oct-08

CSS

73

Contextual selector (cont’d)


TD P CODE {color: red}

The element CODE will be displayed in red but only if it occurs in the context of the element P which must occur in the context of the element TD.



7-Oct-08

CSS

74

8.Parent-child selector


Parent-child selector is a selector representing the direct descendent of a parent element. Parent-child selectors are created by listing two or more tilde (~) separated selectors.

7-Oct-08

CSS

75

Parent-child selector(Cont’d)

BODY ~ P {background: red; color: white}
The P element will be declared the specified style only if it directly descends from the BODY element:
<BODY><P>Red and white paragraph </P></BODY>


7-Oct-08

CSS

76

Parent-child selector(Cont’d)

BODY ~ P ~ EM {background: red; color: white} The EM element will be declared the specified style only if it directly descends from the P element which in its turn directly descends from the BODY element: <BODY><P><EM>Red and white EM</EM></P></BODY>



7-Oct-08

CSS

77

9. Adjacent Selector

This selector applies to the element that appears in the code right after another.
Eg.
P span{ color: red}
Html:<p>This is a Para</p>
<span>This one will be red</span>
<span>This wont</span>

7-Oct-08

CSS

78

10.Pseudo Class Selector

CSS pseudo-classes are used to add special effects to some selectors.
Syntax
selector:pseudo-class {property: value}
#CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property: value}



7-Oct-08

CSS

79

Pseudo Class Selector(cont’d)

Pseudo-classes can be combined with CSS classes:
Example:
a.red:visited {color: #FF0000}
<a class="red“ href="css_syntax.asp">CSS Syntax</a>

If the link in the example above has been visited, it will be displayed in red.


7-Oct-08

CSS

80

7-Oct-08

CSS

CSS pseudo-class tags

81

7-Oct-08

CSS

:first-child pseudo-class

Definition:
The :first-child pseudo-class adds a special style to an element that is the first child of some other element.
DIV > P:first-child { text-indent: 0 }
This selector would match the P inside the DIV of the following fragment:
<P> The last P before the note.
<DIV class="note">
<P> The first P inside the note. </DIV>






82

7-Oct-08

CSS

Anchor Pseudo-classes


A link that is active, visited, unvisited, or when you move mouse over a link can all be displayed in different ways in a CSS-supporting browser:


83

Anchor Pseudo-classes(cont’d)

a:link {color: #FF0000}
/*unvisited link */
a:visited {color: #00FF00}
/* visited link */
a:hover {color: #FF00FF}
/*mouse over link*/
a:active {color: #0000FF}
/* selected link */





7-Oct-08

CSS

84

Note:
1) a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
2) a:active MUST come after a:hover in the CSS definition in order to be effective
3) Pseudo-class names are not case-sensitive.


7-Oct-08

CSS

Anchor Pseudo-classes(cont’d)

85