Transcript Lecture 3

Cascading Style Sheets
INE2720
Web Application Software Development
Essential Materials
Outline – Part A







Introduction to CSS
How do Style Sheets work?
W3C Validation Service
CSS Syntax
Selectors
Specifying style sheet rules
Integrating Style
– External and inline style specifications

Style Sheet Precedence Rules
INE2720 – Web Application Software Development
2
All copyrights reserved by C.C. Cheung 2003.
Outline – Part B

Properties
–
–
–
–


Font, Text style & layout properties
Foreground & background properties
Bounding Box Properties
Border, margin, padding properties
CSS Lists & Cursors
CSS Positioning
– Static, absolute, fixed, relative positioning



Standard Property Units
Netscape LAYERs
Creating layers through style sheets
INE2720 – Web Application Software Development
3
All copyrights reserved by C.C. Cheung 2003.
Outline – Part C

Important Concepts
– Cascading, Inheritance & Selection

Examples
– Converting an existing page
– How to Skin a menu
– Making an input form look good
– Sneaking out of the Box


CSS Tools
CSS Check
INE2720 – Web Application Software Development
4
All copyrights reserved by C.C. Cheung 2003.
Why use CSS?


Traditional HTML approach is to
“hardcode” all the appearance
information into the page.
If you have 100 pages.
– Edit the font and size of heading
– Re-edit and cause errors

Also, ensure the consistency across
the whole website, e.g. Press, …
INE2720 – Web Application Software Development
5
All copyrights reserved by C.C. Cheung 2003.
Benefits of Cascading
Style Sheets


Provides a method for web developers to separate
the appearance & the content of web sites.
Powerful and flexible way to specify the formatting
of HTML elements
–

Share style sheets across multiple documents or
entire Web site
–


Can define font, size, background color, background
image, margins, etc.
Reduce development and maintenance time
Can specify a class definition for a style,
effectively defining new HTML elements
Rules are applied in a hierarchical manner
(precedence rules)
INE2720 – Web Application Software Development
6
All copyrights reserved by C.C. Cheung 2003.
How do Style Sheets
work?

CSS just suggests (not tells) the browser
how to display the content of the HTML file
INE2720 – Web Application Software Development
7
All copyrights reserved by C.C. Cheung 2003.
W3C CSS Validation
http://jigsaw.w3.org/css-validator/
Service
INE2720 – Web Application Software Development
8
All copyrights reserved by C.C. Cheung 2003.
Select an element in the
HTML file

What is the difference between Statement,
selector, declaration and properties?
INE2720 – Web Application Software Development
9
All copyrights reserved by C.C. Cheung 2003.
CSS Example
A single statement
selector
body
{
font-family: Verdana, "Minion Web", Helvetica, sans-serif;
declaration
font-size: 1em;
text-align: justify;
}
/* CSS Comments */
Curly braces
INE2720 – Web Application Software Development
3 properties
10
All copyrights reserved by C.C. Cheung 2003.
CSS Syntax





Statement must have a selector and a
declaration.
Declaration is one or more properties
separated by semicolons “;”.
Property has name and value separated by
colons “:”.
Value may have a unit as well.
White space can improve the readability of
the style sheet.
INE2720 – Web Application Software Development
11
All copyrights reserved by C.C. Cheung 2003.
Cascading Style Sheets


A simple text file with “.css suffix”
CSS, Level 1 (1996)
– Concerned with applying simple styles to HTML elements
– http://www.w3.org/TR/REC-CSS1

CSS, Level 2 (1998)
– Incorporates and extends CSS-1
– Supports media-specific style sheets (visual browsers, aural devices, printers,
braille devices)
– http://www.w3.org/TR/REC-CSS2

CSS, Level 3 (draft 2001)
– Focused on modularization of the CSS specification
– http://www.w3.org/TR/css3-roadmap/

Note:
– CSS1 is supported by Netscape and Internet Explorer 4.x and above
– See http://www.webreview.com/style/css1/charts/mastergrid.shtml for a
summary of browser compatibility
INE2720 – Web Application Software Development
12
All copyrights reserved by C.C. Cheung 2003.
Specifying Style Rules

General form of rule
selector {
property: value; }
selector {
property1: value1;
property2: value2;
...
propertyN: valueN; }
or

Example
H1 {
text-align: center;
color: blue; }
INE2720 – Web Application Software Development
13
All copyrights reserved by C.C. Cheung 2003.
CSS1 & CSS 2 Selectors










HTML element selectors
Class selectors
ID selectors
Contextual selectors
Link pseudo class selectors
Pseudo element selectors
Selector groups
Dynamic pseudo class selectors
Child selectors
More advanced selectors …
INE2720 – Web Application Software Development
14
All copyrights reserved by C.C. Cheung 2003.
Selectors

HTML element selectors
– Select any of the elements on a page.
– E.g. <p> tag


The selector is “p”
Class selectors
– The control by HTML element selectors is very
powerful (over page design), but what if you
want to change a specific paragraph or a few
paragraphs?
– E.g. you can create 2 specific paragraphs.


.question {font-weight: bold;},
p.question {font-weight: bold;},
INE2720 – Web Application Software Development
15
.answer {font-weight: 400;}
p.answer {font-weight: 400;}
All copyrights reserved by C.C. Cheung 2003.
HTML (Tag) Selector



Universal Selector - * { color: blue; }
Selector { Property: Value; }
It is used when you want to redefine the general
look for an entired HTML tag.
<HTML>
<HEAD>
<style type="text/css">
b {font-family:arial; font-size:14px; color:red;}
</style>
</HEAD>
<BODY>
<b>This is a customized headline style bold</b>
</BODY>
</HTML>
INE2720 – Web Application Software Development
16
All copyrights reserved by C.C. Cheung 2003.
Class selectors

To define an element style class proceed the HTML
element by a period “.” and class name “name”
// Define an "abstract" paragraph type
p.abstract {
margin-left: 0.5in;
margin-right: 0.5in;
font-style: italic; }

