Chapter 2b Cascade Style Sheet CSS

Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
An extension (addition) to HTML which allows

us to style our web pages
Provides more detailed attributes to elements
than the ones defined in standard HTML
Styles are defined once and used any number
of times and in several contexts
Clearly separate content from its
presentation
Saves a lot of work
Especially in website maintenance and upgrading

Web Programming
Cascading Style Sheets (CSS):
is a simple mechanism for adding style (e.g.

fonts, colors, layouts) to Web documents.
Styles provide powerful control over the
presentation of web pages.
Web Programming
CSS (contd)
CSS styles can be specified:
Rules of precedence application:
Inside a single HTML element (inline)

Inside the <head> element of an HTML document
(internal)
In an external CSS file (external)
Inline styles
Internal styles (Embedded)
External styles
Browser default
From highest to lowest
Web Programming
A style sheet consists of a set of rules.

Each rule consists of one or more selectors
and a declaration block.
A declaration block consists of a list of
declarations in curly braces ({}).
Each declaration consists of a property, a
colon (:), a value, then a semi-colon (;).
Web Programming
CSS Syntax
selector {property: value;}
Web Programming
CSS Syntax
Parts of a style rule (or statement)
Guy-Vincent Jourdan :: CSI 3140 ::

based on Jeffrey C. Jacksons slides
The selector is normally the HTML element you

want to style.
p {color:red;text-align:center;}
To make the CSS more readable, you can put one
declaration on each line, like this:
p
{
color:red;
text-align:center;
}
Selectors can be grouped (separated by comma)
Ex. p, div, table { align: center }
Web Programming
CSS (contd)
Types of selectors
HTML tag names

Class selectors
Id selectors
HTML tag names as selectors
used to override the default attributes of HTML tags
Format: tag_name {property : value}

Ex. a { color: red;
text-decoration: overline
}
Web Programming
CSS (contd)
The class selector
define generic styles that can be applied to different

HTML elements
applied to the class attribute of HTML elements
The class selector is used to specify a style for

a group of elements. Unlike the id selector,
the class selector is most often used on
several elements.
This allows you to 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 "."
10
Web Programming
Format:
1. Styles for a particular element
tag_name.style_name { property: value }
Ex. p.color { color: green }
<p class=color>some text</p>
2. Styles for all elements
.style_name { property: value }
Ex. .color { color: blue }
<div class=color>some text</div>
<table class=color></table>
11
Web Programming
In the example below, all HTML elements with

class="center" will be center-aligned:
.center {text-align:center;}
You can also specify that only specific HTML
elements should be affected by a class.
In the example below, all p elements with
class="center" will be center-aligned:
p.center {text-align:center;}
12
Web Programming
CSS (contd)
The Id selector
unlike the class selector, the Id selector always

applies to only one element
The id selector is used to specify a style for a

single, unique element.
The id selector uses the id attribute of the
HTML element, and is defined with a "#".
13
Web Programming
Format:
1. Styles for a particular element
tag_name#style_name { property: value }
Ex. p#color { color: green }
<p id=color>some text</p>
2. Styles for all elements
#style_name { property: value }
Ex. #color { color: blue }
<div id=color>some text</div>
<table id=color></table> possible ???
14
Web Programming
CSS (contd)
CSS comments
Format:
/* comment text */
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
15
Web Programming
Three Ways to Insert CSS

There are three ways of inserting a style
sheet:
16
External style sheet

Internal style sheet
Inline style
Web Programming
Inline Styles
An inline style loses many of the advantages of style sheets by mixing

content with presentation.
style information is directly attached to the HTML elements they

affect
higher cascade precedence than the other specification
methods
declaring an individual elements format:
Attribute style
CSS (style) property
<tag_name style=property:value; property: value;>

Followed by a colon and a value
</tag_name>
Ex. <table style=background-color: yellow> </table>
<p style="color:sienna;margin-left:20px">This is a
paragraph.</p>
17
Web Programming
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5


7
8
9
10
11
<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>Inline Styles</title>
</head>
12
13
<body>
14
15
inline.html
(1 of 2)
<p>This text does not have any style applied to it.</p>
16
17

