Introduction to Cascading Style Sheets

1
Introduction to Cascading Style Sheets
Dates for this Class Instructors Name
1 Name 2 Conference Call Number Phone No.
Presented by
2
Class Files

• If you have not previously done so, please do so
  now
• On the left hand menu choose Student Resources
• From the submenu, choose Download Class Files
• Under the Web Fundamentals Group, choose
  Introduction to Cascading Style Sheets
• Run this file or save it to a disk?
• Choose Save to a Disk and make sure your DESKTOP
  is selected
• When the files have finished downloading you will
  have a zip file located on your desktop (it will
  say cs.exe)
• Double click on that icon this will start the
  unzipping process and ask you where to unzip the
  folder to Make sure you choose your DESKTOP
  again, then choose UNZIP.
• When it has finished unzipping the file, close
  that window.
• You should now see a folder on your desktop
  called csThis folder contains the files to be
  used for this class.

3
Three Main Reasons for adding CSS to our website

• Increased Design and Layout Capabilities
• Precise text formatting
• Precise positioning
• Placement of background images and colorsto any
  page element
• Centralized Style Specifications
• Apply consistent look and feel to site
• Simply the process of updating or changing
  appearance of the site
• Dynamic HTML - use of HTML, JavaScript and
  CSSto dynamically change the style of a page
• Change the position of an image
• Change the color/size/font of text
• Change the visibility of an image
• Create dragable content

4
Building Style Sheets

• When creating a style sheet, you can use any type
  of text editor
• Save the style sheet with a .css extension
• A style sheet may contain many style definitions
• Comments embedded in a style sheet are contained
  inside / . / tags

5
Building Style Sheets

• CSS Properties and Declarations
• This is called a declaration statement it
  defines property value pairs.

properties
values
H2 color green font-weight bold
Notice the use of curly brackets (not
parentheses) and colons (not equal signs)
6
Multiple Tags

• You can set the same rule for multiple tags

H1, H2, H3, H4 color green font-weight bold
Now all the H1, H2, H3, and H4 tags will have
the same formatting
7
Linking the Documents

• The html page that should use the
  formattingstatements in your style sheet must be
  linked inside of the ltheadgt tag to the style
  sheet inthe following manner

lthtmlgt ltheadgtlttitlegtMy web pagelt/titlegt ltlink
hrefmystyles.css relstylesheetgt lt/headgt
8
mystyles.css
contents.html
h1 coloryellowi font-size14pt td
font-familyarialp font-styleitalic

lthtmlgtltheadgtlttitlegtMy Content Pagelt/titlegtltlink
hrefmystyles.css relstylesheetgt lt/headgtltbod
ygt Main text of page, images, etc. lt/bodygtlt/html
gt
stylesheet
html page
9

• All html pages linked to the style sheet will
  apply the formatting instructions to that page
• All pages NOT linked to the style sheet will
  NOT apply the formatting instructions

10
Setting up a Sample Style Sheet
Please look at examples gt maindance-unstyled.html

• Now create a stylesheet with the following
  formatting instructions
• h1, h2, h3 color 3300cc
• h3 font-styleitalic
• p color990099 font-styleitalic
• Now, save it as stylesheetdance.css

Inside the maindance-unstyled.html page add the
link to the stylesheetdance.css and look at the
results
11
(No Transcript)
12
Exercise 1

• Please turn to Exercise 1 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

13
(No Transcript)
14
Code for the musicstyles.css stylesheet h1, h2,
h3 color009966 p font-style italic
This says All content contained inside
of lth1gtlt/h1gt, lth2gtlt/h2gt, and lth3gtlt/h3gt tags
should be the color 009966 ( a light green)
This says All content inside of ltpgtlt/pgt tags
should be in italics.
music.html
lthtmlgtltheadgt lttitlegtHildegard of Bingen
Examplelt/titlegt ltlink href "musicstyles.css" rel
"stylesheet"gt lt/headgt
This creates the link to the musicstyles.css
stylesheet.
15
Inheritance and Precedence

• As long as there is no conflict, CSS styles will
  add onto any existing HTML style specifications
  (it inherits the original specifications)
• If there is a conflict, CSS style will override
  HTML code (it takes precedence)
• Rule Listing Order the last rule listed takes
  precedence
• For example p, h1, h2 colorgreen i
  font-familyarial
• p colorblueresults in the paragraphs
  containing blue text

16
For an example of overriding HTML styles,please
look at examples gt maindance-styled2.html
17
Codes for the examples
stylesheetdance2.css
h1, h2, h3 color009966 p font-style italic
maindance-styled2.html
lthtmlgtltheadgtlttitlegtBallroom Dance
Styleslt/titlegt ltlink href"stylesheetdance2.css"
rel"stylesheet"gt lt/headgtltbodygt
18
Exercise 2

• Please turn to Exercise 2 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

19
(No Transcript)
20
musicstyles-override.css
h1 colorpink h1, h2, h3 color 009966 p
font-styleitalic h3, h2 font-weight normal
maindance-styled2.html
lthtmlgtltheadgt lttitlegtHildegard of Bingen
Examplelt/titlegt ltlink href "musicstyles-override
.css" rel "stylesheet"gt lt/headgtltbodygt
21
Three Ways of Specifying Styles

• Linked Style Sheets the method we have
  already used to link to an external style
  sheet
• Embedded Styles styles which apply to an
  individual page
• Inline Styles styles which apply only to a
  specific tag

22
Embedded Style Sheets

• To embed style sheet information in an individual
  page
• You must insert the ltstylegt lt/stylegt
  information inside of the ltheadgtlt/headgt tags
  for that page
• Inheritance and Precedence If a style in
  a linked style sheet conflicts with one
  defined in the embedded style tags, the
  embedded style tags take precedence.

23
For an example of embedded styles, please look
at examples gt maindance-embed.html
24
Code for the maindance-embed.html example
lthtmlgtltheadgt lttitlegtballroom dance
styleslt/titlegt ltlink href"stylesheetdance.css"
rel"stylesheet"gt ltstylegt lt!-- h2 text-indent
2em background-color pink --gt lt/stylegt lt/headgt
ltbodygt
25
Exercise 3

• Please turn to Exercise 3 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

26
(No Transcript)
27
music-embed.html
lthtmlgtltheadgt lttitlegtHildegard of Bingen
examplelt/titlegt ltlink href "musicstyles-override
.css" rel "stylesheet"gt ltstylegtlt!p
font-size14pth2 background-color
lime--gtlt/stylegtlt/headgtltbodygt
28
Parent-Child Relationship(tags within tags)
parent
child
lth2gt What we ltigtreallylt/igt meant to saylt/h2gt

• Inheritance and Precedence
• The child tag (nested) inherits the properties
  of the parent tag
• If there is a conflict between styles in the
  parent tag and the child tag, the inner-most
  nested tag tags precedence.