To use, supply the name of the style class in the
CLASS attribute of the HTML element
<h1>New Advances in Physics</h1>
<p class="abstract">
This paper gives the solution to three previously
unsolved problems: turning lead into gold,
antigravity, and a practical perpetual motion machine.
</p>
INE2720 – Web Application Software Development
17
All copyrights reserved by C.C. Cheung 2003.
Defining Style Classes

To define a global style class, omit the
element name
// Style available to all elements
.blue { color: blue; font-weight: bold }

To use, simple specify the style class in the
CLASS attribute of the HTML element
<h2 CLASS="blue">A Blue Heading</h2>
<!-- Apply to a section of text -->
This text is in the default color, but
<SPAN CLASS="blue">this text is blue.</SPAN>
INE2720 – Web Application Software Development
18
All copyrights reserved by C.C. Cheung 2003.
Class Selectors


.ClassSelector {Property: Value;}
It is used when you want to define a style
that does not redefine an HTML tag entirely.
<HTML>
<HEAD>
<style type="text/css">
.headline {font-family:arial; font-size:14px; color:red}
</style>
</HEAD>
<BODY>
<b class="headline">This is a bold tag carrying the headline class</b>
<br>
<i class="headline">This is an italics tag carrying the headline class</i>
</BODY>
</HTML>
INE2720 – Web Application Software Development
19
All copyrights reserved by C.C. Cheung 2003.
ID selectors

An ID is like a class but can be applied only once in
a document
<HEAD>
<TITLE>...</TITLE>
<STYLE TYPE="text/css">
<!-#foo { color: red }
-->
</STYLE>
</HEAD>
<BODY>
...
<P ID="foo">
...
</p>
</BODY>
INE2720 – Web Application Software Development
20
All copyrights reserved by C.C. Cheung 2003.
ID Selectors

#IDSelector {Property: Value;}
<HTML>
<HEAD>
<style type="text/css">
#layer1 {position:absolute; left:100;top:100; z-Index:0}
#layer2 {position:absolute; left:140;top:140; z-Index:1}
</style>
</HEAD>
<BODY>
<div ID="layer1">
<table border="1" bgcolor="#FFCC00"><tr><td>LAYER 1<br>at 100,100</td></tr></table>
</div>
<div ID="layer2">
<table border="1" bgcolor="#00CCFF"><tr><td>LAYER 2<br>at 140,140</td></tr></table>
</div>
</BODY>
</HTML>
INE2720 – Web Application Software Development
21
All copyrights reserved by C.C. Cheung 2003.
Selectors

Contextual selectors
– Provide fine tuned over the HTML elements




E.g. h1 strong {text-decoration: underline}
Select “<h1> … <strong> selected </strong> … </h1>”
This selects any strong element inside a heading of level 1.
Link pseudo class selectors
–
–
–
–
–
Selector for normal links is a:link
Visited links is a:visited
Hover links is a:hover
Active links is a:active
E.g. a.offsite:hover {color: green;}
INE2720 – Web Application Software Development
22
All copyrights reserved by C.C. Cheung 2003.
Pseudo-Class and
Pseudo-element

Pseudo-class selector
– Based on a set of predefined qualities that an
HTML element can possess.
– No actual class attributes exist in the markup.
– :active, :first-child, :focus
– :hover, :link, :visited

Pseudo-element selector
– Identify a virtual element that doesn’t exist in
the markup.


