CSS
Styles and Style Sheets
1 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Agеnda
1 Styles and Style Sheets
2 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Styles and Style Sheets
3 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Objеctivеs
In this module, you will
– Develop a web page that uses selector id
– Develop a web page that uses selector class
– Explore different types of Style Sheets
4 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
CSS Id
CSS allows you to specify your own selectors. There
are two types of selectors : id and class.
The selector id is used to specify style for a single,
unique element.
This selector uses the “id” element of an HTML
element.
This selector is defined with a “#”.
5 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Demo : CSS Id
<html><head>
<style>
#paragraph{
text-align:right;
color:magenta;
font-family:arial; Output :
font-size:24px; Today's expenses
}
</style>
1234.50
</head>
34.23
<body>
<p> Today's expenses </p>
<p id="paragraph">1234.50</p>
<p id="paragraph"> 34.23</p>
</body></html>
6 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
CSS class
The CSS class selector is used to specify a style
for a group of elements.
The class selector is used on several elements
where as the id selector is used on a single
element.
You can set a particular style for many HTML
elements with the same class.
The class selector uses the HTML class attribute
and is defined with a "."
7 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Demo : CSS class
<html><head>
<style>
.custom {
text-align:center; Output :
color:red; Example 3
font-size:20px; Wipro Technologies
} Hosur Road
</style> Bengaluru
</head>
<body>
<p> Example 3</p>
<h1 class="custom">Wipro Technologies</h1>
<p class="custom">Hosur Road</p>
<p class="custom">Bengaluru</p>
</body></html>
8 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Quiz
1. A selector is defined with
a) #
b) %
c) &
d) @
2. The class selector uses the HTML class attribute and
is defined with a
a) #
b) .
c) /
d) -
9 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Inserting a StyleSheet
You can insert Styles in three different ways :
1) External Style Sheet
Styles are specified in an external CSS file
2) Internal Style Sheet
Styles are specified inside the head section of an
HTML page
3) Inline Styles
Styles are specified inside an HTML element
10 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
External Style Sheet
When you want to apply styles to multiple HTML pages,
you can use an external style sheet.
The advantage of using an external style sheet is that,
you can change the look of an entire web site, just by
changing one file.
To link an HTML page to a style sheet, we must use the
<link> tag.
The <link> tag must be within the <head> section.
Ex : <head>
<link rel="stylesheet" type="text/css" href=“ex1.css” />
</head>
11 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
External Style Sheet (Contd.).
The external style sheet should be stored in a file
with extension .css
You can use any text editor to create a style sheet
file.
This file should not contain any HTML tag.
12 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Demo : External Style Sheet
ex1.css
p{
text-align:center;
font-family:Algerian;
font-size:28px;
}
css4.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="ex1.css" />
</head>
<body>
<p>This paragraph uses styles from an external stylsheet</p>
</body> Output :
</html>
:This paragraph uses styles from an external stylesheet
13 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Internal StyleSheet
Internal Style Sheets can be used when you want to apply unique
styles to a single document.
Internal styles are defined in the head section of an HTML page.
Internal styles are defined using <style> tag.
Example :
<head>
<style>
p { text-align:left; font-size:24px; }
</style>
</head>
14 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Demo : Internal StyleSheet
Output:
<html> Wipro Technologies
<head> Talent Transformation
<style> This is a demonstration of Internal Stylesheet
h1{text-align:center; font-size:28px;}
h2{text-align:center; font-size:20px;}
p{text-align:left; font-size:16px;}
</style>
</head>
<body>
<h1>Wipro Technologies </h1>
<h2>Talent Transformation </h1>
<p>This is a demonstration of Internal Stylesheet</p>
</body>
</html>
15 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Inline Styles
You can apply style attribute within a particular HTML tag. This
method of applying CSS style is known as Inline Style.
You can use the style attribute in the required tag, in the following
manner :
<p style="font-family:Algerian;font-size:28px;"> Demo of Inline Style
</p>
As Inline Styles mix content with presentation, you are bound to lose
many of the advantages that CSS offers. This is the precise
reason, Inline Styles are sparingly used.
16 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Multiple Style Sheets
Multiple Style Sheets can be referenced inside an HTML document.
The questions is, what styles will be applicable when there is more
than one style specified?
All styles cascade into a new virtual style sheet by applying the
following rules, where the higher number has the greater priority:
1. Browser default
2. External Stylesheet
3. Internal Stylesheet (styles defined in head section)
4. Inline Style (styles defined in an HTML element)
As you can observe, Inline Style has the highest priority. This means
that the inline style defined in an HTML element will override a style
defined within the head section, which in turn may override the style
defined within an external style sheet.
17 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Multiple Style Sheets
If we set properties for the same selector in different style sheets, the
values will be inherited from the more specific style sheet.
For e.g. : If we have an external style sheet, which defines a style
p {font-size:16 px; color:magenta; text-align:right;}
We have also defined an internal style sheet as follows :
p {color:blue; text-align:left;}
Now, if we link this HTML page to the external style sheet, the
resultant style for <p> will have the following values for the defined
properties :
p { color:blue;text-align:left;font-size:16px;}
The values of the properties color and text-
align in internal style sheet override those in external style sheet, while the value
of the property font-size gets inherited.
18 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Quiz
1. Internal Styles are those styles that are defined
within the section of the html document.
a) html
b) body
c) head
d) title
2. The correct syntax for accessing an external
stylesheet file from within an HTML document is
a) <link rel="stylesheet" type="text/css" ref="ex1.css" />
b) <link rel="stylesheet" type="text/css" href="ex1.css" />
c) <link ref="stylesheet" type=“css/text" file="ex1.css" />
d) <link rel=“cssstyles" type="text/css" href="ex1.css" />
19 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Summary
In this modulе you were able to :
– Develop a web page that uses selector id
– Develop a web page that uses selector class
– Explore different types of Style Sheets
20 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
Thank You
21 © 2013 WIPRO LTD | WWW.WIPRO.COM | CONFIDENTIAL
