Download DHTML Introduction - Triple Dash Infotech Pvt. Ltd.

NOTES OF DHTML (CSS)
DHTML Introduction
DHTML is the art of combining HTML, JavaScript, DOM, and CSS.
DHTML is NOT a language.
DHTML is a TERM describing the art of making dynamic and interactive web
pages.
DHTML combines HTML, JavaScript, the HTML DOM, and CSS.
According to the World Wide Web Consortium (W3C):
"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."
Difference between Static vs. Dynamic HTML
Static HTML means when we put HTML elements (images,paragraphs etc.) in a specific order
in the source code. The browser always showed all elements in this order. styling and
Positioning was done by tables, div's and such aids. If we wanted to change the positioning or
order
of
the
elements,
we
had
to
again
write
the
HTML.
DHTML gives a way to re-organize our pages on the fly. we can take some elements out of
the natural flow of the page, put them somewhere and change its position again and again by
clicking
a
link.
The natural flow of the page is the page as the browser shows it one by one and displays
them in the best possible way from the beginning to the end of the HTML document.
Now take an image, and put it somewhere on the page without regard to this natural flow.
We can force the image to be in the extreme upper left corner of the page, while the rest of
the
content
is
still
distributed
by
the
natural
flow.
Attach a link to that page, say "Move image to the right". As soon as the user clicks this link,
a JavaScript is executed which moves the image, suppose 200 pixels to the right. We can do
this at once or make the image move stealthily to its new position. In either case, the other
elements on the page stay where they are, only the image moves.
Working of DHTML
Dynamic HTML gives authors creative control so they can manipulate any page element and
change styles, content and position at any time. It provides a more dynamic experience on
web pages, making them more like dynamic applications and less like static content. Dynamic
HTML presents richly formatted pages and lets you interact with the content on those pages
without having to download additional content from the server. it means that a page can
respond immediately to user actions, such as a mouse click, without having to retrieve an
entire
new
page
from
the
server.
We
discuss
the
three
important
components
of
Dynamic
HTML
authoring:
Positioning - precisely placing blocks of content on the page and, moving these blocks
around.
Style modifications done by altering the look and display of content on the page.
Event handling is how to relate user events to changes in style and position
TRIPLE DASH INFOTECH PVT. LTD.
1
NOTES OF DHTML (CSS)
Getting Started:
DHTML is a combination of three
the Document Object Model (DOM):
1.
HTML
-
For
creating
different
existing
technologies
page
elements
meshed
like
together
text,image
by
links.
2. CSS - Cascading Style Sheets allows authors and users to attach style (e.g., fonts,
spacing,) to structured documents by separating content of documents and the presentation
style of documents. CSS simplifies site maintenance and Web authoring .
3. JavaScript - it allows you to accesses and dynamically control the individual properties of
both
HTML
and
CSS
JavaScript accesses the properties of an HTML document through the DOM.The work of DOM is
to represent all the attributes of HTML and Style sheets to JavaScript control. You need only to
know about the DOM is what JavaScript commands it accepts.As different browsers have their
slightly different versions of the DOM, so they display HTML properties defferently as well as
access them differently.The basic object in DHTML is a named rectangular region, whose
method of declaration and javascript reference can differ depending on the browser involved.
HTML
The W3C HTML 4 standard has rich support for dynamic content:




HTML
HTML
HTML
HTML
supports
supports
supports
supports
JavaScript
the Document Object Model (DOM)
HTML Events
Cascading Style Sheets (CSS)
DHTML is about using these features, to create dynamic and interactive web pages.
JavaScript
JavaScript is the most popular scripting language on the internet, and it works in all major
browsers.
DHTML is about using JavaScript to control, access and manipulate HTML elements.
HTML DOM
The HTML DOM is a W3C standard. It describes the Document Object Model for HTML.
The HTML DOM defines a standard way for accessing and manipulating HTML documents.
DHTML is about using the DOM to access and manipulate HTML elements.
HTML Events
HTML events are a part of the HTML DOM.
DHTML is about creating web pages that reacts to (user)events.
TRIPLE DASH INFOTECH PVT. LTD.
2
NOTES OF DHTML (CSS)
CSS
CSS defines how to display HTML elements.
DHTML is about using JavaScript and the HTML DOM to change the style and positioning of HTML
elements.
CSS stands for Cascading Style Sheets
Cascading Style Sheets (CSS) are a way to
control the look and feel of your HTML
documents into an organized and efficient
manner.
With CSS you will be able to:



Add new look to your old HTML
Completely
restyle
a web site with
only a few changes into your CSS code
Use the "style" you can create on any
webpage you wish
A CSS file must have a .css file extension
A CSS file can be created using a simple text
editor
File extension:
.css
MIME type:
text/html
Type code:
TEXT
Uniform Type
Identifier:
public.html
Developed by:
World Wide Web
Consortium (W3C)
Type of format:
How to Display HTML
Elements
Extended to:
CSS2
Standard(s):
CSS1,CSS2,CSS2.1
CSS is a program that runs inside Web
Browser
Scripts in CSS file are executed on the Client
What Is CSS?







CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one
Styles Solve a Common Problem
To define the content of a document,HTML tags were originally designed.By using tags like
<h1>, <p>, <table>,they were supposed to say "This is a header", "This is a paragraph",
"This is a table" and so on.Without using any formatting tags ,the layout of the document was
supposed to be taken care of by the browser.
It became more and more difficult to create Web sites where the content of HTML documents
was clearly separated from the document's presentation layout as the two major browsers Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the
<font> tag and the color attribute) to the original HTML specification .
To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard
setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML
TRIPLE DASH INFOTECH PVT. LTD.
3
NOTES OF DHTML (CSS)
4.0.
Cascading Style Sheets is supported by all major browsers .
Style Sheets Can Save a Lot of Work
HOW HTML elements are to be displayed is defined by Styles sheets , just like the font tag and
the color attribute in HTML 3.2. Styles are normally saved in external .css files. you can
change the appearance and layout of all the pages in your Web using External style sheets ,
just by editing one single CSS document! CSS allows developers to control the style and
layout of multiple Web pages all at once so that it is a breakthrough in Web design . It is
possible to define a style for each HTML element and apply it to as many Web pages as you
want.To make a global change,all elements in the Web are updated automatically by simply
changing the style.
» Multiple Styles Will Cascade Into One
To be specified in many ways,Style Sheets allow style information. Inside a single HTML
element which can be inside the <head>element of an HTML page, or in an external CSS
file,Styles can be specified. Even inside a single HTML document,multiple external style sheets
can be referenced.
Cascading Order
» What style will be used when there is more than one style specified for an
HTML element?
By the following rules, all the styles will "cascade" into a new "virtual" style sheet , whereas
fourth one has the highest priority:
1.
2.
3.
4.
Browser default
External style sheet
Internal style sheet (inside the <head> tag)
Inline style (inside an HTML element)
Inline style sheet will override a style declared inside the <head>that's why an inline style
(inside an HTML element) has the highest priority in comparision to an external style sheet, or
in a browser (a default value).
The CSS syntax is categorized into three parts: a selector, a property and a
value:
Rules
Syntax:
selector {property: value}
Any HTML tag is a possible CSS1 selector. You can linked to a particular style which is simply
HTML element through selector. For example, the selector in
P { text-indent: 3em }
TRIPLE DASH INFOTECH PVT. LTD.
4
NOTES OF DHTML (CSS)
Class Selectors
Syntax of Class Selector:
.classname{property:value;}
Different classes can be defined in a single selector, thus allowing the same element to have
different styles. For example, an author may wish to use different color to display code
depending on its language:
code.html { color: #191970 }
code.css { color: #4b0082 }
For example, with class~="pastoral" we can assign style information to all elements as
follows:
*.pastoral { color: green } /* all elements with class~=pastoral */
With class~="pastoral",the following code assigns style only to H1 elements :
H1.pastoral { color: green } /* H1 elements with class~=pastoral */
Given these rules, the first H1 instance below would not have green text, while the second
would:
<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>
Without an associated element,classes may also be declared :
.note { font-size: small }
ID Selectors
Syntax of ID Selector:
#idname{property:value;}
ID selectors are individually assigned for the purpose of defining on a per-element basis. Due
to its inherent limitations,this selector type should only be used sparingly . By using the
indicator "#"to precede a name,an ID selector is assigned . For example, an ID selector could
be assigned as such:
#svp94O { text-indent: 4em }
Grouping
Grouping of selectors and declarations is allowed in order to decrease repetitious statements
within style sheets,. For example,in a document , all of the headings could be given identical
declarations through a grouping:
h1,h2,h3,h4,h5,h6
TRIPLE DASH INFOTECH PVT. LTD.
5
NOTES OF DHTML (CSS)
{
color: blue
font-family: sans-serif
}
CSS Comments
Comments are denoted within style sheets is same as Comments in C programming .
Comments may help you when you edit the source code at a later date and are used to
explain your code. A comment will be ignored by browsers. A CSS comment begins with "/*",
and ends with "*/", like this
External Style Sheet
The file that contains only CSS code and is saved with a ".css" file extension is called as
External CSS. Using the <link>instead of <style>,this CSS file is then referenced in your
HTML. Don't worry if you're confused. We are going to walk you through the whole process.
<html>
<head>
<title>My First Stylesheet</title>
<link rel=stylesheet href="mystyles.css" type="text/css">
</head>
<body>
<h1>Stylesheets: The Tool of the Web Design Gods</h1>
<P>Friendship is always alive! Squash your enemies!</P>
</body>
</html>
Now create a separate text file called mystyles.css (you can name it anything you want). All it
contains is this:
h1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
Note:
When the same style / format / look n feel is required on numerous pages then we say that an
external style sheet (CSS) is perfect.The webmaster can change the look of the entire site - by
changing one file,with the help of an external style sheet,.
Internal Style Sheet
When a single document has a unique style,an internal style sheet should be used.In the head
section, by using the <style> tag, you can define internal styles like this:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
The browser will now format the document and read the style definitions according to it.
TRIPLE DASH INFOTECH PVT. LTD.
6
NOTES OF DHTML (CSS)
Note: A browser normally ignores unknown tags. This means that an old browser that does
not support styles, will ignore the <style> tag, but the content of the <style> tag will be
displayed on the page. By hiding it in the HTML comment element: ,it is possible to prevent an
old browser from displaying the content.
<head>
<style type="text/css">
<!-hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
Inline Styles
Inserting stylesheets rules right in the middle of all your HTML is called as inline stylesheet. It
might look like this:
<html>
<head>
<title>My First Stylesheet</title>
</head>
<body>
<h1 style="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design
Gods</h1>
<P style="background: yellow; font-family: courier">Amaze your friends! Squash your
enemies!</P>
</body>
</html>
Multiple Style Sheets
In different style sheets if some properties have been set for the same selector the values will
be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h4 selector:
h4
{
color: blue;
text-align: left;
font-size: 8pt
}
And an internal style sheet has these properties for the h4 selector:
h4
{
text-align: right;
font-size: 20pt
}
If the page with the external style sheet also link to the internal style sheet then the
properties for h4 will be:
TRIPLE DASH INFOTECH PVT. LTD.
7
NOTES OF DHTML (CSS)
color: blue;
text-align: right;
font-size: 20pt
The text-alignment and the font-size is replaced by the internal style sheet and The color is
inherited from the external style sheet.
CSS Selector:Syntax
In a typical CSS statements you have the following:

SELECTOR { PROPERTY: VALUE }
You wish to manipulate and "VALUE" represents the value of the specified property whereas
the property is the CSS element.
For example, you could mark up the page in the following way if you want to target the first
paragraph and first list items on a page to make them stand out:
<body>
<p class="big">This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>
CSS Selector Name
The HTML tag is a direct relationship to the selector name which you want to edit. If you wanted to
change the way a paragraph tag behaved the CSS code would look like:
p { PROPERTY: VALUE }
Whenever you are manipulating the paragraph HTML element,the above example is a template that
you can use . In the next lessons we will teach why and where you should use CSS and where to
place your CSS .
Creating Internal CSS Code
CSS Code is different as we do HTML code. This makes sense because CSS is not HTML, but rather a
way of manipulating existing HTML. Below is an example of some simple, yet fully
functional CSS code.
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
TRIPLE DASH INFOTECH PVT. LTD.
8
NOTES OF DHTML (CSS)
</body>
</html>
O/P:
White text on a black background!
In our CSS code ,you probably noticed that we were altering the BODY and P HTML tags. CSS is
known as intuitive language. You are pretty much set once you understand the general format for
CSS
code.
General CSS Format:

"HTML
tag" { "CSS
Property" : "Value" ;
}
Back in our code example, we manipulated <p> and <body>, both well known HTML tags. To clarify,
here is a step-by-step process of what is going on in that first line of CSS code where we played
around with "p".



We chose the HTML element we wanted to manipulate. - p{ : ; }
Then we chose the CSS attribute color. - p { color: ; }
Next we chose the font color to be white. - p { color: white; }
Now all text within a paragraph tag will show up as white! Now an explanation of the CSS code that
altered the <body>'s background.



We choose the HTML element Body - body { : ; }
Then we chose the CSS attribute. - body { background-color: ; }
Next we chose the background color to be black. - body { background-color: black; }
You will probably find your CSS code not working as you expected until you become accustomed to
using CSS code . A leading cause of this might be an out of place :, ;, {, or } or it might be that you
forgot to use a :, ;, {, or } when it was required.If you ever have issues with the correct format for
CSS , be sure to check back here
Tips:



Place your CSS Code between <style> and </style>
Be sure you know the correct format(syntax) of CSS code.
CSS will literally save you hours of time...after you spend a few getting the hang of it.
CSS BackGround
For specifying information about how to display the background surface onto which content
(images, text, etc.) is rendered,this shorthand property notation is used. Backgrounds can be
images and/or colors.If an image is specified, many choices are available to specify display
behavior.In the same property definition ,both a background image and color can be specified
, but it is not required to have both. The values will be ignored,if URL behavior properties are
listed without an accompanying URL. Although this property does not inherit,because of the
default 'transparent' background-color value in the children elements, a parent element's
background will shine through.Out of several shorthand properties,the background property is
one that specify values controlling many aspects of display behavior
TRIPLE DASH INFOTECH PVT. LTD.
9
NOTES OF DHTML (CSS)
CSS Background Color
As you have seen throughout academictutorials Tutorials, many different background colors
are present.Without using tables,these varying backgrounds were obtained. Below are two
examples of CSS backgrounds.
<p style="background-color:yellow;">This text has a background color applied.</p>
O/P:
This text has a background color applied.
CSS Background Image
when the user scrolls down your page maybe you would like to have an image that remains
fixed. With CSS,this can be done quite easily and more, including:



choosing if a background will repeat and which directions to repeat in.
precision positioning
scrolling/static images
Let's begin with a default CSS background image.
p { background-image: url(/images/sunset.jpg); }
h1{ background-image: url(/images/winter.jpg); }
O/P:
This <p> has a background image using a local path to the picture.
This <h1> has a background image using the complete url path.
Background Image Repeat
You can have a background image repeat horizontally (x),vertically (y), in both directions, or
in neither direction.
CSS Code:
p{
background-image: url(smallPic.jpg);
background-repeat: repeat; }
h1 {
background-image: url(smallPic.jpg);
background-repeat: repeat-y; }
ol {
background-image: url(smallPic.jpg);
background-repeat: repeat-x; }
ul {
background-image: url(smallPic.jpg);
background-repeat: no-repeat; }
TRIPLE DASH INFOTECH PVT. LTD.
10
NOTES OF DHTML (CSS)
CSS Background Properties
You can 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 with the help of
the CSS background properties .
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property
is defined (CSS1 or CSS2)
Property
Description
values
background
background-color
background-image
background-repeat
A shorthand property for setting all background
backgroundproperties in one declaration
attachment
backgroundposition
backgroundattachment
Sets whether a background image is fixed or scroll
scrolls with the rest of the page
fixed
background-color
Sets the background color of an element
color-rgb
color-hex
color-name
transparent
background-image Sets an image as the background
url
none
backgroundposition
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
Sets the starting position of a background image
background-repeat Sets if/how a background image will be repeated
repeat
repeat-x
repeat-y
no-rep
Text Decoration
Adding horizontal lines through your text,above or below,text-decoration is used. .
Possible Values:
 none
 underline
 overline
 line-through
 blink
TRIPLE DASH INFOTECH PVT. LTD.
11
NOTES OF DHTML (CSS)
CSS Code
h1{ text-decoration: line-through; }
h2{ text-decoration: overline; }
h3{ text-decoration: underline; }
a { text-decoration: none; }
O/P:
This header has a line through the middle
This header has a line over the top
This header has an underline
Text Indent
To indent your paragraphs without having to use preformatted HTML tags or inserting spaces
manually,CSS text-indent is used . You may define your indendation with percentages or exact
values. We recommend using exact values.
CSS Code
p { text-indent: 30px; }
h1 { text-indent: 30%; }
O/P:
This is a paragraph that uses a text indentation with the value of 20px. This is the
recommended usage of text indentation.
This is a header that uses a text indentation of 30%. Tizag does not
recommend indenting your text with percentages.
Text Align
Like most literature,the default text-align setting is to the left and other forms of media that
you read. However, sometimes you may require a different alignment and it can be specified
using the text-align attribute.
CSS Code
p { text-align: right; }
h1{ text-align: justify;}
Text Transform
To modify the capitalization of your text,Text-transform is used.
CSS Code
p { text-transform: capitalize; }
h5{ text-transform: uppercase; }
h6{ text-transform: lowercase; }
TRIPLE DASH INFOTECH PVT. LTD.
12
NOTES OF DHTML (CSS)
CSS White Space
To prevent text from wrapping until you place a break <br /> into your text,the white-space
attribute is used .
CSS Code
p { white-space: nowrap; }
CSS Word Spacing
You are able to specify the exact value of the spacing between your words, with the use of
CSS attribute word-spacing . Word-spacing should be defined with exact values.
CSS Code
p { word-spacing: 20px; }
CSS Letter Spacing
You are able to specify the exact value of the spacing between your letters,with the CSS
attribute letter-spacing. Letter-spacing should be defined with exact values.
CSS Code
p { letter-spacing: 5px; }
Font Properties
Font properties are given below:






Font
Font
Font
Font
Font
Font
Family
Style
Variant
Weight
Size
Font Family
 To render the text,the font family specifies which font family is to be used .
 For an element,the font-family property is a prioritized list of font family names and/or
generic family names . The browser will use the first value it recognizes.
 A font family is designed to be used in combination and exhibiting similarities in design
which cotains a group of fonts,

One member of the family may be bold, another italic, another small caps or using
TRIPLE DASH INFOTECH PVT. LTD.
13
NOTES OF DHTML (CSS)
ondensed. Font family names include "Helvetica", "New Century Schoolbook", and "Kyokasho
ICA L". Font family names are not restricted to Latin characters. Font families may be of
different categories: those with or without serifs, those that resemble handwriting,those
whose characters are or are not proportionally spaced, those that are fantasy fonts, etc.
CSS Code
body
{
font-family: courier, serif
}
p
{
font-family: arial, "lucida console", sans-serif
}
<p style="font-family: arial, 'lucida console', sans-serif">
Font Style
Whether the text is to be rendered using a normal, italic, or oblique face,the font style is used.
Italic is a more cursive companion face to the normal face, but not so cursive as to make it a
script face. Oblique is more commonly used as a companion face to sans-serifand slanted form
of the normal face . This definition avoids having to label slightly slanted normal faces as
oblique, or normal Greek faces as italic. The font-style property sets the style of a font.
CSS Code
body
{
font-style: italic
}
Font Variant
Whether the text is to be rendered using the normal glyphs for lowercase characters or using
small-caps glyphs for lowercase characters,the font variant is used. A particular font property
is used to request an appropriate font and may contain only normal, only small-caps, or both
types of glyph and, if the font contains both variants, the appropriate glyphs.
p{font-variant: normal}
Font Weight
The font weight used to render the text like the boldness or lightness of the glyphs, relative to
other fonts in the same font family.
CSS Code
p{ font-weight: bolder}
TRIPLE DASH INFOTECH PVT. LTD.
14
NOTES OF DHTML (CSS)
Font Size
To set the size of the font from baseline to baseline, when set solid (in CSS terms, this is when
the 'font-size' and 'line-height' properties have the same value), the font size is used .
CSS Code
body
{
font-size: x-large
}
p
{
font-size: 20px
}
The follwing table describe the font Properties:
Property
font
Description
Sets multiple font
properties
values
Sample Code
font-family
font-size
font-weight
font-style
font-variant
font-family Sets the font-name
family-name
genericfamily
p {font-family: verdana,arial}
p {font-size: 10pt; font-family:
arial}
font-size
smaller
larger
xx-small
x-small
small
medium
large
x-large
xx-large
P {font: 12pt arial}
P {font: 70% sans-serif}
P {font: bold italic large Verdana}
Sets the size of the text
normal
bold
bolder
lighter
100
200
font-weight Sets the weight of the text 300
400
500
600
700
800
900
p{font-weight: bold}
font-style
Sets the style of the text
normal
italic
oblique
p{font-style: italic}
fontvariant
Sets the font variant
normal
small caps
h2 {font-variant: small-caps}
TRIPLE DASH INFOTECH PVT. LTD.
15
NOTES OF DHTML (CSS)
Border Width Proprety:
If you want to set all four widths at the same time, in format A B C and D as pictured
above,the border-width property is used. The value can be thin, medium, thick, or a
numeric value and unit, such as 5px or 0.2em.
In every paragraph if you want to a medium border around, you could use:
CSS Code
p { border-width: medium; }
/* This sets all to medium */
p { border-width: medium medium; }
/* This sets top/bottom medium then right/left medium */
p { border-width: medium medium medium medium; }
/* Set each A B C and D */
The default border is no border at all, if you want any border to visually appear, you'll need to
add a second property, border-style. The values for border-style are: none, dotted, dashed,
solid, double, groove, ridge, inset, outset.
So let's make each paragraph have a medium border that is dotted:
CSS Code
p { border-width: medium; border-style: dotted; }
Font Variant
So close to getting our border perfect. But what if the border to be blue Simple. The bordercolor property is set to blue
p { border-width: medium; border-style: dotted; border-color: blue; }
Wouldn't it be nice to have a combination property? There is It's just border and it expects
width, style, then color. So the example immediately above could be simplified to:
CSS Code
p { border: medium dotted blue; }
If you can set each of the four borders individually. The properties are border-top, borderright, border-bottom, and border-left. The values expected are width, style, then color. If you
wanted every paragraph with a dotted left border in red, and a dashed right border in purple,
you could use:
CSS Code
p { border-left: dotted red; border-right: dashed purple; }
The follwing table describe the border Properties:
TRIPLE DASH INFOTECH PVT. LTD.
16
NOTES OF DHTML (CSS)
Property
border
Description
values
border-width
A shorthand property for setting all of the properties for the
border-style
four borders in one declaration
border-color
borderA shorthand property for setting all of the properties for the bottom-width
border-bottom
bottom border in one declaration
border-style
border-color
borderbottom-color
Sets the color of the bottom border
border-color
borderbottom-style
Sets the style of the bottom border
border-style
borderbottom-width
Sets the width of the bottom border
thin
medium
thick
length
border-color
Sets the color of the four borders, can have from one to
four colors
color
border-left
border-leftA shorthand property for setting all of the properties for the width
left border in one declaration
border-style
border-color
border-leftcolor
Sets the color of the left border
border-color
border-leftstyle
Sets the style of the left border/td>
border-style
border-leftwidth
Sets the width of the left border
thin
medium
thick
length
border-right
order-rightA shorthand property for setting all of the properties for the width
right border in one declaration
border-style
border-color
border-rightcolor
Sets the color of the right border
border-color
border-rightstyle
Sets the style of the right border
border-style
border-rightwidth
Sets the width of the right border
thin
medium
thick
length
border-style
none
hidden
dotted
dashed
Sets the style of the four borders, can have from one to four solid
styles
double
groove
ridge
inset
outset
border-top
A shorthand property for setting all of the properties for the border-toptop border in one declaration
width
TRIPLE DASH INFOTECH PVT. LTD.
17
NOTES OF DHTML (CSS)
border-style
border-color
border-topcolor
Sets the color of the top border
border-color
border-topstyle
Sets the style of the top border
border-style
border-topwidth
Sets the witdth of the top border
thin
medium
thick
length
border-width
A shorthand property for setting the width of the four
borders in one declaration, can have from one to four
values
thin
medium
thick
length
There are two types of lists CSS:
 unordered and
 ordered.
However, as compared to HTML, CSS allows for further customizations of
lists, with the allowance for images to be used as the bullets in an unordered
lists.
CSS List Style Type
All you have to do is choose a different style for your lists ,if the default numbering of ordered
lists, or the bullets/discs of unordered lists, then ,if you are wanting to use something
different. CSS allows you to select from a wide variety of different list item shapes.


Unordered list styles: square, circle, disc(default), and none
Ordered list styles: upper-alpha, lower-alpha, upper-roman,
decimal(default), and none
lower-roman,
CSS Code
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }
CSS Lists With Images
 As we stated in the introduction, you to insert an image in place of the normal bullets,CSS
