Chapter Three: Cascaded Style Sheets (CSS)

Chapter Three
Cascaded Style Sheets(CSS)
1
CSS
CSS stands for “Cascading Style Sheets”
CSS stands for “Cascading Style Sheets”
CSS is a method of presenting data in a web page.
CSS offers web developers methods to control the presentation
of data with many more options offered by HTML alone.
Used to specify the presentation of elements separately from
the structure of the document.
One of its major strengths is that a web developer can create a
style sheet (filename.css) save it with the other web pages
which are then linked to this style sheet.
A web developer can update or change one style sheet and
thereby alter the presentation of all the web pages on a web
site -- it is particularly useful in constructing large or corporate
web sites.
2
CSS
• Cascading Style Sheets (CSS) form the
presentation layer of the user interface.
 Structure (XHTML)
 Behavior (Client-Side Scripting)
 Presentation (CSS)
• Tells the browser agent how the element is to be
presented to the user.
• CSS has some limitations, the first is that not all
browsers support all the features so it is
important to check your web pages on several
browsers or at least the one used by your clients.
3
CSS Inheritance
• Allows elements to “inherit” styles from
parent elements.
• Helpful in reducing the amount of CSS to set
styles for child elements.
• Unless a more specific style is set on a child
element, the element looks to the parent
element for its styles.
Why use style sheets?
• Separate structure from appearance
• This separation of structure from presentation
simplifies maintaining and modifying a Webpage
document’s layout.
• Create consistent appearance Structure
Style-
formatting
• Apply additional effects

• Reduce web page file size (X)HTML CSS
• Easy multiple document managment

• Save time by using selector classes
5
Compare classic HTML with CSS
<body>
<table>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2"

color="red"><b>this is line 1</b></font></td></tr>


</table>
</body>
6
Here in CSS Format
<head>
<style type=”text/css”>
.subtext { font-family: arial;
font-size: 10px;
color: red;
}
</style>
</head>
<body>
<table>
<tr><td class="subtext">this is line 1</td></tr>
</table>
</body>
7
Basic Syntax
• Made up of three parts:
selector {property: value;}

Basic Syntax
A style rule is made of three parts:

• Selector: A selector is an HTML tag at which
style will be applied. This could be any tag like
<h1> or <table> etc.
• Property: A property is a type of attribute of
HTML tag. Put simply, all the HTML attributes
are converted into CSS properties. They could
be color or border etc.
• Value: Values are assigned to properties. For
example color property can have value either
red or #F1F1F1 etc.
9
Syntax
• If the value is multiple words, put quotes
around the value
p {font-family: "sans serif"}
• To make the style definitions more readable,
you can describe one property on each line
p
{
text-align: center;
color: black;
font-family: arial
}
CSS Style Rule Syntax
selector - which part of the document

does this rule apply to
body {
font-family: arial;
font-size: 100%;
}
property - which aspect of CSS value - What are we setting the

are we changing property to.
11
• You can define selectors in various simple ways

based on your comfort.
The Type Selectors (Tag Selectors):

 to give a color to all level 1 headings :
h1 {
color: #36CFFF;
}
12
The Universal Selectors:

• Rather than selecting elements of a specific
type, the universal selector quite simply
matches the name of any element type :
*{
color: #000000;
}
 This rule renders the content of every element
in our document in black.
13
The Class Selectors:

