Chapter 22
Introduction to DHTML & CSS
• Introduction
• DHTML technologies
• CSS (Cascading Style Sheets)
DHTML is a new & emerging technology that has evolved to meet the increasing demand for
eye-catching & mind-catching web sites.
DHTML combines HTML with CSSs & other scripting languages HTML specifies a web page’s
elements like table ,frame, paragraph etc. CSS can be used to determine an element’s size, color,
position & a number of other features. Scripting languages can be used to manipulate the web
page elements so that styles assigned to them can change in response to a user’s input.
What you should already know
Before you continue you should have a basic understanding of the following:
1. WWW, HTML and the basics of building Web pages
2. CSS
3. JavaScript
DHTML is NOT a W3C Standard!
Dynamic HTML is not a standard defined by the World Wide Web Consortium (W3C), it is a
"marketing term" that was used by Netscape and Microsoft to describe the new technologies the
4.x generation browsers would support.
Dynamic HTML is a combination of technologies to make Web pages dynamic. To most people
Dynamic HTML means a combination of HTML 4.0, Style Sheets and JavaScript. W3C once
said:
"Dynamic HTML is a term used by some vendors to describe the combination of HTML, style
sheets and scripts that allows documents to be animated."
DHTML Technologies
With DHTML a Web developer can control how to display and position HTML elements in a
browser window.
165
HTML 4.0 introduced two important things: Cascading Style Sheets (CSS), and the Document
Object Model (DOM).
Cascading Style Sheets (CSS) :
With CSS we got a style and layout model for HTML documents.
Document Object Model :
With the DOM we got a document content model for HTML documents.
JavaScript (and VBScript) allows you to write scripting code to control HTML elements.
DHTML technologies in Netscape Navigator 4.x and Internet Explorer 4.x:
Netscape Navigator 4.x Cross-Browser DHTML Internet Explorer 4.x
JSS (JavaScript Style Sheets) CSS1 Visual Filters (allow you to
(allows you to control how CSS2 (allows you to control apply visual effects to text and
different HTML elements will how different HTML elements graphics)
be displayed) will be displayed) Dynamic CSS (allows you to
Layers (allows you to control CSS Positioning (allows you to control element positioning and
element positioning and control element positioning and visibility)
visibility) visibility)
JavaScript
Problems with coding DHTML technologies WILL occur as long as each browser creates its
own proprietary features and technology that is not supported by other browsers. A Web page
may look great in one browser and horrible in another.
CSS
Style sheets are powerful mechanism for adding styles to web documents. They enforce
standards & uniformity throughout a website & provide numerous attributes to create dynamic
effects. The advantage of the ability to make global changes to all documents from a single
location. Style sheets are said to cascade when they combine to specify the appearance of a page.
Syntax
The Style assignment process is accomplished with the …. tags. The
syntax for making the assignment is simple. Between the …. tags , specific
style attributes are listed. The CSS syntax is made up of three parts: a selector, a property and a
value:
selector {property: value}
166
The selector is normally the HTML element/tag you wish to define, the property is the attribute
you wish to change, and each property can take a value. The property and value are separated by
a colon and surrounded by curly braces:
body {color: black}
If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}
Note: If you wish to specify more than one property, you should separate each property with a
semi-colon. The example below shows how to define a center aligned paragraph, with a red text
color:
p {text-align:center;color:red}
To make the style definitions more readable, you can describe one property on each line, like
this:
P
{
text-align: center;
color: black;
font-family: arial
}
CSS Background Properties
CSS Background properties define the background effects of an element.
CSS Background
The Background properties allow you to control the background color of an element, set an
image as the background, repeat a background image vertically or horizontally, and position an
image on a page.
Background Properties:
167
Property Description Values
background A shorthand property for background-color
setting all background background-image
properties in one declaration background-repeat
background-
attachment
background-position
background-attachment Sets whether a background scroll
image is fixed or scrolls fixed
with the rest of the page
background-color Sets the background color color-rgb
of an element color-hex
color-name
transparent
background-image Sets an image as the url
background none
background-position Sets the starting position of top left
a background image top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat Sets if/how a background repeat
image will be repeated repeat-x
repeat-y
no-repeat
Example :
Working with Style sheets using background attributes
H1 {font-family:arial,Helvetica;font-size:26pt;
background-image:url(images/sct-logo.jpg)}
H2 {font-family:arial,Helvetica;font-size:26pt;
background-image:url(images/sct-logo.jpg) ;
background-repeat:no-repeat}
P {font-size:12pt;font-style:italic;font-weignt:bold}
168
with background repeat
Silicon Chip Technologies
A private ltd. Company found in December 1989.
with background no-repeat
Silicon Chip Technologies
CSS Border Properties
CSS Border properties define the borders around an element.
CSS Borders
The Border properties allow you to specify the style, color, and width of an element's border. In
HTML we use tables to create borders around a text, but with the CSS Border properties we can
create borders with nice effects, and it can be applied to any element.
Border Properties:
Property Description Values
border A shorthand property for border-width
setting all of the properties border-style
for the four borders in one border-color
declaration
border-bottom A shorthand property for border-bottom-width
setting all of the properties border-style
for the bottom border in one border-color
declaration
border-bottom-color Sets the color of the bottom border-color
border
border-bottom-style Sets the style of the bottom border-style
border
border-bottom-width Sets the width of the bottom thin
border medium
thick
length
border-color Sets the color of the four color
borders, can have from one
to four colors
169
border-left A shorthand property for border-left-width
setting all of the properties border-style
for the left border in one border-color
declaration
border-left-color Sets the color of the left border-color
border
border-left-style Sets the style of the left border-style
border
border-left-width Sets the width of the left thin
border medium
thick
length
border-right A shorthand property for border-right-width
setting all of the properties border-style
for the right border in one border-color
declaration
border-right-color Sets the color of the right border-color
border
border-right-style Sets the style of the right border-style
border
border-right-width Sets the width of the right thin
border medium
thick
length
border-style Sets the style of the four none
borders, can have from one hidden
to four styles dotted
dashed
solid
double
groove
ridge
inset
outset
border-top A shorthand property for border-top-width
setting all of the properties border-style
for the top border in one border-color
declaration
border-top-color Sets the color of the top border-color
border
border-top-style Sets the style of the top border-style
border
border-top-width Sets the width of the top thin
170
border medium
thick
length
border-width A shorthand property for thin
setting the width of the four medium
borders in one declaration, thick
can have from one to four length
values
Example:
Working with Style sheets using border attributes
H1 {font-family:arial,Helvetica;font-size:26pt;
background-image:url(images/sct-logo.jpg)}
Silicon Chip Technologies
P {font-size:12pt;font-style:italic;font-weignt:bold;
color:#23238e;
border-color:#23238e;border-style:groove;
border-width:thick}
Silicon Chip Technologies
A private ltd. Company found in December 1989.
CSS Font Properties
CSS Font properties define the font in text.
CSS Fonts
The Font properties allow you to change the font family, boldness, size, and the style of a text.
Font Properties:
Property Description Values
font A shorthand property for font-style
171
setting all of the properties font-variant
for a font in one declaration font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family A prioritized list of font family-name
family names and/or generic generic-family
family names for an element
font-size Sets the size of a font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-size-adjust Specifies an aspect value for none
an element that will number
preserve the x-height of the
first-choice font
font-stretch Condenses or expands the normal
current font-family wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Sets the style of the font normal
italic
oblique
font-variant Displays text in a small- normal
caps font or a normal font small-caps
font-weight Sets the weight of a font normal
172
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
Example:
Working with Style sheets using font attributes
H1 {font-family:arial,Helvetica}
P {font-size:12pt;font-style:italic }
Silicon Chip Technologies
A private ltd. Company found in December 1989.
The vision of this company is to provide any corporate client a single entity which addresses all
their Software Development, Technical & User Documentation, Training & Manpower
Recruitment needs.
CSS Margin Properties
CSS Margin properties define the space around elements.
CSS Margins
The Margin properties define the space around elements. It is possible to use negative values to
overlap content. The top, right, bottom, and left margin can be changed independently using
separate properties. A shorthand margin property can also be used to change all of the margins at
once.
173
Margin Properties:
Property Description Values
margin A shorthand property for margin-top
setting the margin properties margin-right
in one declaration margin-bottom
margin-left
margin-bottom Sets the bottom margin of auto
an element length
%
margin-left Sets the left margin of an auto
element length
%
margin-right Sets the right margin of an auto
element length
%
margin-top Sets the top margin of an auto
element length
%
Example :
Working with Style sheets using border attributes
BODY {margin-top:10%}
H1 {font-family:arial,Helvetica;font-size:26pt;
color:red}
P {font-size:12pt;font-style:italic;font-weignt:bold;
color:#23238e;
margin-left:15%;magin-rignt:15%}
Silicon Chip Technologies
A private ltd. Company found in December 1989.
174
CSS Text Properties
CSS Text properties define the appearance of text.
CSS Text
Text properties allow you to control the appearance of text. It is possible to change the color of a
text, increase or decrease the space between characters in a text, align a text, decorate a text,
indent the first line in a text, and more.
Text Properties:
Property Description Possible Values
color Sets the color of a text color
direction Sets the text direction ltr
rtl
letter-spacing Increase or decrease the normal
space between characters length
text-align Aligns the text in an left
element right
center
justify
text-decoration Adds decoration to text none
underline
overline
line-through
blink
text-indent Indents the first line of text length
in an element %
text-shadow none
color
length
text-transform Controls the letters in an none
element capitalize
uppercase
lowercase
unicode-bidi normal
embed
bidi-override
white-space Sets how white space inside normal
an element is handled pre
175
nowrap
word-spacing Increase or decrease the normal
space between words length
Example :
Working with Style sheets using border attributes
H1 {font-family:arial,Helvetica;font-size:26pt;
text-decoration:blink;color:red}
P {font-size:12pt;font-style:normal;font-weignt:bold;
color:#23238e;}
H6{font-size:12pt;font-style:italic;font-weight:bold;
color:#23238e;text-align:justify;text-indent:.5in}
Silicon Chip Technologies
without text align,first line indent
A private ltd. Company found in December 1989.
The vision of this company is to provide any corporate client a single entity which
addresses all their Software Development, Technical & User Documentation, Training &
Manpower Recruitment needs.
with text align,first line indent
A private ltd. Company found in December 1989.
The vision of this company is to provide any corporate client a single entity which
addresses all their Software Development, Technical & User Documentation, Training &
Manpower Recruitment needs.
CSS How To...
How to Insert a Style Sheet
When a browser reads a style sheet, it will format the document according to it. There are three
ways of inserting a style sheet:
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can change the look of an entire Web site by changing one file. Each page must link to
the style sheet using the tag. The tag goes inside the head section:
176
The browser will read the style definitions from the file mystyle.css, and format the document
according to it.
An external style sheet can be written in any text editor. The file should not contain any html
tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is
shown below:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define
internal styles in the head section by using the tag, like this:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
The browser will now read the style definitions, and format the document according to it.
A browser normally ignores unknown tags. This means that an old browser that does not support
styles, will ignore the tag, but the content of the tag will be displayed on the
page. It is possible to prevent an old browser from displaying the content by hiding it in the
HTML comment element:
177
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation.
Use this method sparingly, such as when a style is to be applied to a single occurrence of an
element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain
any CSS property. The example shows how to change the color and the left margin of a
paragraph:
This is a paragraph
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align: right;
font-size: 20pt
}
If the page with the internal style sheet also links to the external style sheet the properties for h3
will be:
color: red;
text-align: right;
font-size: 20pt
The color is inherited from the external style sheet and the text-alignment and the font-size is
replaced by the internal style sheet.
178
CSS Comments
You can insert comments in CSS to explain your code, which can help you when you edit the
source code at a later date. A comment will be ignored by the browser. A CSS comment begins
with "/*", and ends with "*/", like this:
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
Summary
In the above chapter we learnt about DHTML which combines HTML with CSSs & other
scripting languages HTML specifies a web page’s elements like table ,frame, paragraph etc. CSS
can be used to determine an element’s size, color, position & a number of other features. They
enforce standards & uniformity throughout a website & provide numerous attributes to create
dynamic effects. We also learnt how to insert a styling sheet by using the three ways:- internal
style sheets, inline sheets, external sheets & multiple style sheets.
Questionnaire
1. Give a brief description of DHTML.
2. What is CSS? Name the properties of CSS.
3. Explain the different properties of CSS.
4. What are the different ways to insert a style sheet in DHTML?
179