1. CSS
CASCADING STYLE SHEETS
Mukesh N. Tekwani
Computer Science & Physics
mukeshtekwani@hotmail.com
I. Y. College, Mumbai, India
2. WHAT IS CSS?
January 2012
CSS stands for Cascading Style Sheets
CSS defines HOW to display HTML elements
Prof. Mukesh N. Tekwani
Styles are normally stored in Style Sheets
External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one
CSS selects an element and sets the rules for that
element. These set of rules are known as style
sheets and can be in the HEAD section of an HTML
document or in an external style sheet.
2
3. CSS RULES
January 2012
A CSS rule has 2 parts: a selector, and one or more
declarations:
Prof. Mukesh N. Tekwani
Selector Declaration
H1 {color:blue; font-size:12px;)
Here, color is the property and blue is the value of that
property.
The selector is the HTML element that we want to style.
The property is the attribute we want to change. Each
attribute has a value.
CSS property names are separated by dashes when
they are multiple words—for example, font-face, font- 3
size, line-height, and so on.
4. WHAT IS THE NEED FOR CSS?
(OR WHAT ARE THE ADVANTAGES OF CSS?)
January 2012
HTML pages use a lot of markup to style the pages.
Prof. Mukesh N. Tekwani
There can be very complex structures of
tables, nested frames, invisible pixel images for
layout, etc.
This makes HTML page difficult to render for the
browser.
4
5. WHAT IS THE NEED FOR CSS?
(OR WHAT ARE THE ADVANTAGES OF CSS?)
January 2012
Code: CSS is the standard for coding in HTML. CSS is
compatible with most browsers. CSS reduces the length of the
codes of web page, which decreases the page size, making it
easy and fast to load in browsers
Prof. Mukesh N. Tekwani
Design: Use of CSS makes the design simple. CSS makes the
management of the entire website easy to maintain by just
changing the CSS file which contains the style details.
Bandwidth: CSS reduces the HTML coding and page size. This
reduces the bandwidth usage.
Consistency: It is easy to maintain, handle and control the
whole website made on CSS based HTML. Ex: Suppose we want
to change the background of the entire website, we just need to
change the background of the single page in the style sheet and
the background of the whole website will change. 5
6. WHAT IS MEANT BY STYLE RULES?
January 2012
A style rule is used to change the default behavior
of an HTML element. All style rules are contained in
Prof. Mukesh N. Tekwani
the <STYLE> element and this is put in the HEAD
section of an HTML document.
A style rule is made up of 2 parts: a selector and a
declaration. The selector determines the element
to which the style is to be applied. The declaration
gives the exact property values.
6
7. WHAT IS MEANT BY STYLE RULES?
January 2012
Consider the <P> element. We can create a style rule for this
<P> element so that all paragraphs are in blue color and have
a font size of 24px. The style rule is as follows:
Prof. Mukesh N. Tekwani
<STYLE>
P {COLOR:BLUE; FONT-SIZE:24px}
</STYLE>
Consider the <H1> element. We can create a style for this
element so that all H1 headings are in red color.
<STYLE TYPE = “TEXT/CSS”>
H1 {COLOR:RED}
7
</STYLE>
8. DEFINING THE STYLE FOR A SINGLE ELEMENT:
January 2012
We can define the style for a single element as
follows:
Prof. Mukesh N. Tekwani
<H1 STYLE =”COLOR:BLUE”>This is a
heading</H1>
This direct use of CSS is called inline style and is
not recommended due to the tight coupling
between the HTML document and the style.
8
9. TRY…
January 2012
Write a style rule so that every <H1> element on
your web site is in green color and centered.
Prof. Mukesh N. Tekwani
H1 {COLOR:GREEN; TEXT-ALIGN:CENTER}
9
10. EXTERNAL STYLE SHEET:
January 2012
Placing style sheets in an external document lets
you specify rules for different HTML documents. An
Prof. Mukesh N. Tekwani
external style sheet is a text document with the file
name extension of .CSS. This external style sheet
contains the style rules for various elements.
10
11. EXTERNAL STYLE SHEET:
January 2012
/* stylesheet 1 */
H1 {COLOR:GREEN}
H2 {COLOR:GREEN; BORDER:SOLID BLUE}
Prof. Mukesh N. Tekwani
(Other option for SOLID is DOTTED)
The CSS line begins with a comment. The CSS style sheet
does not contain any HTML code.
To link this external style sheet to an HTML document, we add
the <LINK> element in the HEAD section of an HTML
document:
<HEAD>
<TITLE>Sample document</TITLE>
<LINK HREF = “style1.css” REL = “stylesheet”>
</HEAD> 11
12. EXTERNAL STYLE SHEET:
January 2012
The HTML file containing this code displays with the
characteristics given in the style sheet.
Prof. Mukesh N. Tekwani
The HREF attribute gives the URL of the stylesheet.
The REL attribute specifies the relationship
between the linked and the current document.
The major advantage of external style sheets is
that the styles can apply to all the web pages on a
site. In order to make global changes, we just have
to modify the external style sheet.
12
13. DIFFERENT CSS SELECTION TECHNIQUES
January 2012
Selecting Multiple Elements:
By using multiple selectors, we can use less code. E.g., to make both
<H1> and <H2> headings green, we can use the following rules:
Prof. Mukesh N. Tekwani
<STYLE TYPE = “TEXT/CSS”>
<H1> {COLOR:GREEN}
<H2> {COLOR:GREEN}
</STYLE>
These two rules can be expressed in a single rule statement using
multiple selectors for the same property as follows:
<STYLE TYPE = “TEXT/CSS”>
H1, H2 {COLOR:GREEN}
</STYLE>
13
14. DIFFERENT CSS SELECTION TECHNIQUES
January 2012
Selecting by Context:
A context-based selector lets you specify the exact context in
which a style is applied.
Prof. Mukesh N. Tekwani
For example, to specify that the <I> elements appear in blue
color only within the <H1> elements, we create the style rule as
follows:
<STYLE TYPE = “TEXT/CSS”>
H1 I {COLOR:BLUE}
</STYLE>
Note: We should not place a comma between the element H1
and I in the above example. Otherwise it will turn a contextual
selection into a multiple element selection and blue color text will
apply to both H1 headings and Italic text.
14
So don’t write this: H1 , I {COLOR:BLUE}
15. DIFFERENT CSS SELECTION TECHNIQUES
January 2012
Selecting with the CLASS attribute:
The CLASS attribute lets you write rules and then apply them to
groups of elements. Basically the CLASS attribute lets you define
Prof. Mukesh N. Tekwani
your own tags and apply them wherever you want.
To create a class, we first declare it within the <STYLE> element.
The period (.) flag character indicates that the selector is a class
selector.
<STYLE TYPE = “TEXT/CSS”>
.QUOTE {COLOR:RED}
</STYLE>
Applying this style to a paragraph:
<P CLASS=”QUOTE”> This is a paragraph </P> 15
16. WHAT ARE THE CSS FONT PROPERTIES?
January 2012
The following font properties can be controlled with
CSS:
Prof. Mukesh N. Tekwani
Font families and alternates
Font size
Font weight
Line height
Letter spacing
Text indent
16
Color
17. WHAT ARE THE CSS FONT PROPERTIES?
January 2012
Example 1: Create a style rule that
specifies Arial as the font for the <P>
Prof. Mukesh N. Tekwani
element.
<STYLE TYPE=”TEXT/CSS”>
P {FONT-FAMILY:ARIAL}
</STYLE>
17
18. WHAT ARE THE CSS FONT PROPERTIES?
January 2012
Example 2: Create a style rule that
specifies Arial as the font for the <P>
Prof. Mukesh N. Tekwani
element. In case Arial font is not
available, use the Helvetica font.
<STYLE TYPE=”TEXT/CSS”>
P {FONT-FAMILY:ARIAL, HELVETICA}
</STYLE>
18
19. WHAT ARE THE CSS FONT PROPERTIES?
January 2012
Example 3: Create a style rule that specifies
Arial as the font for the <P> element. In case
Arial font is not available, use the Helvetica
Prof. Mukesh N. Tekwani
font. In case this too is not available, use a
generic font like sans-serif.
<STYLE TYPE=”TEXT/CSS”>
P {FONT-FAMILY:ARIAL, HELVETICA,
SANS-SERIF}
</STYLE>
The generic names we can use are:
Monospace, Serif and Sans-serif. 19
20. WHAT ARE THE CSS FONT PROPERTIES?
January 2012
Specifying Text Background Color:
Example 4: We can set the text background
Prof. Mukesh N. Tekwani
color (i.e., the color behind the text) for any
element, by using the BACKGROUND-
COLOR property, as follows:
<STYLE TYPE=”TEXT/CSS”>
H2 {COLOR:WHITE; BACKGROUND-
COLOR:BLUE}
</STYLE>
20
21. WHAT IS THE CLASS SELECTOR IN CSS?
January 2012
The CLASS attribute lets you write rules and then apply them to
groups of elements.
The CLASS attribute lets you define your own tags and apply
Prof. Mukesh N. Tekwani
them wherever you want.
To create a class, we first declare it within the <STYLE> element.
The period (.) flag character indicates that the selector is a class
selector.
<STYLE TYPE = “TEXT/CSS”>
.QUOTE {COLOR:RED}
</STYLE>
Applying this style to a paragraph:
<P CLASS=”QUOTE”> This is a paragraph </P> 21
22. WHAT IS THE CLASS SELECTOR IN CSS?
January 2012
Example 2: Create a class rule called “veryimportant” that sets the background
color to yellow. Apply this to a H1 heading and two paragraphs. Also show how
a para is rendered if the class is not applied to it.
Prof. Mukesh N. Tekwani
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
.veryimportant {background-color: yellow;}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="veryimportant">Example</h1>
<P CLASS="veryimportant">This is the first paragraph.</P>
<P>This is the second paragraph.</P>
<P Class="veryimportant">This is the third paragraph.</P>
</BODY>
22
</HTML>
23. HOW TO SPECIFY TEXT MARGINS N CSS?
January 2012
The MARGIN attribute is used to set the text margin on
all four sides. We can also set the margins on individual
sides with following settings:
Prof. Mukesh N. Tekwani
MARGIN-TOP
MARGIN-BOTTOM
MARGIN-LEFT
MARGIN-RIGHT
Example: Set the margin on all sides to 30 px
<STYLE TYPE = “TEXT/CSS”>
P {margin:30px}
23
</STYLE>
24. HOW TO SPECIFY THE TEXT BORDERS?
January 2012
The BORDER property can be used to set the
border style, color and width.
Prof. Mukesh N. Tekwani
Syntax: {BORDER BORDER-STYLE
BORDER-WIDTH BORDER-COLOR}
Example
<STYLE TYPE = “TEXT/CSS”>
P {BORDER: SOLID 2pt BLUE}
</STYLE>
24
25. CHANGING BACKGROUND COLOR WITH CSS
January 2012
<html>
<head>
<style type="text/css">
Prof. Mukesh N. Tekwani
body
{
background-color:#b0c45e;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world!</p>
</body> 25
</html>
26. SET AN IMAGE AS THE BACKGROUND OF A
PAGE
January 2012
<html>
<head>
Prof. Mukesh N. Tekwani
<style type="text/css">
body {background-image:url('paper.gif');}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html> 26
27. EXAMPLE
January 2012
Create a style rule as follows: To display the date in a right-
aligned paragraph. To display the main text in a justified
paragraph.
Prof. Mukesh N. Tekwani
<html>
<head>
<style type="text/css">
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head> 27
28. EXAMPLE (CONTD)
January 2012
<body>
<h1>CSS text-align Example</h1>
Prof. Mukesh N. Tekwani
<p class="date">Nov 2010</p>
<p class="main">This is the main paragraph in
which text alignment is “justified”</p>
</body>
</html>
28
29. EXAMPLE
January 2012
Create style rules for the four states of a link.
<html>
Prof. Mukesh N. Tekwani
<head>
<style type="text/css">
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 */
</style>
</head>
29
30. EXAMPLE (CONTD)
January 2012
<body>
<p><b><a href="default.asp" target="_blank">
Prof. Mukesh N. Tekwani
This is a link</a></b></p>
</body>
</html>
Note: a:hover MUST come after a:link and a:visited
in the CSS definition in order to be effective.
a:active MUST come after a:hover in the CSS
definition in order to be effective.
30
31. EXAMPLE
January 2012
Create a style rule for H1 element with following
specifications:
Prof. Mukesh N. Tekwani
H1 tag with
Background image: swirlbkg.jpg
Color—green
Letter-spacing-7pt
Text-align- center
Text-decoration-underline
Text-transform--uppercase;
Word-spacing: 2pt
31
32. EXAMPLE(CONTD)
January 2012
H1
{
Prof. Mukesh N. Tekwani
color:green;
letter-spacing:7pt;
text-align: center;
text-decoration:underline;
text-transform:uppercase;
word-spacing: 2pt
}
32
33. EXAMPLE
January 2012
Create a style rule for P tag with following
specifications:
Prof. Mukesh N. Tekwani
Color – magenta
font-family – Algerian
font-size – medium
font-style—italic
font-weight—lighter
33
34. EXAMPLE
January 2012
P
{
Prof. Mukesh N. Tekwani
color: magenta;
font-family:Algerian;
font-size: medium;
font-style:italic;
font-weight:-lighter;
}
34
35. EXAMPLE TO ILLUSTRATE THE VARIOUS
STYLES APPLIED TO LISTS:
January 2012
<html>
<head>
Prof. Mukesh N. Tekwani
<style type="text/css">
ul.a {list-style-type:circle;} /* open circle */
ul.b {list-style-type:square;} /* filled square */
ul.e {list-style-type:disc;} /* filled circle */
ol.c {list-style-type:upper-roman;} /* upper roman I
*/
ol.d {list-style-type:lower-alpha;} /* lower alpha: a */
</style>
</head>
35
36. LISTS
<body>
January 2012
<p>Example of unordered lists:</p>
<ul class="a">
Prof. Mukesh N. Tekwani
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
36
</ul>
37. LISTS
January 2012
<ul class="e">
<li>Coffee</li>
<li>Tea</li>
Prof. Mukesh N. Tekwani
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html> 37
38. HANGING INDENT
January 2012
Write a style rule for a <P> element with a 24 pt
hanging indent and a 30 pixel margin on left and right
sides.
Prof. Mukesh N. Tekwani
<STYLE TYPE = "TEXT/CSS">
P
{
text-indent:-24pt;
margin-left:30px;
margin-right:30px
}
38
</STYLE>
39. ALIGNING TEXT WITH CSS
<html>
January 2012
<head>
<style>
h1 {text-align:center;}
Prof. Mukesh N. Tekwani
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me
some advice that I've been turning over in my mind ever since. 'Whenever
you feel like criticizing anyone,' he told me, just remember that all the people
in this world haven't had the advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify" 39
works.</p></body></html>
40. QUESTIONS ?
January 2012
Read.
Practice.
Prof. Mukesh N. Tekwani
Read.
Practice.
:
:
:
40