18

19

20
<p style = "font-size: 20pt">This text has the
21
<em>font-size</em> style applied to it, making it 20pt.
22
</p>
23
Internal or Embedded Style Sheets
this method can only specify style information for the

current document:
1:1 relationship
However, the same document may have other style definitions
applied to it
1:M relationship
embedded style sheet rule will have higher precedence

than external style sheet rule, if there is a conflict between
styles
embedded style sheet rule will have lower precedence
than an inline style sheet rule
Internal / Embedded Style Sheets
Embed an entire CSS document in an XHTML

documents head section inside a style element
Attribute type
Multipurpose Internet Mail Extensions (MIME) type

describes the type of the documents content
text/css is the type for CSS document
Style properties are defined for:
Existing defined elements, such as p (paragraph), h3

(header), li (Iist) or any other
Style class that can be applied to either:
Any existing type of element in the body of the document or

One specific element in the document
Internal or Embedded Style Sheets
An internal style sheet should be used when a single document has a

unique style. You define internal styles in the head section of an HTML page,
by using the <style> tag, like this:
defined in the <head> element

<style type=text/css>
{property:value; ...}
</style>
Eg:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
22
Web Programming
Style Sheet Syntax Explained

selector
property
value
rule
External Style Sheet
An external style sheet is ideal when the style is

applied to many pages. With an external style
sheet, you can change the look of an entire Web
site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link>
tag goes inside the head section:
24
defined in a separate CSS file

linked to an HTML document using the <link> tag
<link rel=stylesheet type=text/css href=url>
changes to the styles in the external CSS file will be
automatically reflected in all the HTML document in
which the style is attached
Web Programming
CSS (contd)
An external style sheet can be written in any text

