Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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