list used .
 A good choice for a bullet image would one that is a relatively simple/plain graphic and is
smaller than the height of your text .
CSS Code
ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }
TRIPLE DASH INFOTECH PVT. LTD.
18
NOTES OF DHTML (CSS)
CSS List Position
 It is possible to alter the indentation that takes place with your list items using CSS .
 See the example below for the trick of indenting your lists. When specifying the
indentation,you may only use keyterms.
ul { list-style-position: inside; }
ol { list-style-position: outside; }
The different list-item markers in unordered lists
CSS Code
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul class="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="none">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
The follwing table describe the list Properties:
Property
Description
TRIPLE DASH INFOTECH PVT. LTD.
values
19
NOTES OF DHTML (CSS)
list-style
A shorthand property for setting all of the properties for
a list in one declaration
list-styleimage
Sets an image as the list-item marker
list-styleposition
Sets where the list-item marker is placed in the list
list-style-type
Sets the type of the list-item marker
marker-offset
list-style-type
list-style-position
list-style-image
none
url
inside
outside
none
disc
circle
square
decimal
decimal-leadingzero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
auto
length
Change Style of the Current HTML Element
To change the style of the current HTML element, use the following statement:
this.style.property=new style
Example
<html>
<body>
<h1 onclick="this.style.color='red'">Click Me!</h1>
</body>
</html>
TRIPLE DASH INFOTECH PVT. LTD.
20