29
Inline Style Sheets
Inline style declarations are specified directly
insidethe tag whose contents will be affected.
ltp stylecolorff3399 font-familyarial
font-size14pt gt This would be the actual text
for the paragraph. Using a closedparagraph tag
can be very useful when using Cascading style
sheets to delimit a text block for inline styles.
lt/pgt
30
For an example of inline styles,please look at
examples gt maindance-inline.html
31
maindance-inline.html
lthtmlgtltheadgt lttitlegtBallroom Dance
Styleslt/titlegt ltlink href"stylesheetdance.css"
rel"stylesheet"gt ltstylegt lt!-- h2 text-indent
2em background-colorpink --gt lt/stylegt lt/headgt lt
bodygt lth1 style"text-align center
font-size50pt"gtlti style"font-style normal
font-size200pt"gtblt/igtallroom dance
styleslt/h1gt lth2gtInternational vs. American
Stylelt/h2gtlth3gtInternational Stylelt/h3gt
32
For another example of inline styles,please look
at examples gt maindance-inline2.htmlNote the
highlighted text.
33
maindance-inline2.html
lthtmlgtltheadgtlttitlegtBallroom Dance
Styleslt/titlegt ltLINK HREF"stylesheetdance.css"
REL"stylesheet"gt ltSTYLEgt lt!-- H2 text-indent
2em background-colorpink --gt lt/STYLEgt lt/headgt lt
bodygt lth1 style"text-align center
font-size50pt"gtltI style"font-style normal
font-size200pt"gtBlt/Igtallroom Dance
Styleslt/h1gt lth2gtInternational vs. American
Stylelt/h2gt lth3gtInternational Stylelt/h3gt ltpgtCompeti
tive Ballroom Dances are divided into two main
categories in the United States. The
International Style originally developed in
Europe from traditional French, German, and
Czech folk dances such as Waltz, as well as
dances which made their way to Paris from South
America, such as Tango. ltI style"background-colo
r yellow"gtConsidered the original ballroom
dance, the International Style is actually the
only style danced outside of the United States,
lt/Igt and is the style of international
competitions. lt/pgt
34
Exercise 4

• Please turn to Exercise 4 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

35
(No Transcript)
36
music-inline.html
lthtmlgt ltheadgt lttitlegtHildegard of Bingen
Examplelt/titlegt ltlink href"musicstyles-override.c
ss" rel"stylesheet"gt ltstylegt lt!-- p
font-size14pt h2 background-colorlime --gt lt/
stylegt lt/headgt ltbodygt lth1 style"font-styleitalic
"gt The ltbrgt Life and Worksltbrgt ofltbrgt ltb
style"text-indent 3em"gt lti style"font-size
60pt"gtHlt/igtildegard von lti style"font-size
60pt"gtBlt/igtingen (1098-1179) lt/bgt lt/h1gt lth2gtIntro
ductionlt/h2gt
37
Adding Flexibility

• Class selectors allow the application of styles
  to blocks of text not enclosed in an existing
  html tag
• A class is defined by a dot and a name (of your
  choosing), and then the style declarations
• The class is defined inside the ltstylegt
  definition in the ltheadgt of the document.
• The class can then be used in any tag in the
  document

38
Sample code using classes
lthtmlgt ltheadgtlttitlegt My pagelt/titlegt ltstylegt lt!
-- h1 colorgreenp colorblue font-family
arial.title colorgreen font-styleitalic.ma
intext colorred font-facetimes .author
colorpink - -gt lt/stylegt lt/headgt ltbodygt lth1
classtitlegt Ballroom Dance lt/h1gt ..
39
ltdivgt and ltspangt tags

• ltdivgt and ltspangt tags allow you to group text
  intoblocks so you can apply styles to that text
• The ltdivgt tag - inserts a line break at the
  beginning of the tag and after the closing
  lt/divgt tag. It has no other inherent
  properties
• The ltspangt tag has no inherent properties at
  all (so you can create your own tag)

40
For an example of class selectors,please look at
examples gt romeo-unstyled.html
41
That example was unstyled, now see what happens
when you declare styles and apply them by using
ltdivgt and ltspangttags at examples gt
romeo-classdiv.html
42
lthtmlgtltheadgtlttitlegtRomeo Juliet take on
CSSlt/titlegt ltstylegt lt!-- .title font-size
70pt .maintext font-size 30pt .author
font-size 16pt .cap font-size
45pt --gt lt/stylegtlt/headgtltbodygt lth1
class"title"gtRomeo ltbrgtnbspnbspnbspnbsp
Julietlt/h1gt ltdiv class"maintext"gtltpgt ltspan
class"cap"gtTlt/spangtwo households, both alike in
dignity, ltspan class" cap"gtIlt/spangtn fair
Verona (where we lay our scene) ltspan class"
cap"gtFlt/spangtrom ancient grudge break to new
mutiny, ltspan class" cap"gtWlt/spangthere civil
blood makes civil hands unclean ltspan class"
cap"gtFlt/spangtrom forth the fatal loins of these
two foes ltspan class" cap"gtAlt/spangt pair of
star-crossed lovers take their lives...lt/pgt lt/divgt
lti class"author"gtWilliam Shakespearelt/igt lt/bodygt
lt/htmlgt
43
Exercise 5

