Dynamic HTML and Cascading
Style Sheets (CSS)
Electronic Commerce
Prof. Sheizaf Rafaeli
1
The BIG issues
Separating structure from content and
behavior
 Download time
 Upgrade time
 Compatibility (across, forward and
backward)
 Keeping it simple, learning and debugging

Electronic Commerce;
Prof. Sheizaf Rafaeli
2
Dynamic HTML

“Call us crazy, but we thought that the next big thing
in HTML wasn't going to be a new tag. “

Netscape’s (DevEdge) guide to DHTML:
– http://developer.netscape.com/library/documentation/co
mmunicator/dynhtml/index.htm

Microsoft’s Dynamic HTML Object Model:
– http://msdn.microsoft.com/msdnonline/workshop/author/dom/domoverview.asp
– http://msdn.microsoft.com/workshop/author/om/doc_ob
ject.asp
Electronic Commerce;
Prof. Sheizaf Rafaeli
3
DHTML: Dynamic HTML
DHTML - still more a promise than a reality
 But certainly the shape of things to come
 a group of technologies that make Web
pages more like miniature software
applications.


If ever there was a Bleeding Edge
Electronic Commerce;
Prof. Sheizaf Rafaeli
4
Dynamic HTML
Cross-Browser techniques are the holy grail
 WebMonkey’s tutorial, Nadav Savio,
reconciles the two at:

– http://www.hotwired.com/webmonkey/html/97/31/index2a.html

See C-Net builder’s tutorial at:
– http://www.cnet.com/Content/Builder/Authoring/Dhtml/?st.cn.fd.acol.bl

See http://www.insidedhtml.com (book and
website)
– And especially the 10K demos!
Electronic Commerce;
Prof. Sheizaf Rafaeli
5
DHTML components
DOM:
the (DYNAMIC) Document Object Model
 CSS: Cascading Style Sheets
 Scripting languages: (like Javascript,
Active-X, asp).
 And, depending on the browser, positioning,
downloading fonts, streaming content,
“behaviors”, image transition, animated
backgrounds, etc.

Electronic Commerce;
Prof. Sheizaf Rafaeli
6
DOM: The Document object
Model

defines all items on a Web page as objects
that can be manipulated.

Otherwise, those elements are set, defined
solely by the browser.
For example, the DOM makes it possible to identify
individual letters on a page as separate objects, and
then to assign specific qualities, such as color or size,
to each letter. In a sense, every letter becomes a tiny
Web page.
Electronic Commerce;
Prof. Sheizaf Rafaeli
7
Cascading Style Sheets
(CSS)
Cascading Style Sheets are a simple way to
control style without compromising
structure. They separate the style (visual
design elements) from the structure of
documents.
 CSS is a form of HTML mark-up that
provides web designers with greater control
over typography and spacing between
elements on a page.

Electronic Commerce;
Prof. Sheizaf Rafaeli
8
Cascading Style Sheets
(CSS)




Changing the style can affect an entire document.
Style sheets can be shared by multiple documents.
So changing a style can affect an entire website
WHAT ABOUT BROWSER
COMPATIBILITY? CSS support is
provided in Internet Explorer 4+ and
Netscape Navigator 4+. However, some
annoying browser inconsistencies continue
Electronic Commerce;
Prof. Sheizaf Rafaeli
9
Cascading Style Sheets
(CSS)

CSS overrides the browser's default settings

WHAT DOES CSS LOOK LIKE?
– The basic template for CSS code looks like this:
– Tag: {Property: value; Property2: value2}
– Tag - The element that will be affected
Property - What part of the selector will be affected
Value - How it will be affected
Electronic Commerce;
Prof. Sheizaf Rafaeli
10
Cascading Style Sheets
(CSS)

CSS overrides the browser's default settings

A CSS declaration has two parts:
– a property (”font-size” or “color”)
and a value ( “10pt” or "red").