editor. The file should not contain any html tags.
Your style sheet should be saved with a .css
extension. An example of a style sheet file is shown
below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Do not add a space between the property value and
the unit (such as margin-left:20 px). The correct
way is: margin-left:20px
25
Web Programming
1 /* Fig. 6.4: styles.css
*/
2 /* An external stylesheet */
3
4 a
{ text-decoration: none }
5
6 a:hover { text-decoration: underline;
7
color: red;
background-color: #ccffcc }
9
10 li em
{ color: red;
11
font-weight: bold;
12
background-color: #ffffff }
13
14 ul
{ margin-left: 2cm }
15
16 ul ul
17
{ text-decoration: underline;
margin-left: .5cm }
styles.css
(1 of 1)
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5


7
8
9
<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
10
<title>Linking External Style Sheets</title>
11
<link rel = "stylesheet" type = "text/css"
12
13
href = "styles.css" />

</head>
14
15
<body>
16
external.html
(1 of 2)
17
<h1>Shopping list for <em>Monday</em>:</h1>
18
<ul>
19
<li>Milk</li>
20
<li>Bread
21
<ul>
22
<li>White bread</li>
23
<li>Rye bread</li>
24
<li>Whole wheat bread</li>
25
</ul>
26
</li>
27
<li>Rice</li>
28
<li>Potatoes</li>
29
<li>Pizza <em>with mushrooms</em></li>
30
</ul>
31
32
<p>
33
<a href = "http://www.food.com">Go to the Grocery store</a>
34
</p>
35
36
</body>
37 </html>
Some common CSS properties

Background
CSS background properties are used to define the
background effects of an element
CSS properties used for background effects:
29
background-color: color
background-image: url(url)
Sets the background image for an element
background-repeat: repeat_type {repeat, repeat-x,
repeat-y, no-repeat}
background-attachment: attachment_type {scroll,
fixed}
Sets whether a background image is fixed or scrolls
with the rest of the page (default: scroll)
Web Programming
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:
body {background-color:#b0c4de;}
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)"
a color name - like "red"
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
30
Web Programming
Background Image
The background-image property specifies an

image to use as the background of 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:
body {background-image:url('paper.gif');}
31
Background Image - Repeat Horizontally or

Vertically
By default, the background-image property repeats
an image both horizontally and vertically.
Web Programming
Example:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
32
Web Programming
Background - Shorthand property
To shorten the code, it is also possible to specify all the properties

in one single property. This is called a shorthand property.
The shorthand property for background is simply "background":
Background Image - Set position and norepeat
The position of the image is specified by the background-position

property:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top
}
33
Web Programming
The background-position property sets the

starting position of a background image.
34
Values of background-position
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Web Programming
body {
background:#ffffff url('img_tree.png') no-repeat right
top;
When using the shorthand property the order of the

property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is

missing, as long as the ones that are present are in
this order.
35
Web Programming
Text
color: color
The color property is used to set the color of the text.
The color can be specified by:

name - a color name, like "red"
RGB - an RGB value, like "rgb(255,0,0)"
Hex - a hex value, like "#ff0000"
The default color for a page is defined in the

body selector.
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
36
Web Programming
The text-decoration property
Specifies the decoration added to text.

Note: The color of the decoration should be set by the
"color" property.
Set the text decoration for h1, h2, h3, and h4 elements:
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
37
Web Programming
direction: direction {ltr, rtl} borwser issue??
letter-spacing: value
text-align: alignment {left, right, center, justify}
text-decoration: decoration
white-space:
{none, underline,
overline, line-through, blink}
Sets how white space inside an

element is handled
normal
pre
nowrap
38
Web Programming
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center;}
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"
works.</p>
</body>
</html>
39
Web Programming
CSS (contd)
text-indent: value
The text-indent property specifies the indentation
of the first line in a text-block.
Note: Negative values are allowed. The first line
will be indented to the left if the value is negative.
Value: Defines a fixed indentation in px, pt, cm,
em, etc.
(16px=1em).
40
Web Programming
text-transform: transform {none, capitalize,
uppercase, lowercase}
The text-transform property controls the
capitalization of text.
Capitalize: Transforms the first character of
each word to uppercase
Uppercase: Transforms all characters to uppercase

lowercase :Transforms all characters to lowercase
Example:
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
41
Web Programming
word-spacing: value
The word-spacing property increases or
decreases the white space between words.
Note: Negative values are allowed.
Example
Specify that the space between words in
paragraphs should be 30 pixels:
p
{
word-spacing:30px;
}
42
Web Programming
CSS Font
CSS font properties define the font family,
boldness, size, and the style of a text.
Font Family
The font family of a text is set with the fontfamily property.
Note: If the name of a font family is more
than one word, it must be in quotation
marks, like font-family: "Times New Roman".
More than one font family is specified in a
comma-separated list:
43
Web Programming
Times New Roman

Georgia
Arial
Verdana
Courier New
Lucida Console
Monospace
Sans-serif
Eg:
p{font-family:"Times New Roman", Times,
serif;}
44
Web Programming
Font Style
The font-style property is mostly used to
specify italic text.
This property has three values:
normal - The text is shown normally

italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very
similar to italic, but less supported)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
45
Web Programming
Font Size
The font-size property sets the size of the
text.
Setting the text size with pixels, gives you full
control over the text size:
Eg:
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
(16px=1em)
46
Web Programming
An em is equal to the current font-size, for instance,

if the font-size of the document is 12pt, 1em is
equal to 12pt.
Ems are scalable in nature, so 2em would equal
24pt, .5em would equal 6pt
47
Web Programming
Pixels (px):Pixels are fixed-size units that

are used in screen media (i.e. to be read on
the computer screen). One pixel is equal to
one dot on the computer screen (the smallest
division of your screens resolution). Many
web designers use pixel units in web
documents in order to produce a pixel-perfect
representation of their site as it is rendered in
the browser. One problem with the pixel unit is
that it does not scale upward for visuallyimpaired readers or downward to fit mobile
devices.
48
Web Programming
Points (pt):Points are traditionally used in

print media (anything that is to be printed on
paper, etc.). One point is equal to 1/72 of an
inch. Points are much like pixels, in that they
are fixed-size units and cannot scale in size
49
Web Programming
So, Whats the Difference?