• Please turn to Exercise 5 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

44
(No Transcript)
45
lthtmlgtltheadgt lttitlegtCSS Projectlt/titlegtltstylegtlt!
- - .title font-size 45pt .cap font-size
25pt --gtlt/stylegtlt/headgtltbodygtltdiv
class"title"gtNothing Gold Can Staylt/divgtltdivgtlts
pan class"cap"gtNlt/spangtature's first green is
gold,ltbrgtltspan class"cap"gtH lt/spangter hardest
hue to hold,ltbrgtltspan class"cap"gtH lt/spangter
early leaf's a flowerltbrgtltspan class"cap"gtB
lt/spangtut only so an hour.ltbrgtltspan
class"cap"gtT lt/spangthen leaf subsides to
leaf.ltbrgtltspan class"cap"gtS lt/spangto eden sank
to grief,ltbrgtltspan class"cap"gtS lt/spangto dawn
goes down to day.ltbrgtltspan class"cap"gtN
lt/spangtothing gold can stay.ltbrgt lt/divgt ltdivgt
Robert Frost (1874-1963) lt/divgt lt/bodygtlt/htmlgt
46
Font Properties
font-familyarial, helvetica, san-serif
Common Fonts Cross-Platform Equivalents
47
Generic Font Types
48
For font-size definitions, see examples
gtfont-size-absnames.html
font-sizemedium
49
For font-size definitions, see examples
gtfont-weight.html
font-weight600
50
For font-style definitions, see examples
gtfont-style.html
font-styleitalic
51
For text-transform definitions, see examples
gttext-transform.html
text-transformcapitalize
52
For line-height properties, see examples
gtline-height.html
line-height 70
53
For text-align properties, see examples
gttext-align.html
text-alignright
54
For text-indent properties, see examples
gttext-indent.html
text-indent10
55
For an example of font properties, see
romeo-fontstyles.html
56
Exercise 6

• Please turn to Exercise 6 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

57