The basic syntax of a rule
– selector {property 1: value 1; property 2: value: 2}

Examples:
– P {font-size: 10pt; color: red}
– H1 {FONT-SIZE: 9pt; FONT-WEIGHT: bold}
Electronic Commerce;
Prof. Sheizaf Rafaeli
11
CSS (3)

Linked Global Local style sheet definitions.
– Local (inline) definitions replace the <FONT>
definitions for typeface, font size, color and
margins, etc.
– Global (embedded) declarations are defined
within <STYLE></STYLE> pairs, usually in
header.
– Linked (external) stylesheets use separate .css
files, and link to them using :
» <link rel="stylesheet" href="style.css" type="text/css">
Electronic Commerce;
Prof. Sheizaf Rafaeli
12
Types of CSS

Inline:
<h3 style="font-weight: bold">this will be bold</h3>

Embedded :
<HEAD>
<STYLE TYPE="text/css">
<!- Tag: {Property: value; Property2: value2}
- ->
</STYLE>
</HEAD>
Electronic Commerce;
Prof. Sheizaf Rafaeli
13
Types of CSS

External:
<HEAD>
<LINK REL="STYLESHEET"
HREF="/PATH/SHEET.CSS TYPE="TEXT/CSS">
</HEAD>

The SHEET.CSS file would then contain all
the style-sheet code which would be applied
to any page that calls it using the code
above.
Electronic Commerce;
Prof. Sheizaf Rafaeli
14
Short, sweet example

REMOVE UNDERLINES
- A Complete Style Sheet

Do you want to remove underlines from links on
your site? Below is a short and sweet style-sheet
that will do just that, just copy and paste it
between the <head></head> tags on your site:
– <STYLE TYPE="text/css">
<!- a { text-decoration: none}
- ->
</STYLE>
Electronic Commerce;
Prof. Sheizaf Rafaeli
15
Full CSS example
<html>
<style type="text/css">
<!-h4 {font: 17pt Arial,Helvetica";
font-weight: bold;
color: maroon}
h2
p
{font: 15pt "Courier";
font-weight: bold; color: blue}
{font: 12pt "Arial,Helvetica";
color: black}
-->
</style>
<body>
...
</body>
</html>
This is an example of the
middle level (“global” or
“embedded” form of CSS.
Note how style code is
hidden (as in Javascript)
Note that fonts can be
defined in points, pixels,
inches or centimeters.
Electronic Commerce;
Prof. Sheizaf Rafaeli
16
CSS (4)
Cascading or Inheritance: When conflicting,
the more specific stylesheet overrides.
 Units of Measure: see:

– http://www.hotwired.com/webmonkey/stylesheets/reference/units.html
Attributes: layers of Class, ID, Span and DIV.
 Properties: see:

– http://www.hotwired.com/webmonkey/stylesheets/reference/css_propert
ies.html
Electronic Commerce;
Prof. Sheizaf Rafaeli
17
CSS (5)

W3C Cascading Style Sheets specs, at:
– http://www.w3.org/TR/WD-CSS2/

Microsoft’s User’s Guide, at:
http://msdn.microsoft.com/workshop/author/css/css.asp
http://msdn.microsoft.com/workshop/design/layout/css-des.asp

Examples, at:
– http://www.hotwired.com/webmonkey/stylesheets/reference/examples.html
– Microsoft’s CSS gallery, at: http://www.microsoft.com/truetype/
Electronic Commerce;
Prof. Sheizaf Rafaeli
18
CSS (6)

http://www.htmlgoodies.com/beyond/classid.h
tml

http://www.w3.org/Style/css/

http://www.htmlhelp.com/reference/css/

http://www.canit.se/%7Egriffon/web/writing_st
ylesheets.html

http://builder.cnet.com/Authoring/CSS/ss02.ht
ml
Electronic Commerce;
Prof. Sheizaf Rafaeli
19