Its easy to understand the difference
between font-size units when you see them in
action. Generally,1em = 12pt = 16px =
100%. When using these font-sizes, lets see
what happens when you increase the base
font size (using the body CSS selector) from
100% to 120%.
50
Web Programming
As you can see, both the em and percent units

get larger as the base font-size increases, but
pixels and points do not. It can be easy to set
an absolute size for your text, but its much
easier on your visitors to use scalable text
that can display on any device or any
machine. For this reason, the em and percent
units are preferred for web document text.
51
Web Programming
52
font-style: style {normal, italic, oblique}

font-weight: weight {normal, bold, bolder,
lighter, 100, 200, }
font-size: size
font-family: font_list (in order of precedence,
separated by comma)
Borders
Margins
Padding
List properties
Web Programming
Borders
Box model
describes the rectangular boxes that are
generated for elements
53
Web Programming
Margin - Clears an area around the border.

The margin does not have a background color,
it is completely transparent
Border - A border that goes around the
padding and content. The border is affected
by the background color of the box
Padding - Clears an area around the content.
The padding is affected by the background
color of the box
Content - The content of the box, where text
and images appear
54
Web Programming
Width and Height of an Element

Important: When you set the width and
height properties of an element with CSS, you
just set the width and height of the content
area. To calculate the full size of an element,
you must also add thepadding, borders and
margins.
55
Web Programming
The total width of the element in the example

below is 300px
width:250px;
padding:10px;
border:5px solid gray;
margin:1
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding +

left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom

padding + top border + bottom border + top margin +
bottom margin
56
Web Programming
Margin properties:
margin-top
margin-right
margin-bottom
margin-left
margin
These properties set the top, right, bottom,

and left margin of a box.
Eg: H1 { margin-top: 2em }
57
Web Programming
The margin property is a shorthand property for

setting margin-top, margin-right, marginbottom and margin-left at the same place in
the style sheet.
(top->right->bottom->left)
If there is only one value, it applies to all sides.
If there are two values, the top and bottom
margins are set to the first value and the right
and left margins are set to the second.
If there are three values, the top is set to the first
value, the left and right are set to the second,
and the bottom is set to the third.
58
Web Programming
If there are four values, they apply to the top,

right, bottom, and left, respectively.
Eg:
1) BODY { margin: 2em }
/* all margins
set to 2em */
2) BODY { margin: 1em 2em }
/* top &
bottom = 1em, right & left = 2em */
3) BODY { margin: 1em 2em 3em } /*
top=1em, right=2em, bottom=3em, left=2em
*/
59
Web Programming
The last rule of the example above is

equivalent to the example below:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
/* copied from opposite side
(right) */
60
Web Programming
Border properties
border-top-width ={thin,thick,medium,length}
border-right-width
border-bottom-width
border-left-width
border-width
Border width
These properties set the width of the top,

right, bottom, and left border of a box
61
Web Programming
The border's thickness has an explicit value. Explicit

border widths cannot be negative
Eg:
H1 { border-width: thin }
/* thin thin
thin thin */
H1 { border-width: thin thick }
/* thin
thick thin thick */
H1 { border-width: thin thick medium }
62
Web Programming
63
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
Web Programming
border-style
The border-style property specifies what kind of

border to display
None of the border properties will have ANY effect
unless the border-style property is set!
border-style values:
64
none: Defines no border

dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two
borders are the same as the border-width value
Web Programming
groove: Defines a 3D grooved border. The

effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect
depends on the border-color value
inset: Defines a 3D inset border. The effect
outset: Defines a 3D outset border. The effect
65
Web Programming
Border - Individual sides

In CSS it is possible to specify different
borders for different sides:
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
66
Web Programming
The example above can also be set with a

single property:
Example
border-style:dotted solid;
67
Web Programming
The border-style property can have from one to four values.
border-style:dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
border-style:dotted solid double;
top border is dotted
right and left borders are solid
bottom border is double
border-style:dotted solid;
top and bottom borders are dotted
right and left borders are solid
border-style:dotted;
all four borders are dotted
The border-style property is used in the example above. However, it also