58
lthtmlgt ltheadgt lttitlegtcss projectlt/titlegt ltstylegt lt
!-- .title font-size 45pt .cap font-size
25pt .textbody text-align center line-height
1.8 font-size20pt .author font-size 22pt
text-align right --gt lt/stylegt lt/headgt ltbody
style"font-family arial, helvetica, sans-serif
font-style italic"gt ltdiv class"title"gtNothing
Gold Can Staylt/divgt ltdiv class"textbody" gt ltspan
class"cap"gtNlt/spangtature's first green is
gold,ltbrgt ltspan class"cap"gtHlt/spangter hardest
hue to hold,ltbrgt ltspan class"cap"gtHlt/spangter
early leaf's a flowerltbrgt ltspan
class"cap"gtBlt/spangtut only so an hour.ltbrgt ltspan
class"cap"gtTlt/spangthen leaf subsides to
leaf.ltbrgt ltspan class"cap"gtSlt/spangto eden sank
to grief,ltbrgt ltspan class"cap"gtSlt/spangto dawn
goes down to day.ltbrgt ltspan class"cap"gtNlt/spangtot
hing gold can stay.ltbrgt lt/divgt ltdiv
class"author"gtRobert Frost (1874-1963)lt/divgt lt/bo
dygt lt/htmlgt
59
For background-color properties, see examples
gtbackground-color.html
background-color CCCCFF
In Internet Explorer
In Netscape 4
60
For background-color properties, see examples
gtbackground-image.html
ltbody style"font-styleitalicbackground-image
url(clay2.gif)"gt
61
To see an image used only once in the background
of a page, open examples gtbackground-repeat.html
ltbody style"font-styleitalicbackground-image
url(towers2.gif) background-repeatno-repeat"gt
62
To see an image repeated across the top of a
page, open examples gtbackground-repeat3.html
ltbody style"font-styleitalicbackground-image
url(towers2.gif) background-repeatrepeat-x"gt
63
To see an image repeated down the left side of a
page, open examples gtbackground-repeat2.html
ltbody style"font-styleitalicbackground-image
url(towers2.gif) background-repeatrepeat-y"gt
64
To see colors and backgrounds added to the poem,
see examples gtbackground-color.html
65
lthtmlgtltheadgt lttitlegtcsslt/titlegt lt/headgt ltbod
y style"font-styleitalic background-image
url(towers.gif) color990033"gt ltDIV
style"font-size 60pt font-weightbold color
FF0000"gtRomeo ltbrgtnbspnbspnbspnbsp
Juliet lt/DIVgt ltDIV style"font-size 16pt
text-aligncenter line-height1.4"gt Two
households, both alike in dignity, In fair Verona
(where we lay our scene) From ancient grudge
break to new mutiny, Where civil blood makes
civil hands unclean From forth the fatal loins
of these two foes A pair of star-crossed lovers
take their lives... lt/DIVgt ltDIV
style"font-size20pt text-indent3em
font-weightbold"gtWilliam Shakespearelt/DIVgt lt/bod
ygtlt/htmlgt
66
Site-Wide Templates

• Using a background image or color inside a
  stylesheet can be a very effective way of
  providing a consistent look and feel

For example, the following stylesheet would
include a companylogo and navigation color bar
along the left side of the page whichlinks to it
bg-template-example.css
body background-imageurl(vacations.gif)
background-repeatno-repeat
67
The resulting page would look like this
examples gtbg-image-examplepage.html
68
In the code for that page, notice how we used
individual ltfontgt tags to specify the color and
font attributes for each cell in the table
lttable width100 cellpadding5
border0gtlttrgtlttd width200 valigntopgt ltfont
colorwhitegt ltpgtltbrgtltpgtltbrgtltpgtltbrgtltpgtltbrgtltpgtltbrgtltp
gtltbrgtltpgtltbrgtltpgtltbrgtltpgtltbrgt Learn the Ins and Outs
of the Internet while you tan!ltpgt(rest of cell
content)lt/fontgtlt/tdgt lttd rowspan2gtltfont
face"arial, helvetica, sans-serif" size-1
colorpurplegt ltpgt Welcome to South Beach
Training, .lt/pgt(rest of cell content)lt/fontgtlt/t
dgtlt/trgtlt/tablegt
69
By placing the style specification for the lttdgt
tag in our CSS, we eliminate the need for
placing ltfontgt tags in every cell.
bg-template-tables.css
body background-imageurl(vacations.gif)
background-repeatno-repeattd
colorpurple font-familyarial
The results are the same. See examples
gtbg-image-tables.html,but the code is much more
efficient.
70
bg-image-tables.html
71
bg-image-tables.html
lttable width100 cellpadding5
border0gtlttrgtlttd width190 valigntopgtltfont
colorwhitegt ltpgtltbrgtltpgtltbrgtltpgtltbrgtltpgtltbrgtltpgtltbrgtltp
gtltbrgtltpgtltbrgtltpgtltbrgtltpgtltbrgtLearn the Ins and
Outs of the Internet while you tan!ltpgt(rest of
content)lt/tdgt lttd rowspan2gt ltpgt Welcome to
WestLake Internet Training (rest of
content)lt/tdgtlt/trgtlt/tablegt
72
Exercise 7

• Please turn to Exercise 7 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

