Web Engineering: (Cascading Style Sheet)
Web Engineering: (Cascading Style Sheet)
Lecture 06
Introduction
(Cascading Style Sheet)
1
In Today’s Lecture …
• We will learn ways of adding style sheet.
2
CASCADING STYLE SHEET
•This is the language to add presentation
styling to HTML documents.
Inline
Internal
External
7
Inline CSS
• You can also embed your CSS code in
HTML document.
• Example:
8
INTERNAL CSS
• <style></style> always placed between
<head></head> tags.
• Example:
<style>
p{
line-height: 120%;
}
</style>
9
EXTERNAL CSS FILE
• External CSS file will always place between
<HEAD></HEAD> tags.
10
CSS Rules Overriding
• 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.
11
EXAMPLE
• <head>
<style>
div {
color: #9932CC;
}
</style>
</head>
<div>
<h1>Style Sheets</h1>
<p style="font-family: monospace; color: #0000FF;">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque sit amet lorem ligula. </p></div>
12
EXAMPLE
• <style>
a{
font-family: sans-serif;
}
</style>
<p style="font-family: monospace;">
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. <a href=“p1.html”>Pellentesque</a> sit amet
lorem ligula. Nam pulvinar nunc ac magna
aliquam quis sodales dui elementum.
<a href=“p2.html”>Fusce a lacus leo.</a>
</p>
13
SELECTORS
• There are three types of selectors:
Tag selectors
ID selectors
Class selectors
14
Example Tag Selector
<style>
p{
font-family: sans-serif;
Tag font-size: 15pt;
selector
line-height: 150%;
}
</style>
15
Example Class Selector
<style>
.foo {
font-family: sans-serif;
font-size: 15pt;
class selector
line-height: 150%;
}
</style>
<p class=“foo”> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque sit amet lorem ligula. Nam
pulvinar nunc ac magna aliquam quis sodales dui
elementum. Fusce a lacus leo. Maecenas ut dui eu
quam condimentum sagittis. </p>
16
Example Class Selector
<style>
p.foo {
font-family: sans-serif;
font-size: 15pt;
class
line-height: 150%;
selector
}
</style>
<body>
<h1 class=“foo”></h1>
<p class=“foo”></p>
</body>
17
Example ID Selector
<style>
#p1 {
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
ID selector
}
</style>
<p id=“p1”> Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Pellentesque sit amet lorem ligula. Nam
pulvinar nunc ac magna aliquam quis sodales dui
elementum. Fusce a lacus leo. Maecenas ut dui eu
quam condimentum sagittis.
</p>
18
RULE for ID selector
• There is only be one element in a
document with a particular ID selector.
19
Descendant Selector
<style>
pa{
font-family: sans-serif;
font-size: 15pt;
line-height: 150%;
}
</style>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing
elit.. Nam pulvinar nunc ac magna aliquam quis sodales
dui nunc sit elementum. <a href=“page1.html”>Donec eu
nisi turpis,</a> sit amet rutrum leo.
</p>
Click <a href=“page2.html”>here</a>
20
Grouping Selector
• you can apply style to many selectors.
• <style>
h1, p, section {
color: #35c;
font-weight: bold;
letter-spacing: .4em;
}
</style>
21
Grouping Class & ID Selectors
• you can apply style to many selectors.
<style>
#content, #footer, .supplement {
position: absolute;
left: 510px;
width: 200px;
}
</style>
22
PSEUDO SELECTOR
<style>
a:link {
color: #008080;
}
a:hover {
color: #FF0000;
}
</style>
23
COMMENTS IN CSS
<style>
/*
p{
font-family: sans-serif;
font-size: 15pt;
}
*/
</style>
24
CSS – Measurement Units
• CSS supports a number of measurements
including absolute units such as inches,
centimeters, points, and so on, as well as
relative measures such as percentages and
em units. You need these values while
specifying various measurements in your
Style rules.
• p{
font-size: 12pt;
}
• p{
font-size: 1pc;
}
26
CSS UNITS of MEASURE (2/3)
• p{
margin-left: 2ex;
}
• p{
padding-right: .25in;
}
• p{
padding-right: 10mm;
}
27
CSS UNITS of MEASURE (3/3)
• p{
margin-left: 2em;
}
• div#main {
width: 600px;
}
28
5.4 Conflicting Styles (Cont.)
• Relative length measurements:
– px (pixels – size varies depending on screen resolution)
– em (usually the height of a font’s uppercase M)
– ex (usually the height of a font’s lowercase x)
– Percentages (of the font’s default size)
• Absolute-length measurements (units that do not vary
in size):
– in (inches)
– cm (centimeters)
– mm (millimeters)
– pt (points; 1 pt = 1/72 in)
– pc (picas; 1 pc = 12 pt)
29
• Generally
30
Unit Description Example
Defines a measurement as a percentage p{
relative to another value, typically an font-size: 16pt;
%
enclosing element. line-height: 125%;
}
cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}
A relative measurement for height of a p{
font in em spaces. Because an em unit is letter spacing: 7em;
em equivalent to the size of a given font, if }
you assign a font to 12pt, each “em” unit
would be 12pt; thus 2em = 24pt.
This value defines a measurement p{
relative to a font’s x-height. The x-height font-size: 24pt;
ex
is determined by the height of the font’s line-height: 3ex;
lowercase letter x. }
in Defines a measurement in inches. p { word-spacing: .15in;}
mm Defines a measure in millimeters. p { word-spacing: 15mm;}
Defines a measurement in picas. A pica p { font-size: 20pc;}
pc is equivalent to 12 points. Thus, there are
6 picas per inch.
31
Unit Description Example
Defines a measurement in points. A point body {font-size: 18pt;}
pt
is defined as 1/72nd of an inch.
px Defines a measurement in screen pixels. p {padding: 25px;}
32
CSS – Colors
• You can specify your color values in various
formats.
Format Syntax Example
Hex Code #RRGGBB p {color: #FF0000; }
Short Hex Code #RGB p {color: #6A7;}
p{
RGB % rgb(rrr%, ggg%, bbb%) color: rgb(50%, 50%, 50%);
}
p{
RGB Absolute rgb(rrr, ggg, bbb) color: rgb(0, 0, 255);
}
keyword aqua, black etc. p { color: teal;}
33
CSS Box Model
• A set of rules collectively known as CSS Box Model
describes the rectangular region occupied with
HTML elements.
34
35
Document Flow - Block Elements
36
Document Flow – Inline Elements
37
Document Flow – Larger Example
38