CSS and DHTML For the Web
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

CSS and DHTML For the Web PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

CSS and DHTML For the Web. N. Muralidhara National Centre for Science Information (NCSI) Indian Institute of Science Bangalore ­ 560012. (E-Mail: [email protected]). Cascading Style Sheet. Layout and Design. Cascading Style Sheet (CSS). Introduction

Download Presentation

CSS and DHTML For the Web

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Css and dhtml for the web

CSS and DHTML For the Web

N. Muralidhara

National Centre for Science Information (NCSI)

Indian Institute of Science

Bangalore ­ 560012.

(E-Mail: [email protected])

Cascading style sheet

Cascading Style Sheet

Layout and Design

Cascading style sheet css

Cascading Style Sheet (CSS)

  • Introduction

  • Advantages and disadvantages

  • CSS basics

  • Selectors

  • 4 Ways To Put CSS And HTML Together

  • Conclusion

  • Learning CSS: Resources



  • 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.

Advantages and disadvantages

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.

Css basics

CSS Basics

  • A style definition is made up of a selector followed by a declaration block, as shown in this example:

    • <html>

    • <head>

    • <title>CSS Basics</title>

    • <style type="text/css">

    • P { color:#000000 }

    • h1{font-weight: bold; font-style: italic; color: red}

    • </style>

    • </head>

    • <body>



  • 4 types of selectors

    • 1. Type Selectors

    • 2. Grouping Selectors

    • 3. ID Selectors

    • 4. Class Selectors

    • Examples

4 ways to put css and html together

4 Ways To Put CSS And HTML Together

  • 1. Defining a style sheet inside of the HTML document,

  • inside the <HEAD> 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 [email protected]' notation.

  • Example

  • 4. Using a style element inside the document body, attached

  • to a tag.

  • Example



  • 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.

Learning css resources

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/artikler/CSSintro.html

    • Dutch: A Tutorial on HTML and CSS http://www.useit.com/alertbox/9707a.html

Dynamic hypertext markup language dhtml

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

Introduction to dhtml

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

How dhtml works

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

Advantages and disadvantages1

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.

Advantages and disadvantages2

Advantages and Disadvantages…

  • Disadvantages:

    • Not implemented uniformly in all browsers!

    • Time-consuming, cross-platform de-bugging necessary

    • won't run on older browsers

Browser differences

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.

Browser differences1

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

Browser differences2

Browser Differences…

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

Javascript for both browsers

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.

Javascript for both browsers1

JavaScript for both Browsers…

<SCRIPT Language="JavaScript">

function check() {

if (ns4) {

// do something in Netscape Navigator 4.0


if (ie4) {

// do something in Internet Explorer 4.0




Event handlers

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

Related sources

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/

  • Login