73
(No Transcript)
74
lthtmlgt ltheadgt lttitlegtCSS projectlt/titlegtltstylegtlt
!- - .title font-size 45pt color ffffcc
.cap font-size 25pt .textbody text-align
center line-height 1.8 font-size20pt
.author font-size 22pt text-align right
color cccc99 --gtlt/stylegtlt/headgtltbody
style"font-family arial, helvetica, sans-serif
font-style italic color ffff99
background-image url(leaf.gif)
background-color 006666"gtltDIV
class"title"gtNothing Gold Can Staylt/DIVgt ltDIV
class"textbody"gtltSPAN class"cap"gtNlt/SPANgtature'
s first green is gold,ltbrgtltSPAN
class"cap"gtHlt/SPANgter hardest hue to
hold,ltbrgtltSPAN class"cap"gtHlt/SPANgter early
leaf's a flowerltbrgtltSPAN class"cap"gtBlt/SPANgtut
only so an hour.ltbrgtltSPAN class"cap"gtTlt/SPANgthen
leaf subsides to leaf.ltbrgtltSPAN
class"cap"gtSlt/SPANgto Eden sank to
grief,ltbrgtltSPAN class"cap"gtSlt/SPANgto dawn goes
down to day.ltbrgtltSPAN class"cap"gtNlt/SPANgtothing
gold can stay.ltbrgtlt/DIVgtltDIV class"author"gtRobe
rt Frost (1874-1963)lt/DIVgtlt/bodygtlt/htmlgt
75
Positioning Elements on a Page
CSS allows us to place elements at a specific
location on the pageby using the following code
inside of a ltdivgt tag
This tells the browser that we aremaking an
absolute position forthis element
This tells the browser to place the contents of
this ltdivgt tag 200 pixels from the top and10
pixels from the left
ltdiv stylepositionabsolute top200
left10gtRomeoltbrgt nbsp nbsp nbsp nbsp
Juliet lt/divgt
76
You can also define the location using margin
settings
This tells the browser that weare creating
margins aroundthis element
This allocates the margins fromTop Right
Bottom Left 0 20 0 25
ltdiv stylemargin0 20 0 25gtRomeoltbrgt nbsp
nbsp nbsp nbsp Juliet lt/divgt
Note We have created a column that takes up
55 of the width of the page and is a little off
center.
25
20
77
For an example of positioning, see
romeo-position.html.
78
lthtmlgtltheadgtlttitlegtcsslt/titlegtlt/headgtltbody
style"font-styleitalic background-image
url(examples/dtowers.gif) color990033"gtltDIV
style"font-size 80pt font-weightbold color
FF0000 positionabsolute top200 left
10"gtRomeo ltbrgtnbspnbspnbspnbsp
Julietlt/DIVgtltDIV style"font-size 22pt
margin0 20 0 25"gtTwo households, both alike
in dignity, In fair Verona (where we lay our
scene) Fromancient grudge break to new mutiny,
Where civil blood makes civil hands unclean From
forth the fatal loins of these two foes A pair of
star-crossed lovers take their lives...lt/DIVgtltD
IV style"font-size20pt font-weightbold
positionabsolute top350 left650"gtWilliam
Shakespearelt/DIVgtlt/bodygtlt/htmlgt
79
Z-index Overlapping Elements

• When absolute positioning causes elements to
  overlap, the elements which are coded last in
  the HTML document will be displayed on top of
  the elements previously created in the
  document.
• You can control the overlapping of elements by
  setting the z-index
  positionabsolute z-index10
• The element with the lowest number will be on
  the bottom and the element with the highest
  number will be on the top. All other elements
  will be placed according to their z-index number
• The z-index must be used in conjunction with the
  position property.

