Section 3.2.  Elements and Attributes

JavaScript Editor Free JavaScript Editor     JavaScript Debugger 




Main Page

Previous Page
Next Page

3.2. Elements and Attributes

I'm not sure why, but there seems to be a law stating that the sections of books intended for reference must be both dry and boring. Please bear with me as I try to conform to this law while describing the relationship between elements and attributes. Unfortunately, the American educational system falls short when attempting to teach students how to write in a monotone, but I'll do my best.

3.2.1. A Very Brief Overview of XHTML Elements and Their Attributes

In the interest of being boring, I put together Table 3-1 which covers attributes along with the elements associated with them. Because this is a high-level overviewsay, around 30,000 feetthere isn't much beyond the "this element goes with that attribute" kind of thing. However, it is important to remember two things when referring to this table.

Table 3-1. XHTML Elements and Associated Attributes

Element

Description

Deprecated

Attributes

a

Anchor

 

accesskey, charset, class, coords, dir, href, hreflang, id, lang, name, onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, rel, rev, shape, style, tabindex, target, title, type

abbr

Abbreviated

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

acronym

  

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

address

Author information

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

applet

Java applet

Yes

align, alt, archive, class, code, codebase, height, hspace, id, name, object, style, title, vspace, width

area

Client-side image map area

 

accesskey, alt, class, coords, dir, href, id, lang, nohref, onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, shape, style, tabindex, target, title

b

Bold

 

class, dir, id, lang, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

base

Base URI of document

 

href, lang, target

basefont

Document base font size

Yes

color, face, id, size

bdo

BiDi override

 

class, id, lang, style, title

big

Large text

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

blockqoute

Block quotation

 

cite

body

Document body

 

alink, background, bgcolor, class, dir, id, lang, link, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onunload, style, text, title, vlink

br

Line break

 

class, clear, id, style, title

button

Button object

 

accesskey, class, dir, disabled, id, lang, name, onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, tabindex, title, type, value

caption

Table caption

 

align, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style and title

center

Center contents

Yes

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

code

Code fragment

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

col

Table column

 

align, char, charoff, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title, valign, width

colgroup

Table column group

 

align, char, charoff, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, span, style, title, valign, width

dd

Definition description

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

del

Deleted text

 

cite, class, datetime, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

dfn

Instance definition

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

dir

Directory list

Yes

class, compact, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

div

Style container

 

align, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

dl

Definition list

 

class, compact, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

dt

Definition term

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

em

Emphasis

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

fieldset

Form control group

 

class, dir, id, lang, style, title

font

Font change

Yes

class, color, dir, face, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, size, style, title

form

Input form

 

accept-charset, accept, action, class, dir, enctype, id, lang, method, name, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onsubmit, style, target, title

frame

Frameset window

 

class, frameborder, id, longdesc, marginheight, marginwidth, name, noresize, scrolling, src, style, title, width

frameset

Collection of window subdivisions

 

class, cols, id, onload, onunload, style, title

h1

Heading

 

align, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

h2

Heading

 

align, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

h3

Heading

 

align, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

H4

Heading

 

align, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

H5

Heading

 

align, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

h6

Heading

 

align, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

head

HTML document head

 

dir, lang, profile

hr

Horizontal rule

 

align, class, dir, id, lang, noshade, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, size, style, title, width

html

HTML document root

 

dir, lang, version

i

Italic

 

class, dir, id, lang, marginwidth, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

iframe

Inline frame

 

align, class, frameborder, height, id, longdesc, marginheight, name, scrolling, src, style, title

img

Embedded image

 

align, alt, border, class, dir, height, hspace, id, ismap, lang, longdesc, name, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, src, style, title, usemap, vspace, width

input

Form input control

 

accept, accesskey, align, alt, checked, class, dir, disabled, id, ismap, lang, maxlength, name, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect, readonly, size, src, style, tabindex, title, type, usemap, value

ins