:before, :after, :first-letter, :first-line
E.g. p:first-child:first-line { font-size: larger; }
INE2720 – Web Application Software Development
23
All copyrights reserved by C.C. Cheung 2003.
CSS Links
Property
Values
a:link
Define the style for unvisited links
a:visited
Define the style for visited links
a:active
Define the style for active link (when you click on it)
a:hover
Define the style for hovered link (when mouse move over it)
Hover
<style type="text/css">
.class1 A:link {text-decoration: none}
.class1 A:visited {text-decoration: none}
.class1 A:active {text-decoration: none}
.class1 A:hover {text-decoration: underline; color: red;}
Background colored link
.class2 A:link {background: #FFCC00; text-decoration: none}
.class2 A:visited {background: #FFCC00; text-decoration: none}
.class2 A:active {background: #FFCC00; text-decoration: none}
.class2 A:hover {background: #FFCC00; font-weight:bold; color: red;}
</style>
INE2720 – Web Application Software Development
24
All copyrights reserved by C.C. Cheung 2003.
Selectors

Pseudo element selectors
– Usually the first letter and the first line of
a paragraph is different from the rest.
– E.g. blockquote:first-line, p:first-letter

Selector groups
– Simply a list of selectors separated by
commas.
– E.g. a:link, a:visited, a:active, a:hover {font: Times serif;}
INE2720 – Web Application Software Development
25
All copyrights reserved by C.C. Cheung 2003.
Selector Groups

Without Grouping
.headlines{font-face:arial; color:black; background:yellow; font-weight:bold; font-size:14pt;}
.sublines {font-face:arial; color:black; background:yellow; font-weight:bold; font-size:12pt;}
.infotext {font-face:arial; color:black; background:yellow; font-weight:bold; font-size:10pt;}

Grouping
– Used when different selectors shared the
same style.
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
INE2720 – Web Application Software Development
26
All copyrights reserved by C.C. Cheung 2003.
Dynamic pseudo class
selectors

Apply to any element (not only links) in the
– Active state

While the mouse is being clicked on the selected
element.
– Hover state

While the mouse is over the selected element.
– Focus state

While the selected element has the keyboard focus.
– E.g. change the background color of a paragraph
while the mouse is over it.

p:hover
INE2720 – Web Application Software Development
27
All copyrights reserved by C.C. Cheung 2003.
Child selectors

Consider the contextual selector, no matter
how deeply nested, “div strong” will select
<strong> elements inside <div>
– <div><p> … <strong>selected</strong>…</p></div>
– <div> … <strong>selected</strong>…</div>

Can we select the <strong> element directly
inside <div>?
– “div>strong” can help!
– <div><p> … <strong>not selected</strong>…</p></div>
– <div> … <strong>selected</strong>…</div>
INE2720 – Web Application Software Development
28
All copyrights reserved by C.C. Cheung 2003.
Fizzics1.html, Example
(no style sheet)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Advances in Physics</TITLE>
</HEAD>
<BODY>
<H1>New Advances in Physics</H1>
<H2>Turning Gold into Lead</H2>
In a startling breakthrough, scientist B.O. "Gus" Fizzics
has invented a <STRONG>practical</STRONG> technique for
transmutation! For more details, please see
<A HREF="give-us-your-gold.html">our transmutation thesis</A>.
...
</BODY>
</HTML>
INE2720 – Web Application Software Development
29
All copyrights reserved by C.C. Cheung 2003.
Fizzics1.html, Result
(no style sheet)
INE2720 – Web Application Software Development
30
All copyrights reserved by C.C. Cheung 2003.
Fizzics2.html, Example
(with style sheet)

Style information
<HEAD>
<TITLE>Document Title</TITLE>
<STYLE TYPE="text/css">
<!-BODY { background: URL(images/confetti-background.jpg); }
H1 { text-align: center;
font-family: Blackout; }
H2 { font-family: MeppDisplayShadow; }
STRONG { text-decoration: underline; }
-->
</STYLE>
</HEAD>
INE2720 – Web Application Software Development
31
All copyrights reserved by C.C. Cheung 2003.
Fizzics2.html, Result
(with style sheet)
INE2720 – Web Application Software Development
32
All copyrights reserved by C.C. Cheung 2003.
How to Select, inherit?
<html>
<head>
<title>
<body>
<h1>
<i>
<p>
INE2720 – Web Application Software Development
33
All copyrights reserved by C.C. Cheung 2003.
Where to Place it?

We can add CSS to our pages at three
different levels.
– Single Tag CSS

When the style is used in a single place of your site.
– Add style for the entire page

When the style appears more than once of your pages.
– Add style for the entire site

When the style is used for more than one page.
INE2720 – Web Application Software Development
34
All copyrights reserved by C.C. Cheung 2003.
External Style Sheets
Specify link to external style sheet in the HEAD section of the
HTML document
Simplify the site maintenance.


<
link rel="stylesheet"
href="Sitestyle.css" // Absolute or relative link
type="text/css“
>
Sitestyle.css

/* Example of an external style sheet */
H1 {
}
H2 {
}
...
text-align: center;
font-family: Arial ;
color: #440000;
text-align: center;
font-family: Arial Black, Arial, Helvetica, sans-serif;
INE2720 – Web Application Software Development
35
All copyrights reserved by C.C. Cheung 2003.
External Style Sheet Entire Site

Write the entire CSS definition to an external text file.
<html>
<head>
<title>CSS Single Page</title>
<link rel=“stylesheet” href=“entire_site.css" type="text/css">
</head>
<body>
<span class="headlines">Welcome to our example</span><br>
<div class="sublines">
This is an example page using CSS.<br>
</div>
</body>
</html>
<entire_site.css>
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
INE2720 – Web Application Software Development
36
All copyrights reserved by C.C. Cheung 2003.
Embedded Style Sheets Single Page


Simply add definition in the head section.
Page becomes more compact, loads faster.
<html>
<head>
<title>CSS Single Page</title>
<style type="text/css"> <!-.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
--> </style>
</head>
<body>
<span class="headlines">Welcome to our example</span><br>
<div class="sublines">
This is an example page using CSS.<br>
</div>
</body>
</html>
INE2720 – Web Application Software Development
37
All copyrights reserved by C.C. Cheung 2003.
Inline Style Specification


Use the STYLE attribute defined for each
HTML element to directly specify the style
Example
...
<H1>New Advances in Physics</H1>
<P STYLE=“ margin-left: 0.5in;
margin-right: 0.5in;
font-style:
italic;”>
This paper gives the solution to three
previously unsolved problems: turning lead into gold,
antigravity, and a practical perpetual motion machine.
...
INE2720 – Web Application Software Development
38
All copyrights reserved by C.C. Cheung 2003.
Style Sheet Precedence
Rules
1.
Rules marked “important” have the highest
priority (rarely used), overrides the normal
order of cascade.
H1 { color: black !important;
font-family: sans-serif; }
2.
Author rules have precedence over reader
rules
•
Style sheet rules override browser preferences
INE2720 – Web Application Software Development
39
All copyrights reserved by C.C. Cheung 2003.
Style Sheet Precedence
Rules, cont.
3.
More specific rules have precedence
over less specific rules
#foo { ... }
// ID selector highest priority
P.big H1 { ... } // Class or Pseudo-class higher
over element
P STRONG { ... } // Two tags higher than single tag
STRONG { ... }
4.
In case of tie, the last rule has priority
• Declared most recently has the highest
priority.
INE2720 – Web Application Software Development
40
All copyrights reserved by C.C. Cheung 2003.
Outline – Part B

Properties
–
–
–
–


Font, Text style & layout properties
Foreground & background properties
Bounding Box Properties
Border, margin, padding properties
CSS Lists & Cursors
CSS Positioning
– Static, absolute, fixed, relative positioning



Standard Property Units
Netscape LAYERs
Creating layers through style sheets
INE2720 – Web Application Software Development
41
All copyrights reserved by C.C. Cheung 2003.
CSS Properties





It is a straightforward subject.
But, how can we apply the properties?
What kind of properties can we use?
The fun part  how to make your
sites become more sophisticated?
It has the following form
– A property NAME followed by a VALUE
INE2720 – Web Application Software Development
42
All copyrights reserved by C.C. Cheung 2003.
Property Categories









Text style – Fonts properties, …
Text layout – Text alignments, …
Foreground & Background
Border
Margin
Padding
Page layout
Element type
User interface
INE2720 – Web Application Software Development
43
All copyrights reserved by C.C. Cheung 2003.
Text Style Properties

How text appears on the page?
– Color, font-weight,
– font-family, font-size
– Font-style, text-decoration,
– text-transform, text-shadow,
– font-size-adjust, font-stretch
INE2720 – Web Application Software Development
44
All copyrights reserved by C.C. Cheung 2003.
Useful Font Properties

font-weight
– Relative weight (boldness) of font
– normal | lighter | bold | bolder | 100 | 200 | ... | 900
H1 { font-weight : 200 }
H2 { font-weight : bolder }

font-style
– Font face type within a family
– normal | italic | oblique
P { font-style : normal }
TH { font-style : italic }
INE2720 – Web Application Software Development
45
All copyrights reserved by C.C. Cheung 2003.
Useful Font Properties,
cont.

font-size
– Either relative or absolute size of font
– pt, pc, in, cm, mm | em, ex, px, % |
xx-large | x-large | large | medium | small | x-small |
xx-small | smaller | larger
STRONG { font-size: 150% }
P { font-size: 14pt }
P { font-size: xx-large }

font-family
– Typeface family for the font
H1 { font-family: Arial }
INE2720 – Web Application Software Development
46
All copyrights reserved by C.C. Cheung 2003.
Font Property
Property
Values
Example
font-family
Font name
font-family: arial
font-style
Italic
font-style: italic
font-variant
Normal
font-variant: normal
font-weight
Bold
font-weight: bold
font-size
large
font-size:large
Example
b {
font-family:Arial, Helvetica;
font-size:12px;
font-weight:bold;
}INE2720 – Web Application Software Development
47
All copyrights reserved by C.C. Cheung 2003.
CampBearClaw.html,
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Camp Bear Claw</TITLE>
<LINK REL=STYLESHEET HREF="CampBearClaw.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Camp Bear Claw</H1>
We have the following activities:
<H2 CLASS="archery">Archery</H2>
<H2 CLASS="arts">Arts and Crafts</H2>
<H2 CLASS="horseback">Horseback Riding</H2>
<H2 CLASS="hiking">Hiking</H2>
<H2 CLASS="campfire">Campfire Song Times</H2>
<H2 CLASS="java">Java Programming</H2>
</BODY>
</HTML>
INE2720 – Web Application Software Development
48
All copyrights reserved by C.C. Cheung 2003.
CampBearClaw.css
H1 { text-align: center; font-family: Funstuff; }
H2.archery { font-family: ArcheryDisplay; }
H2.arts { font-family: ClampettsDisplay; }
H2.horseback { font-family: Rodeo; }
H2.hiking { font-family: SnowtopCaps; }
H2.campfire { font-family: Music Hall; }
H2.java { font-family: Digiface; }
INE2720 – Web Application Software Development
49
All copyrights reserved by C.C. Cheung 2003.
CampBearClaw.html, Result
INE2720 – Web Application Software Development
50
All copyrights reserved by C.C. Cheung 2003.
Text layout properties

How text itself is layout on a page?
–
–
–
–
–
–
–
Letter-spacing
Word-spacing
Line-height
Vertical-align
Text-indent
Text-align
Direction
INE2720 – Web Application Software Development
51
All copyrights reserved by C.C. Cheung 2003.
Useful Text Properties

text-decoration
– Describes text additions or “decorations” that are added to
the text of an element
– none | underline | overline | line-through | blink
P { text-decoration: underline; }

vertical-align
– Determines how elements are positioned vertically
– top | bottom | baseline | middle | sub | super | text-top |
text-bottom | %

text-align
– Determines how paragraphs are positioned horizontally
– left | right | center | justify
INE2720 – Web Application Software Development
52
All copyrights reserved by C.C. Cheung 2003.
Useful Text Properties,
cont.

text-indent
– Specifies the indentation of the first line of the paragraph
– +/– pt, pc, in, cm, mm | +/– em, ex, px, %
P { text-indent: -25px } /* Hanging indent */

line-height
– Specifies the distance between two consecutive baselines
in a paragraph
– normal | number | pt, pc, in, cm, mm | em, ex, px, %
.double { line-height: 200% }
.triple { line-height: 3 } /* 3x the font size */
DIV { line-height: 1.5em }
INE2720 – Web Application Software Development
53
All copyrights reserved by C.C. Cheung 2003.
Bates.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>An Open Letter to the IRS</TITLE>
<LINK REL=STYLESHEET HREF="Bates.css" TYPE="text/css">
</HEAD>
<BODY BACKGROUND="images/bond-paper.jpg">
<P CLASS="rhead">
April 1, 2001
<HR>
<P CLASS="rhead">
William A. Bates<BR>
Macrosoft Corporation<BR>
Blumond, WA 12345
<P CLASS="lhead">
Internal Revenue Service<BR>
Philadelphia, PA 67890
<P>
<BR>
Dear Sirs,
<P CLASS="body">
I
am writing to inform you that, due to54financial difficulties,
...by C.C. Cheung 2003.
All copyrights reserved
INE2720 – Web Application Software Development
Bates.css
P {
margin-top:
P.rhead { text-align:
margin-right:
font-family:
P.lhead { font-family:
P.body { text-align:
text-indent:
P.foot { margin-left:
line-height:
INE2720 – Web Application Software Development
55
5px }
right;
0.5in;
sans-serif }
sans-serif }
justify;
0.5in }
60%;
300% }
All copyrights reserved by C.C. Cheung 2003.
Bates.html
INE2720 – Web Application Software Development
56
All copyrights reserved by C.C. Cheung 2003.
Background Properties

How the background of an element
appears?
– Background-color
– Background-image
– Background-attachment
– Background-repeat
– Background-position
– background
INE2720 – Web Application Software Development
57
All copyrights reserved by C.C. Cheung 2003.
Useful Foreground and
Background Properties

color
– Color of the text or foreground color
– color-name | #RRGGBB | #RGB | rgb(rrr, ggg, bbb) |
rgb(rrr%, ggg%, bbb%)
P { color : blue;}
H1 { color : #00AABB;}
H3 { color : rgb(255, 0, 0 );} /* red */

background-image
– none | url(filename)
– Specifies an image to use as the background of region
H2 { background-image: url(Bluedrop.gif); }
INE2720 – Web Application Software Development
58
All copyrights reserved by C.C. Cheung 2003.
Useful Foreground and
Background Properties, cont.

background-repeat
– Specifies how to tile the image in the region
– repeat | repeat-x | repeat-y | norepeat
BODY {
background-image: url(Bluedot.gif);
background-repeat: repeat-x;
}

background
– Lets you combine properties in a single entry
P { background: url(wallpaper.jpg) repeat-x; }
INE2720 – Web Application Software Development
59
All copyrights reserved by C.C. Cheung 2003.
Cabinets.html, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Joe's Cabinets</TITLE>
<LINK REL=STYLESHEET HREF="Cabinets.css" TYPE="text/css">
</HEAD>
<BODY>
<CENTER>
<TABLE WIDTH=360 HEIGHT=199>
<TR><TD ALIGN="CENTER" CLASS="banner">Joe's Cabinets
</TABLE>
</CENTER>
<P>
Welcome to Joe's Cabinets. We specialize in
<UL>
<LI>Custom Cabinets
<LI>Kitchen Remodeling
<!-- Etc -->
</UL>
<!-- Etc -->
</BODY>
</HTML>
60
All copyrights reserved by C.C. Cheung 2003.
INE2720 – Web Application Software Development
Cabinets.css
.banner {
background:url(images/boards.jpg)
repeat-x;
font-size: 50pt;
font-family: Arial Rounded MT Bold;
}
INE2720 – Web Application Software Development
61
All copyrights reserved by C.C. Cheung 2003.
Cabinets.html, Result
INE2720 – Web Application Software Development
62
All copyrights reserved by C.C. Cheung 2003.
Border Properties

Any element may have a varying widths
border and every border can has its own
color and style.
–
–
–
–
–
–
–
Border-top-width
Border-right-width
Border-bottom-width
Border-left-width
Border-width
Border-color
Border-style
INE2720 – Web Application Software Development
63
All copyrights reserved by C.C. Cheung 2003.
Margin & Padding Properties

Margin is the space between an
element and the elements to its top,
left, bottom and right.
– Margin-top, margin-left, …

Padding is the space between the
edge of an elements (border) and its
contents.
– Padding-top, padding-left, …
INE2720 – Web Application Software Development
64
All copyrights reserved by C.C. Cheung 2003.
Box Display Properties

Margin, border, padding and content
margin
border
padding
This is the Content
padding
border
margin
INE2720 – Web Application Software Development
65
All copyrights reserved by C.C. Cheung 2003.
Properties of the
Bounding Box


CSS assume that all elements result in one
or more rectangular regions (bounding box)
Styles can specify the margins, borders,
and padding of the bounding box
P
{
margin: 0.25in;
border: 0.25in solid black;
padding: 0.25in;
background: URL(images/bond-paper.jpg);
}
INE2720 – Web Application Software Development
66
All copyrights reserved by C.C. Cheung 2003.
The Bounding Box
INE2720 – Web Application Software Development
67
All copyrights reserved by C.C. Cheung 2003.
Images and Floating
Elements

width, height
– Specify a fixed size for an element (usually an
image)
– auto | pt, pc, in, cm, mm | em, ex, px
IMG.bullet { width: 50px; height: 50px; }

float
– This property lets elements float into the left or
right margins where the text wrapping around
– none | left | right
INE2720 – Web Application Software Development
68
All copyrights reserved by C.C. Cheung 2003.
Psalm23.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>The 23rd Psalm</TITLE>
<STYLE>
<!-SPAN { float: left;
font-family: "Cushing Book";
font-size: 75pt;}
-->
</STYLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">
The 23rd Psalm (King James Version)</H2>
<SPAN>T</SPAN>he LORD is my shepherd; I shall not want.
He maketh me to lie down in green pastures: he leadeth me
beside the still waters. He restoreth my soul: he leadeth me
in
the paths of righteousness for 69his name's sake.
Yea,
All copyrights reserved by C.C. Cheung 2003.
INE2720 – Web Application Software Development
Psalm23.html, Result
The float property can be used
to implement “drop capital”
INE2720 – Web Application Software Development
70
All copyrights reserved by C.C. Cheung 2003.
Effect of Paragraph
Breaks, Example, cont.
Adding a <P> element simply
continues the flow
INE2720 – Web Application Software Development
Adding <P STYLE="clear: left">
forces the next paragraph to start after
the floating element
71
All copyrights reserved by C.C. Cheung 2003.
Netscape Layers

Layers (LAYER and ILAYER elements) allow
you to:
– Place HTML markup in separate regions
– Position each region on the page

LAYER and ILAYER are only supported in
Netscape 4
– Layers are not supported in Internet Explorer or
Netscape 6
– http://wp.netscape.com/download/archive.html
INE2720 – Web Application Software Development
72
All copyrights reserved by C.C. Cheung 2003.
LAYER and ILAYER

LAYER element
– The LAYER element creates regions that
have an absolute position with respect to
the window or parent layer

ILAYER
– The ILAYER element creates inline layers
(regions that are embedded in the flow of
the text)
INE2720 – Web Application Software Development
73
All copyrights reserved by C.C. Cheung 2003.
LAYER, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Using ABOVE and BELOW</TITLE>
</HEAD>
<BODY>
<H1>Using <CODE>ABOVE</CODE> and <CODE>BELOW</CODE></H1>
<LAYER ID="Top" LEFT=60 TOP=120
WIDTH=500 HEIGHT=100 BGCOLOR="#F5DEB3">
This layer is on top, even though it appears
first in the HTML document.
</LAYER>
<LAYER ID="Bottom" ABOVE="Top" LEFT=10 TOP=70
WIDTH=500 HEIGHT=100 BGCOLOR="gray">
This layer is on the bottom, even though it appears
second in the HTML document.
</LAYER>
</BODY>
</HTML>
74
All copyrights reserved by C.C. Cheung 2003.
INE2720
– Web Application Software Development
LAYER, Result
Netscape 4 layers can specify the relative order of the layers.
INE2720 – Web Application Software Development
75
All copyrights reserved by C.C. Cheung 2003.
ILAYER, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Row, Row, Row Your Boat</TITLE>
</HEAD>
<BODY>
<IMG SRC="images/Rowboat.gif" ALIGN="RIGHT">
<HR>
<B>Row, Row, Row Your Boat</B><BR>
Row, row, row your boat<BR>
Gently
<ILAYER TOP=10>down</ILAYER>
<ILAYER TOP=20>the</ILAYER>
<ILAYER TOP=30>stream<BR>
Merrily, merrily, merrily, merrily<BR>
Life is but a dream<BR>
<HR>
</ILAYER>
</BODY>
76
All copyrights reserved by C.C. Cheung 2003.
INE2720 – Web Application Software Development
</HTML>
ILAYER, Result
Using TOP in ILAYER can move text up or down in the
current paragraph.
INE2720 – Web Application Software Development
77
All copyrights reserved by C.C. Cheung 2003.
Specifying Layers with
Style Sheets

Style sheets provide an alternative to LAYER and
ILAYER elements
– Style sheet layers are supported by both Netscape and
Internet Explorer
– However, Netscape layers are more complete

No equivalent style for PAGEX and PAGEY for positioning
– Horizontal and vertical positions of the layer relative to the
document’s window

Problem
– Netscape and IE use a different object model to refer to
layers
– See http://www.stopbadtherapy.com/standards.shtml for
creating cross-browser layers
INE2720 – Web Application Software Development
78
All copyrights reserved by C.C. Cheung 2003.
Creating a Style Sheet Layer

Use an ID tag format to define a style
#layer1 { position: absolute;
left: 50px;
top: 75px; ... }

Define the layer through a DIV or SPAN element
<SPAN ID="layer1">
...
</SPAN>
<DIV ID="layer2">
...
</DIV>
INE2720 – Web Application Software Development
79
All copyrights reserved by C.C. Cheung 2003.
SPAN and DIV


<SPAN>
– is an "inline-tag" in HTML, meaning that no line
breaks are inserted before or after the use of it.
<DIV>
– is a "block tag", meaning that line breaks are
automatically inserted to distance the block from
the surrounding content (like <P> or <TABLE>
tags).
– The whole block can be easily positioned on the
page.
INE2720 – Web Application Software Development
80
All copyrights reserved by C.C. Cheung 2003.
CSS Positioning

Static positioning
– A web browser gets the HTML file, parses it into elements,
apply styles. It is how pages are laid out by the browser.

Absolute positioning
– An element will be located with respect to its parent
element.

Fixed positioning
– The page scroll, the elements also scroll (remain fixed in
the page).

Relative positioning
– Places an element with respect to where it would statically
be positioned (i.e. relative to the positive assigned by the
browser).
INE2720 – Web Application Software Development
81
All copyrights reserved by C.C. Cheung 2003.
Useful Layer Properties

left, top
– Specifies the left and top sides of the layer
relative to the parent window

position
– Describes how the position is defined to the
parent window
– absolute, relative, static

visibility
– Determines whether a layer is visible or hidden
– visible, hidden, inherit
INE2720 – Web Application Software Development
82
All copyrights reserved by C.C. Cheung 2003.
Dynamically Changing a
Layer’s Visibility, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<TITLE>Changing Visibility Dynamically</TITLE>
<STYLE>
<!-#layer1 { position: absolute; left: 0.25in; top: 1.5in;
color: black; background-color: #F5DEB3;
visibility: hidden; }
#layer2 { position: absolute; left: 0.25in; top: 1.5in;
color: #F5DEB3; background-color: black;
visibility: hidden; }
H1 {
text-align: center;
font-family: Arial; }
FORM { text-align: center; }
-->
</STYLE> ...
INE2720 – Web Application Software Development
83
All copyrights reserved by C.C. Cheung 2003.
Dynamically Changing a
Layer’s Visibility, Example
<SCRIPT TYPE="text/javascript">
<!-function display(value1, value2){
if(document.layers) { // Test for Netscape.
document.layers.layer1.visibility = value1;
document.layers.layer2.visibility = value2;
} else {
document.all.layer1.style.visibility = value1;
document.all.layer2.style.visibility = value2;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="WHITE">
<H1>Changing Visibility Dynamically</H1>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Show Layer1"
onClick="display('visible', 'hidden')">
<INPUT TYPE="BUTTON" VALUE="Show Layer2"
onClick="display('hidden', 'visible')">
</FORM>...
84
INE2720 – Web Application Software Development
All copyrights reserved by C.C. Cheung 2003.
Dynamically Changing a
Layer’s Visibility, Example
...
<DIV ID="layer1">
<H1>This is layer1.</H1>
</DIV>
<DIV ID="layer2">
<H1>This is layer2.</H1>
</DIV>
</BODY>
</HTML>
INE2720 – Web Application Software Development
85
All copyrights reserved by C.C. Cheung 2003.
Dynamically Changing a
Layer’s Visibility, Result
Selecting a button displays a hidden layer.
INE2720 – Web Application Software Development
86
All copyrights reserved by C.C. Cheung 2003.
Length Units
Unit name
Abbreviation
Meaning
Em
Em
The height of a font
Yes
Ex
Ex
The height of the letter x in a font
Yes
Pica
Pc
1 pica is 12 points
No
Point
Pt
1/72 of an inch
No
Pixel
Px
One dot on a screen
No
Millimeter
Mm
Printing unit
No
Centimeter
Cm
Printing unit
No
Inch
In
Printing unit
no
INE2720 – Web Application Software Development
87
Relative?
All copyrights reserved by C.C. Cheung 2003.
Element Type Properties

You can specify the display properties
for different types of element.
– Set the type of bullet for a list item.
– Display
– White-space
– List-style-type
– List-style-image
– List-style-position
INE2720 – Web Application Software Development
88
All copyrights reserved by C.C. Cheung 2003.
CSS Lists
<html><head>
<style type="text/css">
li.list1 {list-style: circle outside; color:green;}
li.list2 {list-style: square inside; color:blue;}
.blacktext {color:black;}
</style>
</head>
<body>
<ul><li class="list1"><span class="blacktext">This is one black line</span>
<li class="list1">This is another line (not black line).</ul>
<br>
<ul><li class="list2"><span class="blacktext">This is one black line</span>
<li class="list2">This is another line (not black line).</ul>
</body></html>
Property
Values
List-style type
Define the look of the bullets in your list
List-style image
Allow you to use a custom graphic for bullets
List-style position
List-style position:outer – the second line align with the first line.
List-style position:inner – the second line align with the bullet.
INE2720 – Web Application Software Development
89
All copyrights reserved by C.C. Cheung 2003.
CSS Lists
INE2720 – Web Application Software Development
90
All copyrights reserved by C.C. Cheung 2003.
User Interface Properties

Allow the shape of the cursor to be set
– Changing cursors




Pointer
Wait
East, West
Introduce the system font concept
@font-face {
font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt");
}
INE2720 – Web Application Software Development
91
All copyrights reserved by C.C. Cheung 2003.
CSS Cursors
<html>
<head>
<title>Changing Cursors</title>
<style type="text/css">
h3 { margin: 0.5em; padding: 0.25em;
text-align: center;
background-color: silver; color: black; }
</style>
</head>
<body>
<table width="100%"><tr><td valign="top">
<h3 style="cursor: crosshair;">Crosshair</h3>
<h3 style="cursor: default;">Default</h3>
<h3 style="cursor: help;">Help</h3>
<h3 style="cursor: move;">Move</h3>
<h3 style="cursor: pointer;">Pointer</h3>
<h3 style="cursor: text;">Text</h3>
<h3 style="cursor: wait;">Wait</h3>
<h3 style="cursor: url('maus.cur'),
url('maus.tiff'),
url('maus.gif'), auto;">URL</a>
</td><td valign="top"> …
INE2720 – Web Application Software Development
92
All copyrights reserved by C.C. Cheung 2003.
CSS Cursors
INE2720 – Web Application Software Development
93
All copyrights reserved by C.C. Cheung 2003.
Property value

Major kinds of value are:
– Length

Can be positive or negative
– Percentage

p {width: 75%;}
– Color

Color keywords, hex, rgb colors
– url

url(http://www.test.com/test.gif), or local files
– Keyword

Bold, small, …
INE2720 – Web Application Software Development
94
All copyrights reserved by C.C. Cheung 2003.
CSS Compatibility
INE2720 – Web Application Software Development
95
Reference
All copyrights reserved by C.C. Cheung 2003.
User Style Sheets


Create by the user
and store on the
local computer.
It is especially
useful for some
people, including
those with visual
disabilities.
INE2720 – Web Application Software Development
96
All copyrights reserved by C.C. Cheung 2003.
Outline – Part C

Important Concepts
– Cascading, Inheritance & Selection

Examples
– Converting an existing page
– How to Skin a menu
– Making an input form look good
– Sneaking out of the Box


CSS Tools
CSS Check
INE2720 – Web Application Software Development
97
All copyrights reserved by C.C. Cheung 2003.
Cascade & Inheritance


The style sheets can be linked
together to create a hierarchy, and this
process of linking is called cascading.
If you set a font-family property on
the “body” element, all the other
elements on the page will also have
the same value (unless it is set by
other rules).
– Notice that not all properties will inherit.
INE2720 – Web Application Software Development
98
All copyrights reserved by C.C. Cheung 2003.
CSS Examples




How to convert an existing page?
How to skin a Menu?
How to improve the outlook of an
input form?
How to put your articles into different
boxes in a fancy way?
INE2720 – Web Application Software Development
99
All copyrights reserved by C.C. Cheung 2003.
Converting an existing page
Demo!
INE2720 – Web Application Software Development
100
All copyrights reserved by C.C. Cheung 2003.
Example 1: Style Sheet



























<style type="text/css">
body {margin: 4px; color: black; background: white;}
table {width: 100%; margin: 0;}
table td {padding: 0; border-width: 0; vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;}
a:link {color: #990000;}
a:visited {color: #990099;}
td#title {vertical-align: bottom; color: #442200;
background: transparent url(topbg.gif) top left;
font: bold 200% Arial, Helvetica, Verdana, sans-serif;}
td#advert {width: 234px;}
#content-top td {vertical-align: middle; color: white;
font-weight: bold; padding: 0.1em 0.2em 0;}
tr td#sidetop {background: #663300;
font: bold 115% Arial, Helvetica, Verdana, sans-serif;}
tr td#crumbs {background: #997753; font-size: 85%;}
tr td#crumbs a:link {color: white;}
tr td#crumbs a:visited {color: gray;}
td#leftside {width: 120px; background: #EBDAC6;}
td#leftside td {border-bottom: 1px solid #A98763; font-size: 85%;
padding: 0 0 1px 0.33em;}
td#leftside table {margin-top: 3px;}
td#content {padding: 17px 42px;}
td#content p {font: 85% Arial, Helvetica, Verdana, sans-serif;}
h1 {font: bold 150% Arial, Helvetica, Verdana, sans-serif;
color: #602020; border-bottom: 3px solid #804040;
padding-bottom: 2px;}
INE2720 – Web Application Software Development





















div.pullquote {float: right; width: 140px; color: #A09080;
border: solid #908070; border-width: 7px 0;
font: bold 1em Arial, Helvetica, Verdana, sans-serif;
padding: 3px 2px; margin: 1px 7px;}
td#rightside {width: 150px;}
td#rightside td {font-size: 66%; padding: 1px;}
td.head {background: #D6B58C; text-align: center; font-weight: bold;}
td#rightside th {font-size: 85%; padding: 2px;
background: #774411; color: white;}
tr.even td {background: #F7F0E7; width: 50%;}
td.r3 {color: #660;}
td.r5 {color: #060;}
div#traveltip {border: 3px solid #804040; background: #EBDAC6;
text-align: center; margin-top: 1.5em; padding: 8px; font-size: 66%;}
tr#footer td {vertical-align: middle; font-size: 66%;
border-top: 3px solid #EFE1D1;}
td#feedback {text-align: center; padding: 0.2em;
background: #EFE1D1;}
tr#footer td#tg {font-size: 85%; text-align: center;}
td#copyright {text-align: right; font-style: italic; color: #999;}
</style>
101
All copyrights reserved by C.C. Cheung 2003.
Skin a Menu? Demo!
INE2720 – Web Application Software Development
102
All copyrights reserved by C.C. Cheung 2003.
Example 2: Style Sheet



















<style type="text/css">
body {background-color: rgb(100%,98%,96%); color: black;}
td {border-width: 0; padding: 0;}
td#banner {border-bottom: 2px solid rgb(60%,50%,40%);}
td#banner h1 {color: rgb(40%,30%,20%);
margin: 0; padding: 0.25em 0 0.125em 0;
font: bold 150% sans-serif; letter-spacing: 0.5em;}
td#main {background-color: transparent; color: black;
padding: 1em; font: 95% Times, serif;}
td#main h2 {font: bold 125% sans-serif;
margin: 0.5em 1em; padding: 0;
border-bottom: 1px solid rgb(80%,75%,70%);}
td#main p {margin: 1em 2.5em;}
td#sidelinks {vertical-align: top;}
td#footer {background-color: transparent; color: rgb(70%,60%,50%);
border-top: 1px solid rgb(60%,50%,40%);
text-align: right; font-size: 85%;
padding-top: 0.33em; font-style: italic;}
</style>
























INE2720 – Web Application Software Development
<style type="text/css">
/* menu styles */
td#sidelinks a {display: block;
margin: 0 3px 0 0; padding: 1px 10px 1px 5px;
text-decoration: none;
font: bold 100% Arial, Verdana, sans-serif;
border-right: 1px solid rgb(60%,50%,40%);
color: rgb(30%,30%,60%); background: transparent;}
td#sidelinks a:visited {color: rgb(55%,55%,60%);}
td#sidelinks h4 {background-color: transparent; color:
rgb(30%,20%,10%);
margin: 0 3px 0 0; padding: 1em 0 0;
font: bold 100% Arial, Verdana, sans-serif;
border-right: 1px solid rgb(60%,50%,40%);
border-bottom: 2px solid rgb(50%,40%,30%);}
td#sidelinks a:hover {background-color: rgb(100%,70%,70%);
color: rgb(50%,0%,0%);
border-right: 7px solid rgb(80%,30%,20%);
padding-right: 7px; margin-right: 0;}
td#sidelinks a#comment {
background-color: rgb(100%,92%,90%); color: black;
border: 1px solid rgb(60%,50%,40%);
border-right-width: 4px; padding-right: 7px;
margin-right: 3px;}
</style>
103
All copyrights reserved by C.C. Cheung 2003.
Skin an Input Form?
Demo!
INE2720 – Web Application Software Development
104
All copyrights reserved by C.C. Cheung 2003.
Example 3: Style Sheet
<style type="text/css" media="all">