80
To see an example of the z-index, see
romeo-overlap2.html
81
lthtmlgtltheadgtlttitlegtcsslt/titlegtlt/headgtltbody
style"font-styleitalic background-image
url(examples/dtowers.gif) color990033"gtltDIV
style"font-size 80pt font-weightbold color
FF0000 positionabsolute top150 left 10
z-index 20"gtRomeo ltbrgtnbspnbspnbspnbsp
Julietlt/DIVgt ltDIV style"font-size 22pt
margin0 20 0 25 width 50 position
absolute z-index 10"gtTwo households, both
alike in dignity, In fair Verona (where we lay
our scene) From ancient grudge break to new
mutiny, Where civil blood makes civil hands
unclean From forth the fatal loins of these two
foes A pair of star-crossed lovers take their
lives...lt/DIVgt ltDIV style"font-size20pt
font-weightbold positionabsolute top350
left650"gtWilliam Shakespearelt/DIVgt lt/bodygt lt/html
gt
82
Exercise 8

• Please turn to Exercise 8 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

83
(No Transcript)
84
lthtmlgt ltheadgt lttitlegtcss projectlt/titlegtltstylegtlt
!.title font-size 45pt color ffffcc.cap
font-size 25pt.textbody text-align center
line-height 1.8 font-size20pt.author
font-size 22pt text-align right color
cccc99--gtlt/stylegtlt/headgtltbody
style"font-family arial, helvetica, sans-serif
font-style italic color ffff99
background-image url(leaf.gif)
background-color 006666"gtltdiv class"title"
style"position absolute top 200 left
10z-index20"gtNothing Gold Can Staylt/divgtltdiv
class"textbody" style"position absolute left
360 z-index10"gtltspan class"cap"gtNlt/spangtature'
s first green is gold,ltbrgtltspan
class"cap"gtHlt/spangter hardest hue to
hold,ltbrgtltspan class"cap"gtHlt/spangter early
leaf's a flowerltbrgtltspan class"cap"gtBlt/spangtut
only so an hour.ltbrgtltspan class"cap"gtTlt/spangthen
leaf subsides to leaf.ltbrgtltspan
class"cap"gtSlt/spangto eden sank to
grief,ltbrgtltspan class"cap"gtSlt/spangto dawn goes
down to day.ltbrgtltspan class"cap"gtNlt/spangtothing
gold can stay.ltbrgt lt/divgtltdiv class"author"
style"position absolute top 500"gtRobert Frost
(1874-1963)lt/divgtlt/bodygtlt/htmlgt
85
Dynamic HTML

• Dynamic HTML (DHTML) is the combination of
• HTML 4.0
• Cascading Style Sheets
• JavaScript

• Uses of DHTML
• Changing styles in response to user actions
• Changing colors or images
• Showing a drop-down menu
• Simple animations
• Dragable content
• Shopping Cart applications
• Interactive games

86
Browser Compatibility
Compatibilities

• Most browsers use the same CSS technology, but
  may support the individual tags differently.
• JavaScript Event Handlers are universally
  accepted
• ltdivgt and ltspangt tags have been accepted as the
  primary tags for style sheet declarations when
  not using regular HTML tags

Incompatibilities

• DOMs (Document-Object Models) are different in
  browsers
• The ability of each browser to display
  dynamically edited content differs
  significantly

87
Introduction to JavaScript
What is JavaScript? A scripting language that
makes your page interactive. JavaScript can be
embedded directly into the HTML page.

• What is JavaScript used for? some examples are
• Building self-validating forms
• Enabling dynamic calculations within forms
• Creating pages with dynamically changing images
• Opening and closing windows
• Changing the URL displayed by windows and frames

• What do JavaScript and Java have in common? the
  letters J-a-v-a and the fact that they are both
  executed by the browser. Thats about it!
• JavaScripts are directly embedded within the
  HTML page
• Java applets are linked into the page via the
  ltappletgt tag

88
JavaScript as an Object-Based Language

• As an object-based language, it has two parts
• Objects the elements to be controlled by the
  JavaScript (what will be affected)
