Cascading Style Sheet

1
CSS and DHTML For the Web
N. Muralidhara National Centre for Science
Information (NCSI) Indian Institute of Science
Bangalore 560012. (E-Mail murali_at_ncsi.iisc.ern
et.in)
2
Cascading Style Sheet

• Layout and Design

3
Cascading Style Sheet (CSS)

• Introduction
• Advantages and disadvantages
• CSS basics
• Selectors
• 4 Ways To Put CSS And HTML Together
• Conclusion
• Learning CSS Resources

4
Introduction

• CSS stands for Cascading Style Sheets and is a
  simple styling language which allows attaching
  style to HTML elements.
• Style Sheets are templates, very similar to
  templates in desktop publishing applications,
  containing a collection of rules declared to
  various selectors (elements).
• Cascade is a method of defining the weight
  (importance) of individual styling rules thus
  allowing conflicting rules to be sorted out
  should such rules apply to the same selector.

5
Advantages and Disadvantages

• Advantages
• Greater typography and page layout controls
• Easier site maintenance
• The style sheet information can be stored
  separate from your HTML document, and shared
  among many HTML files. Change one style sheet
  file, and the appearance of the entire site is
  updated.
• Disadvantages
• Browser compatibility must be the most common
  difficulty.

6
CSS Basics

• A style definition is made up of a selector
  followed by a declaration block, as shown in this
  example
• lthtmlgt
• ltheadgt
• lttitlegtCSS Basicslt/titlegt
• ltstyle type"text/css"gt
• P color000000
• h1font-weight bold font-style
  italic color red
• lt/stylegt
• lt/headgt
• ltbodygt

7
Selectors

• 4 types of selectors
• 1. Type Selectors
• 2. Grouping Selectors
• 3. ID Selectors
• 4. Class Selectors
• Examples

8
4 Ways To Put CSS And HTML Together

• 1. Defining a style sheet inside of the HTML
  document,
• inside the ltHEADgt tag.
• Example
• 2. Referring to an external file which contains a
  style sheet,
• by using the 'LINK' element.
• Example
• 3. Referring to an external file which contains a
  style sheet,
• by using the '_at_import' notation.
• Example
• 4. Using a style element inside the document
  body, attached
• to a tag.
• Example

9
Conclusion

• Review
• What a style sheet is.
• The procedure for using style sheets (identify
  text requiring specific styles, build a style
  sheet, and build your web pages to use that style
  sheet)
• The different ways to apply styles (inline,
  document level, and external style sheets.

10
Learning CSS Resources

• Books
• Essential CSS and DHTML for Web Professionals
• (Dan Livingston, Micah Brown Published 1999)
• The HTML/CSS Developer's Resource Guide
• (Bryan Pfaffenberger / CD-ROM / Published
  1999)
• CSS online resources
• Norwegian An Introduction to CSS
  http//www.stud.ifi.uio.no/lmariusg/download/arti
  kler/CSSintro.html
• Dutch A Tutorial on HTML and CSS
  http//www.useit.com/alertbox/9707a.html

11
Dynamic Hypertext Markup Language (DHTML)

• Introduction to DHTML
• How DHTML works?
• Advantages and Disadvantages
• Browser differences
• JavaScript for both browsers
• Event Handlers
• Examples
• Related sources

12
Introduction to DHTML

• Dynamic Hypertext Markup Language (DHTML) refers
  to web pages that move, animate or respond to the
  user after downloading to the browser.
• Describes HTML pages with dynamic content.
• Any element on a web page -- images, text,
  tables, styles, etc. -- can manipulated,
  responding to user mouse action, without
  reloading anything from the server.
• Result
• Flexible layout
• Faster interactivity
• Motion without plug-ins

13
How DHTML Works?

• DHTML works through a combination of
• HTML 3.2 or 4.0
• JavaScript - the web's standard scripting
  language
• Cascading style sheets (CSS)
• Document Object Model (DOM) - a means of
  accessing a document's individual parts

14
Advantages and Disadvantages

• Advantages
• Small file sizes - DHTML files are small compared
  to other interactive media such as Flash or
  Shockwave
• Flexibility with layout (can position elements
  where you want them)
• Supported by both major browsers
• No plug-ins necessary - Plug-ins are not needed
  to view DHTML files
• Client-side processing - scripts run on the
  client side. Once a page has been downloaded, all
  its scripts run on the user's browser rather than
  on a server.

15
Advantages and Disadvantages

• Disadvantages
• Not implemented uniformly in all browsers!
• Time-consuming, cross-platform de-bugging
  necessary
• won't run on older browsers

16
Browser Differences

• In order to create DHTML content, we will need to
  understand the differences between Microsoft's
  and Netscape's DHTML.
• For example Dynamic objects (Objects are
  generally words or text) in a Netscape
  Communicator are called layers. In Internet
  Explorer they are referred to as styles.

17
Browser Differences

• In Netscape, JavaScript would reference to
  document. "layer_name".document.images
  "image_name". In Internet Explorer, JavaScript
  reference to document.all."style_name".style.
• In Netscape, a positional object's X coordinate
  is called left and its Y coordinate is called
  top. document."layer_name".left
  document."layer_name".top

18
Browser Differences

• In Internet Explorer, a positional objects X
  coordinate is called pixelleft and its Y
  coordinate is called pixeltop. document.all."style
  _name".style.pixelleft document.all."style_name".
  style. pixeltop

19
JavaScript for both Browsers

• To write DHTML for both Netscape and Internet
  Explorer, one must create two sets of JavaScript
  functions.
• The document.layers object is specific to
  Netscape 4.0, while the document.all object is
  specific to Internet Explorer 4.0.

20
JavaScript for both Browsers

• ltSCRIPT Language"JavaScript"gt
• function check()
• if (ns4)
• // do something in
  Netscape Navigator 4.0
• if (ie4)
• // do something in
  Internet Explorer 4.0
• lt/SCRIPTgt

21
Event Handlers

• JavaScript is used to make different things
  happen when a specified event occurs. You do this
  with a category of JavaScript elements called
  event handlers. Some common event handlers
  include
• onMouseOver when the user puts the cursor over a
  link
• onMouseOut when the user removes the cursor
  from a link
• onClick when the user clicks on an option

22
Related Sources

• Books
• Designing With JavaScript Creating Dynamic Web
  Pages (Nick Heinle, Published 1997)
• DHTML and JavaScript (Gilorien Published 1999)
• Essential Java Script for Web Professionals (Dan
  Barrett, et al Published 1999)
• Websites
• http//www.htmlguru.com/
• http//www.dhtmlzone.com/
• http//www.javascripts.com/