• You can define style rules based on the class
attribute of the elements. All the elements
having that class will be formatted according
to the defined rule.
.black { color: #000000; }
• This rule renders the content in black for every
element with class attribute set to black in our
document. You can make it a bit more
particular. For example:
14
The Class Selectors:

h1.black { color: #000000; }
• This rule renders the content in black for only
<h1> elements with class attribute set to
black.
• You can apply more than one class selectors to
given element. Consider the following
example :
<p class="center bold"> This para will be
styled by the classes center and bold. </p>
15
The ID Selectors:
• You can define style rules based on the id
attribute of the elements.
• All the elements having that id will be formatted
according to the defined rule.
#black { color: #000000; }
• This rule renders the content in black for every
element with id attribute set to black in our
document.
16
The Child Selectors:

body > p { color: #000000; }
• This rule will render all the paragraphs in black if
they are direct child of <body> element.
• Other paragraphs put inside other elements like
<div> or <td> etc. would not have any effect of
this rule.
17
The Attribute Selectors:

• You can also apply styles to HTML elements
with particular attributes.
• The style rule below will match all input
elements that has a type attribute with a value
of text:
input[type="text"]{ color: #000000; }
• The advantage to this method is that the <input
type="submit" /> element is unaffected, and
the color applied only to the desired text fields.
18
Multiple Style Rules:

• You may need to define multiple style rules for a single element.
You can define these rules to combine multiple properties and
corresponding values into a single block as defined in the
following example:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
• Here all the property and value pairs are separated by a semi
colon (;). You can keep them in a single line or multiple lines. For
better readability we keep them into separate lines. 19
Grouping Selectors:
• You can apply a style to many selectors if you like. Just
separate the selectors with a comma as given in the
following example:
h1, h2, h3 { color: #36C;
margin-bottom: 1em;
}
• This define style rule will be applicable to h1, h2 and
h3 element as well. 20
Grouping Selectors:
• You can combine various class selectors together
as shown below:
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
21
CSS Pseudo-classes: are used to add special effects to some selectors.
• The syntax of pseudo-classes:
selector:pseudo-class {property:value;}
• CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property:value;}
• Anchor Pseudo-classes
• Links can be displayed in different ways in a CSS-supporting
browser:
Example
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 */
22
id vs class
• There are two attributes with special meaning
to CSS
Id:- Marks a unique block within the document
for styling (use only once)
Class:- Marks a non-unique tag within the
document for styling (multi-use)
23
id vs class
• The difference between an ID and a class is that
an ID can be used to identify one element,
whereas a class can be used to identify more
than one.
• You can also apply a selector to a specific HTML
element by simply stating the HTML selector
first, so p.jam { whatever } will only be applied to
paragraph elements that have the class 'jam'.
24
This class function can then be used to apply
this style to several different HTML tags in the
body of your web page.
e.g. <p class=”redBold”>this text will be red and bold</p>

<h2 class=”redBold”>This text will also be red and
bold </p>
25
• When referring to a Class selector you simply
add the class to an HTML tag like in the above
example (class="classname") do not include the
period before the name.
• id selectors are used to define unique parts of a
web page e.g. footer, header, table or other
unique element.
• Each Id element is unique and can only be used
once.
26
Id selectors are preceded with the # hash symbol
and are unique – in other words you can only
have one specific id selector on a web page.
They are used to define specific “boxes” on the
page or layers.
27
CSS Inclusion - Associating Styles
• There are Three types of styles with your HTML

document.
a) Embedded/Internal CSS
b) Inline CSS
c) External CSS
• Most commonly used methods are inline CSS
and External CSS.
28
Embedded CSS - The <style> Element:

• You can put your CSS rules into an HTML document
using the <style> element.
• This tag is placed inside <head>...</head> tags.
• Rules defined using this syntax will be applied to all
the elements available in the document.
• Here is the generic syntax:
<head>
<style type="text/css" media=“all">
Style Rules…..
</style>
</head> 29
<style> tag attributes

Attribute Value Description
Specifies the style sheet language as a
type text/css content-type (MIME type). This is
required attribute.
screen
tty
tv
projection Specifies the device the document will be
media handheld displayed on. Default value is all. This is
print optional attribute.
braille
aural
all
30
Example:
• Following is the example of embed CSS based on
above syntax:
<head>
<style type="text/css">
h1{
color: #36C;
}
</style>
</head>
31
Inline CSS - The style Attribute:

• You can use style attribute of any HTML
element to define style rules.
• These rules will be applied to that element
only. Here is the generic syntax:
<tag style="...style rules....">
32
Attributes:
The value of style attribute is a combination

style style rules of style declarations separated by semicolon
(;).
33
Example:
• Following is the example of inline CSS based on
above syntax:
<h1 style ="color:#36C;"> This is inline CSS </h1>
34
External CSS - The <link> Element:

• The <link> element can be used to include an
external style sheet file in your HTML document.
• An external style sheet is a separate text file
with .css extension.
• You define all the Style rules within this text file
and then you can include this file in any HTML
document using <link> element.
35
External CSS - The <link> Element:

• Here is the generic syntax of including external
CSS file:
<head>
<link type="text/css" href="..." media="..." />
</head>
36
<link> tag attributes:

Specifies the style sheet language as a content-type
type text/css
(MIME type). This attribute is required.
Specifies the style sheet file having Style rules. This
href URL
attribute is a required.
screen
tty
tv
projection
Specifies the device the document will be displayed
media handheld
on. Default value is all. This is optional attribute.
print
braille
aural
all
37
Example:
• Consider a simple style sheet file with a name
mystyle.css having the following rules:
h1, h2, h3 {
color: #36C;
margin-bottom: 1em;
}
38
Example:
• Now you can include this file mystyle.css in any
HTML document as follows:
<head>
<link type="text/css" href="mystyle.css" />
</head>
39
Main.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Inline Styles</title>
</head>
Inline CSS <body>
<p style = "font-size: 20pt;">
This text has font-size style applied to it
</p>
</body>
</html>
Main.html
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
p { font-size: 20pt;} Embedded CSS
</style>
</head>
<body>
<p>This text has font-size style applied to it </p>
</body>
</html> CS100: Internet and Web Technologies 40
Main.html
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" type = "text/css"
href = “Styles.css">
</head>
<body>
<p>This text has font-size style applied to it </p> External
</body>
</html>
CSS
Styles.css
p { font-size: 20pt;}
CS100: Internet and Web Technologies 41

CSS Rules Overriding:

• We have discussed four ways to include style sheet
rules in an HTML document.
• Here is the rule to override any Style Sheet Rule.
 Any inline style sheet takes highest priority. So it will
override any rule defined in <style>...</style> tags or
rules defined in any external style sheet file.
 Any rule defined in <style>...</style> tags will
override rules defined in any external style sheet file.
 Any rule defined in external style sheet file takes
lowest priority and rules defined in this file will be
applied only when above two rules are not applicable. 42
CSS Comments:
• You simple put your comments inside
/*.....this is a comment in style sheet.....*/.
• You can use /* ....*/ to comment multi-line
blocks in similar way you do in C and C++
programming languages.
43
Common CSS properties: Background
CSS Background
• CSS background properties are used to style the
background of any HTML element.
• CSS properties used for background effects:
a) background-color
b) background-image
c) background-repeat
d) background-attachment
e) background-position
44
background-color
• The background-color property specifies the
background color of an element.
• The background color of a page is defined in the
body selector:
Example:
body {
background-color:#b0c4de;
}
45
background-image
• To add a background image to an element .
• By default, the image is repeated so it covers the
entire element.
• The background image for a page can be set like
this:
Example
body {
background-image: url(‘image.jpg');
}
46
background-repeat
• Determines whether the background image repeats (tiles)
or not.
• Possible Values:
 repeat (background repeats both horizontally and vertically)
 repeat-x (background repeats horizontally only)
 repeat-y (background repeats vertically only)
 no-repeat (background is not repeated)
Example
body
{
background-image: url(“image.jpg”);
background-repeat: repeat-x;
} 47
Background-position
• Example : set the background image position 100
pixels away from the left side.
body
{
background- image: url(/images/pattern1.gif);
background-position:100px;
}
48
• Example 2: set the background image position
100 pixels away from the left side and 200 pixels
down from the top.
table
{
background-image: url(/images/pattern1.gif);
background-position:100px 200px;
}
49
Common CSS properties
Background-attachment
• determines whether a background image is
fixed or scrolls with the rest of the page.
• Possible Values:
fixed
scroll
P
{
background-image:url(/images/pattern1.gif);
background-attachment:fixed;
}
50
background
• Property is used as shorthand to specify a
number of other background properties.
P
{
background: url(/images/pattern1.gif) repeat fixed;
}
51
Common CSS Properties: Fonts
• You can set following font properties of an
element:
font-family :- is used to change the face of a font.
• Possible value could be any font family name.
font-style:- is used to make a font italic or oblique.
Following is the example which demonstrates
how to set the font style of an element.
• Possible values are normal, italic and oblique.
font-variant:- is used to create a small-caps effect.
• Possible values are normal and small-caps.
52
font-weight:- is used to increase or decrease how
bold or light a font appears.
• Possible values could be normal, bold, bolder,
lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
font-size:- is used to increase or decrease the size of
a font.
• Possible values could be xx-small, x-small, small,
medium, large, x-large, xx-large, smaller, larger, size
in pixels or in %
Font:- is used as shorthand to specify a number of
other font properties.
53
P {
font-family: georgia, garamond, serif;
font-size:20px;
font-style: italic;
font-weight: bold;
}
• You can use the font property to set all the font
properties at once. For example:
P{
font: italic small-caps bold 15px georgia;
}
54
Common CSS Properties: Text
• You can set following text properties of an
element:
color :- is used to set the color of a text.
direction:- is used to set the text direction.
• Possible values are ltr or rtl.
letter-spacing:- is used to add or subtract space
between the letters that make up a word.
• Possible values are normal or a number
specifying space..
55
word-spacing:- is used to add or subtract space
between the words of a sentence.
• Possible values are normal or a number
specifying space..
text-indent:- is used to indent the text of a
paragraph.
• Possible values are % or a number specifying
indent space.
text-align:- is used to align the text of a
document.
• Possible values are left, right, center, justify.. 56
text-decoration:- is used to underline, overline, and
strikethrough text.
• Possible values are none, underline, overline, line-
through, blink.
text-transform:- is used to capitalize text or convert
text to uppercase or lowercase letters.
• Possible values are none, capitalize, uppercase,
lowercase.
white-space:- is used to control the flow and
formatting of text.
• Possible values are normal, pre, nowrap.
57
P{
color: red;
direction: rtl;
letter-spacing:5px;
word-spacing:5px;
text-indent:1cm;
text-decoration: blink;
}
58
Common CSS Properties: Links
• You can set following properties of a hyper link:

Pseudo-Classes
:link:- signifies unvisited hyperlinks.
:visited:- signifies visited hyperlinks.
:hover:- signifies an element that currently has the
user's mouse pointer hovering over it.
:active:- signifies an element on which the user is
currently clicking.
59
• Usually these all properties are kept in the

header part of HTML document.
• Remember a:hover MUST come after a:link and
a:visited in the CSS definition in order to be
effective.
• Also, a:active MUST come after a:hover in the
CSS definition as follows.
60
Example:
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
61
Common CSS Properties: Lists
list-style-type: - allows you to control the shape or

appearance of the marker.
list-style-position :- specifies whether a long point
that wraps to a second line should align with the
first line or start underneath the start of the marker.
list-style-image :- specifies an image for the marker
rather than a bullet point or number.
list-style :- serves as shorthand for the preceding
properties.
marker-offset:- specifies the distance between a
marker and the text in the list.
62
The list-style-type Property:

• Here are the values which can be used for an unordered
list:
 none ,
 disc (default, A filled-in circle ),
 circle (An empty circle),
 square.
• Here are the values which can be used for an ordered list:
 decimal(1,2,3,4,5),
 decimal-leading-zero (0 before the number 01, 02, 03, 04, 05 ),
 lower-alpha (a, b, c, d, e),
 upper-alpha (A, B, C, D, E),
 lower-roman (i, ii, iii, iv, v ),
 upper-roman (I, II, III, IV, V)
63
The list-style-position Property

• It can have one the two values:
 none,
 inside
 outside
64
The list-style-image Property

• The list-style-image allows you to specify an image
so that you can use your own bullet style.
<ul>
<li style="list-style-image: url(/images/bullet.gif);"> Maths </li>
<li>Social Science</li>
<li>Physics</li>
</ul>
65
The marker-offset Property:

• The marker-offset property allows you to specify
the distance between the marker and the text
relating to that marker.
Example:
<ul style="marker-offset:2px;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul> 66
Common CSS Properties: Borders
• There are three properties of a border you can
change
border-color :- specifies the color of a border.
border-style:- specifies whether a border should be
solid, dashed line, double line, or one of the
other possible values.
border-width:- specifies the width of a border.
67
The border-color Property:
• The border-color property allows you to change the
color of the border surrounding an element.
• You can individually change the color of the bottom,
left, top and right sides of an element's border using
the properties:
• border-bottom-color changes the color of bottom
border.
• border-top-color changes the color of top border.
• border-left-color changes the color of left border.
• border-right-color changes the color of right border.
68
The border-style Property

• The border-style property allows you to select one of
the following styles of border:
none, solid, dotted, dashed, double, groove, ridge, inset,
outset, hidden.
• You can individually change the style of the bottom, left,
top, and right borders of an element using following
properties:
• border-bottom-style changes the style of bottom
border.
• border-top-style changes the style of top border.
• border-left-style changes the style of left border.
• border-right-style changes the style of right border. 69
The border-width Property

• You can individually change the width of the
bottom, top, left, and right borders of an element
using the following properties:
• border-bottom-width changes the width of bottom
border.
• border-top-width changes the width of top border.
• border-left-width changes the width of left border.
• border-right-width changes the width of right
border.
70
Border Properties
• The border property allows you to specify
color, style, and width of lines in one
property:
P{
border: 4px solid red;
}
71
Common CSS Properties: Margins
• The margin property defines the space around an

HTML element.
• It is possible to use negative values to overlap
content.
• Remember that the adjacent vertical margins (top
and bottom margins) will collapse into each other
72
• There are following four properties to set an element

margin.
margin-bottom :- specifies the bottom margin of an
element.
margin-top :- specifies the top margin of an element.
margin-left :- specifies the left margin of an element.
margin-right:- specifies the right margin of an element.
margin:- a shorthand property for setting the margin
properties in one declaration.
73
The margin-top Property

• The margin-top property allows you set top margin of
an element. It can have a value in length, % or auto.
• Here is the example:
<p style="margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style="margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in
percent
</p>
74
The margin Property:

• The margin property allows you set all of the properties for the four margins in one
declaration.
p {margin: 15px}
/* all four margins will be 15px */
p {margin: 10px 2%}

/* top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.*/
p {margin: 10px 2% -10px}

/* top margin will be 10px, left and right margin will be 2% of the total width
of the document, bottom margin will be -10px */
p {margin: 10px 2% -10px auto}

/* top margin will be 10px, right margin will be 2% of the total width of the
document, bottom margin will be -10px, left margin will be set by the
browser */
75
</style>
Common CSS Properties: Paddings
• The padding property allows you to specify how

much space should appear between the content
of an element and its border:
• The value of this attribute should be either a

length, a percentage, or the word inherit.
 If the value is inherit it will have the same padding as
its parent element. If a percentage is used, the
percentage is of the containing box.
76
• There are following five CSS properties which can be

used to control lists:
padding-bottom :- specifies the bottom padding of an
element.
padding-top :- specifies the top padding of an element.
padding-left :- specifies the left padding of an element.
padding-right :- specifies the right padding of an
element.
padding :- serves as shorthand for the preceding
properties.
77
The padding-top Property:

Here is the example:
<p style="padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style="padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding
in percent
</p>
78
The padding Property:

Here is the example:
<p style="padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style="padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right padding will be 2% of the
total width of the document.
</p>
<p style="padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will be 2% of the total width
of the document, bottom padding will be 10px
</p>
<p style="padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of the total width of the
document, bottom padding and left padding will be 10px
</p> 79
Common CSS Properties: Positioning
Relative Positioning:
• Relative positioning changes the position of the HTML element
relative to where it normally appears.
• So "left:20" adds 20 pixels to the element's LEFT position.
• You can use two values top and left along with position property
to move an HTML element anywhere in HTML document.
 Move Left - Use a negative value for left.
 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.
NOTE: You can use bottom or right values as well in the

same way as top and left.
80
<div style="position: relative; left:80px; top:2px; background-color: red;">

This div has relative positioning.
</div>
81
Absolute Positioning:
• An element with position: absolute is positioned at the
specified coordinates relative to your screen top left corner.
• You can use two values top and left along with position property
to move an HTML element anywhere in HTML document.
Here's a quick reference when moving HTML elements in CSS.
NOTE: You can use bottom or right values as well in the same
way as top and left.
82
<div style="position: absolute; left:80px; top:20px; background-color:

yellow;"> This div has absolute positioning.
</div>
83
Fixed Positioning:
• Fixed positioning allows you to fix the position of an element
to a particular spot on the page - regardless of scrolling.
• Specified coordinates will be relative to the browser window.
• You can use two values top and left along with position
property to move an HTML element anywhere in HTML
document.
NOTE: You can use bottom or right values as well in the
same way as top and left.
84
<div style="position:fixed;left:80px;top:20px; background-color:

yellow;"> This div has fixed positioning.
</div>
85

Chapter Three: Cascaded Style Sheets (CSS)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter Three: Cascaded Style Sheets (CSS)

Uploaded by

Copyright:

Available Formats

Chapter Three

Cascaded Style Sheets(CSS)

• Apply additional effects

• Easy multiple document managment

<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2"

<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2"

<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2"

selector {property: value;}

A style rule is made of three parts:

selector - which part of the document

property - which aspect of CSS value - What are we setting the

• You can define selectors in various simple ways

The Type Selectors (Tag Selectors):

The Universal Selectors:

The Class Selectors:

The Class Selectors:

The Child Selectors:

The Attribute Selectors:

Multiple Style Rules:

e.g. <p class=”redBold”>this text will be red and bold</p>

• There are Three types of styles with your HTML

Embedded CSS - The <style> Element:

<style> tag attributes

Inline CSS - The style Attribute:

The value of style attribute is a combination

<h1 style ="color:#36C;"> This is inline CSS </h1>

External CSS - The <link> Element:

External CSS - The <link> Element:

<link> tag attributes:

CS100: Internet and Web Technologies 41

CSS Rules Overriding:

• You can set following properties of a hyper link:

• Usually these all properties are kept in the

list-style-type: - allows you to control the shape or

The list-style-type Property:

The list-style-position Property

The list-style-image Property

The marker-offset Property:

The border-style Property

The border-width Property

• The margin property defines the space around an

• There are following four properties to set an element

The margin-top Property

The margin Property:

p {margin: 10px 2%}

p {margin: 10px 2% -10px}

p {margin: 10px 2% -10px auto}

• The padding property allows you to specify how

• The value of this attribute should be either a

• There are following five CSS properties which can be

The padding-top Property:

The padding Property:

NOTE: You can use bottom or right values as well in the

<div style="position: relative; left:80px; top:2px; background-color: red;">

<div style="position: absolute; left:80px; top:20px; background-color:

<div style="position:fixed;left:80px;top:20px; background-color:

You might also like