works with border-width and border-color.
68
Web Programming
Border - Shorthand property

To shorten the code, it is also possible to specify
all the individual border properties in one
property. This is called a shorthand property.
The border property is a shorthand for the
following individual border properties:
border:<border-width>|<border-style>|<color>
The 'border' property is a shorthand property for setting the same width, color, and
style for all four borders of a box.
border-width
border-style (required)
border-color
Example
border:5px solid red;
69
Web Programming
<!DOCTYPE html>
<html>
<head>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
70
Web Programming
<p
<p
<p
<p
<p
<p
<p
<p
<p
<p
71
class="none">No border.</p>
class="dotted">A dotted border.</p>
class="dashed">A dashed border.</p>
class="solid">A solid border.</p>
class="double">A double border.</p>
class="groove">A groove border.</p>
class="ridge">A ridge border.</p>
class="inset">An inset border.</p>
class="outset">An outset border.</p>
class="hidden">A hidden border.</p>
Web Programming
Unlike the shorthand 'margin' and 'padding'

properties, the 'border' property cannot set different
values on the four borders. To do so, one or more of
the other border properties must be used.
For example, the first rule below is equivalent to the
set of four rules shown after it:
P { border: solid red }
P{
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
72
Web Programming
CSS Pseudo-classes
CSS pseudo-classes are used to add special effects to some

selectors.
Syntax
The syntax of pseudo-classes:
selector: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 */
73
Web Programming
:first-letter
The :first-letter selector is used to add a style to

the first letter of the specified selector.
Example
Select and style the first letter of every <p>
element:
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
74
Web Programming
Note: The following properties can be used

with :first-letter:
75
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if float is 'none')
text-transform
line-height
float
clear
Web Programming
:first-line Selector
:first-line selector is used to add a style to the first line of the

specified selector.
Note: The following properties can be used with :first-line:
76
font properties
color properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
Web Programming
Example
Select and style the first line of every <p>
element:
p:first-line
{
background-color:yellow;
color:#ff0000;
font-variant:small-caps
}
77
Web Programming
Note: The "first-line" pseudo-element can only be used with

block-level elements.
Note: The following properties apply to the "first-line" pseudoelement:
font properties
color properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
78
Web Programming
CSS - The :before Pseudo-element

The ":before" pseudo-element can be used to
insert some content before the content of an
element.
The following example inserts an image
before each <h1> element:
Example
h1:before
{
content:url(smiley.gif);
}
79
Web Programming
<!DOCTYPE html>
<html>
<head>
<style>
h1:before {content:url(smiley.gif);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an
element.</p>
<p><b>Note:</b> IE8 supports the content property
only if a !DOCTYPE is specified.</p>
</body>
</html>
80
Web Programming
CSS - The :after Pseudo-element

The ":after" pseudo-element can be used to
insert some content after the content of an
element.
The following example inserts an image after
each <h1> element:
Example
h1:after
{
content:url(smiley.gif);
}
81
Web Programming
display property
The display property defines how a certain
HTML element should be displayed.
82
none
The element will not be

displayed at all
box (or flex-box)
The element is displayed as

a block-level flex container
box
block

a block-level element (like
paragraphs and headers)
flex

a block-level flex container
box
inline
This is default. The element

isWeb
displayed
as an inlineProgramming
level element (like span)
list-item
The element is
displayed as a listitem, which means
that it has a bullet in
front of it
table
The element is
displayed as a table
83
Web Programming
<!DOCTYPE html>
<html>
<head>
<style>
p {display:inline}
</style>
</head>
<body>
<p>These two paragraphs generates inline boxes, and it
results in</p>
<p>no distance between the two elements.</p>
</body>
</html>
84
Web Programming
Positioning
The CSS positioning properties allow you to

position an element
There are four different positioning methods.
85
position:static
Postion:relative
Postion:absolut
Postion:fixed
Web Programming
position:static
The default positioning for all elements is position:static,
which means the element is not positioned and occurs
where it normally would in the document.
Normally you wouldn't specify this unless you needed to
override a positioning that had been previously set.
Eg:
.static { position: static; }
<div class="static">staticis the default value. An
element withposition: static;is not positioned in any
special way. A static element is said to benot
positionedand an element with its position set to
anything else is said to bepositioned.
</div>
86
Web Programming
position:relative
If you specify position:relative, then you can

use top or bottom, and left or right to move
the element relative to where it would
normally occur in the document.
Let's
div down
20 pixels,
and
to the left
#div {move
position:relative;
top:20px;
left:-40px;
}
40 pixels:
.relative1 {
Eg: position: relative;
}
.relative2 { position: relative; top: -20px; left: 20px;
background-color: white; width: 500px;
}
87
Web Programming
<div class="relative1">relativebehaves the same asstaticunless you