td.lbl {font-weight: bold; text-align: right;}

div.formEnd {text-align: center; padding-top: 1em; margin-top: 1em;}

</style>

<style type="text/css" media="print">

td {padding: 0.5em 0.125em;}

tr.required td.lbl {text-decoration: underline;}

.writein {border-width: 0; border-bottom: 1px solid black;}

select.writein {display: none;}

span#stateBlank {display: block; width: 10em; height: 1em; border-bottom: 1px solid
black;}

div#submitArea {display: none;}

div#mailArea p:first-line {font-weight: bold;}

</style>

<style type="text/css" media="screen">

h1 {font-family: sans-serif; border-bottom: 0.125em solid #F33; margin-bottom: 0;}

td {padding: 0.25em 1px;}

tr.required td.lbl {background: #FCC; border-left: 0.5em solid red;}

td.lbl {background: #CFC; border-left: 0.5em solid green;}

div#mailArea {display: none;}

input.writein:focus {background: yellow;}

</style>
105
All copyrights reserved by C.C. Cheung 2003.
INE2720
– Web Application Software Development

Sneaking out of the box?
Demo!
INE2720 – Web Application Software Development
106
All copyrights reserved by C.C. Cheung 2003.
Example 4: Style Sheet















<style type="text/css">
body {background: #969; color: black;}
div.wrap {background: #FDF; color: black; margin: 0 2em;}
p {margin: 0; padding: 0.5em 1em;}
h1, h2 {margin: 0; padding: 0 0.5em;}
div#p1 {margin: 0 2em 0 10em;}
div#p2 {margin: 0 10em 0 2em;}
div#menu {float: right; width: 5em;
padding: 0; margin: 0 -1.5em 0.25em 0.5em;
border: 1px solid #747; background: white;}
div#menu a {display: block; text-align: center;
padding: 0.2em 0.5em;}
div#footer {margin: 0 11em 0 2em; padding: 0.25em;
text-align: center; font-style: italic; color: #969;}
</style>
INE2720 – Web Application Software Development
107
All copyrights reserved by C.C. Cheung 2003.
CSS Tools

Style Master, layout Master
INE2720 – Web Application Software Development
108
All copyrights reserved by C.C. Cheung 2003.
http://gallery.theopalgroup.com/selectoracle/
SelectORacle
INE2720 – Web Application Software Development
109
All copyrights reserved by C.C. Cheung 2003.
http://www.htmlhelp.com/tools/csscheck/
CSSCheck
INE2720 – Web Application Software Development
110
All copyrights reserved by C.C. Cheung 2003.
http://www.w3.org/Style/CSS/Test/CSS1/current/
CSS1 Test Suite

INE2720 – Web Application Software Development
111
Use to test the
browser’s
conformance
to CSS1
specification.
All copyrights reserved by C.C. Cheung 2003.
CSS Current work

The Box model
– Horizontal and vertical flow





User interface enhancements
Scalable Vector Graphics (SVG)
Selectors extension
…
Reference:
http://www.w3.org/Style/CSS/current-work/
INE2720 – Web Application Software Development
112
All copyrights reserved by C.C. Cheung 2003.
INE2720 – Web Application Software Development
113
All copyrights reserved by C.C. Cheung 2003.
Summary




Through style sheets you can specify the
general formatting of HTML elements
Use external style sheets to share styles
across all documents in the Web site
Class definitions allow you to define multiple
styles for an HTML element
LAYERs are only supported by Netscape 4;
however, a viable alternative are style sheet
layers
INE2720 – Web Application Software Development
114
All copyrights reserved by C.C. Cheung 2003.
References








Deitel: Chapter 6
CWP: Chapter 5
Eric Meyer on CSS
SAMS - CSS
CSS Tutorial
Reference
www.w3.org/Style/CSS/
Thank you for patience!
INE2720 – Web Application Software Development
115
All copyrights reserved by C.C. Cheung 2003.