DHTML

1
DHTML CSS

• Tutorial 6

2
DHTML Intro(1)

• Dynamic Hypertext Markup Language
• Combination of technologies to make Web pages
  dynamic
• Not a standard
• Marketing Term used by Microsoft and Netscape

3
DHTML Intro(2)

• Scripting Language e.g. JavaScript, VBScript
• Incompatible
• Microsoft Internet Explorer DHTML
• http//msdn.microsoft.com/workshop/author/dhtml/dh
  tml.asp
• Netscape DHTML
• http//developer.netscape.com/docs/manuals/communi
  cator/dynhtml/index.htm
• Object Model

4
DHTML Object Model
5
CSS Intro

• Cascading Style Sheets
• W3C Recommendation
• Specify the presentation of elements on a Web
  page separately from the structure of the
  document
• XHTML, Dreamweaver

6
CSS - Basics

• lthtmlgt
• ltheadgtlttitlegtTestinglt/titlegtlt/headgt
• ltbodygt
• ltpgtThis is Testinglt/pgt
• lt/bodygt
• lt/htmlgt

7
CSS Inline Styles

• lthtmlgt
• ltheadgtlttitlegtInline Styleslt/titlegtlt/headgt
• ltbodygt
• ltp style "color red"gt
• This is Testing, using CSSlt/pgt
• lt/bodygt
• lt/htmlgt

8
CSS Multiple Properties

• lthtmlgt
• ltheadgtlttitlegtInline Styleslt/titlegtlt/headgt
• ltbodygt
• ltp style "font-size 20pt color 0000ff"gt
• This is Testing, using CSSlt/pgt
• lt/bodygt
• lt/htmlgt

9
CSS List of Properties
Properties Options / Example
Color Blue, 8000ff
Font-size pt, in, cm, mm, pc, em, ex
Font-family Arial, sans-serif
Background-color Green, 0000ff
Text-decoration None, overline, underline, line-through
Font-weight Normal, bold, bolder, 300
Margin-left pt, in, cm, mm, pc, em, ex
Text-indent pt, in, cm, mm, pc, em, ex
10
CSS Embedded Style Sheets

• lthtmlgt
• ltheadgtlttitlegtEmbedded Style Sheetslt/titlegtlt/headgt
  
• ltstyle "text/css"gt
• em background-color 8000ff
• lt/stylegt
• ltbodygt
• ltpgtThis is Testing, using ltemgtCSSlt/emgtlt/pgt
• lt/bodygt
• lt/htmlgt

11
CSS External Style Sheets

• Ex5.html
• lthtmlgt
• ltheadgtlttitlegtInline Styleslt/titlegt
• ltlink rel "stylesheet" type "text/css" href
  "styles.css" /gt
• lt/headgt
• ltbodygtltpgt
• lta href "http//www.cuhk.edu.hk"gtCUHK
  Homepagelt/agt
• lt/pgtlt/bodygt
• lt/htmlgt
• styles.css
• a font-weight bold

12
CSS Brief Summary

• Three types of Style Sheets
• Inline
• Embedded
• External

13
More about CSS(1)

• lthtmlgt
• ltheadgtlttitlegtMore about CSSlt/titlegt
• ltstyle type "text/css"gt
• .p1 color blue
• .p2 color green font-weight bolder
• a.nodec background-color red
• ahover font-size 30pt
• lt/stylegtlt/headgt
• ltbodygt
• ltp class "p1"gt This text is blue lt/pgt
• ltp class "p2"gt This text is green and bold
  lt/pgt
• ltpgt This text is normal lt/pgt
• lta class "nodec" href "http//www.yahoo.com.
  hk"gt
• This is a hyperlink, with red in background.
  When the mouse cursor is over me, the font size
  will be largerlt/agt
• lt/bodygt
• lt/htmlgt

14
More about CSS(1)
15
More about CSS(2)

• lthtmlgt
• ltheadgtlttitlegtMore about CSSlt/titlegt
• ltstyle type "text/css"gt
• .underlined text-decoration underline
• ul background-color green color yellow
• ul ul background-color blue
• lt/stylegtlt/headgt
• ltbodygt
• ltpgt The text at the end is ltspan class
  "underlined"gt underline lt/spangtltpgt
• ltulgt
• ltligtMilklt/ligt
• ltligtBread
• ltulgt
• ltligtWhite Breadlt/ligt
• ltligtRye Breadlt/ligt
• lt/ulgt
• lt/ulgt
• lt/bodygt
• lt/htmlgt

16
More about CSS(3)

• Positioning Elements
• Position absolute/relative
• Top, left px
• Z-index 1
• Text Flow Box Model
• Margin-right/left/top/bottom px
• Border-width/style/color
• Padding-top/right/left/bottom

17
CSS Brief Summary

• Class
• Pseudoclass
• Span
• Inheritance
• Other (Position Elements, Text flow, Box Model)

18
CSS - Cascading Order

• In the order of specificity
• The child styles are more specific than the
  styles for that childs parent
• Eg. ul ul is more specific than ul
• In the same specificity, the order will be
• External Style Sheets (lower priority)
• Embedded Style Sheets
• Inline Style Sheets (the highest priority)

19
CSS - Dreamweaver
20
CSS User Style Sheet
21
CSS - Reference

• Internet World Wide Web How to program
• 2nd Edition, Deitel Deitel Nieto
• Chapter 6 Cascading Style Sheets