1
CS1113 Web Programming
Lecture 06
Introduction
In Today’s Lecture …
•
We will learn ways of
adding style sheet.
•
We will learn how to add
formats through
3
CASCADING STYLE SHEET
•
This is the
language
to add
presentation
styling
to HTML documents.
•
CSS is a powerful and flexible way to
add format to web page
for presentation.
•
Through CSS it is relatively easy to take
simple page of text and images,
•
CSS has a
simple syntax
, consist of
selectors
,
properties
and values it together
make a style rules.
•
It gives
developer
find ways to control over
how each element of page is formatted.
•
CSS styles can apply on
HTML documents
through several different ways.
CSS 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.
•
You can put CSS Style Rule Syntax as
follows:
selector
{
property:
value
;
}
•
Example
: You can define a table border as
follows:
table
{
Applying CSS
•
There are
three ways
through which you
apply CSS on your HTML doc.
Inline
Internal
External
Inline CSS
•
You can also embed your
CSS
code in
HTML
document.
•
Example:
9
INTERNAL CSS
•
<style></style>
always placed between
<head></head>
tags.
•
Example:
<style>
p
{
line-height:
120%;
}
EXTERNAL CSS FILE
•
External CSS file will always place between
<HEAD></HEAD>
tags.
•
<link
rel=
“stylesheet”
type=
“text/css”
11
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.
•
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
EXAMPLE
•
<head>
<style>
div
{
color:
#9932CC;
}
</style>
</head>
<div>
<h1>
Style Sheets
</h1>
<p
style=
"
font-family:
monospace;
color:
#0000FF;
"
>
13
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>
SELECTORS
•
There are
three types
of selectors:
Tag
selectors
ID
selectors
15
Example Tag Selector
<style>
p
{
font-family:
sans-serif;
font-size:
15pt;
line-height:
150%;
}
</style>
Tag
Example Class Selector
<style>
.
foo
{
font-family:
sans-serif;
font-size:
15pt;
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>
17
Example Class Selector
<style>
p
.
foo {
Example ID Selector
<style>
#p1
{
font-family:
sans-serif;
font-size:
15pt;
line-height:
150%;
}
</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.
19
RULE for ID selector
•
There is only be
one element
in a
document with a particular
ID selector.
•
ID selector
can only be used
once
in
Descendant Selector
<style>
p a
{
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.
21
Grouping Selector
•
you can apply style to many selectors.
•
<style>
h1,
p,
section
{
color:
#35c;
font-weight:
bold;
letter-spacing:
.4em;
}
Grouping Class & ID Selectors
•
you can apply style to many selectors.
<style>
#content, #footer,
.
supplement
{
position:
absolute;
left:
510px;
width:
200px;
}
23
PSEUDO SELECTOR
<style>
a:link
{
color:
#008080;
}
a:hover
{
color:
#FF0000;
}
COMMENTS IN CSS
<style>
/*
p
{
font-family:
sans-serif;
font-size:
15pt;
}
*/
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.
•
Example:
border: 1
px
solid red;
CSS UNITS of MEASURE (1/3)
•
# column1 {
width: 100
%
;
}
•
p {
font-size: 12
pt
;
}
•
p {
CSS UNITS of MEASURE (2/3)
•
p {
margin-left: 2
ex
;
}
•
p {
padding-right:
.
25
in
;
}
•
p {
padding-right: 10
mm
;
}
CSS UNITS of MEASURE (3/3)
•
p {
margin-left: 2
em
;
}
•
div#main {
29
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)
–
Percentage
(of the font’s default size)
•
Absolute-length measurements
(units that do
not vary in size):
–
in
(inches)
–
cm
(centimeters)
–
mm
(millimeters)
•
Generally
Unit Description Example
%
Defines a measurement as a percentage relative to another value, typically an
enclosing element.
p {
font-size: 16pt; line-height: 125%; }
cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}
em
A relative measurement for height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each “em” unit would be 12pt; thus 2em = 24pt.
p {
letter spacing: 7em; }
ex
This value defines a measurement
relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter x.
p {
font-size: 24pt; line-height: 3ex; }
in Defines a measurement in inches. p { word-spacing: .15in;} mm Defines a measure in millimeters. p { word-spacing: 15mm;}
pc
Defines a measurement in picas. A pica is equivalent to 12 points. Thus, there are 6 picas per inch.
p { font-size: 20pc;}
Unit Description Example
pt Defines a measurement in points. A point is defined as 1/72nd of an inch.
body {font-size: 18pt;}
CSS – Colors
•
You can specify your
color values
in various
formats.
33
Format Syntax Example
Hex Code #RRGGBB p {color: #FF0000; } Short Hex Code #RGB p {color: #6A7;}
RGB % rgb(rrr%, ggg%, bbb%) p { color: rgb(50%, 50%, 50%); }
RGB Absolute rgb(rrr, ggg, bbb)
p {
color: rgb(0, 0, 255); }
CSS Box Model
•
A
set of rules
collectively known as CSS Box Model
describes the rectangular region occupied with
HTML elements.
•
The main idea is that every element’s layout is
composed of:
the actual element’s
content area
.
a
border
around the element.