Inserted text

 

cite, class, datetime, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

isindex

Single-line input prompt

Yes

class, dir, id, lang, prompt, style, title

kbd

Keyboard text entry

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

label

Form text field

 

accesskey, for, onblur, onfocus

legend

Fieldset legend

 

accesskey, align, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

li

List item

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, style, title, title, type, value

link

Media-independent link

 

charset, class, dir, href, hreflang, id, lang, media, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, rel, rev, style, target, title

map

Client-side image map

 

class, dir, id, lang, name, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

menu

Menu list

Yes

class, compact, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

meta

Document meta-information

 

content, dir, http-equiv, lang, name, scheme

noframes

Alternate text when frames are not supported

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup,onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

noscript

Alternate text when JavaScript is not supported

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

object

Embedded object

 

align, archive, border, class, classid, codebase, codetype, data, declare, dir, height, hspace, id, lang, name, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, standby, style, tabindex, title, usemap, vspace, width

ol

Ordered list

 

class, compact, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, start, style, style, title, title, type

optgroup

Option group

 

class, dir, disabled, id, label, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

option

Select option

 

class, dir, disabled, id, label, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, selected, style, title, value

p

Paragraph

 

align, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

param

Applet/object parameter

 

id, name, type, value, valuetype

pre

Preformatted text

 

class, dir, id, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title, width

q

Inline quotation

 

cite, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

s

Strike-through

Yes

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

samp

Sample

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

script

Container for scripts

 

charset, defer, language, src, type

select

Option select

 

class, dir, disabled, id, lang, multiple, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, size, style, tabindex, title

small

Small text

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

span

Style container

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

strike

Strike-through

Yes

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

strong

Strong emphasis

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

style

CSS

 

class, dir, lang, media, type

sub

Subscript

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

sup

Superscript

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

table

HTML table

 

align, bgcolor, border, cellpadding, cellspacing, class, dir, frame, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, rules, style, summary, title, width

tbody

Table body

 

align, char, charoff, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title, valign

TD

Table data cell

 

abbr, align, axis, bgcolor, char, charoff, class, colspan, dir, headers, height, id, id, lang, nowrap, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, rowspan, scope, style, title, valign, width

textarea

Multiline text-input area

 

accesskey, class, cols, dir, disabled, id, lang, name, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect, readonly, rows, style, tabindex, title

tfoot

Table footer

 

align, char, charoff, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title, valign

th

Table header cell

 

abbr, align, axis, bgcolor, char, charoff, class, colspan, dir, headers, height, id, lang, nowrap, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, rowspan, scope, style, title, valign

thead

Table header

 

align, char, charoff, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title, valign, width

title

Document title

 

cite, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

tr

Table row

 

align, bgcolor, char, charoff, class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title, valign

tt

Teletype text style

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

u

Underlined

Yes

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title

ul

Unordered list

 

class, compact, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title, type

var

Variable

 

class, dir, id, lang, onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, style, title


The first is that although this table was created from the request for HTML 4.01, it is by no means gospel. There will always be web browsers that either don't support select attributes and/or elements, and browsers that add some of their own. Also, if you recall our escapade with binding XML and HTML, web browsers don't get the least bit cranky if developers make up their own attributes and elements, or even use onchange when it should have been onclick.

3.2.2. Frames Both Hidden and Visible

The question is, exactly what purpose can HTML frames serve in the brave new world of Ajax applications?

To be perfectly honest, I don't exactly know, but I can offer some possible suggestions.

The first suggestion that I can offer is to use an IFRAME with CSS positioning instead of either a JavaScript alert or a JavaScript prompt to convey information to and from the visitor. Not only would it allow for additional opportunities regarding the physical layout, but it wouldn't have the stigma associated with pop-ups. In fact, it might even provide a way around some popup-blocking software.

Here's how it would work: A zero-sized IFRAME would be created along with the original page. When needed, it could be moved about the page using CSS positioning and could be resized to display the required information. The source of the information could be from the page's JavaScript, another page on the web server, or a web service.

My second suggestion is to use the frames, especially hidden ones, as somewhere to cache information. I'm not only referring to the garden variety forms of information, such as XML or XSL stylesheets, but also to in-line Cascading Style Sheets. Imagine the reaction of visitors discovering that they can customize their browsing experience on a website that already feels like an application. Think along the likes of using the CSS from the fifth IFRAME for Bob, and you'll get the idea.

The same technique can also be used to cache large XML documents, of the kind that eat up bandwidth. Caching whole or nearly whole pages that don't often load is also a possibility, as with the Items page from earlier examples. Instead of retrieving the XML every time the visitor wanders to the page, just build the page once and cache. This would also have the advantage of further increasing application speed.

3.2.3. Roll Your Own Elements and Attributes

We use Microsoft Internet Explorer's XML element in both IE and Firefox. The interesting thing is that, unlike Internet Explorer, Firefox doesn't support the XML element, so how exactly did it work? According to several recommendations published by the World Wide Web Consortium, when an unrecognized document element is encountered, it needs to be handled gracefully. Most likely, this is a "plan for future expansion" thing.

Think about it; this makes a great deal of sense because if you go without it, boom, the web browser would just roll over and die whenever somebody with sausage fingers mistyped a tag. The World Wide Web wouldn't be a pretty sight without this feature. Interestingly, the same feature is also available for attributes, which explains how the home-grown data binding works.

A number of times in the past, I took advantage of this in regard to attributes. I took advantage of this little trick in several different ways, but I have a couple of favorites. The first was stashing the original values of HTML input objects for the purposes of resets. Click a button, and a client-side JavaScript event handler would update the value attribute from the oldvalue attribute.

Another one of my favorite uses was to use it as a "value has changed" indicator. This indicator would be checked when the form was submitted. Based upon the result of a test, any number of actions could be taken, including producing a client-side error message.

However, my most favorite was to stash other options for selects. You see, the system that I worked on had pages with several HTML select objects with the contents of each select based upon the selection made in the previous select. Originally, whenever a visitor came to the website and made a selection, that visitor was forced to wait through an unload/reload for each selection.

The "mad scientist" solution was to create a series of attributes consisting of the various attributes. Each select had an onchange event handler that would update the options of the next logical select object. Although this wasn't an Ajax application, the change that I made gave it one of the same characteristics; it didn't bother the server any more than absolutely necessary.

3.2.4. A Little CSS

Before the introduction of Cascading Style Sheets, when a developer wanted to change the font name or color, there was only one option, the HTML FONT element. If you've never seen a page written using the FONT element, consider yourself lucky for наруто портал. They were bloated, like a balloon in the Macy's Thanksgiving Day parade.

They also seemed to attract managers who felt the need to change the font from 11 point to 12 point or use color for bold text. "You know, it would look better in Magenta or Peach Puff." So there I was looking up the RGB values for Magenta (#FF00FF) and Peach Puff (#FFDAB9), which was much easier than hunting throughout the document looking for all the FONT elements . Needless to say, the day I found out that the FONT element was deprecated was one of my happiest days.

Now instead of being forced to use the HTML FONT element, I'm presented with a choice. Basically, it comes down to setting the font for the document as a whole, individual element types, or individual elements. This presents a quandary, unless, of course, you're like me: a bad typist in a career that requires typing. In that case, I recommend applying Cascading Style Sheets in the following manner:

1.
Set the overall style of the document by setting the style for the BODY, TABLE, DIV, and SPAN elements. This is one area where trickle down economics actually works.

2.
Next concentrate on the other elements that you plan to use, such as the INPUT element. This is also the time and the place for handling any homegrown elements, such as the XML element in Firefox.

3.
Third, take care of the classes, those elements that go a long way toward giving a website a particular look and feel. The rowHeader and rowData classes from the earlier examples reflect this philosophy.

4.
Finally, deal with the style of the individual elements themselves: positional CSS and the scrollable DIV.

Finally, because the main purpose of this chapter is to serve as a reference, there is Table 3-2, whose purpose is to describe some of the more common CSS 1 elements.

Table 3-2. Some of the More Common CSS 1 Elements

Property

CSS

Description

font-family

1

Sets the font name or font family name

font-style

1

Either normal, italics, or oblique

font-variant

1

Either normal or small-caps

font-weight

1

Either normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, or 900.

font-size

1

Size of the font as an absolute, relative, length, or percentage

font

1

Sets all font properties at once

color

1

Sets the color for the element specified

background-color

1

Sets the background color for an element

background-image

1

Sets the background image for an element

background-repeat

1

Sets the repeat for the background image

background-attachment

1

Sets the scroll for the background image

background-position

1

Sets the position of the background image

background

1

Sets all background properties at once

word-spacing

1

Sets the spacing between words

letter-spacing

1

Sets the spacing between letters

text-decoration

1

Sets the text decoration: blink, linethrough, none, overline, or underline

vertical-align

1

Sets the vertical positioning: baseline, bottom, middle, percentage, sub, super, text-bottom, text-top, or top

text-transform

1

Sets the text transformation: capitalize, lowercase, none, or uppercase

text-align

1

Sets the text alignment: left, right, center, or justify

text-indent

1

Sets the indent property for container elements

line-height

1

Sets the spacing between lines

margin-top

1

Sets the property as a percentage, length, or auto

margin-right

1

Sets the property as a percentage, length, or auto

margin-bottom

1

Sets the property as a percentage, length, or auto

margin-left

1

Sets the property as a percentage, length, or auto

margin

1

Sets all margin properties at once

padding-top

1

Sets the property as either a percentage or a length

padding-left

1

Sets the property as either a percentage or a length

padding-right

1

Sets the property as either a percentage or a length

padding-bottom

1

Sets the property as either a percentage or a length

padding

1

Sets all the padding properties at once

border-top-width

1

Sets the property to thin, medium, thick, or length

border-bottom-width

1

Sets the property to thin, medium, thick, or length

border-right-width

1

Sets the property to thin, medium, thick, or length

border-left-width

1

Sets the property to thin, medium, thick, or length

border-width

1

Sets all of the border properties at once

border-color

1

Sets the color of the border

border-style

1

Sets the border style to one of the following: none, dotted, dashed, solid, double, groove, ridge, inset, or outset

border-top

1

Sets the border width, style, and color

border-bottom

1

Sets the border width, style, and color

border-right

1

Sets the border width, style, and color

border-left

1

Sets the border width, style, and color

border

1

Sets the border width, style, and color for all the borders at once

width

1

Sets the width for an element

height

1

Sets the height for an element

float

1

Indicates that text can wrap around an element

clear

1

Specifies whether floating elements can float to the side

display

1

Sets how and whether an element will display: lock, inline, list-item, or none

white-space

1

Sets how whitespace is treated: normal, pre, or nowrap.

list-style-type

1

Specifies the type of a list item marker: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, or none

list-style-image

1

Sets the image

list-style-position

1

Sets the position

list-style

1

Sets all the list-style properties at once


Although Cascading Style Sheets is about as different as you can get from HTML/XHTML, they work togetheractually, they work together extremely well. Before the adoption of CSS, the task of giving web pages a common look and feel was handled using the font tag, which, thankfully, has been deprecated (or, as I like to think of it, taken out and shot!). Sorry, I have never liked the font tag since the time a little cosmetic change to a web page took 2 days, mostly because there were about 700 instances scattered throughout a page. Think of the combination of technologies as a kind of synergy, like deuterium and a fission bomb or peanut butter and chocolate.


Previous Page
Next Page




JavaScript Editor Free JavaScript Editor     JavaScript Debugger


©