• Event Handlers (Event Loops) the appropriate
  user action that causes the action to take
  place (when to do the action)

• Properties and Methods define an Object
• Properties the characteristics of an
  object (bgColor, width, size, etc.)
• Methods the tasks than can be performed on an
  object (open, close, write, etc.)

89
Partial JavaScript Object Hierarchy
window
document
location
history
links
images
forms
anchors
radio button set
textfield
checkbox
90
To see an example of how IE4 lets you change
things on the fly (dynamically), Open examples
gt romeo-dynamic.html in Internet Explorer Note
(only works in IE4.0 and later or Netscape 6)
91
When you put your mouse over the text, you will
see it change color
92
lthtmlgtltheadgtlttitlegtcsslt/titlegtltstylegt.main
color990033.mainlit color
yellowlt/stylegtlt/headgtltbody style"font-stylei
talic background-image url(dtowers.gif)color9
90033"gtltDIV style"font-size 80pt
font-weightbold positionabsolute top150
left 10 z-index 20 color FF0000"gtRomeo
ltbrgtnbspnbspnbspnbsp Julietlt/DIVgtltDIV
style"font-size 22pt margin0 20 0 25
width50 position absolute z-index 10"
class"main"gtlta href"javascriptalert('William
Shakespeare')" onMouseOver"if(this.style)
this.className'mainlit' " onMouseOut"if
(this.style) this.className'main' "gtTwo
households, both alike in dignity, In fair Verona
(where we lay our scene) From ancient grudge
break to new mutiny, Where civil blood makes
civil hands unclean From forth the fatal loins of
these two foes A pair of star-crossed lovers take
their lives...lt/agt lt/DIVgtltDIV
style"font-size20pt font-weightbold
positionrelative top350 left650"gtWilliam
Shakespearelt/DIVgtlt/bodygtlt/htmlgt
93
The onMouseOver and onMouseOut Event Handlers
what to do
when to do it
onMouseOver alert(Get your mouse off me!)

• The this keyword
• this refers to whatever tag it is inside of
• this.style refers to the collection of all the
  styles for this tag
• this.className refers to the CSS class of this
  tag
• So, lets look at the following code
• lta href"javascriptalert('William
  Shakespeare') onMouseOver"if(this.style)
  this.className'mainlit' " onMouseOut"if
  (this.style) this.className'main' "gttext goes
  here lt/agtIt says if you recognize styles for
  this tag, then apply the className mainlit (or
  main) for the contents of this tag (ltagt lt/agt).

94
Exercise 9

• Please turn to Exercise 9 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

95
(No Transcript)
96
lthtmlgtltheadgtlttitlegtCSS projectlt/titlegtltstylegtlt!
- - .cap font-size 25pt.title font-size
45pt color ffffcc.textbody text-align
center line-height 1.8 font-size20pt.author
font-size 22pt text-align right color
cccc99.authorlit font-size 22pt
text-alignright color yellow--gtlt/stylegtlt/he
adgtltbody style"font-family arial, helvetica,
sans-serif font-style italic color ffff99
background-image url(leaf.gif)
background-color 006666"gtltDIV class"title"
style"position absolute top 200 left 10
z-index20"gtNothing Gold Can Staylt/DIVgtltDIV
class"textbody" style"position absolute left
360 z-index10"gtltSPAN class"cap"gtNlt/SPANgtature'
s first green is gold,ltbrgt(body of poem)ltSPAN
class"cap"gtNlt/SPANgtothing gold can
stay.ltbrgtlt/DIVgtltDIV class"author"
style"position absolute top 500"gtlta
hrefhttp//www.westlake.comonMouseOver"if(this.
style)this.className'authorlit'"
onMouseOut"if(this.style) this.className'author'
"gt Robert Frost (1874-1963)lt/agtlt/DIVgtlt/bodygtlt/
htmlgt
97
Back to Sample Site Page