slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
CSS and DHTML For the Web PowerPoint Presentation
Download Presentation
CSS and DHTML For the Web

Loading in 2 Seconds...

play fullscreen
1 / 22

CSS and DHTML For the Web - PowerPoint PPT Presentation

  • Uploaded on

CSS and DHTML For the Web. Cascading Style Sheet. Layout and Design. Cascading Style Sheet (CSS). Introduction Advantages and disadvantages CSS basics Selectors 4 Ways To Put CSS And HTML Together Conclusion Learning CSS: Resources. Introduction.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'CSS and DHTML For the Web' - gwendolyn-colon

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
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 '@import' 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
    • Dutch: A Tutorial on HTML and CSS
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: