Cascading Style Sheet - Castle of SARAVANESH J | Not build

Transcript Cascading Style Sheet - Castle of SARAVANESH J | Not build

CSS and DHTML For the Web
Cascading Style Sheet
Layout and Design
IISc 22-26 Nov’99
IIRML P6
2
Cascading Style Sheet (CSS)
•
•
•
•
•
•
•
Introduction
Advantages and disadvantages
CSS basics
Selectors
4 Ways To Put CSS And HTML Together
Conclusion
Learning CSS: Resources
IISc 22-26 Nov’99
IIRML P6
3
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.
IISc 22-26 Nov’99
IIRML P6
4
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.
IISc 22-26 Nov’99
IIRML P6
5
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>
IISc 22-26 Nov’99
IIRML P6
6
Selectors
• 4 types of selectors
–
–
–
–
–
IISc 22-26 Nov’99
1. Type Selectors
2. Grouping Selectors
3. ID Selectors
4. Class Selectors
Examples
IIRML P6
7
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.
IISc 22-26 Nov’99Example
IIRML P6
8
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.
IISc 22-26 Nov’99
IIRML P6
9
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/CSSi
ntro.html
– Dutch: A Tutorial on HTML and CSS
http://www.useit.com/alertbox/9707a.html
IISc 22-26 Nov’99
IIRML P6
10
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
IISc 22-26 Nov’99
IIRML P6
11
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:
–
–
–
IISc 22-26 Nov’99
Flexible layout
Faster interactivity
Motion without plug-ins
IIRML P6
12
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
IISc 22-26 Nov’99
IIRML P6
13
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.
IISc 22-26 Nov’99
IIRML P6
14
Advantages and Disadvantages…
• Disadvantages:
– Not implemented uniformly in all browsers!
– Time-consuming, cross-platform de-bugging necessary
– won't run on older browsers
IISc 22-26 Nov’99
IIRML P6
15
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.
IISc 22-26 Nov’99
IIRML P6
16
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
IISc 22-26 Nov’99
IIRML P6
17
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
IISc 22-26 Nov’99
IIRML P6
18
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.
IISc 22-26 Nov’99
IIRML P6
19
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
}
}
</SCRIPT>
IISc 22-26 Nov’99
IIRML P6
20
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
IISc 22-26 Nov’99
IIRML P6
21
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/
IISc 22-26 Nov’99
IIRML P6
22

Cascading Style Sheet - Castle of SARAVANESH J | Not build

Transcript Cascading Style Sheet - Castle of SARAVANESH J | Not build

Directory