add some extra properties.
</div>
<div class="relative2">Setting thetop,right,bottom, andleftproperties
of a relatively-positioned element will cause it to be adjusted away from
its normal position. Other content will not be adjusted to fit into any gap
left by the element.
</div>
88
Web Programming
position:absolute
When you specify position:absolute, the
element is removed from the document and
placed exactly where you tell it to go.
Eg: Let's move div a to the top right of the
page:
#div { position:absolute; top:0; right:0;
width:200px; }
89
Web Programming
.relative {
position: relative;
width: 600px;
height:
400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
90
Web Programming
<div class="relative">
This element is relatively-positioned. If this element
wasposition: static;its absolutely-positioned child
would escape and would be positioned relative to the
document body.
<div class="absolute">
This element is absolutely-positioned. It's positioned
relative to its parent.
</div>
</div>
91
Web Programming
An element with fixed position is positioned

relative to the browser window.
It will not move even if the window is scrolled:
Example
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Fixed Positioning
92
Web Programming
When elements are positioned outside the normal flow, they

can overlap with other elements.
The z-index property specifies the stack order of an element

(which element should be placed in front of, or behind, the
others)
Overlapping
Elements
An element can have a positive or negative stack order:
Example
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
93
Web Programming
<!DOCTYPE html>
<html>
<head>
<style>
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the
text.</p>
</body>
</html>
94
Web Programming
CSS
TheLists
CSS list properties allow you to:
Set different list item markers for ordered lists

Set different list item markers for unordered lists
Set an image as the list item marker
List
In HTML, there are two types of lists:
95
unordered lists - the list items are marked with bullets

ordered lists - the list items are marked with numbers or
letters
With CSS, lists can be styled further, and images can be
used as the list item marker.
Web Programming
Different List Item Markers
The type of list item marker is specified with the

list-style-type property:
Example
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
96
Web Programming
An Image as The List Item Marker

To specify an image as the list item marker,
use the list-style-image property:
Example
ul
{
list-style-image: url('sqpurple.gif');
}
97
Web Programming
CSS list-style-position Property
The list-style-position property specifies if the

list-item markers should appear inside or
outside the content flow.
The list-style-position property specifies if the
list-item
markers should appear inside or
ul1{
list-style-type:circle;
outside
the content flow.
list-style-position:inside;
}
Ul2{
list-style-type:circle;
list-style-position:outside;
}
98
Web Programming
side
Indents the marker

and the text. The
bullets appear inside
the content flow
outside
Keeps the marker to

the left of the text.
The bullets appears
outside the content
flow. This is default
99
Web Programming
2 columns - right menu
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
border:1px dashed #999;
background-color:#eee;
}
#Content {
padding:10px;
background-color: #eee;
}
#Menu {
position:absolute;
top:100px;
right:20px;
width:150px;
padding:10px;
}
<body>
<div id="Header">
<h1>Header.com </h1>
</div>
<div id="Content">
<h1>1.
Background</h1>
<p>The Computer Science program was started as one of the streams within the
Department of Mathematics, Faculty of Science, in the early 1980s. As
computers were introduced into governmental and nongovernmental institutions,
the need for trained manpower in Computer Science was very vital. Realizing
the growing need, a diploma program in Computer Science was launched in the
evening program in 1983. In addition, the Department also started to offer
Computer Science as a minor program for Physics, Statistics, and Library Science
students. In 1993, a Degree program in Computer Science was launched.
</p>
<div id="Menu">
<p><a hre="">Link 1</a></p>
</div>
</body>
101
Web Programming
Example: Creating 3 columns - flanking

menu
102
Web Programming
103
Web Programming
.content {
position:relative;
width:auto;
min-width:120px;
border:1px solid black;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#navAlpha {
position:absolute;
width:128px;
top:20px;
left:20px;
border:1px dashed black;
padding:10px;
float:left;
z-index:2;
}
#navBeta {
position:absolute;
width:168px;
top:20px;
right:20px;
border:1px dashed black;
padding:0px;
z-index:1;
}
104
Web Programming
<div id="navAlpha">
</div>
<div class="content">
<h1>1.
Background</h1>
<p>The Computer Science program was started as one of the streams

within the Department of Mathematics, Faculty of Science, in the early
1980s. As computers were introduced into governmental and
nongovernmental institutions, the need for trained manpower in
Computer Science was very vital. Realizing the growing need, a diploma
program in Computer Science was launched in the evening program in
1983. In addition, the Department also started to offer Computer
Science as a minor program for Physics, Statistics, and Library Science
students. In 1993, a Degree program in Computer Science was
launched.
</p>
</div>
105
Web Programming
<p>The Computer Science program was started as one of the streams within
the Department of Mathematics, Faculty of Science, in the early 1980s. As
computers were introduced into governmental and nongovernmental
institutions, the need for trained manpower in Computer Science was very
vital. Realizing the growing need, a diploma program in Computer Science
was launched in the evening program in 1983.
</p>
</div>
<p><a hre="">Some other links can go here..</a></p>
</div>
<div id="navBeta">
</div>
106
Web Programming

Chapter 2b Cascade Style Sheet CSS

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Chapter 2b Cascade Style Sheet CSS

Hochgeladen von

Copyright:

Verfügbare Formate

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

An extension (addition) to HTML which allows

Especially in website maintenance and upgrading

Cascading Style Sheets (CSS):

is a simple mechanism for adding style (e.g.

CSS styles can be specified:

Rules of precedence application:

Inside a single HTML element (inline)

From highest to lowest

A style sheet consists of a set of rules.

selector {property: value;}

Parts of a style rule (or statement)

Guy-Vincent Jourdan :: CSI 3140 ::

The selector is normally the HTML element you

HTML tag names

HTML tag names as selectors

used to override the default attributes of HTML tags

Format: tag_name {property : value}

The class selector

define generic styles that can be applied to different

The class selector is used to specify a style for

In the example below, all HTML elements with

unlike the class selector, the Id selector always

The id selector is used to specify a style for a

Three Ways to Insert CSS

External style sheet

An inline style loses many of the advantages of style sheets by mixing

style information is directly attached to the HTML elements they

higher cascade precedence than the other specification

<tag_name style=property:value; property: value;>

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

<!-- Using inline styles

<html xmlns = "http://www.w3.org/1999/xhtml">

<p>This text does not have any style applied to it.</p>

<!-- inline styles. Separate multiple styles

<!-- with a semicolon.

<p style = "font-size: 20pt">This text has the

<em>font-size</em> style applied to it, making it 20pt.

Internal or Embedded Style Sheets

this method can only specify style information for the

embedded style sheet rule will have higher precedence

Internal / Embedded Style Sheets

Embed an entire CSS document in an XHTML

Multipurpose Internet Mail Extensions (MIME) type

Style properties are defined for:

Existing defined elements, such as p (paragraph), h3

Any existing type of element in the body of the document or

Internal or Embedded Style Sheets

An internal style sheet should be used when a single document has a

defined in the <head> element

Style Sheet Syntax Explained

External Style Sheet

An external style sheet is ideal when the style is

defined in a separate CSS file

An external style sheet can be written in any text

1 /* Fig. 6.4: styles.css

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

<!-- Fig. 6.5: external.html