About This Reference

What this reference covers

This reference covers HTML 4.01 and parts of Cascading Style Sheets Level 2 (CSS2). The CSS portion of this reference includes the CSS2 properties that are commonly used with ordinary, screen-oriented Web browsers; it does not include those properties that are specific to non-visual or paged media.

Recommended links

For the definitive references on HTML and CSS, we recommend you visit the official recommendation or specification pages on the World Wide Web Consortium's site:

  • HTML 4.01 Recommendation
  • Cascading Style Sheet Level 2 Specification
Copyright information

Portions of this reference are copyright © 1996-1999 Web Design Group. This material may be distributed only subject to the terms and conditions set forth in the Open Publication License, v1.0 or later (the latest version is presently available at http://www.opencontent.org/openpub/). The remaining portions are copyright © 2003 Namo Interactive Inc.


HTML Attribute Value Types

Many HTML attributes take values of certain defined types. These are described below.

CDATA

Attribute values of type CDATA are made up of a sequence of characters that may include entities. Line feeds are ignored while each carriage return and tab is replaced with a space. Browsers may ignore leading and trailing whitespace within the attribute value.

CDATA attribute values are typically case-sensitive, though this is not the case with all attributes that take CDATA values.

ID and NAME

Attribute values of type ID and NAME must begin with a letter in the range A-Z or a-z and may be followed by letters (A-Z a-z), digits (0-9), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). These values are case-sensitive.

IDREF and IDREFS

IDREF and IDREFS values refer to values of other elements' ID attributes. An IDREF value is a single ID while an IDREFS value is a space-separated list of IDs. IDREF and IDREFS are case-sensitive.

Number

Number attribute values are numbers made of at least one digit in the range 0-9.

Text

Text attribute values are CDATA values intended to be human readable strings.

URL

URL attribute values are Uniform Resource Locators (URLs), also known as Internet addresses. URL attribute values may include full URLs such as "http://www.namo.com/index.html" as well as relative URLs such as "foo.html" and "../foo/".

While parts of a URL may be case-insensitive, in general URL values are case-sensitive.

Color

Color attribute values give a color definition. The value can be any hexadecimal number, specified according to the sRGB color space, or one of sixteen color names. Hexadecimal numbers must be prefixed by a "#" character.

The case-insensitive color names and their sRGB values are as follows:

Color Name | sRGB Value
Black | #000000
Silver | #C0C0C0
Gray | #808080
White | #FFFFFF
Maroon | #800000
Red | #FF0000
Purple | #800080
Fuchsia | #FF00FF
Green | #008000
Lime | #00FF00
Olive | #808000
Yellow | #FFFF00
Navy | #000080
Blue | #0000FF
Teal | #008080
Aqua | #00FFFF

Note that the hexadecimal form is better supported than the color names for the color attributes of the body element.

Pixels

These attribute values are integers that represent a number of pixels.

Length

Length attribute values may be either an integer -- interpreted as a number of pixels -- or a percentage of the horizontal or vertical space. The value "50%" means half the available space while "50" means 50 pixels.

MultiLength and MultiLengths

MultiLength attribute values may be an integer in pixels, a percentage of the horizontal or vertical space, or a relative length expressed as i* where i is an integer. In allotting space, a browser first allots pixel and percentage lengths, then divides the remaining space among all elements with a relative length. An element with a length of "3*" will be allotted three times the space of an element with length "1*". The value "*" is equivalent to "1*" and is often used to mean "fill the remaining space".

A MultiLengths value is a comma-separated list of MultiLength values.

ContentType and ContentTypes

These attribute values are content types (also known as media types or MIME types) of a linked or embedded resource. Values of type ContentType give a single content type while values of type ContentTypes give a comma-separated list of content types. Content types are case-insensitive.

Commonly used content types include "text/html", "image/jpeg", "model/vrml", "video/quicktime", "application/java", "text/css", and "text/javascript". A full index of content types is made available by the Internet Assigned Numbers Authority.

LanguageCode

Attribute values of type LanguageCode specify a language code according to RFC 1766. Examples of language codes include "en" for English, "en-US" for American English, and "ja" for Japanese. Whitespace is not allowed in the language code, which is case-insensitive.

Charset and Charsets

These attribute values specify character encodings of linked resources. Values of type Charset give a single character encoding while values of type Charsets give a space- and/or comma-separated list of character encodings. Character encodings are case-insensitive.

Examples of character encodings include "US-ASCII", "ISO-8859-1", "SHIFT_JIS", and "UTF-8". A list of registered character encodings is make available by the IANA.

Character

Character attribute values take a single Unicode character. The character may be specified with an entity.

Datetime

Datetime attribute values give a date and time in the format YYYY-MM-DDThh:mm:ssTZD where YYYY is a four-digit year, MM is a two-digit month ("01" through "12"), DD is a two-digit day ("01" through "31"), hh is a two-digit hour ("00" through "23"), mm is a two-digit minute ("00" through "59"), ss is a two-digit second ("00" through "59"), and TZD is the time zone designator. Note that the T separating the date from the time must appear literally and is case-sensitive.

The time zone designator may be one of the following:

  • Z (case-sensitive), which indicates Coordinated Universal Time (UTC, basically the same as GMT);
  • +hh:mm, the time ahead of UTC in hours and minutes;
  • -hh:mm, the time behind UTC in hours and minutes.

If any of the two-digit components of the Datetime value are unknown, "00" should be used.

LinkTypes

Attribute values of type LinkTypes give a space-separated list of link types. A link type is case-insensitive and may not contain whitespace. Each link type may be used any number of times in a given document.

The following link types are defined in HTML 4.0, though authors may use other link types.

Link Type | Description
alternate | Specifies an alternate version of the document. When used with the link element's hreflang attribute, this value implies a translation of the document. When used with link's media attribute, a media-specific version (e.g., for printing) is implied.
stylesheet | Specifies an external style sheet for the document. This link type can be combined with the alternate link type to define an alternate style sheet for the user to choose.
start | Specifies the first document in a collection.
next | Specifies the next document in a suggested sequence of reading. Some browsers will preload documents identified as "next" to improve the perceived load time.
prev | Specifies the previous document in a suggested sequence of reading.
contents | Specifies a table of contents for the document.
index | Specifies an index for the document.
glossary | Specifies a glossary of terms used in the document.
copyright | Specifies a document with copyright information.
chapter | Specifies the chapter of a collection of documents.
section | Specifies the section of a collection of documents.
subsection | Specifies a subsection of a collection of documents.
appendix | Specifies an appendix for a collection of documents.
help | Specifies a help document.
bookmark | Refers to a key related document. The title attribute provides a label for the bookmark.

MediaDesc

Attribute values of type MediaDesc are media descriptors -- a comma-separated list of media for which the linked resource is tailored. Media descriptors are case-sensitive.

The following media descriptors are defined in HTML 4.0:

Media Descriptor | Purpose
screen | for non-paged computer screens (the default)
tty | for fixed-pitch character grid displays
tv | for television-type devices with low resolution and limited scrollability
projection | for projectors
handheld | for handheld devices (characterized by a small, monochrome display and limited bandwidth)
print | for output to a printer
braille | for braille tactile feedback devices
aural | for speech synthesizers
all | for all devices

Script

Script attribute values are client-side scripts, typically a function call or a few short statements. The value may contain entities (e.g., &quot;).

StyleSheet

Attribute values of type StyleSheet are style sheet data. The value may contain entities.

FrameTarget

Attribute values of type FrameTarget must begin with a letter in the range A-Z or a-z, with the exception of the following special values that begin with an underscore:

Target | Description
_blank | renders the link in a new, unnamed window
_self | renders the link in the current frame (useful for overriding a base target)
_parent | renders the link in the immediate frameset parent
_top | renders the link in the full, unframed window

In HTML 4.0, the target attribute value is case-insensitive, so that "_top" and "_TOP" both have the same meaning. However, most browsers treat the target attribute value as case-sensitive and do not recognize "_TOP" as having the special meaning of "_top".


HTML 4.0 Entities

Character entity references, or entities for short, provide a method of entering characters that cannot be expressed in the document's character encoding or that cannot easily be entered on a keyboard. Entities are case-sensitive and take the form &name;. Examples of entities include &copy; for the copyright symbol and &Alpha; for the Greek capital letter alpha.

In addition to entities, authors can use numeric character references. While entities are limited to a subset of Unicode characters, numeric character references can specify any character. Numeric character references may be given in decimal or hexadecimal, though browser support is stronger for decimal references. Decimal references are of the form &#number; while hexadecimal references take the case-insensitive form &#xnumber;. Examples of numeric character references include &#169; or &#xA9; for the copyright symbol, &#913; or &#x391; for the Greek capital letter alpha, and &#1575; or &#x627; for the Arabic letter ALEF.

The following documents feature tables of the character entity references in HTML 4.0, along with the numeric character reference in decimal and hexadecimal. A rendering of each character reference is provided so that users may check their browsers' compliance.

  • Latin-1 Entities
  • Symbols and Greek Letters
  • Other Special Characters


HTML 4.0 Latin-1 Entities

Latin-1 Entities

The following table gives the character entity reference, decimal character reference, and hexadecimal character reference for 8-bit characters in the Latin-1 (ISO-8859-1) character set, as well as the rendering of each in your browser. Glyphs of the characters are available at the Unicode Consortium.

Browser support is generally best for the decimal character references, except for the accented characters (decimal 192-214, 216-246, 248-255), where the character entity references hold a slight edge.

Note that most Mac browsers will render fourteen Latin-1 characters incorrectly. These characters are decimal 166, 178, 179, 185, 188, 189, 190, 208, 215, 221, 222, 240, 253, and 254. See ISO-8859-1 and the Mac platform for more information.

Character | Entity | Decimal | Hex | Browser Rendering
 |  |  |  | Entity | Decimal | Hex
no-break space = non-breaking space | &nbsp; | &#160; | &#xA0; |  |  |
inverted exclamation mark | &iexcl; | &#161; | &#xA1; | ¡ | ¡ | ¡
cent sign | &cent; | &#162; | &#xA2; | ¢ | ¢ | ¢
pound sign | &pound; | &#163; | &#xA3; | £ | £ | £
currency sign | &curren; | &#164; | &#xA4; | ¤ | ¤ | ¤
yen sign = yuan sign | &yen; | &#165; | &#xA5; | ¥ | ¥ | ¥
broken bar = broken vertical bar | &brvbar; | &#166; | &#xA6; | ¦ | ¦ | ¦
section sign | &sect; | &#167; | &#xA7; | § | § | §
diaeresis = spacing diaeresis | &uml; | &#168; | &#xA8; | ¨ | ¨ | ¨
copyright sign | &copy; | &#169; | &#xA9; | © | © | ©
feminine ordinal indicator | &ordf; | &#170; | &#xAA; | ª | ª | ª
left-pointing double angle quotation mark = left pointing guillemet | &laquo; | &#171; | &#xAB; | « | « | «
not sign | &not; | &#172; | &#xAC; | ¬ | ¬ | ¬
soft hyphen = discretionary hyphen | &shy; | &#173; | &#xAD; |  |  |
registered sign = registered trade mark sign | &reg; | &#174; | &#xAE; | ® | ® | ®
macron = spacing macron = overline = APL overbar | &macr; | &#175; | &#xAF; | ¯ | ¯ | ¯
degree sign | &deg; | &#176; | &#xB0; | ° | ° | °
plus-minus sign = plus-or-minus sign | &plusmn; | &#177; | &#xB1; | ± | ± | ±
superscript two = superscript digit two = squared | &sup2; | &#178; | &#xB2; | ² | ² | ²
superscript three = superscript digit three = cubed | &sup3; | &#179; | &#xB3; | ³ | ³ | ³
acute accent = spacing acute | &acute; | &#180; | &#xB4; | ´ | ´ | ´
micro sign | &micro; | &#181; | &#xB5; | µ | µ | µ
pilcrow sign = paragraph sign | &para; | &#182; | &#xB6; | ¶ | ¶ | ¶
middle dot = Georgian comma = Greek middle dot | &middot; | &#183; | &#xB7; | · | · | ·
cedilla = spacing cedilla | &cedil; | &#184; | &#xB8; | ¸ | ¸ | ¸
superscript one = superscript digit one | &sup1; | &#185; | &#xB9; | ¹ | ¹ | ¹
masculine ordinal indicator | &ordm; | &#186; | &#xBA; | º | º | º
right-pointing double angle quotation mark = right pointing guillemet | &raquo; | &#187; | &#xBB; | » | » | »
vulgar fraction one quarter = fraction one quarter | &frac14; | &#188; | &#xBC; | ¼ | ¼ | ¼
vulgar fraction one half = fraction one half | &frac12; | &#189; | &#xBD; | ½ | ½ | ½
vulgar fraction three quarters = fraction three quarters | &frac34; | &#190; | &#xBE; | ¾ | ¾ | ¾
inverted question mark = turned question mark | &iquest; | &#191; | &#xBF; | ¿ | ¿ | ¿
Latin capital letter A with grave = Latin capital letter A grave | &Agrave; | &#192; | &#xC0; | À | À | À
Latin capital letter A with acute | &Aacute; | &#193; | &#xC1; | Á | Á | Á
Latin capital letter A with circumflex | &Acirc; | &#194; | &#xC2; | Â | Â | Â
Latin capital letter A with tilde | &Atilde; | &#195; | &#xC3; | Ã | Ã | Ã
Latin capital letter A with diaeresis | &Auml; | &#196; | &#xC4; | Ä | Ä | Ä
Latin capital letter A with ring above = Latin capital letter A ring | &Aring; | &#197; | &#xC5; | Å | Å | Å
Latin capital letter AE = Latin capital ligature AE | &AElig; | &#198; | &#xC6; | Æ | Æ | Æ
Latin capital letter C with cedilla | &Ccedil; | &#199; | &#xC7; | Ç | Ç | Ç
Latin capital letter E with grave | &Egrave; | &#200; | &#xC8; | È | È | È
Latin capital letter E with acute | &Eacute; | &#201; | &#xC9; | É | É | É
Latin capital letter E with circumflex | &Ecirc; | &#202; | &#xCA; | Ê | Ê | Ê
Latin capital letter E with diaeresis | &Euml; | &#203; | &#xCB; | Ë | Ë | Ë
Latin capital letter I with grave | &Igrave; | &#204; | &#xCC; | Ì | Ì | Ì
Latin capital letter I with acute | &Iacute; | &#205; | &#xCD; | Í | Í | Í
Latin capital letter I with circumflex | &Icirc; | &#206; | &#xCE; | Î | Î | Î
Latin capital letter I with diaeresis | &Iuml; | &#207; | &#xCF; | Ï | Ï | Ï
Latin capital letter ETH | &ETH; | &#208; | &#xD0; | Ð | Ð | Ð
Latin capital letter N with tilde | &Ntilde; | &#209; | &#xD1; | Ñ | Ñ | Ñ
Latin capital letter O with grave | &Ograve; | &#210; | &#xD2; | Ò | Ò | Ò
Latin capital letter O with acute | &Oacute; | &#211; | &#xD3; | Ó | Ó | Ó
Latin capital letter O with circumflex | &Ocirc; | &#212; | &#xD4; | Ô | Ô | Ô
Latin capital letter O with tilde | &Otilde; | &#213; | &#xD5; | Õ | Õ | Õ
Latin capital letter O with diaeresis | &Ouml; | &#214; | &#xD6; | Ö | Ö | Ö
multiplication sign | &times; | &#215; | &#xD7; | × | × | ×
Latin capital letter O with stroke = Latin capital letter O slash | &Oslash; | &#216; | &#xD8; | Ø | Ø | Ø
Latin capital letter U with grave | &Ugrave; | &#217; | &#xD9; | Ù | Ù | Ù
Latin capital letter U with acute | &Uacute; | &#218; | &#xDA; | Ú | Ú | Ú
Latin capital letter U with circumflex | &Ucirc; | &#219; | &#xDB; | Û | Û | Û
Latin capital letter U with diaeresis | &Uuml; | &#220; | &#xDC; | Ü | Ü | Ü
Latin capital letter Y with acute | &Yacute; | &#221; | &#xDD; | Ý | Ý | Ý
Latin capital letter THORN | &THORN; | &#222; | &#xDE; | Þ | Þ | Þ
Latin small letter sharp s = ess-zed | &szlig; | &#223; | &#xDF; | ß | ß | ß
Latin small letter a with grave = Latin small letter a grave | &agrave; | &#224; | &#xE0; | à | à | à
Latin small letter a with acute | &aacute; | &#225; | &#xE1; | á | á | á
Latin small letter a with circumflex | &acirc; | &#226; | &#xE2; | â | â | â
Latin small letter a with tilde | &atilde; | &#227; | &#xE3; | ã | ã | ã
Latin small letter a with diaeresis | &auml; | &#228; | &#xE4; | ä | ä | ä
Latin small letter a with ring above = Latin small letter a ring | &aring; | &#229; | &#xE5; | å | å | å
Latin small letter ae = Latin small ligature ae | &aelig; | &#230; | &#xE6; | æ | æ | æ
Latin small letter c with cedilla | &ccedil; | &#231; | &#xE7; | ç | ç | ç
Latin small letter e with grave | &egrave; | &#232; | &#xE8; | è | è | è
Latin small letter e with acute | &eacute; | &#233; | &#xE9; | é | é | é
Latin small letter e with circumflex | &ecirc; | &#234; | &#xEA; | ê | ê | ê
Latin small letter e with diaeresis | &euml; | &#235; | &#xEB; | ë | ë | ë
Latin small letter i with grave | &igrave; | &#236; | &#xEC; | ì | ì | ì
Latin small letter i with acute | &iacute; | &#237; | &#xED; | í | í | í
Latin small letter i with circumflex | &icirc; | &#238; | &#xEE; | î | î | î
Latin small letter i with diaeresis | &iuml; | &#239; | &#xEF; | ï | ï | ï
Latin small letter eth | &eth; | &#240; | &#xF0; | ð | ð | ð
Latin small letter n with tilde | &ntilde; | &#241; | &#xF1; | ñ | ñ | ñ
Latin small letter o with grave | &ograve; | &#242; | &#xF2; | ò | ò | ò
Latin small letter o with acute | &oacute; | &#243; | &#xF3; | ó | ó | ó
Latin small letter o with circumflex | &ocirc; | &#244; | &#xF4; | ô | ô | ô
Latin small letter o with tilde | &otilde; | &#245; | &#xF5; | õ | õ | õ
Latin small letter o with diaeresis | &ouml; | &#246; | &#xF6; | ö | ö | ö
division sign | &divide; | &#247; | &#xF7; | ÷ | ÷ | ÷
Latin small letter o with stroke = Latin small letter o slash | &oslash; | &#248; | &#xF8; | ø | ø | ø
Latin small letter u with grave | &ugrave; | &#249; | &#xF9; | ù | ù | ù
Latin small letter u with acute | &uacute; | &#250; | &#xFA; | ú | ú | ú
Latin small letter u with circumflex | &ucirc; | &#251; | &#xFB; | û | û | û
Latin small letter u with diaeresis | &uuml; | &#252; | &#xFC; | ü | ü | ü
Latin small letter y with acute | &yacute; | &#253; | &#xFD; | ý | ý | ý
Latin small letter thorn | &thorn; | &#254; | &#xFE; | þ | þ | þ
Latin small letter y with diaeresis | &yuml; | &#255; | &#xFF; | ÿ | ÿ | ÿ


HTML 4.0 Entities for Symbols and Greek Letters

Entities for Symbols and Greek Letters

The following table gives the character entity reference, decimal character reference, and hexadecimal character reference for symbols and Greek letters, as well as the rendering of each in your browser. Glyphs of the characters are available at the Unicode Consortium.

Browser support for these entities is generally quite poor, but recent browsers support some of the character entity references and decimal character references.

Character | Entity | Decimal | Hex | Browser Rendering
 |  |  |  | Entity | Decimal | Hex
Latin small f with hook = function = florin | &fnof; | &#402; | &#x192; | ƒ | ƒ | ƒ
Greek capital letter alpha | &Alpha; | &#913; | &#x391; | Α | Α | Α
Greek capital letter beta | &Beta; | &#914; | &#x392; | Β | Β | Β
Greek capital letter gamma | &Gamma; | &#915; | &#x393; | Γ | Γ | Γ
Greek capital letter delta | &Delta; | &#916; | &#x394; | Δ | Δ | Δ
Greek capital letter epsilon | &Epsilon; | &#917; | &#x395; | Ε | Ε | Ε
Greek capital letter zeta | &Zeta; | &#918; | &#x396; | Ζ | Ζ | Ζ
Greek capital letter eta | &Eta; | &#919; | &#x397; | Η | Η | Η
Greek capital letter theta | &Theta; | &#920; | &#x398; | Θ | Θ | Θ
Greek capital letter iota | &Iota; | &#921; | &#x399; | Ι | Ι | Ι
Greek capital letter kappa | &Kappa; | &#922; | &#x39A; | Κ | Κ | Κ
Greek capital letter lambda | &Lambda; | &#923; | &#x39B; | Λ | Λ | Λ
Greek capital letter mu | &Mu; | &#924; | &#x39C; | Μ | Μ | Μ
Greek capital letter nu | &Nu; | &#925; | &#x39D; | Ν | Ν | Ν
Greek capital letter xi | &Xi; | &#926; | &#x39E; | Ξ | Ξ | Ξ
Greek capital letter omicron | &Omicron; | &#927; | &#x39F; | Ο | Ο | Ο
Greek capital letter pi | &Pi; | &#928; | &#x3A0; | Π | Π | Π
Greek capital letter rho | &Rho; | &#929; | &#x3A1; | Ρ | Ρ | Ρ
Greek capital letter sigma | &Sigma; | &#931; | &#x3A3; | Σ | Σ | Σ
Greek capital letter tau | &Tau; | &#932; | &#x3A4; | Τ | Τ | Τ
Greek capital letter upsilon | &Upsilon; | &#933; | &#x3A5; | Υ | Υ | Υ
Greek capital letter phi | &Phi; | &#934; | &#x3A6; | Φ | Φ | Φ
Greek capital letter chi | &Chi; | &#935; | &#x3A7; | Χ | Χ | Χ
Greek capital letter psi | &Psi; | &#936; | &#x3A8; | Ψ | Ψ | Ψ
Greek capital letter omega | &Omega; | &#937; | &#x3A9; | Ω | Ω | Ω
Greek small letter alpha | &alpha; | &#945; | &#x3B1; | α | α | α
Greek small letter beta | &beta; | &#946; | &#x3B2; | β | β | β
Greek small letter gamma | &gamma; | &#947; | &#x3B3; | γ | γ | γ
Greek small letter delta | &delta; | &#948; | &#x3B4; | δ | δ | δ
Greek small letter epsilon | &epsilon; | &#949; | &#x3B5; | ε | ε | ε
Greek small letter zeta | &zeta; | &#950; | &#x3B6; | ζ | ζ | ζ
Greek small letter eta | &eta; | &#951; | &#x3B7; | η | η | η
Greek small letter theta | &theta; | &#952; | &#x3B8; | θ | θ | θ
Greek small letter iota | &iota; | &#953; | &#x3B9; | ι | ι | ι
Greek small letter kappa | &kappa; | &#954; | &#x3BA; | κ | κ | κ
Greek small letter lambda | &lambda; | &#955; | &#x3BB; | λ | λ | λ
Greek small letter mu | &mu; | &#956; | &#x3BC; | μ | μ | μ
Greek small letter nu | &nu; | &#957; | &#x3BD; | ν | ν | ν
Greek small letter xi | &xi; | &#958; | &#x3BE; | ξ | ξ | ξ
Greek small letter omicron | &omicron; | &#959; | &#x3BF; | ο | ο | ο
Greek small letter pi | &pi; | &#960; | &#x3C0; | π | π | π
Greek small letter rho | &rho; | &#961; | &#x3C1; | ρ | ρ | ρ
Greek small letter final sigma | &sigmaf; | &#962; | &#x3C2; | ς | ς | ς
Greek small letter sigma | &sigma; | &#963; | &#x3C3; | σ | σ | σ
Greek small letter tau | &tau; | &#964; | &#x3C4; | τ | τ | τ
Greek small letter upsilon | &upsilon; | &#965; | &#x3C5; | υ | υ | υ
Greek small letter phi | &phi; | &#966; | &#x3C6; | φ | φ | φ
Greek small letter chi | &chi; | &#967; | &#x3C7; | χ | χ | χ
Greek small letter psi | &psi; | &#968; | &#x3C8; | ψ | ψ | ψ
Greek small letter omega | &omega; | &#969; | &#x3C9; | ω | ω | ω
Greek small letter theta symbol | &thetasym; | &#977; | &#x3D1; | ϑ | ϑ | ϑ
Greek upsilon with hook symbol | &upsih; | &#978; | &#x3D2; | ϒ | ϒ | ϒ
Greek pi symbol | &piv; | &#982; | &#x3D6; | ϖ | ϖ | ϖ
bullet = black small circle | &bull; | &#8226; | &#x2022; | • | • | •
horizontal ellipsis = three dot leader | &hellip; | &#8230; | &#x2026; | … | … | …
prime = minutes = feet | &prime; | &#8242; | &#x2032; | ′ | ′ | ′
double prime = seconds = inches | &Prime; | &#8243; | &#x2033; | ″ | ″ | ″
overline = spacing overscore | &oline; | &#8254; | &#x203E; | ‾ | ‾ | ‾
fraction slash | &frasl; | &#8260; | &#x2044; | ⁄ | ⁄ | ⁄
script capital P = power set = Weierstrass p | &weierp; | &#8472; | &#x2118; | ℘ | ℘ | ℘
blackletter capital I = imaginary part | &image; | &#8465; | &#x2111; | ℑ | ℑ | ℑ
blackletter capital R = real part symbol | &real; | &#8476; | &#x211C; | ℜ | ℜ | ℜ
trade mark sign | &trade; | &#8482; | &#x2122; | ™ | ™ | ™
alef symbol = first transfinite cardinal | &alefsym; | &#8501; | &#x2135; | ℵ | ℵ | ℵ
leftwards arrow | &larr; | &#8592; | &#x2190; | ← | ← | ←
upwards arrow | &uarr; | &#8593; | &#x2191; | ↑ | ↑ | ↑
rightwards arrow | &rarr; | &#8594; | &#x2192; | → | → | →
downwards arrow | &darr; | &#8595; | &#x2193; | ↓ | ↓ | ↓
left right arrow | &harr; | &#8596; | &#x2194; | ↔ | ↔ | ↔
downwards arrow with corner leftwards = carriage return | &crarr; | &#8629; | &#x21B5; | ↵ | ↵ | ↵
leftwards double arrow | &lArr; | &#8656; | &#x21D0; | ⇐ | ⇐ | ⇐
upwards double arrow | &uArr; | &#8657; | &#x21D1; | ⇑ | ⇑ | ⇑
rightwards double arrow | &rArr; | &#8658; | &#x21D2; | ⇒ | ⇒ | ⇒
downwards double arrow | &dArr; | &#8659; | &#x21D3; | ⇓ | ⇓ | ⇓
left right double arrow | &hArr; | &#8660; | &#x21D4; | ⇔ | ⇔ | ⇔
for all | &forall; | &#8704; | &#x2200; | ∀ | ∀ | ∀
partial differential | &part; | &#8706; | &#x2202; | ∂ | ∂ | ∂
there exists | &exist; | &#8707; | &#x2203; | ∃ | ∃ | ∃
empty set = null set = diameter | &empty; | &#8709; | &#x2205; | ∅ | ∅ | ∅
nabla = backward difference | &nabla; | &#8711; | &#x2207; | ∇ | ∇ | ∇
element of | &isin; | &#8712; | &#x2208; | ∈ | ∈ | ∈
not an element of | &notin; | &#8713; | &#x2209; | ∉ | ∉ | ∉
contains as member | &ni; | &#8715; | &#x220B; | ∋ | ∋ | ∋
n-ary product = product sign | &prod; | &#8719; | &#x220F; | ∏ | ∏ | ∏
n-ary sumation | &sum; | &#8721; | &#x2211; | ∑ | ∑ | ∑
minus sign | &minus; | &#8722; | &#x2212; | − | − | −
asterisk operator | &lowast; | &#8727; | &#x2217; | ∗ | ∗ | ∗
square root = radical sign | &radic; | &#8730; | &#x221A; | √ | √ | √
proportional to | &prop; | &#8733; | &#x221D; | ∝ | ∝ | ∝
infinity | &infin; | &#8734; | &#x221E; | ∞ | ∞ | ∞
angle | &ang; | &#8736; | &#x2220; | ∠ | ∠ | ∠
logical and = wedge | &and; | &#8743; | &#x2227; | ∧ | ∧ | ∧
logical or = vee | &or; | &#8744; | &#x2228; | ∨ | ∨ | ∨
intersection = cap | &cap; | &#8745; | &#x2229; | ∩ | ∩ | ∩
union = cup | &cup; | &#8746; | &#x222A; | ∪ | ∪ | ∪
integral | &int; | &#8747; | &#x222B; | ∫ | ∫ | ∫
therefore | &there4; | &#8756; | &#x2234; | ∴ | ∴ | ∴
tilde operator = varies with = similar to | &sim; | &#8764; | &#x223C; | ∼ | ∼ | ∼
approximately equal to | &cong; | &#8773; | &#x2245; | ≅ | ≅ | ≅
almost equal to = asymptotic to | &asymp; | &#8776; | &#x2248; | ≈ | ≈ | ≈
not equal to | &ne; | &#8800; | &#x2260; | ≠ | ≠ | ≠
identical to | &equiv; | &#8801; | &#x2261; | ≡ | ≡ | ≡
less-than or equal to | &le; | &#8804; | &#x2264; | ≤ | ≤ | ≤
greater-than or equal to | &ge; | &#8805; | &#x2265; | ≥ | ≥ | ≥
subset of | &sub; | &#8834; | &#x2282; | ⊂ | ⊂ | ⊂
superset of | &sup; | &#8835; | &#x2283; | ⊃ | ⊃ | ⊃
not a subset of | &nsub; | &#8836; | &#x2284; | ⊄ | ⊄ | ⊄
subset of or equal to | &sube; | &#8838; | &#x2286; | ⊆ | ⊆ | ⊆
superset of or equal to | &supe; | &#8839; | &#x2287; | ⊇ | ⊇ | ⊇
circled plus = direct sum | &oplus; | &#8853; | &#x2295; | ⊕ | ⊕ | ⊕
circled times = vector product | &otimes; | &#8855; | &#x2297; | ⊗ | ⊗ | ⊗
up tack = orthogonal to = perpendicular | &perp; | &#8869; | &#x22A5; | ⊥ | ⊥ | ⊥
dot operator | &sdot; | &#8901; | &#x22C5; | ⋅ | ⋅ | ⋅
left ceiling = APL upstile | &lceil; | &#8968; | &#x2308; | ⌈ | ⌈ | ⌈
right ceiling | &rceil; | &#8969; | &#x2309; | ⌉ | ⌉ | ⌉
left floor = APL downstile | &lfloor; | &#8970; | &#x230A; | ⌊ | ⌊ | ⌊
right floor | &rfloor; | &#8971; | &#x230B; | ⌋ | ⌋ | ⌋
left-pointing angle bracket = bra | &lang; | &#9001; | &#x2329; | ⟨ | 〈 | 〈
right-pointing angle bracket = ket | &rang; | &#9002; | &#x232A; | ⟩ | 〉 | 〉
lozenge | &loz; | &#9674; | &#x25CA; | ◊ | ◊ | ◊
black spade suit | &spades; | &#9824; | &#x2660; | ♠ | ♠ | ♠
black club suit = shamrock | &clubs; | &#9827; | &#x2663; | ♣ | ♣ | ♣
black heart suit = valentine | &hearts; | &#9829; | &#x2665; | ♥ | ♥ | ♥
black diamond suit | &diams; | &#9830; | &#x2666; | ♦ | ♦ | ♦


HTML 4.0 Special Entities

Special Entities

The following table gives the character entity reference, decimal character reference, and hexadecimal character reference for markup-significant and internationalization characters, as well as the rendering of each in your browser. Glyphs of the characters are available at the Unicode Consortium.

With the exception of HTML 2.0's &quot;, &amp;, &lt;, and &gt;, browser support for these entities is generally quite poor, but recent browsers support some of the character entity references and decimal character references.

Character | Entity | Decimal | Hex | Browser Rendering
 |  |  |  | Entity | Decimal | Hex
quotation mark = APL quote | &quot; | &#34; | &#x22; | " | " | "
ampersand | &amp; | &#38; | &#x26; | & | & | &
less-than sign | &lt; | &#60; | &#x3C; | < | < | <
greater-than sign | &gt; | &#62; | &#x3E; | > | > | >
Latin capital ligature OE | &OElig; | &#338; | &#x152; | Œ | Œ | Œ
Latin small ligature oe | &oelig; | &#339; | &#x153; | œ | œ | œ
Latin capital letter S with caron | &Scaron; | &#352; | &#x160; | Š | Š | Š
Latin small letter s with caron | &scaron; | &#353; | &#x161; | š | š | š
Latin capital letter Y with diaeresis | &Yuml; | &#376; | &#x178; | Ÿ | Ÿ | Ÿ
modifier letter circumflex accent | &circ; | &#710; | &#x2C6; | ˆ | ˆ | ˆ
small tilde | &tilde; | &#732; | &#x2DC; | ˜ | ˜ | ˜
en space | &ensp; | &#8194; | &#x2002; |  |  |
em space | &emsp; | &#8195; | &#x2003; |  |  |
thin space | &thinsp; | &#8201; | &#x2009; |  |  |
zero width non-joiner | &zwnj; | &#8204; | &#x200C; | ‌ | ‌ | ‌
zero width joiner | &zwj; | &#8205; | &#x200D; | ‍ | ‍ | ‍
left-to-right mark | &lrm; | &#8206; | &#x200E; | ‎ | ‎ | ‎
right-to-left mark | &rlm; | &#8207; | &#x200F; | ‏ | ‏ | ‏
en dash | &ndash; | &#8211; | &#x2013; | – | – | –
em dash | &mdash; | &#8212; | &#x2014; | — | — | —
left single quotation mark | &lsquo; | &#8216; | &#x2018; | ‘ | ‘ | ‘
right single quotation mark | &rsquo; | &#8217; | &#x2019; | ’ | ’ | ’
single low-9 quotation mark | &sbquo; | &#8218; | &#x201A; | ‚ | ‚ | ‚
left double quotation mark | &ldquo; | &#8220; | &#x201C; | “ | “ | “
right double quotation mark | &rdquo; | &#8221; | &#x201D; | ” | ” | ”
double low-9 quotation mark | &bdquo; | &#8222; | &#x201E; | „ | „ | „
dagger | &dagger; | &#8224; | &#x2020; | † | † | †
double dagger | &Dagger; | &#8225; | &#x2021; | ‡ | ‡ | ‡
per mille sign | &permil; | &#8240; | &#x2030; | ‰ | ‰ | ‰
single left-pointing angle quotation mark | &lsaquo; | &#8249; | &#x2039; | ‹ | ‹ | ‹
single right-pointing angle quotation mark | &rsaquo; | &#8250; | &#x203A; | › | › | ›
euro sign | &euro; | &#8364; | &#x20AC; | € | € | €


Common Attributes

A number of attributes in HTML 4.0 are common to most elements. These attributes are divided into core attributes, internationalization attributes, and scripting events.

Core Attributes

Core attributes apply to all elements except base, head, html, meta, param, script, style, and title.

Attribute Values Description
id id_string

Uniquely identifies an element within a document. No two elements can have the same id value in a single document. The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters, digits, hyphens, underscores, colons, and periods.

ID attributes can be used to apply unique styles to individual elements in a document. For instance, the style declaration

p#para_1 { font:larger }

could be used to apply a unique style to the first paragraph of a document, using id="para_1".

IDs can be used as hyperlink anchors (bookmarks), in place of <a name>. However, most browsers do not support using id attributes as link anchors.
class class_name

Identifies an element as belonging to a particular class. Classes make it possible to act on many similar or related elements at once, such as by defining a style for the class. Any number of elements can share the same class. An element may belong to more than one class (the value is a space-separated list of class names), but most current browsers do not support assigning multiple classes to an element. There are no pre-defined or standard classes; defining classes is up to the author.

For example, a style sheet might have a declaration like

.new { font: italic bold }

that would apply to any element with class="new". By modifying the class's style definition, you can change the appearance of all the member elements in a single stroke.
style style_rule

Allows authors to specify style rules inline for a specific occurrence of an element. This makes it possible to override a class style definition for an individual element, if necessary.

For example,

<p style="margin:0">

could be used to override the default paragraph style for a single paragraph, while

<p class="sidebar" style="font:smaller">

might be used to change just the font size of a paragraph belonging to the "sidebar" class while preserving the class's other style rules.
title title_string

Provides a title for an element. Some browsers display an element's title as a "tooltip" when the user places the mouse pointer over the element.

Example:

<a href="/index.html" title="Home Page">

Internationalization Attributes

Internationalization attributes apply to all elements except base, br, frame, frameset, hr, iframe, param, and script.

Attribute Values Description
lang LanguageCode

Specifies the language of an element's attribute values and its content, including all contained elements that do not specify their own LANG attribute. While the LANG attribute is not widely supported, its use may help search engines index a document by its language while allowing speech synthesizers to use language-dependent pronunciation rules. As well, visual browsers can use the language's proper quotation marks when rendering the q element.

A document's primary language may be set using the lang attribute on the html element, or, alternatively, by using the Content-Language HTTP header.
dir ltr
rtl

Specifies the directionality of text. "ltr" means left-to-right (the default); "rtl" means right-to-left.


Event Attributes

Event attributes are attributes that specify a client-side script to be executed when a certain event takes place in association with an element. An example of an event is when the user clicks on an image; the image receives an onclick event and, if the img element has an onclick attribute, the browser executes the script given as the value of the attribute.

For example, an img element might have onmouseover and onmouseout attributes that call JavaScript functions (defined in the head section of the document) to replace the image with a different one when the mouse pointer enters the image's boundaries and then restore the original image when the pointer leaves the boundaries, thus creating a "rollover" effect:

<img src="button.gif"
  onmouseover="swapimage()"
  onmouseout="restoreimage()"
/>

When an event attribute is used, a default scripting language should be specified for the document by setting the Content-Script-Type HTTP header to the media type of the scripting language. To do this, use a meta element in the document's head. For JavaScript, the appropriate tag would be:

<meta http-equiv="Content-Script-Type" content="text/javascript" />

Common Events

These events can be used with all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.

Event | Trigger
onclick | when the user clicks on an element
ondblclick | when the user double-clicks on an element
onmousedown | when the user presses the mouse button with the pointer over an element
onmouseup | when the user releases the mouse button with the pointer over an element
onmouseover | when the mouse pointer enters the boundaries of an element
onmousemove | when the mouse pointer is moved within the boundaries of an element
onmouseout | when the mouse pointer exits the boundaries of an element
onkeypress | when the user presses and releases a key while the element has focus
onkeydown | when the user presses a key while the element has focus
onkeyup | when the user releases a key while the element has focus

Form Events

These events can only be used with forms and form controls (form, button, input, label, select, and textarea). Not all form events apply to all form elements; refer to an element's help file to see which form events apply to it.

Event | Trigger
onfocus | when the control receives focus
onblur | when the control loses focus
onchange | when the control loses focus and its value has changed since it received focus
onselect | when text in an editable text field is selected
onsubmit | when the form is submitted
onreset | when the form is reset

Window Events

These events can only be used with body and frameset elements.

Event | Trigger
onload | when the document or frameset has been loaded
onunload | when the document or frameset is exited


HTML 4.0 Deprecated Features

A number of elements and attributes are deprecated in HTML 4.0 as an indication that other methods of accomplishing the same task are preferred. Deprecated features may become obsolete in future versions of HTML, though browsers that support the features will likely continue to support them. Deprecated features are included in HTML 4.0 Transitional and HTML 4.0 Frameset but not HTML 4.0 Strict.

Many presentational elements and attributes are deprecated in favor of style sheets, which allow authors to suggest a presentation with more flexibility and without sacrificing accessibility. Presentational attributes that cannot currently be replaced with style sheets are in most cases not deprecated.

The following elements are deprecated in favor of style sheets:

  • basefont - base font change
  • center - centered block
  • font - font change
  • s - strike-through text
  • strike - strike-through text
  • u - underlined text

The following elements are also deprecated:

  • applet - Java applet (deprecated in favor of object)
  • dir - directory list (deprecated in favor of ul)
  • isindex - input prompt (deprecated in favor of input)
  • menu - menu list (deprecated in favor of ul)


<!--...-->

Used to insert a comment in the HTML source. Comments are ignored by browsers (they do not appear when the page is rendered). Comments can also be used inside script and style elements to prevent older browsers that do not JavaScript or CSS from rendering them as text.

Syntax: <!-- [comment text] -->

End tag: None

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

Example 1
<!--
   This is a comment.
   Comments can run across
   multiple lines.
-->
An ordinary comment. The text within the tag is not rendered by browsers.

Example 2
<style type="text/css">
   <!--
      p { margin-left:20 }
   -->
</style>
Here, a comment tag is used to "hide" the style declarations from browsers that do not support CSS. Modern browsers will still interpret the style declarations correctly.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • The comment tag has no attributes.


<!DOCTYPE>

The !DOCTYPE declaration specifies the version of HTML to which the document conforms. !DOCTYPE must appear at the top of every HTML document, although in practice most browsers will render a document without it.

Syntax: <!DOCTYPE>

End tag: None

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

Example 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
This !DOCTYPE declaration is for HTML 4.01 Strict.

Example 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This !DOCTYPE declaration is for HTML 4.01 Transitional. Use this when you need to include deprecated elements or attributes in the document.

Example 3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
This !DOCTYPE declaration is for HTML 4.01 Frameset. Use this in frameset documents.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | n/a
Netscape | n/a

Notes

  • Although !DOCTYPE is required in every HTML document, in itself it is not part of HTML. !DOCTYPE has no attributes.


<html>

The highest-level element in all HTML documents. The html element contains one head element and one body element, except in frameset documents, where the frameset element replaces the body. The start and end tags of html are both optional.

Syntax: <html>...</html>

End tag: Optional

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
version | CDATA | Specifies the Document Type Declaration (DTD) that describes the document. This deprecated attribute should not be used, since the doctype declaration makes it redundant.

Examples

<html lang=en>
   <head>
   </head>
   <body>
      <p>Content goes here.</p>
   </body>
</html>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • It's good practice to include a lang attribute with the html element to specify the base language of the document.


<head>

Contains header information about the document, such as its title, keywords, description, and style sheet. A single head element is required in all documents, but its start and end tags are optional. The head element is followed by the body element (or the frameset element in frameset documents). Content in head is generally not rendered, except for the required title element.

Syntax: <head>...</head>

End tag: Optional

Optional Attributes

Attribute | Values | Description
profile | URL | The URL of a metadata profile, which defines properties that may be used by meta and link elements within the head.

Examples

<html>
   <head>
      <title>Document Title</title>
      <style type="text/css">
         ...
      </style>
      <script type="text/javascript">
         ...
      </script>
   </head>
   <body>
      ...
   </body>
</html>
The head element is where you put the document's style sheet (or a link to the style sheet) and any JavaScript functions that are called by events in the document, among other things.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<body>

Contains the document's body (content). One and only one body element is required in non-frames documents, but its start and end tags are optional. In frames documents, body must be contained within the noframes element, if noframes is used.

Syntax: <body>...</body>

End tag: Optional

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
background | URL | URL of an image to use as the document's background.
bgcolor | Color | The document's background color.
text | Color | The document's default text color.
link | Color | The default color of text links in the document.
vlink | Color | The default color of visited links in the document.
alink | Color | The default color of active links in the document.

Element-Specific Events

Event | Trigger
onload | when the document has been loaded
onunload | when the document is exited

(See also: Common Events)

Examples

<html>
   <head>
   </head>
   <body>
      <p>Content goes here.</p>
   </body>
</html>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • All presentational attributes of body are deprecated in HTML 4.0. To specify a background image or color, text color, or link colors, use styles instead.


<frameset>

Defines a frameset, in which the browser window is divided into two or more segments, each displaying a different document. In a frameset document, a frameset element takes the place of the usual body element and immediately follows the head. The frameset element contains one or more frameset or frame elements, along with an optional noframes element to provide alternate content for browsers that do not support frames.

Syntax: <frameset>...</frameset>

End tag: Required

Optional Attributes

Attribute | Values | Description
rows | Multilengths | Specifies the number and size of rows in the frameset. The value is a comma-separated list of lengths, specified in pixels, percentages, or relative lengths. Either rows or cols (or both) must be specified.
cols | Multilengths | Specifies the number and size of columns in the frameset. The value is a comma-separated list of lengths, specified in pixels, percentages, or relative lengths. Either rows or cols (or both) must be specified.

Element-Specific Events

Event | Trigger
onload | when all frames have been loaded
onunload | when all frames have been removed

(See also: Common Events)

Examples

<frameset rows="*,100">
  <frameset cols="40%,*">
    <frame name="menu" src="nav.html">
    <frame name="content" src="main.html">
  </frameset>
  <frame name="ad" src="ad.html" noresize>
  <noframes>
    <body>
      <p>
        Your browser doesn't support frames.
      </p>
    </body>
  </noframes>
</frameset>
Two nested framesets that together specify three frames, two frames in the first row and one frame in the second row.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • When pixel lengths are used, they should always be combined with a relative length to handle various window sizes. Pixel lengths should only be used when a frame consists primarily of images or other objects with fixed sizes in pixels. Due to their ability to adapt to different window sizes, percentages and relative lengths are generally preferred.
  • To fully remove all frame borders in a frameset, use the attribute-values border="0" frameborder="0" framespacing="0" in the frameset element. These are proprietary attributes of Internet Explorer and Netscape, not part of the HTML specification.


<base>

Specifies the base URL for relative URLs in the document. A document may not contain more than one base element, which must appear in the head section. If a base element is not present, relative URLs in the document are taken as relative to the document's own location.

Syntax: <base />

End tag: None

Required Attributes

Attribute | Values | Description
href | URL | The URL to use as the base for relative URLs in the document.

Optional Attributes

Attribute | Values | Description
target | FrameTarget | Specifies the frame in which all hyperlinks in the document will be opened by default. If not specified, hyperlinks are opened by default in the current frame or window. If an individual link includes a target attribute, it will override the target specified here.

Examples

<head>
   <base href="http://www.namo.com/images/" />
</head>
<body>
   <img src="example.png" />
</body>
Since the base URL has been defined, the image file's URL will be interpreted as "http://www.namo.com/images/example.png" regardless of the location of the document.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Most Web pages do not require an explicit base URL since the document's location is a suitable base. An explicit base URL is only required when the same document may be accessed at different URLs or when the document has no URL (e.g., sending an HTML document by e-mail).


<isindex>

Inserts a one-line text input. When the user presses the enter key within the input field, the input field's text is sent to the server in a query string appended to the document's base URL. The query string takes the form "?text+of+input+field"; spaces are encoded as "+".

Syntax: <isindex />

End tag: None

Optional Attributes

Attribute | Values | Description
prompt | Text | Specifies the input field's label.

Examples

<isindex prompt="Your input: " />

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Isindex is deprecated in HTML 4.0 in favor of the input element.


<link>

Defines relationships between documents. Any number of link elements may be contained in the head of a document.

Syntax: <link />

End tag: None

Optional Attributes

Attribute | Values | Description
rel | LinkTypes | Defines a link relationship from the current document to the linked resource.
rev | LinkTypes | Defines a link relationship from the linked resource to the current document.
href | URL | The URL of the linked resource.
type | ContentType | The media type of the linked resource.
target | FrameTarget | Specifies the frame in which the linked document will be opened. If not specified, the document is opened in the current frame or window.
media | MediaDesc | Specifies the media for which the linked resource is designed. With rel="stylesheet", this allows authors to restrict a style sheet to certain output devices, such as printers or aural browsers.
hreflang | LanguageCode | Specifies the language of the linked resource.
charset | CharSet | Specifies the character set (language encoding) of the linked document.

Examples

Example 1
<head>
   <link rel="stylesheet" href="/css/basic.css" type="text/css" />
</head>
The link element is most commonly used to link to an external stylesheet file.

Example 2
<link rel="alternate" href="index_fr.html" hreflang="fr" title="French Version" />
<link rel="alternate" href="index_ja.html" hreflang="ja" charset="shift-jis" title="Japanese Version" />
This pair of link elements reference two alternate-language versions of the current document.

Example 3
<link rev="subsection" href="example.html" />
This example indicates that the current document is a subsection of example.html.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0


<meta>

Provides metadata about the document, such as its keywords, description, and author. Any number of meta elements may be contained in the head of a document.

Syntax: <meta />

End tag: None

Required Attributes

Attribute | Values | Description
content | CDATA | The value of the property given in the name or http-equiv attribute.

Optional Attributes

Attribute | Values | Description
name | Name | The name of the metadata. Examples include "author", "description", "keywords", and "generator".
http-equiv | Name | Specifies an HTTP header. Some servers will send the HTTP header specified in the meta element, and browsers often recognize the header even when it is not sent by the server.
scheme | CDATA | Specifies the format of the value of the content attribute.

Examples

Example 1
<meta name="author" content="Namo Interactive" />

Example 2
<meta name="keywords" content="food, cooking, barbecue" />
Search engines can use keywords given in a meta element to help determine how to categorize your document.

Example 3
<meta name="generator" content="Namo WebEditor 6.0" />
Some HTML authoring tools insert a meta tag like this one.

Example 4
<meta http-equiv="refresh" content="5; URL=http://www.namo.com/" />
This example tells the browser to load another web page 5 seconds after the current document has finished loading.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • There is no standard list of meta properties, so authors may define whatever metadata they like for whatever purpose they wish.


<script>

Encloses a client-side script. Client-side scripts allow greater interactivity in a document by responding to user events. For example, a script could be used to check the user's form input prior to submission to provide immediate notice of any errors by the user.

Syntax: <script>...</script>

End tag: Required

Required Attributes

Attribute | Values | Description
type | ContentType | The media type of the scripting language (e.g., "text/javascript" or "text/vbscript").

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
language | CDATA | The scripting language. Deprecated in favor of type, but still needed by some browsers. Example values include "JavaScript", "JavaScript1.1", and "VBScript".
src | URL | The URL of an external script file to use instead of the contents of the element. If specified, any contents of the script element are ignored.
charset | CharSet | Specifies the character set of the external script specified in src, if any. The typical value is "ISO-8859-1".
defer | [none] | Indicates that the browser should wait to parse the script until the rest of the document has been rendered. Scripts that use defer must not generate any document content, and should not be required to respond to user events that may occur while the document is still loading.

Examples

Example 1
<script type="text/javascript">
<!--
  document.write("Hello World!")
// -->
</script>
A simple script. Comment markers surround the script to prevent non-supporting browsers from rendering it as text.

Here's how the HTML above might render in a browser:

Example 2
<script type="text/javascript" src="foo.js" charset="ISO-8859-1">
</script>
An example of calling an external script.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Not all browsers support client-side scripting, and supporting browsers allow the user to disable scripting, so authors should avoid dependence on client-side scripting whenever possible. The noscript element can be used to provide content for browsers that do not support client-side scripting or have it disabled. In the case of form validation, any error checking done by the client-side script should be repeated by the CGI script or Java servlet that handles the submission at the server.
  • Different browsers support different variants of scripting languages with different bugs. Authors are encouraged to check their scripts on as many browsers as possible. Browsers that support client-side scripting include Netscape Navigator 2.0 and up, Microsoft Internet Explorer 3.0 and up, and Opera 3.0 and up.
  • Some browsers do not support the type attribute. For compatibility, be sure to specify language as well.
  • Technically, the first occurrence of "</" followed by any letter is considered the end tag for the script element. While browsers are forgiving in this, authors should avoid using strings such as "</p>" in their embedded scripts. JavaScript allows authors to use a backslash to avoid ending the script element prematurely: e.g., document.write("<\/p">.


<style>

Embeds a style sheet in the document. Any number of style elements may be contained in the head of a document.

Syntax: <style>...</style>

End tag: Required

Required Attributes

Attribute | Values | Description
type | ContentType | Specifies the media type of the style language. For CSS style sheets, the appropriate value is "text/css".

Optional Attributes

Attribute | Values | Description
media | MediaDesc | Specifies the media on which the style sheet should be applied. This allows authors to restrict a style sheet to certain output devices, such as printers or aural browsers.
title | Text | Specifies a title for the style sheet. Some browsers may allow users to select among multiple titled style sheets, although most current browsers just ignore this attribute.

Examples

<style type="text/css">
<!--
  body  { background: url(foo.gif) red; color: black }
  p em  { background: yellow; color: black }
  .note { margin-left: 5em; margin-right: 5em }
-->
</style>
A short style sheet. The comment markers prevent non-supporting browsers from rendering the style sheet as text.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0

Notes

  • An embedded style sheet is appropriate when a single document should have a unique set of styles. If a style sheet is applicable to multiple documents, then an external style sheet is more appropriate. Use a link element with rel="stylesheet" to link to an external style sheet.
  • Netscape Navigator 4.x incorrectly ignores any style element with a media value other than "screen". Most other browsers ignore the media attribute.


<title>

Specifies the document's title. Each HTML document must have exactly one title within the head. The contents of title must be plain text (it may include entities, but no other markup). Most browsers display a document's title in the title bar of the window.

Syntax: <title>...</title>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<html>
  <head>
    <title>My Picture Page</title>
  </head>
  <body>
    ...
  </body>
</html>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • A good title should be short and specific to the document's content so that it can be used as a title for a user's bookmark, a title for the display window on visual browsers, and a link from a search engine. A suggested limit for the number of characters in a title is 60.


<address>

Marks the text within the tag as an address or other contact information, usually for the person or team responsible for the current document.

Syntax: <address>...</address>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<address>
   Maintained by: <br />
   <a href="mailto:johndoe@namo.com">John Doe</a><br />
   555-1212
</address>
Here, the address tag marks contact information for the document's maintainer. Use br tags to separate lines within the contact info.

Here's how the HTML above might render in a browser:

Maintained by:
John Doe
555-1212

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Browsers usually render text within an address element in italics.


<blockquote>

Marks the enclosed text as a block quotation. Unlike inline quotations, block quotations may contain block-level elements such as p and table, but blockquote may not be contained within a paragraph or inline element.

Syntax: <blockquote>...</blockquote>

End tag: Required

Optional Attributes

Attribute | Values | Description
cite | URL | The URL of the quote's source. Not widely supported by browsers.

Examples

<blockquote cite="http://www.bibliomania.com/Fiction/joyce/ulysses/telemac.html">
   <p>
      He pointed his finger in friendly jest and went over to the parapet, <br />
      laughing to himself. Stephen Dedalus stepped up, followed him wearily <br />
      half way and sat down on the edge of the gunrest, watching him still as <br />
      he propped his mirror on the parapet, dipped the brush in the bowl and <br />
      lathered cheeks and neck.
   </p>
</blockquote>
The content of the blockquote element should be contained within other block-level elements, typically p.

Here's how the HTML above might render in a browser:

He pointed his finger in friendly jest and went over to the parapet,
laughing to himself. Stephen Dedalus stepped up, followed him wearily
half way and sat down on the edge of the gunrest, watching him still as
he propped his mirror on the parapet, dipped the brush in the bowl and
lathered cheeks and neck.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Don't use blockquote merely to indent a block of text. CSS's margin-left property provides better control over indentation.


<center>

Causes the enclosed content to be centered horizontally on the page or inside the parent element.

Syntax: <center>...</center>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<center>
   <p>This paragraph is centered.</p>
</center>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • This element is deprecated in HTML 4.0 in favor of styles.


<del>

Marks the enclosed content as deleted. This element is useful in marking changes from one version of a document to the next. Through style sheets, authors can suggest an appropriate rendering, such as not displaying the deleted content or rendering the text with a strike-through style.

Syntax: <del>...</del>

End tag: Required

Optional Attributes

Attribute | Values | Description
cite | URL | The URL of a document that explains why the content was deleted.
datetime | Datetime | The date and time of the deletion.

Examples

<del>James</del> Tom is my best friend.
Without a specific style definition, browsers generally render del text in strikethrough.

Here's how the HTML above might render in a browser:

James Tom is my best friend.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.2

Notes

  • Since del is poorly supported by browsers, authors may wish to use a font style element such as strike (deprecated in HTML 4.0) to attempt to convey the meaning of del in non-supporting browsers.


<div>

Defines a generic block-level container, allowing authors to provide style or language information to blocks of content. The element may contain any inline or block-level element, including another div. The div element is most useful when used with class, id, or lang attributes. For example, a navigation bar could be contained within a div marked as class=navbar, allowing the author to use style sheets to easily change the appearance of all navigation bars on a site.

Syntax: <div>...</div>

End tag: Required

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
align | left right center justify | The horizontal alignment of the div's content. Deprecated; use styles instead.

Examples

<div class="navbar">
   <p>The contents of the navigation bar.</p>
</div>
Div elements provide a handy way to segment documents and apply a different style to each segment.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Browsers generally place a line break before and after a div element.
  • Span is the text-level equivalent of div, for use inside block-level elements.


<h1>~<h6>

Marks the enclosed text as a heading. h1 marks a level-one heading; h2, a level-two heading; and so forth, up to h6.

Syntax: <hn>...</hn> (where n is a number from 1 to 6)

End tag: Required

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
align | left right center justify | Specifies the horizontal alignment of the heading. Deprecated in favor of styles.

Examples

<h1>Moby Dick</h1>
   <h2>Chapter 1</h2>
      <p>Call me Ishmael....</p>
Use heading elements to help define the logical structure of a document.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Browsers typically render h1 headings in a large bold font and successive heading levels in successively smaller fonts. However, you should not choose a heading level based on font size, but rather on the heading's place in the structure of the document. Use styles to control how the headings are rendered.


<hr>

Inserts a horizontal rule -- a horizontal line often used to separate areas of a document.

Syntax: <hr />

End tag: None

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
align | left right center | Specifies the horizontal alignment of the rule.
noshade | [none] | Specifies that the rule be rendered as a solid line rather than a "groove".
size | pixels | The thickness in pixels of the rule.
width | Length | The width of the rule in pixels or percentage.

Examples

<p>text above the rule</p>
<hr width="80%" size="5" noshade />
<p>text below the rule</p>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • All specific attributes of hr are deprecated in HTML 4.0 in favor of style sheets.


<ins>

Marks the enclosed content as inserted. This element is useful in marking changes from one version of a document to the next. Through style sheets, authors can suggest an appropriate rendering, such as rendering the text as italics or underlined.

Syntax: <ins>...</ins>

End tag: Required

Optional Attributes

Attribute | Values | Description
cite | URL | The URL of a document that explains why the content was inserted.
datetime | Datetime | The date and time of the insertion.

Examples

<del>James</del> <ins>Tom</ins> is my best friend.
Without a specific style definition, browsers generally render ins text with underlines.

Here's how the HTML above might render in a browser:

James Tom is my best friend.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.2


<noscript>

Provides alternate content for a client-side script that was not executed. A script will fail to execute if the browser does not support the scripting language or if the user has disabled client-side scripting. A noscript element should follow the script element for which it provides alternate content.

Syntax: <noscript>...</noscript>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<script type="text/javascript">
   <!--
   document.write("Your browser supports JavaScript.")
   //-->
</script>
<noscript>Your browser does not seem to support JavaScript.</noscript>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Most browsers will fail to render the contents of noscript if the scripting language is not supported and the user has enabled client-side scripting. Most browsers will only render noscript when the user has disabled client-side scripting.


<p>

Defines a paragraph.

Syntax: <p>...</p>

End tag: Optional

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
align | left center right justify | Specifies the horizontal alignment of the paragraph's content. Deprecated in favor of the CSS text-align property.

Examples

<p>This is a paragraph.<br />
Still the same paragraph.</p>
<p>This is another paragraph.</p>

Here's how the HTML above might render in a browser:

This is a paragraph.
Still the same paragraph.

This is another paragraph.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Although the closing tag for p is optional, its use prevents common browser bugs with style sheets.
  • By default, browsers commonly render paragraphs as blocks of text with some blank space between them, left-aligned, with no left or right margin. However, style sheets give authors a great deal of control in specifying how paragraphs should be rendered.


<pre>

Marks the enclosed text as preformatted text. Visual browsers should render preformatted text in a monospaced font, should not collapse whitespace, and should not wrap long lines.

Syntax: <pre>...</pre>

End tag: Required

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
width | Number | Specifies the expected line length of the preformatted block so that a suitable font size or margin can be used. Browsers ignore this attribute in practice.

Examples

<pre>
class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}
</pre>

Here's how the HTML above might render in a browser:

class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Pre is useful for formatting computer code or poetry where whitespace is important, but since preformatted text is inherently visual, authors should avoid dependence on it whenever possible.


<dd>

Marks the enclosed text as the definition of a term in a definition list. A dd element should generally be preceded by a dt element that contains the term defined by the dd.

Syntax: <dd>...</dd>

End tag: Optional

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<dl>
   <dt>Icthyology</dt>
   <dd>The study of fish</dd>
   <dt>Ornithology</dt>
   <dd>The study of birds</dd>
</dl>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<dir>

Defines a directory list. The element contains one or more li elements that provide the actual items of the list. The li elements must not contain block-level elements, which prevents dir elements from being nested.

Syntax: <dir>...</dir>

End tag: Required

Optional Attributes

Attribute | Values | Description
compact | [none] | Specifies that the list be rendered in a compact form. Not well supported by browsers.

Examples

<dir>
   <li>John</li>
   <li>Jane</li>
</dir>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • This element is deprecated in HTML 4.0 in favor of ul.


<dl>

Defines a definition list. An entry in the list is created using the dt element for the term being defined and the dd element for the definition of the term.

Syntax: <dl>...</dl>

End tag: Required

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
compact | [none] | Specifies that the list be rendered in a compact form. Deprecated in HTML 4.0 and not well supported by browsers.

Examples

<dl>
   <dt>Icthyology</dt>
   <dd>The study of fish</dd>
   <dt>Ornithology</dt>
   <dd>The study of birds</dd>
</dl>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<dt>

Marks the enclosed text as a term in a definition list. A dt element should generally be followed by a dd element that contains the definition of the term.

Syntax: <dt>...</dt>

End tag: Optional

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<dl>
   <dt>Icthyology</dt>
   <dd>The study of fish</dd>
   <dt>Ornithology</dt>
   <dd>The study of birds</dd>
</dl>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<li>

Defines a list item. This element must be contained within ol, ul, dir, or menu. When contained in ol or ul, li may contain block-level elements, including ol or ul. This makes it possible to create nested lists.

Syntax: <li>...</li>

End tag: Optional

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
type | disc square circle 1 a A i I | Specifies the rendering of the list item marker. "Disc", "square", and "circle" are types of bullets. "1" means decimal numbers. "A" and "a" mean uppercase and lowercase letters, respectively. "I" and "i" mean uppercase and lowercase Roman numerals, respectively. Deprecated; style sheets provide greater flexibility in specifying rendering.
value | Number | Specifies the sequence number of the list item if it is in an ordered list (ol). Any li element following in the same list will take its default sequence number based on the first preceding value attribute. Deprecated in HTML 4.0, but currently no CSS substitute exists.

Examples

<ol>
  <li>
    <b>HTML Document Type Definitions</b>
    <ul>
      <li>HTML 2.0</li>
      <li>HTML 3.2</li>
      <li>HTML 4.0 Strict</li>
    </ul>
  </li>
  <li>
    <b>SGML Character Entity References</b>
    <ul>
      <li>Latin-1 Entities</li>
      <li>Symbols and Greek Letters</li>
      <li>Other Special Characters</li>
    </ul>
  </li>
</ol>
A list item can itself contain an ordered or unordered list.

Here's how the HTML above might render in a browser:

  1. HTML Document Type Definitions
    • HTML 2.0
    • HTML 3.2
    • HTML 4.0 Strict
  2. SGML Character Entity References
    • Latin-1 Entities
    • Symbols and Greek Letters
    • Other Special Characters

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • When used within menu or dir, li may not contain block-level elements.


<menu>

Defines a menu list. The element contains one or more li elements that define the actual items of the list.

Syntax: <menu>...</menu>

End tag: Required

Optional Attributes

Attribute | Values | Description
compact | [none] | Specifies that the list be rendered compactly. Not well supported by browsers.

Examples

<menu>
   <li>Roast Beef</li>
   <li>Fried Chicken</li>
</menu>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • This element is deprecated in HTML 4.0 in favor of ul.


<ol>

Defines an ordered list. The element contains one or more li elements that define the actual items of the list.

Syntax: <ol>...</ol>

End tag: Required

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
type | 1 a A i I | Specifies the type of numbering. "1" means decimal numbers; "a" and "A" mean lowercase and uppercase letters, respectively; and "i" and "I" mean lowercase and uppercase Roman numerals, respectively.
start | Number | Specifies the starting number of the list. The default is 1. The value must be an integer, but the number may be presented in a different form (for example, as a Roman numeral). While this attribute is deprecated, there is currently no substitute for it in CSS.
compact | [none] | Specifies that the list be rendered compactly. Not well supported by browsers.

Examples

<ol>
  <li>Mammals
    <ol type="a">
      <li>Dogs</li>
      <li>People</li>
    </ol>
  </li>
  <li>Fish</li>
  <li>Worms</li>
</ol>
Ordered lists can be nested to provide multiple levels of organization.

Here's how the HTML above might render in a browser:

  1. Mammals
    1. Dogs
    2. People
  2. Fish
  3. Worms

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • The numbering style of an individual list item can be suggested using the type attribute of li.
  • The list-style-type property of CSS provides greater flexibility in suggesting numbering styles.


<ul>

Defines an unordered list. The element contains one or more li elements that define the actual items of the list.

Syntax: <ul>...</ul>

End tag: Required

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
type | disc square circle | Specifies the bullet type for the list.
compact | [none] | Specifies that the list be rendered compactly. Not well supported by browsers.

Examples

<ul>
  <li>Mammals
    <ul type="a">
      <li>Dogs</li>
      <li>People</li>
    </ul>
  </li>
  <li>Fish</li>
  <li>Worms</li>
</ul>
Unordered lists can be nested to provide multiple levels of organization.

Here's how the HTML above might render in a browser:

  • Mammals
    • Dogs
    • People
  • Fish
  • Worms

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • The bullet style of an individual list item can be suggested using the type attribute of li.
  • The list-style property of CSS provides greater flexibility in suggesting bullet styles.


<table>

Defines a table -- an array of rows and columns that contain other elements. A table element generally contains a number of tr and td elements that define the table's rows and cells, respectively.

Syntax: <table>...</table>

End tag: Required

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
summary | Text | Provides a description of the table's purpose and/or structure, particularly helpful to users of non-visual browsers.
width | Length | Specifies the width of the table in pixels or as a percentage of the available horizontal space. If not specified, browsers typically auto-size the table to fit the widths of its cells.
border | pixels | Specifies the width of the border around the table. If not specified, no border is shown.
frame | void above below hsides lhs rhs vsides box border | Specifies which sides of the table's outer border are visible. Possible values are "void" for no border, "above" for a top border only, "below" for a bottom border only, "hsides" for left and right borders only, "vsides" for top and bottom borders only, "lhs" for a left border only, "rhs" for a right border only, and either "box" or "border" for a border on all sides. The default value is "void" unless the border attribute gives a positive width, in which case "border" is the default. This attribute is poorly supported by browsers.
rules | none group rows cols all | Specifies the borders between table cells. Possible values are "none" for no inner borders, "groups" for borders between row groups and column groups only, "rows" for borders between rows only, "cols" for borders between columns only, and "all" for borders between all cells. "None" is the default value if border="0" is used or if border is unspecified; otherwise, "all" is the default. This attribute is poorly supported by browsers.
cellspacing | Length | Specifies the amount of space between cells. The value may be expessed in pixels or as a percentage of the space available for cell spacing, but most browsers do not support percentage values.
cellpadding | Length | Specifies the amount of space inside each cell, surrounding its contents. The value may be expessed in pixels or as a percentage of the space available for padding, but most browsers do not support percentage values.
align | left center right | Specifies the horizontal alignment of the table with respect to its parent element. Browsers generally present left- or right-aligned tables as floating tables, with the content following the table flowing around it. This attribute is deprecated in favor of style sheets.
bgcolor | Color | Specifies the background color of the table. Deprecated in favor of style sheets.

Examples

Example 1
<table border="1">
  <tr>
    <td>Apples</td>
    <td>Oranges</td>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>Gorillas</td>
  </tr>
</table>
A simple table. The start and end tags of the required tbody can be omitted if there is no thead or tfoot and there is only one tbody.

Here's how the HTML above might render in a browser:

Apples | Oranges
Bananas | Gorillas

Example 2
<table border="1">
  <caption>States and Capitals</caption>
  <col align="right" />
  <col align="left" />
  <thead>
    <tr>
      <th>State</th>
      <th>Capital</th>
    </tr>
  </thead>
  <tfoot style="font:italic">
    <tr>
      <td colspan="2">Note: List is incomplete.</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Florida</td>
      <td>Tallahasee</td>
    </tr>
    <tr>
      <td>Idaho</td>
      <td>Boise</td>
    </tr>
  </tbody>
</table>
This table includes caption, thead, tfoot, and col elements to give it a richer structure and formatting possibilities.

Here's how the HTML above might render in a browser:

States and Capitals
State | Capital
Florida | Tallahasee
Idaho | Boise
Note: List is incomplete.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Table may contain a number of optional elements to provide a richer structure to the table. The caption element gives the table a caption; col and colgroup elements can specify attributes that apply to whole columns or groups of columns; and the thead and tfoot elements define header and footer rows, respectively.
  • At least one tbody element is required inside a table, but its start and end tags are optional if there is only one tbody and no thead or tfoot.
  • Although table is commonly used as a layout device, authors should ideally avoid this practice as much as possible. Tables can cause problems for users of narrow windows, large fonts, or non-visual browsers, and these problems are often accentuated when tables are used solely for layout purposes. As well, current visual browsers will not display anything until the complete table has been downloaded, which can have very noticeable effects when an entire document is laid out within a table. Authors should try to use style sheets in place of table for layout, though bugs in current browser implementations of style sheets can make this difficult.


<caption>

Defines a table caption (a brief heading or title for the table). If used, caption must be the first element in the table.

Syntax: <caption>...</caption>

End tag: Required

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
align | top bottom left right | Specifies the alignment of the caption relative to the table; the default is "top".

Examples

<table>
   <caption><b>My Cats</b></caption>
   <tr>
      <td>Samantha</td>
      <td>Bobby</td>
   <tr>
</table>

Here's how the HTML above might render in a browser:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • A caption element may only contain inline elements, such as strong.


<colgroup>

Defines attributes for a column group in a table. If used, colgroup must be after the optional caption and before the optional thead in the table. The structural divisions defined by colgroup allow authors to easily suggest a presentation for groups of columns through style sheets. Colgroup may contain col elements that define attributes for individual columns, overriding attributes defined for the column group. The span attribute should not be used if the colgroup contains any col elements.

Syntax: <colgroup />

End tag: Optional

Optional Attributes

Attribute | Values | Description
span | Number | Specifies the number of columns in the group (default is 1).
width | Multilength | The width of each column in the group.
align | left right center justify char | The horizontal alignment of the contents of cells in the group. The value "char" specifies to align text content on the character specified in the char attribute.
valign | top middle bottom baseline | The vertical alignment of the contents of cells in the group.
char | Character | Specifies the character on which to align text in the affected cells when align is set to "char".
charoff | Length | The horizontal offset of the first occurence of the alignment character specified in char.

Examples

<table border="1">
   <colgroup width="50%" />
   <colgroup span="2" width="25%">
      <col align="right" />
   </colgroup>
   <tr>
      <td>john</td>
      <td>geese</td>
      <td>lily</td>
   </tr>
   <tr>
      <td>jane</td>
      <td>cat</td>
      <td>rose</td>
   </tr>
</table>
In this example, the first colgroup applies to the first column of the table, while the second colgroup applies to the second and third columns. The col element inside the second colgroup overrides the group's attributes for the first column in the group.

Here's how the HTML above might render in a browser:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | (not supported)

Notes

  • Since colgroup is not supported by Netscape, you may wish to specify width and alignment attributes in td and th elements instead.
  • Internet Explorer does not support align="char".


<col>

Defines attributes for a table column. If used, col must be after the optional caption and before the optional thead in the table. Unlike colgroup, col does not group columns structurally; it merely defines attributes common to all cells in one or more columns. Col may be contained directly in the table element or it may be contained within a colgroup. If col is in a colgroup, the col's attributes override those of the colgroup for columns spanned by col.

Syntax: <col />

End tag: None

Optional Attributes

Attribute | Values | Description
span | Number | Specifies the number of affected columns (default is 1).
width | Multilength | The width of the affected column(s).
align | left right center justify char | The horizontal alignment of the affected cells' contents. The value "char" specifies to align text content on the character specified in the char attribute.
valign | top middle bottom baseline | The vertical alignment of the affected cells' contents.
char | Character | Specifies the character on which to align text in the affected cells when align is set to "char".
charoff | Length | The horizontal offset of the first occurence of the alignment character specified in char.

Examples

<table border="1">
   <col width="50%" />
   <col span="2" width="25%" align="right" />
   <tr>
      <td>john</td>
      <td>geese</td>
      <td>lily</td>
   </tr>
   <tr>
      <td>jane</td>
      <td>duck</td>
      <td>rose</td>
   </tr>
</table>
In this example, the first col element applies to the first column of the table, while the second col applies to the second and third columns.

Here's how the HTML above might render in a browser:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | (not supported)

Notes

  • Since col is not supported by Netscape, you may wish to specify width and alignment attributes in td and th elements instead.
  • Internet Explorer does not support align="char".


<thead>

Defines a group of header rows in a table. A table may have one thead before the optional tfoot and the required tbody elements.

Syntax: <thead>...</thead>

End tag: Optional

Optional Attributes

Attribute | Values | Description
align | left center right justify char | Specifies the horizontal alignment of the contents of each cell in the row group. The value "char" causes the cells' contents to be aligned on the character specified in the char attribute.
char | Character | Specifies the character to align cells' contents on if align="char". The default value is the decimal point ("." in English).
charoff | Length | Specifies the offset to the first occurrence of the alignment character specified in the char attribute, used when align="char". The value is a number of pixels or a percentage of the cell's width; for example, charoff="50%" centers the alignment character horizontally in a cell.
valign | top middle bottom baseline | Specifies the vertical alignment of the contents of each cell in the row group. The default value is "middle".

Examples

<table border="1">
  <thead style="font:large">
    <tr>
      <th>Item</th>
      <th>Cost</th>
    </tr>
  </thead>
  <tfoot style="font:bold">
    <tr>
      <td>TOTAL</td>
      <td>2318.70</td>
    </tr>
  </tfoot>
  <tbody align="right">
    <tr>
      <td>Airfare</td>
      <td>1550.45</td>
    </tr>
    <tr>
      <td>Hotel</td>
      <td>768.25</td>
    </tr>
  </tbody>
</table>
Use thead to group header rows in a table and apply attributes to all the included cells at once.

Here's how the HTML above might render in a browser:

Item | Cost
Airfare | 1550.45
Hotel | 768.25
TOTAL | 2318.70

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | (not supported)

Notes

  • While few browsers currently support thead, it can be used with no harm on non-supporting browsers.
  • Internet Explorer does not support align="char".


<tfoot>

Defines a group of footer rows in a table. A table may have one tfoot between the optional thead and the required tbody elements.

Syntax: <tfoot>...</tfoot>

End tag: Optional

Optional Attributes

Attribute | Values | Description
align | left center right justify char | Specifies the horizontal alignment of the contents of each cell in the row group. The value "char" causes the cells' contents to be aligned on the character specified in the char attribute.
char | Character | Specifies the character to align cells' contents on if align="char". The default value is the decimal point ("." in English).
charoff | Length | Specifies the offset to the first occurrence of the alignment character specified in the char attribute, used when align="char". The value is a number of pixels or a percentage of the cell's width; for example, charoff="50%" centers the alignment character horizontally in a cell.
valign | top middle bottom baseline | Specifies the vertical alignment of the contents of each cell in the row group. The default value is "middle".

Examples

<table border="1">
  <thead>
    <tr>
      <th>Item</th>
      <th>Cost</th>
    </tr>
  </thead>
  <tfoot style="font:bold">
    <tr>
      <td>TOTAL</td>
      <td>2318.70</td>
    </tr>
  </tfoot>
  <tbody align="right">
    <tr>
      <td>Airfare</td>
      <td>1550.45</td>
    </tr>
    <tr>
      <td>Hotel</td>
      <td>768.25</td>
    </tr>
  </tbody>
</table>
Use tfoot to group footer rows in a table and apply attributes to all the included cells at once.

Here's how the HTML above might render in a browser:

Item | Cost
Airfare | 1550.45
Hotel | 768.25
TOTAL | 2318.70

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | (not supported)

Notes

  • Few browsers currently support tfoot, and the requirement that it be placed before tbody may make its use unsuitable for non-supporting browsers. If the presentation of footer rows prior to body rows is not acceptable, authors should avoid using tfoot until browser support improves.
  • Internet Explorer does not support align="char".


<th>

Defines a header cell in a table. Th elements are contained in tr (table row) elements, which may also contain td (data cell) elements. If a cell's contents act as both header information and table data, td rather than th should be used.

Syntax: <th>...</th>

End tag: Optional

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
colspan | Number | Specifies the number of columns spanned by the cell. The default value is 1. The special value "0" means the cell spans all remaining columns to the end of the table, but this value is ignored by most browsers.
rowspan | Number | Specifies the number of rows spanned by the cell. The default value is 1. The special value "0" means the cell spans all remaining rows to the end of the table, but this value is ignored by most browsers.
headers | IDREFS | Specifies the header cells that apply to the th. The value is a space-separated list of the header cells' id attribute values. The headers attribute allows non-visual browsers to render the header information for a given cell.
abbr | Text | Gives an abbreviated version of the cell's content. This allows visual browsers to use the short form if space is limited, and non-visual browsers can give a cell's header information in an abbreviated form before rendering each cell. Abbr should only be used if the cell provides header information.
scope row
col
rowgroup
colgroup

Specifies the cells for which the th element provides header information.

"row" means the cell provides header information for the rest of the row

"col" means the cell provides header information for the rest of the column

"rowgroup" means the cell provides header information for the rest of the row group (i.e., the remaining cells of the thead, tfoot, or tbody)

"colgroup" means the cell provides header information for the rest of the column group (i.e., the remaining cells of the colgroup)

axis | CDATA | Provides a method of categorizing cells, especially for non-visual browsers. For an explanation, see the section on categorizing cells in the W3C's HTML 4.01 Recommendation.
align left
center
right
justify
char 		Specifies the horizontal alignment of the cells' contents. The value "char" causes the contents to be aligned on the character specified in the char attribute.
char | Character | Specifies the character to align cell's contents on if align="char". The default value is the decimal point ("." in English).
charoff | Length | Specifies the offset to the first occurrence of the alignment character specified in the char attribute, used when align="char". The value is a number of pixels or a percentage of the cell's width; for example, charoff="50%" centers the alignment character horizontally in the cell.
valign top
middle
bottom
baseline 		Specifies the vertical alignment of the cell's contents. The default value is "middle".
width | pixels | The width of the cell in pixels. If not specified, most browsers auto-size the cell to be wide enough to show its contents without line breaks if possible. Deprecated in favor of style sheets.
height | pixels | The height of the cell in pixels. If not specified, most browsers auto-adjust the height to fit the cell's contents. Deprecated in favor of style sheets.
nowrap | [none] | Tells browsers to disable word wrap for the cell (lines of content will always be displayed without breaks). Deprecated in favor of style sheets; use white-space:nowrap instead.
bgcolor | Color | The background color of the cell. Deprecated in favor of style sheets.

Examples

<table border="1">
  <tr>
    <th>Fruits</th>
    <th>Meats</th>
  </tr>
  <tr>
    <td>Stawberries</td>
    <td>Beef</td>
  </tr>
  <tr>
    <td>Apples</td>
    <td>Venison</td>
  </tr>
</table>
Browsers typically render the contents of header cells in boldface with centered alignment.

Here's how the HTML above might render in a browser:

Fruits | Meats
Stawberries | Beef
Apples | Venison

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Internet Explorer does not support align="char".


<tr>

Defines a table row. Tr elements must be contained within a row group defined by thead, tfoot, or tbody. A tr contains th or td elements, which define the row's cells and contain the actual data of the table.

Syntax: <tr>...</tr>

End tag: Optional

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
align | left center right justify char | Specifies the horizontal alignment of the contents of each cell in the row. The value "char" causes the cells' contents to be aligned on the character specified in the char attribute.
char | Character | Specifies the character to align cells' contents on if align="char". The default value is the decimal point ("." in English).
charoff | Length | Specifies the offset to the first occurrence of the alignment character specified in the char attribute, used when align="char". The value is a number of pixels or a percentage of the cell's width; for example, charoff="50%" centers the alignment character horizontally in a cell.
valign | top middle bottom baseline | Specifies the vertical alignment of the contents of each cell in the row. The default value is "middle".
bgcolor | Color | Specifies the background color of the row. Deprecated in favor of style sheets.

Examples

<table border="1">
  <tr>
    <td>Apples</td>
    <td>Oranges</td>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>Gorillas</td>
  </tr>
</table>
A simple table. The start and end tags of the required tbody can be omitted if there is no thead or tfoot and there is only one tbody.

Here's how the HTML above might render in a browser:

Apples | Oranges
Bananas | Gorillas

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Internet Explorer does not support align="char".


<tbody>

Defines a group of data rows in a table. A table must have at least one tbody following the optional thead and tfoot elements, but its start and end tags are optional if there is only one tbody and no thead or tfoot.

Syntax: <tbody>...</tbody>

End tag: Optional

Optional Attributes

Attribute | Values | Description
align | left center right justify char | Specifies the horizontal alignment of the contents of each cell in the row group. The value "char" causes the cells' contents to be aligned on the character specified in the char attribute.
char | Character | Specifies the character to align cells' contents on if align="char". The default value is the decimal point ("." in English).
charoff | Length | Specifies the offset to the first occurrence of the alignment character specified in the char attribute, used when align="char". The value is a number of pixels or a percentage of the cell's width; for example, charoff="50%" centers the alignment character horizontally in a cell.
valign | top middle bottom baseline | Specifies the vertical alignment of the contents of each cell in the row group. The default value is "middle".

Examples

<table border="1">
  <thead>
    <tr>
      <th>Item</th>
      <th>Cost</th>
    </tr>
  </thead>
  <tfoot style="font:bold">
    <tr>
      <td>TOTAL</td>
      <td>2318.70</td>
    </tr>
  </tfoot>
  <tbody align="right">
    <tr>
      <td>Airfare</td>
      <td>1550.45</td>
    </tr>
    <tr>
      <td>Hotel</td>
      <td>768.25</td>
    </tr>
  </tbody>
</table>
Use tbody to group data rows in a table and apply attributes to all the included cells at once.

Here's how the HTML above might render in a browser:

Item | Cost
Airfare | 1550.45
Hotel | 768.25
TOTAL | 2318.70

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | (not supported)

Notes

  • While few browsers currently support tbody, it can be used with no harm on non-supporting browsers.
  • Internet Explorer does not support align="char".


<td>

Defines a data cell (an ordinary cell) in a table. Td elements are contained in tr (table row) elements, which may also contain th (header cell) elements. If a cell's contents act as both header information and table data, td rather than th should be used.

Syntax: <td>...</td>

End tag: Optional

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
colspan | Number | Specifies the number of columns spanned by the cell. The default value is 1. The special value "0" means the cell spans all remaining columns to the end of the table, but this value is ignored by most browsers.
rowspan | Number | Specifies the number of rows spanned by the cell. The default value is 1. The special value "0" means the cell spans all remaining rows to the end of the table, but this value is ignored by most browsers.
headers | IDREFS | Specifies the header cells that apply to the td. The value is a space-separated list of the header cells' id attribute values. The headers attribute allows non-visual browsers to render the header information for a given cell.
abbr | Text | Gives an abbreviated version of the cell's content. This allows visual browsers to use the short form if space is limited, and non-visual browsers can give a cell's header information in an abbreviated form before rendering each cell. Abbr should only be used if the cell provides header information.
scope row
col
rowgroup
colgroup

Specifies the cells for which the td element provides header information.

"row" means the cell provides header information for the rest of the row

"col" means the cell provides header information for the rest of the column

"rowgroup" means the cell provides header information for the rest of the row group (i.e., the remaining cells of the thead, tfoot, or tbody)

"colgroup" means the cell provides header information for the rest of the column group (i.e., the remaining cells of the colgroup)

axis | CDATA | Provides a method of categorizing cells, especially for non-visual browsers. For an explanation, see the section on categorizing cells in the W3C's HTML 4.01 Recommendation.
align left
center
right
justify
char 		Specifies the horizontal alignment of the cells' contents. The value "char" causes the contents to be aligned on the character specified in the char attribute.
char | Character | Specifies the character to align cell's contents on if align="char". The default value is the decimal point ("." in English).
charoff | Length | Specifies the offset to the first occurrence of the alignment character specified in the char attribute, used when align="char". The value is a number of pixels or a percentage of the cell's width; for example, charoff="50%" centers the alignment character horizontally in the cell.
valign top
middle
bottom
baseline 		Specifies the vertical alignment of the cell's contents. The default value is "middle".
width | pixels | The width of the cell in pixels. If not specified, most browsers auto-size the cell to be wide enough to show its contents without line breaks if possible. Deprecated in favor of style sheets.
height | pixels | The height of the cell in pixels. If not specified, most browsers auto-adjust the height to fit the cell's contents. Deprecated in favor of style sheets.
nowrap | [none] | Tells browsers to disable word wrap for the cell (lines of content will always be displayed without breaks). Deprecated in favor of style sheets; use white-space:nowrap instead.
bgcolor | Color | The background color of the cell. Deprecated in favor of style sheets.

Examples

Example 1
<table border="1">
  <tr>
    <td>Apples</td>
    <td>Oranges</td>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>Gorillas</td>
  </tr>
</table>
A simple table.

Here's how the HTML above might render in a browser:

Apples | Oranges
Bananas | Gorillas

Example 2
<table border="1">
  <tbody align="center">
    <tr>
      <td rowspan="2">Jay</td>
      <td>John</td>
      <td colspan="2">Veronica</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2"><b>My Friends</b></td>
      <td>Bess</td>
    </tr>
    <tr>
      <td>Porgy</td>
      <td rowspan="2">Vera</td>
    </tr>
    <tr>
      <td colspan="2">Peggy Sue</td>
      <td>Fiona</td>
    </tr>
  </tbody>
</table>
An example of the use of colspan and rowspan to span cells across rows and columns.

Here's how the HTML above might render in a browser:

Jay | John | Veronica
 | My Friends |  | Bess
Porgy |  |  | Vera
Peggy Sue |  | Fiona

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Internet Explorer does not support align="char".


<form>

Defines a form. A form element should contain at least one form control from the elements input, select, textarea, and button. When the user submits the form, through an input or button element with type="submit", the form data is sent to the URL given in the form's action attribute.

Syntax: <form>...</form>

End tag: Required

Required Attributes

Attribute | Values | Description
action | URL | The URL of the form handler, typically a script file or Java servlet.

Optional Attributes

Attribute | Values | Description
method get
post

Specifies the method of sending the form data to the form handler.

method="get" sends the form data in the URL; for instance, "download.asp?file=webeditor&country=US". The form data may not contain non-ASCII characters, and the amount of form data that can be handled is limited by the maximum URL length supported by the browser and the server. If the form data might exceed 100 characters, you should use "post".

method="post" sends the form data as an HTTP POST request. POST does not have the character encoding and length restrictions imposed by GET, but most browsers are unable to bookmark POST requests.

The default method is "get".
enctype ContentType

Specifies the content type used in submitting the form. The default value is "application/x-www-form-urlencoded". This content type results in name/value pairs sent to the server as name1=value1&name2=value2..., with space characters replaced by "+" and reserved characters (like "#") replaced by "%HH" where HH is the ASCII code of the character in hexadecimal. Line breaks are encoded as "%0D%0A" (a carriage return followed by a line feed).

Authors should generally only use a different enctype when the form includes a type=file input element, in which case the enctype should be "multipart/form-data" and the method must be "post".
accept-charset | CharSets | Specifies a list of character encodings that are accepted by the form handler. The value consists of a list of charsets separated by commas and/or spaces. The default value is "unknown" and is usually considered to be the character encoding of the document containing the form.
target | FrameTarget | Specifies the frame (of a frameset) the form response should be displayed in. If no frame with such a name exists, the response is displayed in a new window.

Element-Specific Events

Event | Trigger
onsubmit | when the form is submitted
onreset | when the form is reset

(See also: Common Events)

Examples

<form action="form_handler.asp" method="get">
   First name:
   <input type="text" name="fname" />
   <br />
   Last name:
   <input type="text" name="lname" />
   <br />
   <input type="submit" value="Submit" />
</form>
This simple form takes a first and last name entered by the user and sends the data to "form_handler.asp" using the GET method.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • A mailto URL (such as "mailto:info@namo.com") is allowed as the value of action, but this is not supported by all browsers. Non-supporting browsers such as Internet Explorer 3.x typically will open a blank e-mail message when the user submits a mailto form. Even on supporting browsers, mailto forms are troublesome in that they fail to provide feedback to the user after the form submission.


<button>

Inserts a push button for use in a form or to start a script. Although input type="button" can also be used for this purpose, button can enclose other elements to create richer button labels. The enclosed content becomes the label of the button.

Syntax: <button>...</button>

End tag: Required

Optional Attributes

Attribute | Values | Description
name | CDATA | The button's name (for use by a form handler).
value | CDATA | The button's value (for use by a form handler).
type | submit reset button | Specifies the button type; the default is "submit".
disabled | [none] | Disables the button.
accesskey | Character | Specifies a single character as a shortcut key for pushing the button.
tabindex | Number | Specifies the tabbing order of the element. The lower the number, the earlier the element is in the tabbing sequence of the document. If tabindex=0 or is not defined, the element comes after any elements with a positive tabindex.

Element-Specific Events

Event | Trigger
onfocus | when the button receives focus
onblur | when the button loses focus

(See also: Common Events)

Examples

Example 1
<button name="submit" value="modify">
   <b><i>Modify Info</i></b>
</button>
Unlike buttons created using the input element, button elements can enclose other HTML tags.

Example 2
<button type="button" onclick="myscript()">
   <img src="mybutton.gif" />
</button>
This button uses a graphical label.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.2


<fieldset>

Defines a form control group. By grouping related form controls, authors can divide a form into smaller, more manageable parts, improving the usability disaster that can strike when confronting users with too many form controls. The grouping provided by fieldset also helps the accessibility of forms to those using aural browsers by allowing these users to more easily orient themselves when filling in a large form.

Syntax: <fieldset>...</fieldset>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<form action="example.asp">
  <fieldset style="width:150; text-align:right; padding:5">
  <legend><b>Contact Info</b></legend>
    Name:
    <input type="text" size="10" /><br />
    E-mail:
    <input type="text" size="10" />
  </fieldset><br />
  <input type="submit" value="Submit" />
  <input type="reset" value="Clear" />
</form>
You can use a legend element to give a fieldset a nice label.

Here's how the HTML above might render in a browser:

Contact Info Name:
E-mail:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.2

Notes

  • The content of a fieldset element must begin with a legend element to provide a caption for the group of controls. Following the legend, fieldset may contain any inline or block-level element, including another fieldset.
  • While fieldset is not widely supported by current browsers, it can be used safely by explicitly closing any preceding p element or by including an empty p element prior to the fieldset. This causes non-supporting browsers to infer the start of a block-level element even though they ignore the block-level fieldset element.


<legend>

Provides a label for a fieldset. The label can be text, an image, or any other combination of inline elements. If used, the legend element must come before any other elements in the fieldset.

Syntax: <legend>...</legend>

End tag: Required

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
align | top bottom left right | Specifies the alignment of the legend with respect to the fieldset. Deprecated, but no CSS alternative currently exists.
accesskey | Character | Specifies a single character as a shortcut key for the fieldset. The first form control in the fieldset will receive focus when the access key is pressed.

Examples

<form action="example.asp">
  <fieldset style="width:150; text-align:right; padding:5">
  <legend><b>Contact Info</b></legend>
    Name:
    <input type="text" size="10" /><br />
    E-mail:
    <input type="text" size="10" />
  </fieldset><br />
  <input type="submit" value="Submit" />
  <input type="reset" value="Clear" />
</form>
You can use a legend element to give a fieldset a nice label.

Here's how the HTML above might render in a browser:

Contact Info Name:
E-mail:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.2

Notes

  • While legend is not widely supported by current browsers, it can still be used safely if a block-level element such as p immediately follows it.


<input>

Inserts an input control for use in a form. When the form is submitted, the current value of each input element within the form is sent to the server as name/value pairs. The input element's name attribute provides the name used. The value sent depends on the type of form control and on the user's input.

Syntax: <input />

End tag: None

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
type text
password
checkbox
radio
submit
reset
file
hidden
image
button

Specifies the type of form control to create. The default value is "text". While not a required attribute, type should be specified for maximum browser compatibility.

See the table below for descriptions of the control types.
name | CDATA | Specifies the name in the name/value pair sent to the form handler. Required except for reset and submit buttons.
value CDATA

When type is "text", "hidden", or "password": Specifies the default value of the input field.

When type is "checkbox" or "radio": Specifies the value of the control when checked. Value must be specified for these controls.

When type is "submit", "reset", or "button": Specifies the button label.

When type is "image": Specifies alternate text for some image-disabled browsers.

When type is "file": Specifies the default filename. Browsers typically ignore this as a security precaution.
checked | [none] | Specifies that a radio button or checkbox control is initially checked.
size | Number | Specifies the size, in number of characters, of a text or password field.
maxlength | Number | Specifies the maximum number of characters that can be entered in a text or password field.
src | URL | The URL of an image file (only used when type="image").
alt | CDATA | Specifies alternate text when type="image".
usemap | URL | The URL of a map definition to use when type="image". Poorly supported.
align top
middle
bottom
left
right 		Specifies how to align an image button with respect to surrounding text. "Top", "middle", and "bottom" position the image vertically with respect to the current line (of text, usually). "Left" and "right" specify that the image is placed at the left or right margin, with other content flowing around it.
disabled | [none] | Disables the input control. Disabled controls cannot receive focus, and their values are not submitted with the form. Cannot be used with type="hidden".
readonly | [none] | Prevents users from changing the value of an input control. The value is still submitted with the form. Only used with type="text".
accept | ContentTypes | A comma-separated list of media types to be accepted when type="file". Generally ignored by browsers.
accesskey | Character | Specifies a single character as a shortcut key to give focus to the input control. Not applicable when type="hidden".
tabindex | Number | Specifies the tabbing order of the control. The lower the number, the earlier the control is in the tabbing sequence of the document. If tabindex=0 or is not defined, the control comes after any elements with a positive tabindex. Not applicable when type="hidden".

Element-Specific Events

Event | Trigger
onfocus | when the control receives focus
onblur | when the control loses focus
onselect | when text in a text or password control is selected
onchange | when the element loses focus and its value has changed since it received focus

(See also: Common Events)

Examples

<center>File Submission Form</center>
<form>
  Your name: <input type="text" name="username" /><br />
  Your password: <input type="password" name="password" /><br />
  File: <input type="file" name="filespec" /><br />
  <fieldset>
    File type:<br />
    <input type="radio" name="filetype" value="program" checked />Program<br />
    <input type="radio" name="filetype" value="image" />Image<br />
    <input type="radio" name="filetype" value="other" />Other<br />
  </fieldset>
  <input type="checkbox" name="shared" value="yes" />Share this file<br />
  <input type="submit" name="submit" value="Submit" />
  <input type="reset" name="reset" value="Reset" />
</form>
A file upload form. Note the use of a fieldset to visually group the radio buttons.

Here's how the HTML above might render in a browser:

File Submission Form
Your name:
Your password:
File:
File type: Program
Image
Other
Share this file

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • While input is most useful within a form, HTML 4.0 allows input in any block-level or inline element other than button. However, Netscape 4.x and earlier will not display any input elements outside of a form.


<label>

Associates a label with a form control. The element's content is the label and may include inline elements such as img and strong. By associating labels with form controls, authors give important hints to users of speech browsers while also allowing visual browsers to duplicate common GUI features such as the ability to click on a text label to select a radio button or checkbox.

Syntax: <label>...</label>

End tag: Required

Optional Attributes

Attribute | Values | Description
for | IDREF | The ID value of the associated form field.
accesskey | Character | Specifies a single character as a shortcut key for the element.

Element-Specific Events

Event | Trigger
onfocus | when the element receives focus
onblur | when the element loses focus

(See also: Common Events)

Examples

<form action="example.asp">
  <label for="name"><b>Name:</b></label>
  <input type="text" name="username" id="name" />
  <br />
  <label for="passwd"><b>Password:</b></label>
  <input type="password" name="password" id="passwd" />
  <br /><b>Sex:</b>
    <input type="radio" name="sex" value="male" id="male" checked />
    <label for="male">Male</label>
    <input type="radio" name="sex" value="female" id="female" />
    <label for="female">Female</label>
</form>
Use label elements wherever you would put ordinary labels.

Here's how the HTML above might render in a browser:

(Try clicking a label to focus it associated control.)

Sex:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.2

Notes

  • (one or more optional; delete element if no notes)


<select>

Inserts a selection control for the user to select one or more options, typically for use in a form. A select element contains one or more optgroup or option elements to provide the actual choices.

Syntax: <select>...</select>

End tag: Required

Optional Attributes

Attribute | Values | Description
name | CDATA | Specifies the name sent to the form handler with the value of the selected option.
multiple | [none] | Allows the user to select more than one option (by holding down the 'Ctrl' key while clicking each desired option). When this attribute is present, browsers will render the selection control as a box showing multiple options rather than the default drop-down menu.
size | Number | Specifies the number of options visible at any time. If not specified, the form control is rendered as a drop-down menu unless the multiple attribute is present. If size is specified, the form control will be rendered as a box showing the specified number of options. If the number of available options exceeds this value, the form control will display a scrollbar to allow the user to see all the available options.
disabled | [none] | Specifies that the selection control is unavailable to the user. A disabled selection control cannot receive focus, and the values of its options are never sent to the form handler.
tabindex | Number | Specifies the tabbing order of the element. The lower the number, the earlier the element is in the tabbing sequence of the document. If tabindex=0 or is not defined, the element comes after any elements with a positive tabindex.

Element-Specific Events

Event | Trigger
onfocus | when the element receives focus
onblur | when the element loses focus
onchange | when the element loses focus and its value has changed since it received focus

(See also: Common Events)

Examples

Example 1
<p style="margin-left:0">Operating System:</p>
<select name="os">
  <option>Windows XP</option>
  <option>Windows 2000</option>
  <option>Windows Me</option>
  <option>Windows 98</option>
  <option>Windows 95</option>
</select>
A simple selection control rendered as a drop-down menu.

Here's how the HTML above might render in a browser:

Operating System:

Example 2
<p>Operating System:</p>
<select name="os" size="5" multiple>
  <optgroup label="Microsoft">
    <option>Windows XP</option>
    <option>Windows 2000</option>
    <option>Windows NT</option>
    <option>Windows Me</option>
    <option>Windows 98</option>
    <option>Windows 95</option>
  </optgroup>
  <optgroup label="Macintosh">
    <option>OS X</option>
    <option>OS 9</option>
  </optgroup>
</select>
A selection group using optgroup elements and allowing multiple selections.

Here's how the HTML above might render in a browser:

Operating System:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • If the multiple attribute is present but size is not specified, some browsers will auto-size the selection control large enough to display all the available options at once. To avoid an excessively tall selection box, be sure to specify size.


<optgroup>

Defines a group of choices within a select menu. Optgroup must contain one or more option elements to define the actual choices.

Syntax: <optgroup>...</optgroup>

End tag: Required

Required Attributes

Attribute | Values | Description
label | Text | Specifies the label for the option group. Each option in the group generally has its own label attribute as well that, together with the optgroup's label, gives a complete description of the option.

Optional Attributes

Attribute | Values | Description
disabled | [none] | Specifies that the option group is unavailable. The options of a disabled option group cannot be selected by the user and are not submitted with the form.

Examples

<select name="os">
  <option value="" selected>Operating System:</option>
  <optgroup label="Microsoft">
    <option value="winxp" label="Windows XP">Microsoft Windows XP</option>
    <option value="winme" label="Windows Me">Microsoft Windows Me</option>
  </optgroup>
  <optgroup label="Macintosh">
    <option value="macosx" label="OS X">Macintosh OS X</option>
    <option value="macos9" label="OS 9">Macintosh OS 9</option>
  </optgroup>
</select>
Use optgroups when you want to group related choices in a menu.

Here's how the HTML above might render in a browser:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 6.0
Netscape | 6.0

Notes

  • Optgroup is not well supported by current browsers, but its design allows authors to use it today without sacrificing compatibility with non-supporting browsers. Non-supporting browsers will ignore optgroup elements and the label attributes of option elements, rendering only the text within the option elements.
  • Although Internet Explorer 6.0 supports optgroup, it does not support the label attribute of option, making its support of optgroup less useful.
  • In HTML 4.0, optgroup is limited to containing only option elements, thus preventing nested optgroups. Future versions of HTML may add support for nested option groups.


<option>

Defines a menu choice within a select menu.

Syntax: <option>...</option>

End tag: Optional

Optional Attributes

Attribute | Values | Description
value | CDATA | The value of the option, submitted to the server if the option is selected by the user. If value is not specified, the text within the option element is its value.
selected | [none] | Specifies that the option is initially selected.
disabled | [none] | Specifies that the option is unavailable. A disabled option cannot be selected by the user and is never submitted with the form.
label | Text | Specifies the text that appears as the option's label in the menu. Browsers that don't support this attribute display the content of the option element itself as its label.

Examples

<form action="example.php">
  <p>Operating System:</p>
  <select name="os">
    <option value="winxp">Windows XP</option>
    <option value="win2k" selected>Windows 2000</option>
    <option value="winme">Windows Me</option>
    <option value="win98">Windows 98</option>
  </select>
</form>

Here's how the HTML above might render in a browser:

Operating System:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • You can place option elements within an optgroup to group related options together in browsers that support optgroup. In such cases, you can use shorter strings for the options' label attributes, which combined with an optgroup's label provide full descriptions of the options. (See the example in optgroup.)


<textarea>

Inserts a multi-line text input area for use in a form. When the form is submitted, the current value of the textarea is sent to the server as a name/value pair. The element's name attribute provides the name used, while the content entered into the textarea by the user provides the value. A default value can be specified by placing text between the element's start and end tags.

Syntax: <textarea>...</textarea>

End tag: Required

Required Attributes

Attribute | Values | Description
rows | Number | Specifies the number of rows visible in the textarea at any time. This does not limit the amount of text that can be inputted, since the textarea can be scrolled.
cols | Number | Specifies the width of the textarea in terms of columns of monospaced characters. Paragraphs that exceed this width are word-wrapped to the next line.

Optional Attributes

Attribute | Values | Description
name | CDATA | Specifies the textarea's name for the name/value pair sent to the form handler.
disabled | [none] | Disables the textarea. A disabled textarea cannot receive focus, and its name and value are not submitted with the form.
readonly | [none] | Prevents users from editing the contents of the textarea. The textarea's value is still submitted with the form.
accesskey | Character | Specifies a single character as a shortcut key for the element.
tabindex | Number | Specifies the tabbing order of the element. The lower the number, the earlier the element is in the tabbing sequence of the document. If tabindex=0 or is not defined, the element comes after any elements with a positive tabindex.

Element-Specific Events

Event | Trigger
onfocus | when the textarea receives focus
onblur | when the textarea loses focus
onselect | when text in the textarea is selected
onchange | when the textarea loses focus and its value has changed since it received focus

(See also: Common Events)

Examples

<textarea rows="3" cols="20">
Please enter your comments here.
</textarea>
Text inside the textarea provides the textarea's default value.

Here's how the HTML above might render in a browser:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Many browsers limit the amount of text that can be entered in a textarea to 32 or 64 kilobytes.


<a>

Defines an anchor. When used with the href attribute, an anchor is a hyperlink. Without the href attribute, an anchor serves as the destination of a hyperlink.

Syntax: <a>...</a>

End tag: Required

Optional Attributes

Attribute | Values | Description
href | URL | Specifies the destination of a hyperlink.
name | CDATA | Specifies the name of an anchor serving as the destination of a hyperlink. The value is case-sensitive and must be unique in the document.
rel | LinkTypes | Specifies the relationship of the current document to the destination document.
rev | LinkTypes | Specifies the relationship of the destination document to the current document.
type | ContentType | Specifies the content type (MIME type) of the link's destination.
target | FrameTarget | Specifies the frame in which the hyperlink's destination will be opened. If not specified, the destination is opened in the current frame or window.
hreflang | LanguageCode | Specifies the language of the hyperlink's destination.
charset | CharSet | Specifies the character set (language encoding) of the linked document.
shape rectangle
circle
polygon 		Specifies the shape of an area of an image map. The abbreviations "rect", "circ", and "poly" may be used. If not specified, the image map is assumed to be rectangular.
coords coordinates Specifies coordinates for an area of an image map. Coordinates are relative to the top-left corner of the object.
If shape="rectangle" or is not defined, coords="left,top,right,bottom".
If shape="circle", coords="center-x,center-y,radius".
If shape="polygon", coords="x1,y1,x2,y2,...,xN,yN".
accesskey | Character | Specifies a single character as a shortcut key for following the link.
tabindex | Number | Specifies the tabbing order of the link or anchor. The lower the number, the earlier the element is in the tabbing sequence of the document. If tabindex=0 or is not defined, the element comes after any elements with a positive tabindex.

Element-Specific Events

Event | Trigger
onfocus | when the link receives focus
onblur | when the link loses focus

(See also: Common Events)

Examples

Example 1
Visit <a href="http://www.namo.com/">Namo Interactive</a> today!
An ordinary hyperlink definition using the minimum attributes.

Example 2
<a href="xyz.html" target="detail" type="text/html" charset="US-ASCII" hreflang="en" accesskey="x" <b>tabindex</b>="3">
  <img src="prod_detail.gif">
</a>
A more elaborate hyperlink definition. In this example, an image is serving as the link. The destination document (specified here with a relative URL) will open in the frame named "detail".

Example 3
<object data="sitemap.png" usemap="#map" type="image/png" title="Site Map">
  <map name="map">
    <ul>
      <li><a href="/products/" shape="rect" coords="36,31,204,113">Products</a></li>
      <li><a href="/services/" shape="circ" coords="291,108,49">Services</a></li>
      <li><a href="/company/" shape="poly" coords="58,159,131,131,212,153,176,179,113,187">Company</a></li>
    </ul>
  </map>
</object>
This example illustrates the use of the tag in an image map definition. The map definition contains an unordered list of textual links that will be displayed if images are turned off in the browser. These link specifications also specify the areas of the image map.

Example 4
<h1><a name="Chapter 1">Chapter One</a></h1>
An anchor that will serve as the destination of a hyperlink; also called a bookmark. From the same document, a hyperlink would use href="#Chapter 1" to reference the bookmark. From another document, a hyperlink might use href="mybook.html#Chapter 1" to reference the bookmark.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • In "mailto" links, some browsers use the value of the title attribute as the subject of the e-mail message.
  • If a link includes a target attribute that refers to a nonexistent frame, the link will be opened in a new window.


<applet>

Embeds a Java applet. This tag is deprecated in HTML 4.0 in favor of the more general object element; however, applet is currently better supported by most browsers.

Syntax: <applet>...</applet>

End tag: Required

Required Attributes

Attribute | Values | Description
width | Length | The width of the applet.
height | Length | The height of the applet.

Optional Attributes

Attribute | Values | Description
code | CDATA | The path/name of the class file containing the compiled applet, specified relative to the URL in codebase. If code is specified, the object attribute may not be used.
codebase | URL | The base URL of the applet's class files.
archive | URL(s) | The URL of the applet if it is stored as a JAR archive. Some browsers support multiple URLs for more than one JAR file; use commas to separate the URLs.
object | CDATA | The path/name of a resource containing a serialized (saved) representation of an applet, specified relative to the URL in codebase. If object is specified, the code attribute should not be used.
name | CDATA | A unique name for the applet, for use in inter-applet communication.
alt | Text | Text to display if the applet is not supported by the browser.
align | left right top middle bottom baseline texttop absmiddle absbottom | Specifies how to align the applet with respect to surrounding text. "Top", "middle", and "bottom" position the applet vertically with respect to the current line (of text, usually). "Left" and "right" specify that the applet is placed at the left or right margin, with other content flowing around it.
hspace | pixels | Amount of blank space (in pixels) to the left and right of the applet.
vspace | pixels | Amount of blank space (in pixels) above and below the applet.

Examples

Example 1
<applet code="MyApplet.class" width="100" height="100"></applet>
The simplest form of an applet element. Since codebase is not specified, the file specified in the code attribute is assumed to be in the base path of the HTML document.

Example 2
<applet codebase="http://www.namo.com/java/" code="Animator.class"
 width=460 height=160 align="middle"
 alt="If you could run this applet, you'd see some animation">
   <param name="imageSource" value="images/Beans">
   <param name="backgroundColor" value="0xc0c0c0">
   <param name="endImage" value=10>
   <param name="pause" value=200>
<p>Your browser does not appear to support applets.</p>
</applet>
Here, codebase is specified, so the value of code is taken relative to it. The param elements within the applet element pass necessary parameters to the applet, while the p element below them will appear in browsers that do not support Java applets. Any param elements must appear before other elements within the applet element.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • If codebase is not specified, the value of code or object is taken as relative to the HTML document's base URL.
  • The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning applets.


<basefont>

Changes the default font for all following content except for headings.

Syntax: <basefont />

End tag: None

Required Attributes

Attribute | Values | Description
size | 1~7 | Specifies the font size on a scale of 1 to 7. Sizes are browser-dependent; the default is 3.

Optional Attributes

Attribute | Values | Description
color | Color | Specifies the font color in hex notation, RGB notation, or as a color name.
face | CDATA | Specifies the font face.

Examples

<basefont size="5" face="Arial" color="blue" />

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Most browsers fail to apply changes in base font size and color to tables.
  • This tag is deprecated in HTML 4.0 in favor of style sheets.


<bdo>

Overrides the Unicode bidirectional algorithm for the enclosed text.

Syntax: <bdo>...</bdo>

End tag: Required

Required Attributes

Attribute | Values | Description
dir | ltr rtl | Specifies the text direction (left-to-right or right-to-left).

Optional Attributes

Attribute | Values | Description
lang | LanguageCode | The language of the text (e.g., "he" for Hebrew).

Examples

<bdo dir="rtl">This text reads right to left.</bdo>

Here's how the HTML above might render in a browser:

This text reads right to left.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 5.0
Netscape | 6.2


<br>

Forces a line break in the current line.

Syntax: <br />

End tag: None

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
clear | left right all | Forces the content after the break to start below a floating object (typically an image or a table).

Examples

This line has<br />a forced break.

Here's how the HTML above might render in a browser:

This line has
a forced break.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Use br sparingly, as it can result in an awkward presentation when the document is viewed in a different font size than that used by the author.
  • Dont use br to separate paragraphs. Use p in conjunction with CSS margins to control paragraph spacing, if necessary.
  • Instead of br clear, use CSS's clear property to control text flow around floating objects.


<font>

Specifies font face, size, and/or color for the enclosed text.

Syntax: <font>...</font>

End tag: Required

Optional Attributes

Attribute | Values | Description
face | CDATA | A comma-separated list of font face names. The first font available to the browser will be used.
size | CDATA | The font size on a browser-based scale from 1 to 7. If basefont is in use, you can also specify an incremental size change such as "+1" or "-1".
color | Color | The font color.

Examples

<font face="Verdana,Arial" size="+1" color="red">
We recommend using styles instead.
</font>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Font is an inline element, so it can't include block-level elements such as p and table. Use styles to apply font settings to block-level elements.
  • This element is deprecated in HTML 4.0 in favor of style sheets.


<iframe>

Inserts an inline frame -- a box to display content from another URL.

Syntax: <iframe>...</iframe>

End tag: Required

Optional Attributes

Attribute | Values | Description
src | URL | The URL of the document to display in the iframe.
name | CDATA | The name of the iframe. This lets the iframe be used as the target of hyperlinks.
longdesc | URL | The URL of a document providing a long description of the iframe's contents.
width | Length | The width of the iframe in pixels or as a percentage of the available space.
height | Length | The height of the iframe in pixels or as a percentage of the available space.
align | top middle bottom left right | Specifies how to align the iframe with respect to surrounding text. "Top", "middle", and "bottom" position the iframe vertically with respect to the current line (of text, usually). "Left" and "right" specify that the iframe is placed at the left or right margin, with other content flowing around it.
frameborder | 1 0 | Specifies whether to draw a border around the iframe. The default "1" means yes.
marginwidth | pixels | The size in pixels of the left and right margins of the iframe.
marginheight | pixels | The size in pixels of the top and bottom margins of the iframe.
scrolling | yes no auto | Specifies whether the iframe has scrollbars. The default value of "auto" means scrollbars are included only when necessary.

Examples

<iframe width="160" height="120" src="frame.html">
   Alternate content for non-supporting browsers.
</iframe>
It's good practice to put alternate content within the iframe for browsers that don't support this element.

Here's how the HTML above might render in a browser:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 6.0

Notes

  • Any content within an iframe element can be used as alternative content for browsers that do not support iframe.
  • The iframe element is not included in the HTML 4.0 Strict specification.


<img>

Inserts an image from a file.

Syntax: <img />

End tag: None

Required Attributes

Attribute | Values | Description
src | URL | The URL of the image file.
alt | Text | Alternate text to display if the browser does not support images.

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
longdesc | URL | The URL of a document providing a long description of the iframe's contents.
width | Length | The width of the image in pixels or as a percentage of the available space.
height | Length | The height of the image in pixels or as a percentage of the available space.
usemap | URL | The URL of an image map definition to use with the image. A corresponding map element must exist at the URL. The URL is typically a bookmark reference (e.g., "#map") to a map definition in the same document.
ismap | [none] | Specifies that the image be used with a server-side image map.
align | left right top middle bottom baseline texttop absmiddle absbottom | Specifies how to align the image with respect to surrounding text. "Top", "middle", and "bottom" position the image vertically with respect to the current line (of text, usually). "Left" and "right" specify that the image is placed at the left or right margin, with other content flowing around it.
border | Length | The width of the black border around the image. The default is 0 in modern browsers.
hspace | pixels | The amount of white space, in pixels, to the left and right of the image.
vspace | pixels | The amount of white space, in pixels, above and below the image.

Examples

<a href="webcanvas.html">
   <img src="webcanvas.jpg" alt="WebCanvas Home" width="120" height="90" />
</a>
This img element is contained within an a element, making the image act as a hyperlink.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • When using the width and height attributes, some browsers may truncate alt text if it does not fit within the specified dimensions.
  • The vertical-align and float properties of Cascading Style Sheets provide more flexible methods of aligning images.


<map>

Defines a client-side image map for use with an img or object element. An image map defines areas in an image that act as hyperlinks. One or more area elements within the map define the link areas.

Syntax: <map>...</map>

End tag: Required

Required Attributes

Attribute | Values | Description
name | CDATA | The name of the image map. The name is referenced by the usemap attribute of the img or object element that defines the associated image.

Examples

<img src="sitemap.gif" alt="Site Map" usemap="#map" />
<map name="map"
   <area shape="rect" coords="36,31,204,113" href="/products/" />
   <area shape="circ" coords="291,108,49" href="/services/" />
   <area shape="poly" coords="58,159,131,131,212,153,176,179,113,187" href="/company/" />
</map>
A simple image map with one rectangular, one circular, and one polygonal region.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Instead of area, you can use a elements in a map definition combined with other elements to give a richer alternate presentation of links when images are not displayed. (See the third example under a.)


<area>

Defines a region in a client-side image map. This element is only used inside a map element.

Syntax: <area />

End tag: None

Required Attributes

Attribute | Values | Description
alt | Text | Alternate text to be displayed if images are not displayed.

Optional Attributes

Attribute | Values | Description
shape rectangle
circle
polygon 		Specifies the shape of an area of an image map. The abbreviations "rect", "circ", and "poly" may be used. If not specified, the image map is assumed to be rectangular.
coords coordinates The coordinates of the area. Coordinates are relative to the top-left corner of the object.
If shape="rectangle" or is not defined, coords="left,top,right,bottom".
If shape="circle", coords="center-x,center-y,radius".
If shape="polygon", coords="x1,y1,x2,y2,...,xN,yN".
href | URL | Creates a hyperlink from the region to the destination URL.
nohref true
false 		Specifies that the region has no hyperlink.
target | FrameTarget | Specifies the frame in which the hyperlink's destination will be opened. If not specified, the destination is opened in the current frame or window.
tabindex | Number | Specifies the tabbing order of the element. The lower the number, the earlier the element is in the tabbing sequence of the document. If tabindex=0 or is not defined, the element comes after any elements with a positive tabindex.

Element-Specific Events

Event | Trigger
onfocus | when the area receives focus
onblur | when the area loses focus

(See also: Common Events)

Examples

<img src="sitemap.gif" alt="Site Map" usemap="#map" />
<map name="map"
   <area shape="rect" coords="36,31,204,113" href="/products/" />
   <area shape="circ" coords="291,108,49" href="/services/" />
   <area shape="poly" coords="58,159,131,131,212,153,176,179,113,187" href="/company/" />
</map>
A simple image map with one rectangular, one circular, and one polygonal region.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • If an area includes a target attribute that refers to a nonexistent frame, the link will be opened in a new window.
  • Instead of area, you can use a elements in a map definition combined with other elements to give a richer alternate presentation of links when images are not displayed. (See the third example under a.)


<object>

Inserts an object, such as an image, a video, or a Java applet. Object is intended to replace the more specific img and applet elements and the proprietary embed and bgsound elements, but poor and buggy browser support makes the other elements a better choice for the time being. The contents of an object element are displayed if the object is not supported by the browser.

Syntax: <object>...</object>

End tag: Required

Optional Attributes

(Attributes shown in gray text are deprecated in HTML 4.0.)

Attribute | Values | Description
data | URL | The URL of the object. Relative URLs are interpreted with respect to the value of the codebase attribute, if present.
classid | URL | Specifies an implementation for the object. Java applets and ActiveX controls provide implementations for the embedded object, and so are specified with the classid attribute.
archive | URL(s) | The URL of the object if it is a Java applet stored as a JAR archive. Some browsers support multiple URLs for more than one JAR file; use commas to separate the URLs.
codebase | URL | The base URL for data, classid, and archive.
width | Length | The width of the object in pixels or as a percentage of the available space. Required by most browsers.
height | Length | The height of the object in pixels or as a percentage of the available space. Required by most browsers.
name | CDATA | A unique name for the object.
usemap | URL | The URL of an image map definition to use with the object if it is an image. A corresponding map element must exist at the URL. The URL is typically a bookmark reference (e.g., "#map") to a map definition in the same document.
type | ContentType | Specifies the media type of the resource referenced by the data attribute.
codetype | ContentType | Specifies the media type of the classid data.
standby | Text | Text to display while the object is loading.
tabindex | Number | Specifies the tabbing order of the element. The lower the number, the earlier the element is in the tabbing sequence of the document. If tabindex=0 or is not defined, the element comes after any elements with a positive tabindex.
declare | [none] | Specifies that the object is a declaration that is not immediately instantiated. This allows the object to be instantiated from a link, button, or object later in the same document. The id attribute must be used with declared objects as an identifier for the instantiating element.
align | left right top middle bottom | Specifies how to align the object with respect to surrounding text. "Top", "middle", and "bottom" position the object vertically with respect to the current line (of text, usually). "Left" and "right" specify that the object is placed at the left or right margin, with other content flowing around it.
border | Length | The width of the border around the object. The default is 0 in modern browsers.
hspace | pixels | The amount of white space, in pixels, to the left and right of the object.
vspace | pixels | The amount of white space, in pixels, above and below the object.

Examples

Example 1
<object
 classid="java:yahtzee.class"
 codetype="application/java"
 width="400" height="250"
 title="my yahtzee game"
 standby="Get ready to play Yahtzee!">
   Enable Java support to play!
</object>
An object element for a Java applet.

Example 2
<object
 classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628"
 id="Slider1"
 width="200" height="40"
 border="2">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>
An object element for an ActiveX control. The value of classid is a reference to a CLSID in the Windows registry. Several param elements provide optional or required parameters to the ActiveX control.

Here's how the HTML above might render in a browser:

Example 3
<object data="keynote.mov" type="video/quicktime"
 title="Keynote Speech"
 width=150 height=150>
  <param name="pluginspage" value="http://quicktime.apple.com/" />
  <param name="autoplay" value="true" />
  <object data="keynote.wav" type="audio/x-wav"
   title="Keynote Speech">
    <param name="autostart" value="true" />
    <param name="hidden" value="true" />
    <a href="keynote.html">Full text of keynote speech</a>
  </object>
</object>
Multiple object elements can be nested to provide alternate formats when the preferred format is not supported by the browser. In this example, the preferred object is a QuickTime movie; if the browser doesn't support QuickTime, a wave sound file will be played instead. If the browser doesn't support wave files either, the hyperlink within the second object element will be displayed.

Example 4
<object data="example.gif" title="Nice Photo" />
This object element does the same thing as an img element. The title attribute might be used by a browser in the same way as img's alt attribute.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | (not supported)


<param>

Provides parameters for the object and applet elements. An object or applet may contain any number of param elements before the alternate content that is also contained in the object or applet element.

Syntax: <param />

End tag: None

Required Attributes

Attribute | Values | Description
name | CDATA | The name of the parameter. This is specific to the object or applet (or to the plug-in that renders the object.) Unrecognized parameters are generally ignored.

Optional Attributes

Attribute | Values | Description
value | CDATA | The value of the parameter.
valuetype | data ref object | The type of value given in the value attribute. The default is "data", meaning the value is a string. Type "ref" means the value is a URL where run-time values are stored. Type "object" means the value is an identifier of a separate object element in the document.
type | ContentType | When valuetype="ref", specifies the media type of the resource.

Examples

<object
 classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628"
 id="Slider1"
 width="200" height="40"
 border="2">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>
An object element for an ActiveX control. The param elements provide optional or required parameters to the ActiveX control.

Here's how the HTML above might render in a browser:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<q>

Marks the enclosed text as a brief quotation.

Syntax: <q>...</q>

End tag: Required

Optional Attributes

Attribute | Values | Description
cite | URL | The URL of the quotation's source.

Examples

<p>She said, <q>I was here yesterday.</q></p>

Here's how the HTML above might render in a browser:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 6.2

Notes

  • The q element can only contain other inline elements. For longer (block) quotations, use blockquote instead.
  • Browsers supporting q should properly handle nested quotations. They should also use quotation marks suitable to the language of the quotation, based on the standard lang attribute of q or the language of its parent.


<span>

The span element is a generic inline container. It is typically used to group inline elements together for the purpose of applying a style to them as a group.

Syntax: <span>...</span>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<p>How do you put <span style="border:thin solid">words in a box</span>?</p>
You can use span to apply a style to part of the contents of a block element, such as a paragraph.

Here's how the HTML above might render in a browser:

How do you put words in a box?

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0

Notes

  • Div is the block-level equivalent of span.


<sub>

Marks the enclosed text as a subscript. Subscripts are generally rendered with a lowered baseline and in a smaller font than ordinary text.

Syntax: <sub>...</sub>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

H<sub>2</sub>O is water.

Here's how the HTML above might render in a browser:

H2O is water.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<sup>

Marks the enclosed text as a superscript. Superscripts are generally rendered with a raised baseline and in a smaller font than ordinary text.

Syntax: <sup>...</sup>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

E=mc<sup>2</sup>, according to Einstein.

Here's how the HTML above might render in a browser:

E=mc2, according to Einstein.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<abbr>

Marks the text within the tag as an abbreviation. When used with the title attribute, abbr is useful for aural (text-to-speech) browsers, spell checkers, translators, and other software.

Syntax: <abbr>...</abbr>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<abbr title="United Nations">UN</abbr>
The value of the title attribute will be shown as a "tooltip" in some browsers.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 6.2


<acronym>

Marks the text within the tag as an acronym. When used with the title attribute, acronym allows browsers to display the acronym's expansion as a tooltip.

Syntax: <acronym>...</acronym>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<acronym title="HyperText Markup Language">HTML</acronym>
The value of the title attribute will be shown as a "tooltip" in some browsers.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.2


<cite>

Marks the enclosed text as a citation (such as a book title). Typically rendered by browsers in italics.

Syntax: <cite>...</cite>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

I recently read <cite>The Grapes of Wrath</cite>.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<code>

Marks the enclosed text as computer code. Typically rendered as monospaced text by browsers.

Syntax: <code>...</code>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<pre><code>
   class HelloWorld {
     public static void main(String[] args) {
       System.out.println("Hello World!");
     }
   }
</code></pre>
Since spacing is often important when presenting computer code, the pre element can be useful as a container for code elements. When used within other containers, a code element has multiple spaces collapsed.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<dfn>

Marks the defining instance of the enclosed term. Typically rendered in italics by browsers.

Syntax: <dfn>...</dfn>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<dfn>Ichthyology</dfn> is the study of fish.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | (not supported)


<em>

Marks the enclosed text as emphasized. Typically rendered in italics by browsers.

Syntax: <em>...</em>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

I can't <em>stand</em>broccoli.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<kbd>

Marks the enclosed text as text to be entered by the user. Typically rendered as monospaced text by browsers.

Syntax: <kbd>...</kbd>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

To proceed, enter <kbd>Yes</kbd> at the prompt.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<samp>

Marks the enclosed text as sample output, such as from a computer program. Typically rendered as monospaced text by browsers.

Syntax: <samp>...</samp>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<p>When an undefined element is used in an HTML document,
a validator will give an error like the following:</p>
<p>
   <samp>NSGMLSU.EXE:test.html:4:7:E: element "FOOBAR" undefined</samp>
</p>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<strong>

Marks the enclosed text as strongly emphasized. Typically rendered in bold by browsers.

Syntax: <strong>...</strong>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

This is just <strong>too</strong> much.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<var>

Marks the enclosed text as a variable or program argument. Typically rendered in italics by browsers.

Syntax: <var>...</var>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

The variable <var>x</var> is used here.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0


<b>

Causes the browser to render the enclosed text in bold type.

Syntax: <b>...</b>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<b>This text is bold.</b>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • In most cases, use of a phrase element such as strong is more appropriate since such elements express the meaning of the enclosed text more effectively.


<big>

Causes the browser to render the enclosed text in larger type.

Syntax: <big>...</big>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<big>This text is big.</big>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Instead of using this tag, try the CSS font-size property for finer control over font sizes.


<i>

Causes the browser to render the enclosed text in italic type.

Syntax: <i>...</i>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<i>This text is italic.</i>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Using the CSS font-style property may be preferable in many cases.


<s>

Causes the enclosed text to be rendered with a strike-through style.

Syntax: <s>...</s>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

My best friend is <s>John</s> Paul.

Here's how the HTML above might render in a browser:

My best friend is John Paul.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Strike, which has the same function as s, is slightly better supported by browsers.
  • In many cases, use of a phrase element such as del is more appropriate than s since such elements express the meaning of the text more clearly. However, since support for del among browsers is weak, s could be useful in combination with del.
  • This element is deprecated in HTML 4.0.


<small>

Causes the browser to render the enclosed text in smaller type.

Syntax: <small>...</small>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<small>This text is small.</small>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • Instead of using this tag, try the CSS font-size property for finer control over font sizes.


<strike>

Causes the enclosed text to be rendered with a strike-through style.

Syntax: <strike>...</strike>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

My best friend is <strike>John</strike> Paul.

Here's how the HTML above might render in a browser:

My best friend is John Paul.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • In many cases, use of a phrase element such as del is more appropriate than strike since such elements express the meaning of the text more clearly. However, since support for del among browsers is weak, strike could be useful in combination with del.
  • This element is deprecated in HTML 4.0.


<tt>

Causes the browser to render the enclosed text in a monospaced font.

Syntax: <tt>...</tt>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<tt>This text is monospaced.</tt>

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • In most cases, use of a phrase element such as code, samp, or kbd is more appropriate since these elements express the meaning of the text more clearly.


<u>

Marks the enclosed text to be rendered as underlined text.

Syntax: <u>...</u>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

This <u>word</u> is underlined.

Here's how the HTML above might render in a browser:

This word is underlined.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • In most cases, use of a phrase element such as cite or strong is more appropriate since such elements express the meaning of the text more clearly.
  • This element is deprecated in HTML 4.0.


<frame>

Defines a frame -- a rectangular section of the browser window -- within a frameset document. A frame must be contained within a frameset element that specifies the dimensions of all the frames.

Syntax: <frame />

End tag: None

Optional Attributes

Attribute | Values | Description
name | CDATA | The unique name of the frame. This name can be used as the value of a target attribute in elements such as a. Must begin with a character in the range A-Z or a-z.
src | URL | The URL of the document providing the frame's content.
longdesc | URL | The URL of a document providing a full description of the frame's content. Useful when the browser cannot display frames or the frame's content.
frameborder | 1 0 | Specifies whether the frame has a visible border. The default value of 1 tells the browser to draw a border between the frame and all adjoining frames. The value 0 indicates that no border should be drawn, though borders from other frames will override this.
marginwidth | pixels | The width in pixels of the left and right margins of the frame.
marginheight | pixels | The height in pixels of the top and bottom margins of the frame.
noresize | [none] | Prevents users from resizing the frame.
scrolling | yes no auto | Specifies whether the frame has scrollbars. The default value of "auto" means the frame has scrollbars only when necessary.

Examples

<frameset rows="*,100">
  <frameset cols="40%,*">
    <frame name="menu" src="nav.html">
    <frame name="content" src="main.html">
  </frameset>
  <frame name="ad" src="ad.html" noresize>
  <noframes>
    <body>
      <p>
        Your browser doesn't support frames.
      </p>
    </body>
  </noframes>
</frameset>
This frameset contains three frames.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • To fully remove all frame borders in a frameset, use the attribute-values border="0" frameborder="0" framespacing="0" in the frameset element. These are proprietary attributes of Internet Explorer and Netscape, not part of the HTML specification.


<noframes>

In a frameset document, noframes provides alternate content for browsers that do not support (or have disabled) frames. The noframes element must contain a body element containing the alternate content.

Syntax: <noframes>...</noframes>

End tag: Required

Attributes

This element has no specific attributes. See: Common Attributes.

Examples

<frameset rows="*,100">
  <frame name="menu" src="nav.html">
  <frame name="content" src="main.html">
  <noframes>
    <body>
      <h1>Table of Contents</h1>
      <ul>
        <li><a href="products/index.html">Products</a></li>
        <li><a href="support/index.html">Support</a></li>
        <li><a href="company/index.html">Company</a></li>
      </ul>
      <p>This table of contents is for browsers that don't support frames.</p>
    </body>
  </noframes>
</frameset>
A meaningful noframes element should always be provided in a frameset document and should at least contain links to the main frame or frames.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 3.0

Notes

  • In HTML 4.0 Transitional, the noframes element is also permitted within most block-level elements. This allows authors to include content, such as navigation aids, that should only be displayed if the document is not being viewed within a frameset. Such use helps to ensure that a frame could stand on its own if bookmarked or accessed through a search engine while not burdening the frames user with duplicate content. However, most browsers do not support this use of noframes and will always display the content.


CSS Syntax

Rules

A basic CSS rule consists of two parts: a selector followed by one or more declarations. Each declaration consists of a CSS property name followed by a colon (:) and then one or more space-separated values. The selector indicates the object or set of objects to which to apply the property value(s) in the declaration(s). The example rule below, which applies a font declaration to all blockquote elements, illustrates these parts:

The selector always comes first, followed by the declarations within curly brackets. If there is more than one declaration, they are separated with semicolons. White space (including newlines) within and between rules is ignored; authors may make liberal use of whitespace to make style sheets more legible.

An example of a rule with multiple declarations:

blockquote
 { font: bold 18pt "Times New Roman";
   background-color: whitesmoke;
   margin: 1em; padding: 0.5em; }

Selectors

There are many kinds of selectors that may be used in rules. The most commonly used kinds are described below. For more information, see the page on selectors in the W3C's CSS2 Specification.

The universal selector denotes that a rule applies to every element. The universal selector is an asterisk (*). Example:

* { border: thin solid red }

Type selectors denote that a rule applies to every element of a certain type (e.g., every blockquote element). A type selector consists of the name of an HTML element, such as "blockquote". Some examples:

h1 { font-size: 24pt; font-weight: bold }
ol { list-style: upper-roman }

Descendant selectors denote that a rule applies only to instances of a specified element type that are descendants of a specified parent element type. A descendant selector consists of two element names separated with space. In the example below, the third rule uses a descendant selector:

   blockquote { font-style: italic }
           em { font-style: italic }
blockquote em { font-style: normal }

According to this set of rules, blockquote and em elements both have italic font style, but em elements that are contained within blockquotes will have normal font style.

Class selectors denote that a rule applies to every instance of a certain element type that is of the specified class. A class selector consists of an asterisk or an element name, a period (.), and a class name. For example, the rule below applies to every paragraph whose class attribute has a value of "foo".

p.foo { margin:1em; padding:5px }

To match elements in the intersection of two or more classes, concatenate the class names with periods. The following example applies only to div elements that belong to both class "foo" and class "goo".

div.foo.goo { color: purple }

A class selector of the form "*.classname" may be shortened to ".classname". The two rules below are equivalent and both apply to any element whose class is "foo".

*.foo { margin:1em; padding:5px }
 .foo { margin:1em; padding:5px }

ID selectors denote that a rule applies only to the element that has a certain ID. An ID selector consists of the pound sign (#) followed by an ID value. For example, the rule below applies only to the element whose ID attribute has the value "i8":

#i8 { position: absolute;
      top: 10px; left: 15em }

If an ID selector includes an element name before the pound sign, it applies only if the element with the specified ID value is the specified type of element. For instance, the following rule applies only if the element with ID "foo" is a paragraph; otherwise, it does not apply.

p#foo { color: green }

Pseudo-class and pseudo-element selectors denote that a rule applies to a pseudo-class, such as "a:link", or a pseudo-element, such as "p.foo:first-line". Some examples:

a:link    { color: blue }
a:active  { color: red }
a:visited { color: gray }

p.foo:first-line   { font-size: 133% }
p.foo:first-letter { font-size: 200% }

p.note:before { content: "NOTE: " }

 .q:before { content: open-quote }
 .q:after  { content: close-quote }

Selector grouping

If the same declaration or set of declarations is to be used with more than one selector, then the selectors may be combined in one rule for conciseness. Selectors may be grouped by separating them with commas. For example, the following rule:

h1, h2, h3 { font-family: sans-serif }

is equivalent to the three rules below:

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

Style Sheets

A set of CSS rules is called, collectively, a style sheet. A style sheet may be located inside an HTML document (an internal style sheet), or it may exist as a separate text file (an external style sheet). Whereas an internal style sheet only applies to the document it is a part of, an external style sheet may apply to any number of documents.

Using an internal style sheet

An internal style sheet is contained within a style element in the head section of an HTML document, as in the following example:

<html>
<head>
  <title>Example Document</title>
  <style type="text/css">
    h1, h2, h3 { font-family: sans-serif }
            h1 { font-size: 24pt;
                 font-weight: bold }
            ol { list-style: upper-roman }
    blockquote {
      font: bold 18pt "Times New Roman";
      background-color: whitesmoke;
      margin: 1em; padding: 0.5em; }

         p.foo { margin:1em; padding:5px }
          .goo { width: 80% }

          #i8  { position: absolute;
                 top: 10px; left: 15em }

     a:link    { color: blue }
     a:active  { color: red }
     a:visited { color: gray }
  </style>
</head>
<body>
<p>This is just an example.</p>
</body>
</html>

Using an external style sheet

To use an external style sheet, put a link element with rel="stylesheet" in the head section of the HTML document. Example:

<html>
<head>
  <title>Another example</title>
  <link rel="stylesheet" type="text/css"
    href="/css/example.css" />
</head>
<body>...</body>
</html>

You can link to more than one stylesheet by using a separate link element for each style sheet you want to use. It is also possible to use both an internal style sheet and one or more external style sheets. In case of conflicting rules, the cascading order determines which rule is applied.

Inline Declarations

CSS rules and style sheets let authors define styles for entire types and classes of elements in one location, but there are times when it is desirable to apply a unique style to just one particular instance of an element in a document, or to override a style rule for one instance of an element. In such cases, you can use an "inline" CSS declaration. An inline declaration is created by adding a style attribute to an HTML element; the value of the attribute is the CSS declaration.

For example, to apply centered text alignment to a single paragraph, you would use something like this:

<p style="text-align: center">This paragraph is centered.</p>

Multiple declarations can be included by separating them with semicolons, as in the example below, which uses a span element to apply a style to part of a paragraph:

<p>Mary had a <span style="color:red; font-style:italic">little</span> lamb.</p>

If an inline declaration conflicts with a rule in a style sheet, then the inline declaration takes precedence.


CSS Value Types

Many CSS properties take values of certain defined types. These are described below.

Integers and Real Numbers

Integers and real numbers are specified in decimal notation only. An integer consists of one or more digits "0" to "9". A number can either be an integer, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a "-" or "+" to indicate the sign.

Lengths

Lengths refer to horizontal or vertical measurements.

The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (e.g., 'px', 'deg', etc.). After the '0' length, the unit identifier is optional.

There are two types of length units: relative and absolute. Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).

The relative units are:

  • em: the font-size of the relevant font
  • ex: the 'x-height' of the relevant font
  • px: pixels of the viewing device

The 'em' unit is equal to the computed value of the font-size property of the element on which it is used. The exception is when 'em' occurs in the value of the font-size property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

The 'ex' unit is defined by the font's 'x-height'. The x-height is so called because it is often equal to the height of the lowercase "x". However, an 'ex' is defined even for fonts that don't contain an "x".

Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display.

Note that child elements do not inherit relative values from their parent; rather, they inherit the computed values. Consider the following declarations:

body { font-size: 12pt;
       text-indent: 3em; }
  h1 { font-size: 15pt }

The computed value of text-indent for the document body is 36pt. All children of the body element inherit this value; therefore, the text-indent value for h1 elements is not 45pt but 36pt.

The absolute units are:

  • in: inches
  • cm: centimeters
  • mm: millimeters
  • pt: points (1/72 of an inch)
  • pc: picas (12 points)

Absolute units should be avoided where possible, since they cannot be scaled by users.

Percentages

The format of a percentage value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number immediately followed by '%'.

Percentage values are always relative to another value, for example a length. Each property that allows percentages also defines the value to which the percentage refers. The value may be that of another property for the same element, a property for an ancestor element, or a value of the formatting context (e.g., the width of a containing block). When a percentage value is set for a property of the root element and the percentage is defined as referring to the inherited value of some property, the resultant value is the percentage times the initial value of that property.

Since child elements inherit the computed values of their parent, in the following example, the children of the p element will inherit a value of 12pt for line-height, not the percentage value (120%):

p { font-size: 10pt;
    line-height: 120% }

URLs

A URL provides the address of a resource on the Web. The format of a URL value is 'url(' followed by optional whitespace followed by an optional single quote (') or double quote (") character followed by the URL itself, followed by an optional single quote (') or double quote (") character followed by optional whitespace followed by ')'. The two quote characters must be the same.

Some examples:

    body { background-image: url(/images/foo.gif) }
p.before { content: url("beep.wav") }
     img { cursor: url('http:www.namo.com/hand.cur') }

Parentheses, commas, whitespace characters, single quotes (') and double quotes (") appearing in a URI must be escaped with a backslash: '\(', '\)', '\,'.

Strings

Strings can either be written with double quotes or with single quotes. Double quotes cannot occur inside double quotes, unless escaped (as '\"' or as '\22'); analogously for single quotes ("\'" or "\27"). Examples:

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

A string cannot directly contain a newline. To include a newline in a string, use the escape "\A" (hexadecimal A is the line feed character in Unicode, but represents the generic notion of "newline" in CSS).

It is possible to break strings over several lines, for aesthetic or other reasons, but in such a case the newline itself has to be escaped with a backslash (\). For instance, the following two selectors are exactly the same:

a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}

Colors

A color value can be any hexadecimal number, specified according to the sRGB color space, or one of sixteen standard color names. Hexadecimal numbers must be prefixed by a "#" character.

The standard color names and their sRGB values are as follows:

Color Name | sRGB Value
Black | #000000
Silver | #C0C0C0
Gray | #808080
White | #FFFFFF
Maroon | #800000
Red | #FF0000
Purple | #800080
Fuchsia | #FF00FF
Green | #008000
Lime | #00FF00
Olive | #808000
Yellow | #FFFF00
Navy | #000080
Blue | #0000FF
Teal | #008080
Aqua | #00FFFF

In addition, the following special color names refer to colors that may be defined in the user's operating system. Use of these colors can make documents fit better with users' preferred look and feel. Although these names are case- insensitive, it is recommended that the mixed capitalization shown below be used, to make the names more legible.

Color Name | Corresponding UI Element
ActiveBorder | active window border
ActiveCaption | active window caption
AppWorkspace | background of multiple document interface
Background | desktop background
ButtonFace | face color for three-dimensional display elements
ButtonHighlight | dark shadow for three-dimensional display elements
ButtonShadow | shadow color for three-dimensional display elements
ButtonText | text on push buttons
CaptionText | text in captions, size boxes, and scrollbar arrow boxes
GrayText | grayed (disabled) text
Highlight | item(s) selected in a control
HighlightText | text of item(s) selected in a control
InactiveBorder | inactive window border
InactiveCaption | inactive window caption
InactiveCaptionText | text in an inactive caption
InfoBackground | background color for tooltip controls
InfoText | text color for tooltip controls
Menu | menu background
MenuText | text in menus
Scrollbar | scroll bar gray area
ThreeDDarkShadow | dark shadow for three-dimensional display elements
ThreeDFace | face color for three-dimensional display elements
ThreeDHighlight | highlight color for three-dimensional display elements
ThreeDLightShadow | light color for three-dimensional display elements
ThreeDShadow | dark shadow for three-dimensional display elements
Window | window background
WindowFrame | window frame
WindowText | text in windows

Counters

Counters are denoted by identifiers (see the counter-increment and counter-reset properties). To refer to the value of a counter, the notation 'counter(identifier)' or 'counter(identifier, list-style-type)' is used. The default style is 'decimal'.

To refer to a sequence of nested counters of the same name, the notation is 'counters(identifier, string)' or 'counters(identifier, string, list-style-type)'.

In CSS2, the values of counters can only be referred to from the content property. Note that 'none' is a possible list-style-type: 'counter(x, none)' yields an empty string.

Counters that are not in the scope of any counter-reset are assumed to have been reset to 0 by a counter-reset on the root element.


Cascading and Inheritance

Two special features of CSS are cascading and inheritance.

Inheritance

The values of some CSS properties are passed on from parent elements to their child elements; this behavior is called inheritance. Each property defines whether it is inherited or not.

For instance, if you have a rule setting the font-family of the body element to "Verdana", then the text of every element within the body (that is, all visible text content) will be in Verdana. Similarly, any inheritable style applied to a div element will be passed on to every element within the div. However, if a child element has a specified value that is different from that defined for its parent, then the specified value is used, not the parent's value.

Percentage values are not inherited. Rather, the computed value based on a percentage value is inherited. For example, given the rules:

      body { font-size: 10pt }
blockquote { font-size: 80%  }

and the HTML fragment:

<blockquote>This wine is <em>very</em> good.</blockquote>

the font-size of the blockquote is computed as 8pt, and this is the value that is inherited by the em element inside the blockquote, not 80%.

Cascading

Style definitions can come from three different sources: author, user, and user agent.

  • Author: The author may include a style sheet in the HTML document, link to an external style sheet, and/or use inline declarations in the HTML markup.
  • User: The user may be able to specify preferred style rules through a mechanism provided by the user agent.
  • User agent: The user agent (Web browser) has a default style sheet that is applied when no other style information is given.

In case style rules from two or more of these sources conflict (or rules specified by the author conflict with other author-specified rules), the CSS specification defines how to resolve the conflict and determine which rule is applied. Each rule is assigned a weight determined by several criteria; when rules conflict, the rule with the greatest weight takes precedence.

The criteria for assigning weight can be summarized as follows:

  1. The "!important" keyword

    Rules can be designated as important by appending the keyword "!important" at the end of the declaration. A style that is designated as important will take precedence over contradictory styles of otherwise equal weight.

  2. Origin

    When otherwise equal-weight rules originating from the author and the user conflict, the author's rule takes precedence, unless both rules are marked "!important", in which case the user's rule wins. Both author rules and user rules take precedence over user agent rules.

  3. Specificity

    A more specific style (a rule with a more specific selector) takes precedence over a less specific one. In order of importance, specificity is influenced by: (1) the number of ID names in the selector, (2) the number of class names in the selector, and (3) the number of element names in the selector. The example rules below are ranked in order of weight, from lowest to highest:

        *         { color: black }
    p         { color: gray }
div p         { color: yellow }
    p.foo     { color: green }
    p.foo.goo { color: blue }
div p.foo.goo { color: fuscia }
    p#bob     { color: red }

    Given the rule set above, a paragraph belonging to classes "foo" and "goo" and having ID "bob" will be red.

  4. Order

    When two conflicting rules have otherwise the same weight, the one that appears later in the style sheet wins. For the purposes of determining order, rules in linked and imported style sheets are considered to appear above rules in internal style sheets, and inline style declarations are considered to appear below all other rules.


background

A shorthand property for setting some or all of the background properties in one declaration.
Initial Value | not defined
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
background-color background-image background-repeat | Values are specified according to the rules for each individual property. A value not specified will take its initial value. | 4.0 | 4.0
background-attachment background-position | Values are specified according to the rules for each individual property. A value not specified will take its initial value. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

      body { background: white url(http://www.namo.com/foo.gif) }
blockquote { background: #7fffd4 }
         p { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
     table { background: #0c0 url(leaves.jpg) no-repeat bottom right }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • The background-attachment and background-repeat properties do not work in Netscape 4.x.


background-attachment

Specifies whether a specified background image will scroll with the content or be fixed relative to the canvas.

Initial Value | scroll
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
scroll | The background image will scroll with the content. | 4.0 | 6.0
fixed | The background image will stay in place while the content scrolls. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

body
{
  background-image:url('basket_blue.gif');
  background-attachment:fixed
}
The background-attachment property is most commonly used with the body element. In the examples below, the same background image has been applied to two textarea elements, but with different values for background-attachment. (You must have Internet Explorer 5 or newer installed to see the background images.)

scroll fixed

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • In Internet Explorer 4.x, this property only works with the body element.


background-color

Sets the background color of an element.
Initial Value | transparent
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
color | A color name or RGB value. | 4.0 | 4.0
transparent | No background color. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

 body { background-color: white }
table { background-color: #F0F0F0 }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image:none is suitable.


background-image

Sets the background image of an element.

Initial Value | none
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
url | The URL of an image file. | 4.0 | 4.0
none | No background image. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

body { background-image: url(/images/bg.gif) }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image:none is suitable.


background-position

Sets the starting position of a specified background image. This property may only be applied to block-level elements and replaced elements. (A replaced element is one for which only the intrinsic dimensions are known. Replaced elements include img, input, textarea, select, and object.)

Initial Value | 0% 0%
Inherited | no
Applies to | block-level and replaced elements

Possible Values

Value | Notes | IE | NN
top left top center top right center left center center center right bottom left bottom center bottom right | Vertical (top, center, left) and horizontal (left, center, right) keywords. If you specify only one keyword, the other is assumed to be center. | 4.0 | 6.0
X% Y% | Specifies the starting position of the background image, relative to the element's top left corner, as percentages of the element's width and height. The first percentage specifies the horizontal offset, and the second specifies the vertical offset. If only one percentage is specified, it is assumed to be the horizontal offset, and the vertical offset is assumed to be 50%. | 4.0 | 6.0
X-length Y-length | Specifies the starting position of the background image, relative to the element's top left corner, in length units. The first length specifies the horizontal offset, and the second specifies the vertical offset. If only one length is specified, it is assumed to be the horizontal offset, and the vertical offset is assumed to be 50% of the height of the element. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

body
{
  background-image:url(water.gif);
  background-repeat:no-repeat;
  background-position:top center;
}

table
{
  background-image:url(sky.gif);
  background-repeat:no-repeat;
  background-position:10% 20%;
}

td
{
  background-image:url(wood.gif);
  background-repeat:no-repeat;
  background-position:10px 20px;
}
In the table below, each cell has the same background image but with different values for background-position:

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Percentage and length values for the X and Y offsets can be combined (e.g., background-position: 25% 10px). However, percentages and lengths cannot be combined with keywords.


background-repeat

Determines how a specified background image is repeated. Repeating is useful when the background image is not as large as the element it is applied to.

Initial Value | repeat
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
repeat | The image will be repeated both horizontally and vertically. | 4.0 | 4.0
repeat-x | The image will be repeated horizontally only. | 4.0 | 4.0
repeat-y | The image will be repeated vertically only. | 4.0 | 4.0
no-repeat | The image will not be repeated. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

body
{
  background-image: url(stripe.gif);
  background-repeat: repeat-x
}

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


border

A shorthand property for setting the same width, style and color for all four borders of an element.

Initial Value | not defined
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
border-width border-style color | Each value is specified according to the rules for the individual property, except that only single values are allowed. Omitted values are set to their initial values. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

th {border: 2.5px ridge green }
td {border: solid blue }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Unlike the shorthand margin and padding properties, the border property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.


border-bottom

A shorthand property for setting the width, style, and color of an element's bottom border in one declaration.
Initial Value | not defined
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
border-bottom-width border-bottom-style color | Each value is specified according to the rules for the individual property. Omitted values are set to their initial values. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

tr.a { border-bottom: thin solid blue }
tr.b { border-bottom: 2px groove }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-bottom-color

Specifies the color of an element's bottom border.
Initial Value | the value of the color property
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
color | A color keyword or RGB value. | 4.0 | 6.0
transparent | Makes the border transparent. Since borders can have nonzero width, this is not the same as a zero-width border. | 6.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table {
  border-style: solid;
  border-bottom-color: blue; }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Some browsers ignore this property unless the border style is also specified (using border-bottom-style or border-style).
  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-bottom-style

Specifies the style of an element's bottom border.
Initial Value | none
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
none | No border (same as a zero-width border). | 4.0 | 6.0
hidden | Same as "none", except that "hidden" borders of table cells take precedence over all other borders of neighboring cells. | - | 6.0
dotted | The border is a series of dots. | 5.5 | 6.0
dashed | The border is a series of short line segments. | 5.5 | 6.0
solid | The border is a single solid line. | 4.0 | 6.0
double | The border is two solid lines. | 4.0 | 6.0
groove | The border looks as though it were chiseled into the canvas. | 4.0 | 6.0
ridge | The opposite of "groove": the border looks as though it were raised above the canvas. | 4.0 | 6.0
inset | The border makes the entire element look as though it were sunk into the canvas. | 4.0 | 6.0
outset | The opposite of "inset": the border makes the entire element look as though it were raised above the canvas. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table {
  border-top-style: solid;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: groove
}

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-bottom-width

Specifies the width of an element's bottom border.
Initial Value | medium
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
thin medium thick | The exact widths corresponding to these keywords are browser-dependent. | 4.0 | 4.0
length | An exact relative or absolute length. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table { border-bottom-width: thin }
tr    { border-bottom-width: 2px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Some browsers ignore this property unless border-style is also used.
  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-color

A shortcut property for setting the colors of all four borders of an element in one declaration. From one to four values may be specified. If only one value is given, it applies to all sides. If two values are given, the top and bottom borders are set to the first value and the right and left are set to the second. If three values are given, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If four values are given, they apply to the top, right, bottom, and left, respectively.
Initial Value | not defined
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
border-top-color | The color of the top border. | 4.0 | 6.0
border-right-color | The color of the right border. | 4.0 | 6.0
border-bottom-color | The color of the bottom border. | 4.0 | 6.0
border-left-color | The color of the left border. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

body {
  border-style: groove;
  border-color: red }

table {
  border-style: inset;
  border-color: red blue }

th {
  border-style: solid;
  border-color: #008080 green black }

td {
  border-style: outset;
  border-color: orange #8A7B3C gray #A01CD3 }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Some browsers ignore this property unless the border-style is also specified.
  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-left

A shorthand property for setting the width, style, and color of an element's left border in one declaration.
Initial Value | not defined
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
border-left-width border-left-style color | Each value is specified according to the rules for the individual property. Omitted values are set to their initial values. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

tr.a { border-left: thin solid blue }
tr.b { border-left: 2px groove }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-left-color

Specifies the color of an element's left border.
Initial Value | the value of the color property
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
color | A color keyword or RGB value. | 4.0 | 6.0
transparent | Makes the border transparent. Since borders can have nonzero width, this is not the same as a zero-width border. | 6.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table {
  border-style: solid;
  border-left-color: blue; }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Some browsers ignore this property unless the border style is also specified (using border-left-style or border-style).
  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-left-style

Specifies the style of an element's left border.
Initial Value | none
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
none | No border (same as a zero-width border). | 4.0 | 6.0
hidden | Same as "none", except that "hidden" borders of table cells take precedence over all other borders of neighboring cells. | - | 6.0
dotted | The border is a series of dots. | 5.5 | 6.0
dashed | The border is a series of short line segments. | 5.5 | 6.0
solid | The border is a single solid line. | 4.0 | 6.0
double | The border is two solid lines. | 4.0 | 6.0
groove | The border looks as though it were chiseled into the canvas. | 4.0 | 6.0
ridge | The opposite of "groove": the border looks as though it were raised above the canvas. | 4.0 | 6.0
inset | The border makes the entire element look as though it were sunk into the canvas. | 4.0 | 6.0
outset | The opposite of "inset": the border makes the entire element look as though it were raised above the canvas. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table {
  border-top-style: solid;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: groove
}

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-left-width

Specifies the width of an element's left border.
Initial Value | medium
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
thin medium thick | The exact widths corresponding to these keywords are browser-dependent. | 4.0 | 4.0
length | An exact relative or absolute length. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table { border-left-width: medium }
tr    { border-left-width: 0.5cm }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Some browsers ignore this property unless border-style is also used.
  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-right

A shorthand property for setting the width, style, and color of an element's right border in one declaration.
Initial Value | not defined
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
border-right-width border-right-style color | Each value is specified according to the rules for the individual property. Omitted values are set to their initial values. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

tr.a { border-right: thin solid blue }
tr.b { border-right: 2px groove }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-right-color

Specifies the color of an element's right border.
Initial Value | the value of the color property
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
color | A color keyword or RGB value. | 4.0 | 6.0
transparent | Makes the border transparent. Since borders can have nonzero width, this is not the same as a zero-width border. | 6.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table {
  border-style: solid;
  border-right-color: blue; }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Some browsers ignore this property unless the border style is also specified (using border-right-style or border-style).
  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-right-style

Specifies the style of an element's right border.
Initial Value | none
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
none | No border (same as a zero-width border). | 4.0 | 6.0
hidden | Same as "none", except that "hidden" borders of table cells take precedence over all other borders of neighboring cells. | - | 6.0
dotted | The border is a series of dots. | 5.5 | 6.0
dashed | The border is a series of short line segments. | 5.5 | 6.0
solid | The border is a single solid line. | 4.0 | 6.0
double | The border is two solid lines. | 4.0 | 6.0
groove | The border looks as though it were chiseled into the canvas. | 4.0 | 6.0
ridge | The opposite of "groove": the border looks as though it were raised above the canvas. | 4.0 | 6.0
inset | The border makes the entire element look as though it were sunk into the canvas. | 4.0 | 6.0
outset | The opposite of "inset": the border makes the entire element look as though it were raised above the canvas. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table {
  border-top-style: solid;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: groove
}

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-right-width

Specifies the width of an element's right border.
Initial Value | medium
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
thin medium thick | The exact widths corresponding to these keywords are browser-dependent. | 4.0 | 4.0
length | An exact relative or absolute length. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table { border-right-width: medium }
tr    { border-right-width: 1.5pt }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Some browsers ignore this property unless border-style is also used.
  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-style

A shortcut property for setting the styles of all four borders of an element in one declaration. From one to four values may be specified. If only one value is given, it applies to all sides. If two values are given, the top and bottom borders are set to the first value and the right and left are set to the second. If three values are given, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If four values are given, they apply to the top, right, bottom, and left, respectively.
Initial Value | none
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
border-top-style | The style of the top border. | 4.0 | 6.0
border-right-style | The style of the right border. | 4.0 | 6.0
border-bottom-style | The style of the bottom border. | 4.0 | 6.0
border-left-style | The style of the left border. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

 body { border-style: solid }
table { border-style: solid dotted }
   th { border-style: solid dotted dashed }
   td { border-style: solid dotted dashed groove }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-top

A shorthand property for setting the width, style, and color of an element's top border in one declaration.
Initial Value | not defined
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
border-top-width border-top-style color | Each value is specified according to the rules for the individual property. Omitted values are set to their initial values. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

tr.a { border-top: thin solid blue }
tr.b { border-top: 2px groove }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-top-color

Specifies the color of an element's top border.
Initial Value | the value of the color property
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
color | A color keyword or RGB value. | 4.0 | 6.0
transparent | Makes the border transparent. Since borders can have nonzero width, this is not the same as a zero-width border. | 6.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table {
  border-style: solid;
  border-top-color: blue; }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Some browsers ignore this property unless the border style is also specified (using border-top-style or border-style).
  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-top-style

Specifies the style of an element's top border.
Initial Value | none
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
none | No border (same as a zero-width border). | 4.0 | 6.0
hidden | Same as "none", except that "hidden" borders of table cells take precedence over all other borders of neighboring cells. | - | 6.0
dotted | The border is a series of dots. | 5.5 | 6.0
dashed | The border is a series of short line segments. | 5.5 | 6.0
solid | The border is a single solid line. | 4.0 | 6.0
double | The border is two solid lines. | 4.0 | 6.0
groove | The border looks as though it were chiseled into the canvas. | 4.0 | 6.0
ridge | The opposite of "groove": the border looks as though it were raised above the canvas. | 4.0 | 6.0
inset | The border makes the entire element look as though it were sunk into the canvas. | 4.0 | 6.0
outset | The opposite of "inset": the border makes the entire element look as though it were raised above the canvas. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table {
  border-top-style: solid;
  border-right-style: dotted;
  border-bottom-style: dashed;
  border-left-style: groove
}

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-top-width

Specifies the width of an element's top border.
Initial Value | medium
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
thin medium thick | The exact widths corresponding to these keywords are browser-dependent. | 4.0 | 4.0
length | An exact relative or absolute length. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table { border-top-width: thick }
tr    { border-top-width: 1mm }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Some browsers ignore this property unless border-style is also used.
  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


border-width

A shortcut property for setting the widths of all four borders of an element in one declaration. From one to four values may be specified. If only one value is given, it applies to all sides. If two values are given, the top and bottom borders are set to the first value and the right and left are set to the second. If three values are given, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If four values are given, they apply to the top, right, bottom, and left, respectively.
Initial Value | not defined
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
border-top-width | The width of the top border. | 4.0 | 4.0
border-right-width | The width of the right border. | 4.0 | 4.0
border-bottom-width | The width of the bottom border. | 4.0 | 4.0
border-left-width | The width of the left border. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
table { border-width: thin medium thick 1mm  }
This rule sets the borders of tables to top: thin, right: medium, bottom: thick, and left: 1mm.

Example 2
p.box { border-width: 1em 3pt 0.2in }
This rule sets the borders of "box" paragraphs to top: 1em, right and left: 3pt, and bottom: 0.2in.

Example 3
div { border-width: 2px 3px }
This rule sets the borders of div elements to top and bottom: 2px, and right and left: 3px.

Example 4
body { border-width: thin }
This rule sets the document's border to thin all around.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Some browsers ignore this property unless border-style is also used.
  • Internet Explorer 4.0 and 5.0 do not support this property for inline elements.


clear

Specifies whether an element may have floating elements to its sides. If not, the element will be moved below any preceding floating elements on the specified side. The property has no effect with regard to any floating child elements of the element.
Initial Value | none
Inherited | no
Applies to | block-level elements

Possible Values

Value | Notes | IE | NN
none | Floating elements are allowed on both sides of the element. | 4.0 | 4.0
left right | Disallows floating elements on the left side or the right side (respectively) of the element. | 4.0 | 4.0
both | Disallows floating elements on either side of the element. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

.cb { clear:both }
The examples below illustrate the effect of the clear property. The red text is in floating paragraphs.
clear:none | clear:left
The visual Web authoring tool that works for you Whether you're an experienced Web professional or just starting with your first home page, Namo WebEditor 6 provides the complete set of tools you need to design, build, manage and publish leading edge Web sites in less time and with great results. | The visual Web authoring tool that works for you Whether you're an experienced Web professional or just starting with your first home page, Namo WebEditor 6 provides the complete set of tools you need to design, build, manage and publish leading edge Web sites in less time and with great results.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


cursor

Specifies the type of mouse pointer to display when the mouse pointer is over an element.
Initial Value | auto
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
auto | The mouse pointer shape is determined by the browser based on the current context. | 4.0 | 6.0
default | The default pointer for the operating system and/or platform, often rendered as an arrow. | 4.0 | 6.0
crosshair | A simple crosshair, similar to a "+" sign. | 4.0 | 6.0
pointer | A pointer shape that indicates a link. | 6.0 | 6.0
move | A shape that indicates that something is to be moved. | 4.0 | 6.0
e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize | A shape that indicates that some edge or corner is to be moved in the specified direction. For example, "se-resize" is used when a box is to be enlarged from its south-east corner. | 4.0 | 6.0
text | A shape that indicates that text may be selected, often rendered as an I-beam. | 4.0 | 6.0
wait | A shape that indicates that the browser is busy and the user should wait, often rendered as a watch or an hourglass. | 4.0 | 6.0
help | A shape that indicates that help is available for the object under the pointer, often rendered as an arrow with a question mark. | 4.0 | 6.0
url | Use the cursor file located at the specified URL. Multiple cursor file URLs may be specified, separated by commas. | 6.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

   img.imagemap    { cursor: crosshair }
object.puzzlepiece { cursor: move }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0


display

Determines whether and how an element is displayed.
Initial Value | inline
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
block | Element is displayed as a block element (line break before and after). | 5.0 | 4.0
inline | Element is displayed as an inline element (no line break before or after). | 5.0 | 7.0
list-item | Element is displayed as a list item (same as "block" except a list-item marker is added). | 6.0 | 4.0
none | Element and any child elements are not displayed and take up no space. | 4.0 | 4.0
marker | This value specifies that generated content before or after an element should be displayed as a marker. (Markers do not affect the positioning of their principal elements.) This value should only be used with :before and :after pseudo-elements attached to block-level elements. In other cases, this value is interpreted as "inline". | 6.0 | 7.0
run-in | Element is displayed as an inline element at the beginning of the following block element. | - | -
compact | Element is displayed as an inline element in the margin of the following block element if there is enough space; otherwise, it is displayed as a block element. | - | -
table inline-table table-row-group table-column table-column-group table-header-group table-footer-group table-row table-cell table-caption | Element behaves like the corresponding HTML table element. | - | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
img { display: none }
This rule could be used in an alternate stylesheet to allow users to turn off image display. (Note that this will cause page contents to reflow.)

Example 2
h3:before
  { display: marker;
    content: url(star.gif) }
This rule causes an image to be displayed as a marker before every h3 element.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Netscape 7.0 does not support the "table-column" and "table-column-group" values for this property.


float

Specifies whether an element floats. A floating element is shifted to the left or the right side of its parent element, and other content can flow around it. The float property serves the same function as HTML's align attribute for images, except that it can apply to any element.
Initial Value | none
Inherited | no
Applies to | all but positioned elements and generated content

Possible Values

Value | Notes | IE | NN
none | Specifies that the element is non-floating. | 4.0 | 4.0
left | Causes the element to float at the left side of its parent element. Other content flows around it to the right. | 4.0 | 4.0
right | Causes the element to float at the right side of its parent element. Other content flows around it to the left. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

<p>Whether you're an experienced Web professional or just starting with your
<span style="float:left;
             width=100px;
             margin-right:3px;
             font-size:larger;
             color:red;
             text-align:right;">
The visual Web authoring tool that works for you</span>
first home page, Namo WebEditor 6 provides the complete set of tools you need
to design, build, manage and publish leading edge Web sites in less time and
with great results.</p>
The float property can be applied to any element. Here, the property is used with a span element to float part of a paragraph on the left side. The rest of the paragraph flows around the float.

Whether you're an experienced Web professional or just starting with your The visual Web authoring tool that works for you first home page, Namo WebEditor 6 provides the complete set of tools you need to design, build, manage and publish leading edge Web sites in less time and with great results.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • A floated element must have an explicit width, either assigned with the width property or an intrinsic width, such as images have.


position

Determines how an element is positioned on the canvas.
Initial Value | static
Inherited | no
Applies to | all elements except generated content

Possible Values

Value | Notes | IE | NN
static | The element is positioned normally (according to the normal flow). The left and top properties do not apply. | 4.0 | 4.0
relative | The element's position is calculated according to the normal flow and then offset relative to its normal position (using the left and/or top properties). This offset does not affect the position of other elements. | 4.0 | 4.0
absolute | The element's position is specified in terms of an absolute offset with respect to its containing block (usually the page). Absolutely positioned elements are taken out of the normal flow -- they don't affect the layout of other elements. | 4.0 | 4.0
fixed | The element has an absolute position that is fixed with respect to the media (the browser window) rather than its containing block. Fixed elements stay put when the document is scrolled. | - | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

.a { position: relative; left: 30; top: -20 }
.b { position: absolute; left: 300; top: 300 }
.c { position: fixed; left: 300; top: 300 }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


visibility

Controls the visibility of an element. Invisible elements still take up space. Use the display property to suppress elements so that they take up no space.
Initial Value | inherited from parent
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
visible | The element is visible. | 4.0 | 6.0
hidden | The element is invisible, but still affects layout. | 4.0 | 6.0
collapse | When used on a table row, row group, column, or column group, this value causes the row(s) or column(s) to be removed from display (the table "collapses"). The layout of the table is not otherwise affected. When used on elements other than rows or columns, this value has the same meaning as "hidden". | - | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

.hidden { visibility: hidden }

 tr.a   { visibility: visible }
 tr.b   { visibility: collapse }
col.a   { visibility: visible }
col.b   { visibility: collapse }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


height

Specifies the height of the content area of an element (excludes borders, margins, and padding).
Initial Value | auto
Inherited | no
Applies to | all elements except non-replaced inline elements, table columns, and column groups

Possible Values

Value | Notes | IE | NN
length | An exact absolute or relative distance. | 4.0 | 6.0
percentage | A percentage of the height of the containing block. | 4.0 | 6.0
auto | The height is determined by the browser. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

tr.head { height: 50px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • If an element's specified height is too small to fit its contents, the contents will overflow the content box unless the overflow property is set to "hidden" or "scroll".
  • Internet Explorer 4.0-6.0 ignore this property if it is set too small to fit the element's contents.


line-height

Specifies the height of lines of text (the amount of space between successive baselines). Negative values are not allowed.
Initial Value | normal
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
normal | Sets the line height to the browser default for the element's font size. | 3.0 | 4.0
number | Sets the line height to the specified multiple of the element's font size. | 4.0 | 4.0
length | Sets the line height to the exact length given. | 3.0 | 4.0
percentage | Sets the line height to a percentage of the element's font size. | 3.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
p {   font-size: 20px;
    line-height: 2.5; }
This rule sets the line height to 50px (font size 20px * 2.5).

Example 2
p {   font-size: 20px;
    line-height: 150%; }
This rule sets the line height to 30px (font size 20px * 150%).

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0


max-height

Sets the maximum allowed height of the content area of an element (excludes borders, margins, and padding).
Initial Value | none
Inherited | no
Applies to | all elements except non-replaced inline elements and table elements

Possible Values

Value | Notes | IE | NN
length | An exact absolute or relative distance. | - | 7.0
percentage | A percentage of the height of the containing block. | - | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

img.preview { max-width:  200px;
              max-height: 200px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 7.0

Notes

  • If an element's specified max-height is too small to fit its contents, the contents will overflow the content box unless the overflow property is set to "hidden" or "scroll".


max-width

Sets the maximum allowed width of the content area of an element (excludes borders, margins, and padding).
Initial Value | none
Inherited | no
Applies to | all elements except non-replaced inline elements and table elements

Possible Values

Value | Notes | IE | NN
length | An exact absolute or relative distance. | - | 7.0
percentage | A percentage of the width of the containing block. | - | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

img.preview { max-width:  200px;
              max-height: 200px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 7.0

Notes

  • If an element's specified max-width is too small to fit its contents, the contents will overflow the content box unless the overflow property is set to "hidden" or "scroll".


min-height

Sets the minimum allowed height of the content area of an element (excludes borders, margins, and padding).
Initial Value | 0
Inherited | no
Applies to | all elements except non-replaced inline elements and table elements

Possible Values

Value | Notes | IE | NN
length | An exact absolute or relative distance. | - | 7.0
percentage | A percentage of the height of the containing block. | - | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

img.preview { min-width:  100px;
              min-height: 100px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 7.0


min-width

Sets the minimum allowed width of the content area of an element (excludes borders, margins, and padding).
Initial Value | browser-dependent
Inherited | no
Applies to | all elements except non-replaced inline elements and table elements

Possible Values

Value | Notes | IE | NN
length | An exact absolute or relative distance. | - | 7.0
percentage | A percentage of the width of the containing block. | - | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

img.preview { min-width:  100px;
              min-height: 100px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 7.0


width

Specifies the width of the content area of an element (excludes borders, margins, and padding).
Initial Value | auto
Inherited | no
Applies to | all elements except non-replaced inline elements, table rows, and row groups

Possible Values

Value | Notes | IE | NN
length | An exact absolute or relative distance. | 4.0 | 4.0
percentage | A percentage of the width of the containing block. | 4.0 | 4.0
auto | The width is determined by the browser. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

col.name { width: 100px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • If an element's specified width is too small to fit its contents, the contents will overflow the content box unless the overflow property is set to "hidden" or "scroll".
  • Internet Explorer 4.0-6.0 ignore this property if it is set too small to fit the element's contents.


font

A shorthand property for setting some or all of the font properties (except for font-stretch and font-size-adjust), plus the line-height property, in one declaration. The font property also includes some values to allow the selection of system fonts that are not addressed by the font-family property.
Initial Value | not defined
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
font-style font-variant font-weight | If one or more of these values are specified, they must come before any others. Values are specified according to the rules for each individual property. A value not specified will take its initial value. | 4.0 | 4.0
font-size line-height | A font-size may be specified by itself, or it may be specified along with a line-height by using a slash ("/") between the two values. If specified, these values must appear just before any font-family values. | 4.0 | 4.0
font-family | Font-family values may be specified according to the rules of the font-family property. If specified, these values must appear after any other values. | 4.0 | 4.0
caption | Sets the font to the system font used for captioned controls, such as buttons. Cannot be combined with any other value. | 4.0 | 7.0
icon | Sets the font to the system font used for icon labels. Cannot be combined with any other value. | 4.0 | 7.0
menu | Sets the font to the system font used for drop-down menus. Cannot be combined with any other value. | 4.0 | 7.0
message-box | Sets the font to the system font used in dialog boxes. Cannot be combined with any other value. | 6.0 | 7.0
small-caption | Sets the font to the system font used for small captioned controls. Cannot be combined with any other value. | 6.0 | 7.0
status-bar | Sets the font to the system font used for status bars. Cannot be combined with any other value. | 6.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
h1 { font: italic small-caps bold 24pt/150% Verdana sans-serif }
This rule sets the font style, variant, weight, size, line height, and family all at once. "24pt/150%" means 24-point text at a line height of 150%.

Example 2
.note { font: 12px "Times New Roman" }
This rule sets just the font size and family.

Example 3
.menu { font: menu }
This rule sets the font to the system font used for drop-down menus.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Internet Explorer 6.0 and older ignores any font-family value in a font declaration unless a font-size value is also given.
  • Netscape 7.0 and older ignores all values given in a font declaration unless font-size and font-family values are both included.
  • Netscape 6.0 and older does not support a font-variant value given in a font declaration.


font-family

Specifies the font family (e.g., Times New Roman) or generic font family (e.g., serif) to use for an element. Multiple values can be specified as a comma-separated list; the browser will use the first available font family.
Initial Value | determined by browser
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
font-family | A specific font-family name, such as "Helvetica". The name must be enclosed in quotes if it contains spaces. | 3.0 | 4.0
generic-family | One of the following generic family names: "serif", "sans-serif", "cursive", "fantasy", and "monospace". | 3.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

p { font-family: Century, "Times New Roman", serif }
You should always specify a generic family last as a fail-safe in case none of the specific font families is available.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0


font-size

Specifies the font size for text in absolute or relative terms.
Initial Value | medium
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
xx-small x-small small medium large x-large xx-large | A range of absolute sizes from smallest (xx-small) to largest (xx-large). The exact sizes corresponding to the keywords depend on the browser, operating system, and/or user settings. | 3.0 | 4.0
smaller larger | Increases or decreases the font size relative to that of the parent element. | 4.0 | 4.0
length | Specifies an exact font size in one of the standard CSS length units, such as pt (points) or px (pixels). | 3.0 | 4.0
percentage | Sets the font size to a percentage of the parent element's font size. | 3.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

    h1 { font-size: x-large }
     p { font-size: 12pt }
    li { font-size: 90% }
strong { font-size: larger }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0

Notes

  • The default font size in Internet Explorer 4.0 and above and Netscape 4.x and 6.x is "small", not "medium" as it should be according to the CSS specification.
  • Internet Explorer 3.x incorrectly treats percentage values as relative to its default font size for the selector, rather than relative to the parent element's font size.
  • Internet Explorer 3.x incorrectly treats em and ex units as pixels, which can easily make text using these units unreadable.


font-size-adjust

Allows authors to specify an aspect value for text. If specified, substitute fonts will be rendered to match the x-height (the height of a lowercase "x") of the first-choice font, rather than simply matching the font size.

The effective size of substitute fonts is calculated using the formula c = y(a/a'), where c is the effective size of the substitute font, y is the font-size of the first-choice font, a is the specified aspect ratio, and a' is the aspect ratio of the substitute font.

For example, if the first-choice font is 10pt Verdana, which has an aspect ratio of 0.58, and the substitute font is Times New Roman, which has an aspect ratio of 0.46, and you specify a font-size-adjust value of 0.58, then the text using the substitute font will be rendered at a font size of 10pt * 0.58/0.46 = 12.6pt (or the closest integral size, if the browser does not support fractional point sizes).

Initial Value | none
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
none | Substitute font sizes will not be adjusted. | - | 7.0
aspect-value | The aspect value of the first-choice font. | - | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

body
{
  font-family: Verdana, Arial, sans-serif;
  font-size-adjust: 0.58
}
This rule specifies that if Verdana is not available, then Arial or the system-specified sans-serif font will be rendered to match the x-height of Verdana using Verdana's aspect value of 0.58.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 7.0


font-stretch

Specifies that text be rendered with a compressed, extended, or normal font face.
Initial Value | normal
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
normal | Selects a normal (not compressed or extended) font face. | - | -
ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded | Sets the degee of condensation or expansion to a smaller or larger absolute value. | - | -
narrower wider | Adjusts condensation or expansion by one step relative to that of the parent element. | - | -

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

h3
{
  font-family: Arial;
  font-stretch: semi-condensed
}

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | (not supported)


font-style

Specifies the font style for an element as normal, italic, or oblique.
Initial Value | normal
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
normal italic |  | 3.0 | 4.0
oblique |  | 4.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

     h1 { font-style: italic }
address { font-style: normal }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0


font-variant

Specifies whether text is displayed normally or in small-caps. Later versions of CSS may support additional variants such as condensed, expanded, small-caps numerals or other custom variants.
Initial Value | normal
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
normal small-caps |  | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

acronym { font-variant: small-caps }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0


font-weight

Specifies the font weight for text.
Initial Value | normal
Inherited | yes
Applies to | all elements

Possible Values

Value Notes IE NN
normal
bold
 3.0 4.0
bolder
lighter
 These values are relative to the inherited font weight. 4.0 4.0
100
200
300
400
500
600
700
800
900

Sets the font weight on a scale from 100 (lightest) to 900 (darkest). 400 is equivalent to "normal"; 700 is equivalent to "bold".

Note: Since not all fonts have nine possible display weights, some of the weights may be grouped together in assignment. If the specified weight is not available, an alternate is chosen on the following basis:

  • 500 may be switched with 400, and vice versa
  • 100-300 may be assigned to the next lighter weight, if any, or the next darker weight otherwise
  • 600-900 may be assigned to the next darker weight, if any, or the next lighter weight otherwise
4.0 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

     h1 { font-weight: 800 }
p.intro { font-weight: bold }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0


content

This property is used with the :before and :after pseudo-elements to generate content in a document.

Initial Value: | empty
Inherited: | no
Applies to: | :before and :after pseudo-elements

Possible Values

Value | Notes | IE | NN
string | A text string enclosed in quotes. | - | 7.0
URL | The URL of an external resource. The resource is ignored if the browser does not support its type. | - | 7.0
counter | A counter. Counters may be specified by "counter(name)" or "counter(name, style), where name is the name of the counter and style is one of the list styles. The default style is "decimal". | - | -
open-quote close-quote | These values are replaced by the appropriate string defined in the quotes property (" by default). | - | 7.0
no-open-quote no-close-quote | Inserts nothing, but increments (decrements) the level of nesting for quotes. | - | 7.0
attr(attribute_name) | Returns as a string the value of the specified HTML attribute. If the element has no such attribute, an empty string is returned. | - | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
p.note:before { content: "Note: " }
This rule inserts the string "Note: " before every paragraph of class "note".

Example 2
h1:before { content: url(star_1.gif) }
h1:after  { content: url(star_2.gif) }
These rules insert images before and after every h1 element.

Example 3
p.numbered:before
  { counter-increment: para ;
    content: counter(para, upper-roman) ". " }
This rule inserts a counter in uppercase Roman numerals, followed by ". ", before every paragraph of class "numbered".

Example 4
.q:before { content: open-quote }
.q:after  { content: close-quote }
These rules insert opening and closing quotes before and after every element of class "q".

Example 5
.show-id:before
  { content: "ID: " attr(id) }
This rule inserts the string "ID: " followed by the value of the element's id attribute before every element of class "show-id".

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 7.0

Notes

  • Netscape 7.0 does not correctly handle quote nesting, and its support for "no-open-quote" and "no-close-quote" is buggy.


counter-increment

Increments or decrements the specified counter(s) on each occurrence of an element.
Initial Value | none
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
identifier integer | The counter-reset property accepts one or more names of counters, each optionally followed by an integer. The integer indicates the quantity by which the counter is incremented on each occurrence of the element. The default increment is 1. Zero and negative integers are allowed. | - | -
none | The counter is not incremented or decremented. | - | -

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
h1:before
{
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;
    counter-reset: section;
}
h2:before
{
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}
This example illustrates the use of counters to automatically number chapters and sections in a book. The second declaration in the "h1:before" rule increments the "chapter" counter at the beginning of each new chapter (marked by an h1 heading), while the second declaration in the "h2:before" rule increments the "section" heading at the beginning of each new section.

Example 2
div { counter-increment: a b 2 }
This rule causes the counter "a" to be incremented by 1 and the counter "b" to be incremented by 2 on each occurrence of a div element.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | (not supported)


counter-reset

Sets or resets the specified counter(s) on each occurrence of an element.
Initial Value | none
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
identifier integer | The counter-reset property accepts one or more names of counters, each optionally followed by an integer. The integer indicates the value to which the counter should be set on each occurrence of the element. The default is 0. | - | -
none | The counter is not set or reset. | - | -

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
h1:before
{
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;
    counter-reset: section;
}
h2:before
{
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}
This example illustrates the use of counters to automatically number chapters and sections in a book. The third declaration in the "h1:before" rule resets the "section" counter at the beginning of each new chapter (marked by an h1 heading).

Example 2
div { counter-reset: a b 2 }
This rule causes the counter "a" to be reset to 0 and the counter "b" to be set to 2 on each occurrence of a div element.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | (not supported)


quotes

Specifies the quotation marks to use with the "open-quote" and "close-quote" values of the content property.
Initial Value | browser-dependent
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
none | Causes the "open-quote" and "close-quote" values of the content property to produce no quotation marks. | - | 7.0
string string | A space-separated list of pairs of strings. In each pair, the first string is the open-quote mark and the second is the close-quote mark. The first pair defines the quotation marks for the outermost level of quotation; the second pair, the first level of nesting, and so forth. | - | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

q        { quotes: "«" "»" "<" ">" }
q:before { content: open-quote }
q:after  { content: close-quote }
These rules, combined with the HTML fragment:
<q>He said, <q>be careful,</q> oddly enough.</q>
should produce the output below:
«He said, <Be careful,> oddly enough.»

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 7.0

Notes

  • Netscape 7.0 does not correctly handle quote nesting.


list-style

A shorthand property for setting the properties list-style-type, list-style-image, and list-style-position in one declaration.
Initial Value | not defined
Inherited | yes
Applies to | elements with the display property set to "list-item"

Possible Values

Value | Notes | IE | NN
list-style-type list-style-image list-style-position | Values for any or all of the individual properties may be specified. | 4.0 | 6.0
none | Sets both list-style-type and list-style-image to "none". | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

ul.a { list-style: outside url(box.gif) square }
ul.b { list-style: inside circle }
ol.c { list-style: upper-roman }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0


list-style-image

Specifies an image to use as the list item marker. If the image cannot be displayed, the marker specified in list-style-type is used instead.
Initial Value | none
Inherited | yes
Applies to | elements with the display property set to "list-item"

Possible Values

Value | Notes | IE | NN
URL | The URL of an image file. | 4.0 | 6.0
none | No image. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

ol
  { list-style-image: url(star.gif);
    list-style-type: square }
The list-style-type property is used if the specified image cannot be found or image display is turned off.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0


list-style-position

Specifies the position of the list item marker with regard to the list item.
Initial Value | outside
Inherited | yes
Applies to | elements with the display property set to "list-item"

Possible Values

Value | Notes | IE | NN
outside | The marker is placed outside the list item. | 4.0 | 6.0
inside | The marker is placed within the list item, displacing the beginning of the list item. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

ol.in  { list-style-position: inside }
ol.out { list-style-position: outside }
The examples below illustrate the effect of this property on ordered lists.
outside inside
  1. The first line
    of item one.
  2. The first line
    of item two.
  3. The first line
    of item three.
  1. The first line
    of item one.
  2. The first line
    of item two.
  3. The first line
    of item three.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0


list-style-type

Specifies the appearance of the list item marker if list-style-image is set to "none" or the image cannot be displayed.
Initial Value | disc
Inherited | yes
Applies to | elements with the display property set to "list-item"

Possible Values

Value | Notes | IE | NN
disc | A solid circle | 4.0 | 4.0
circle | An empty circle | 4.0 | 4.0
square | A square | 4.0 | 4.0
decimal | Decimal numbers (1, 2, 3, etc.) | 4.0 | 4.0
decimal-leading-zero | Decimal numbers with leading zeros (01, 02, ..., 98, 99) | - | 7.0
lower-roman | Lowercase roman numerals (i, ii, iii, etc.) | 4.0 | 4.0
upper-roman | Uppercase roman numerals (I, II, III, etc.) | 4.0 | 4.0
lower-alpha | Lowercase ASCII letters (a, b, c, etc.) | 4.0 | 4.0
upper-alpha | Uppercase ASCII letters (A, B, C, etc.) | 4.0 | 4.0
lower-greek | Lowercase greek letters (alpha, beta, gamma, etc.) | - | 7.0
lower-latin | Lowercase latin letters (a, b, c, etc.) | - | 7.0
upper-latin | Uppercase latin letters (A, B, C, etc.) | - | 7.0
hebrew | Traditional Hebrew numbering | - | 7.0
armenian | Traditional Armenian numbering | - | 7.0
georgian | Traditional Georgian numbering | - | 7.0
cjk-ideographic | Plain ideographic numbers | - | 7.0
hiragana | Hiragana numbers | - | 7.0
katakana | Katakana numbers | - | 7.0
hiragana-iroha | Hiragana-iroha numbers | - | 7.0
katakana-iroha | Katakana-iroha numbers | - | 7.0
none | No list marker | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
ol { list-style-type: upper-roman }
ul { list-style-type: square }

Example 2
p.list
  { display: list-item;
    list-style-type: hiragana }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • The alignment of the list marker depends on the browser.


marker-offset

Specifies the horizontal distance between a marker and the element it marks. The distance is measured between the closest border edges of the marker and the element.
Initial Value | auto
Inherited | no
Applies to | :before and :after pseudo-elements with the display property set to "marker"

Possible Values

Value | Notes | IE | NN
length | An exact relative or absolute length. Negative values are allowed. | - | -
auto | The marker offset is determined by the browser. | - | -

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

li:before
  { display: marker;
    marker-offset: 2em;
    content: url(marker.gif) }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | (not supported)


margin

A shortcut property for setting all four margins of an element in one declaration. (A margin is blank space between an element's border (which may be invisible) and that of an adjacent element.) From one to four values may be specified. If only one value is given, it applies to all sides. If two values are given, the top and bottom margins are set to the first value and the right and left are set to the second. If three values are given, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If four values are given, they apply to the top, right, bottom, and left, respectively.
Initial Value | not defined
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
margin-top | The size of the top margin. | 3.0 | 4.0
margin-right | The size of the right margin. | 3.0 | 4.0
margin-bottom | The size of the bottom margin. | 4.0 | 4.0
margin-left | The size of the left margin. | 3.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
table { margin: 0 20px 2em 1cm  }
This rule sets the margins of tables to top: 0, right: 20px, bottom: 2em, and left: 1cm.

Example 2
p { margin: 3em 18pt 0.5in }
This rule sets the margins of paragraphs to top: 3em, right and left: 18pt, and bottom: 0.5in.

Example 3
div { margin: 10px 5% }
This rule sets the margins of div elements to top and bottom: 10px and right and left: 5%.

Example 4
body { margin: 12px }
This rule sets the document's margins to 12px all around.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Adjoining vertical margins are collapsed to the greater of the margin values. Adjoining horizontal margins are not collapsed.


margin-bottom

Sets the bottom margin of an element.
Initial Value | 0
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
auto | The margin is set by the browser. | 4.0 | 4.0
length | An exact absolute or relative size. Negative values allowed. | 4.0 | 4.0
percentage | A percentage of the parent element's width. Negative values allowed. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

li { margin-bottom: 3pt }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • Adjoining vertical margins are collapsed to the greater of the margin values.


margin-left

Sets the left margin of an element.
Initial Value | 0
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
auto | The margin is set by the browser. | 3.0 | 4.0
length | An exact absolute or relative size. Negative values allowed. | 3.0 | 4.0
percentage | A percentage of the parent element's width. Negative values allowed. | 3.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

 body { margin-left: 0 }
table { margin-left: 30px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0

Notes

  • Adjoining horizontal margins are not collapsed.


margin-right

Sets the right margin of an element.
Initial Value | 0
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
auto | The margin is set by the browser. | 3.0 | 4.0
length | An exact absolute or relative size. Negative values allowed. | 3.0 | 4.0
percentage | A percentage of the parent element's width. Negative values allowed. | 3.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table { margin-right: 2cm }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0

Notes

  • Adjoining horizontal margins are not collapsed.


margin-top

Sets the top margin of an element.
Initial Value | 0
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
auto | The margin is set by the browser. | 3.0 | 4.0
length | An exact absolute or relative size. Negative values allowed. | 3.0 | 4.0
percentage | A percentage of the parent element's width. Negative values allowed. | 3.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

   p { margin-top: 1.5em }
body { margin-top: 0 }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0

Notes

  • Adjoining vertical margins are collapsed to the greater of the margin values.


outline

A shorthand property for setting the width, style, and color of an element's outline in one declaration.
Initial Value | not defined
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
outline-width outline-style outline-color | Each value is specified according to the rules for the individual property. Omitted values are set to their initial values. | - | -

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

img.highlight { outline: red 5px double }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | (not supported)


outline-color

Specifies the color of an element's outline. (Outlines are like borders, except they take up no space and thus do not affect layout.)
Initial Value | invert
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
color | A color keyword or RGB value. | - | -
invert | Inverts the color of the pixels occupied by the outline. | - | -

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

img.highlight
  { outline-style: double;
    outline-width: 5px;
    outline-color: red }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | (not supported)


outline-style

Specifies the style of an element's outline. (Outlines are like borders, except they take up no space and thus do not affect layout.)
Initial Value | none
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
none | No outline (same as a zero-width outline). | - | -
dotted | The outline is a series of dots. | - | -
dashed | The outline is a series of short line segments. | - | -
solid | The outline is a single solid line. | - | -
double | The outline is two solid lines. | - | -
groove | The outline looks as though it were chiseled into the canvas. | - | -
ridge | The opposite of "groove": the outline looks as though it were raised above the canvas. | - | -
inset | The outline makes the entire element look as though it were sunk into the canvas. | - | -
outset | The opposite of "inset": the outline makes the entire element look as though it were raised above the canvas. | - | -

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

img.highlight
  { outline-style: double;
    outline-width: 5px;
    outline-color: red }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | (not supported)


outline-width

Specifies the width of an element's outline. (Outlines are like borders, except they take up no space and thus do not affect layout.)
Initial Value | medium
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
thin medium thick | The exact widths corresponding to these keywords are browser-dependent. | - | -
length | An exact relative or absolute length. | - | -

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

img.highlight
  { outline-style: double;
    outline-width: 5px;
    outline-color: red }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | (not supported)


padding

A shortcut property for setting all four padding values of an element in one declaration. (Padding is blank space between an element's content and its border (which may be invisible).) From one to four values may be specified. If only one value is given, it applies to all sides. If two values are given, the top and bottom padding are set to the first value and the right and left are set to the second. If three values are given, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If four values are given, they apply to the top, right, bottom, and left, respectively.
Initial Value | 0
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
padding-top | The amount of padding on the top. | 4.0 | 4.0
padding-right | The amount of padding on the right. | 4.0 | 4.0
padding-bottom | The amount of padding on the bottom. | 4.0 | 4.0
padding-left | The amount of padding on the left. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
td { padding: 0 20px 2em 1cm  }
This rule sets the padding of table cells to top: 0, right: 20px, bottom: 2em, and left: 1cm.

Example 2
td { padding: 3em 18pt 0.5in }
This rule sets the padding of table cells to top: 3em, right and left: 18pt, and bottom: 0.5in.

Example 3
td { padding: 10px 5% }
This rule sets the padding of table cells to top and bottom: 10px and right and left: 5%.

Example 4
td { padding: 12px }
This rule sets the padding of table cells to 12px all around.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


padding-bottom

Controls the amount of padding (the space between an element's content and its border) at the bottom of an element. Negative values are not allowed.
Initial Value | 0
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
length | An exact absolute or relative size. | 4.0 | 4.0
percentage | A percentage of the parent element's width. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

td { padding-bottom: 3pt }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


padding-left

Controls the amount of padding (the space between an element's content and its border) at the left side of an element. Negative values are not allowed.
Initial Value | 0
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
length | An exact absolute or relative size. | 4.0 | 4.0
percentage | A percentage of the parent element's width. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

td { padding-left: 1cm }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


padding-right

Controls the amount of padding (the space between an element's content and its border) at the right side of an element. Negative values are not allowed.
Initial Value | 0
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
length | An exact absolute or relative size. | 4.0 | 4.0
percentage | A percentage of the parent element's width. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

td { padding-right: 10% }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


padding-top

Controls the amount of padding (the space between an element's content and its border) at the top of an element. Negative values are not allowed.
Initial Value | 0
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
length | An exact absolute or relative size. | 4.0 | 4.0
percentage | A percentage of the parent element's width. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

td { padding-top: 3px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


bottom

With absolute positioning, this property specifies the distance between an element's bottom content edge and the bottom edge of the element's containing block (usually the page). With relative positioning, it specifies the offset of an element's bottom content edge from where it would be if the element were positioned statically.

Initial Value | auto
Inherited | no
Applies to | elements whose position property has a value other than "static"

Possible Values

Value | Notes | IE | NN
auto | The value is determined by the browser. | 5.0 | 6.0
length | An exact absolute or relative length. | 5.0 | 6.0
percentage | A percentage of the containing block's height. | 5.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
.foo {
  position:absolute;
  bottom:10px; right:30%;
  }
This rule should place "foo" elements 10 pixels above the bottom of the page and inset from the right edge of the page by 30% of the page's width.

Example 2
.foo {
  position:relative;
  bottom:-20px;
  }
This rule should place "foo" elements so that their bottom edges are 20 pixels below where they would normally be.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 5.0
Netscape | 6.0

Notes

  • When an element has an absolute position specified with the bottom property, some browsers calculate the element's position with respect to the bottom of the browser window rather than the bottom of the page.


clip

Defines what portion of an element's rendered content is visible. The clip property only works with elements whose overflow property has a value other than "visible".
Initial Value | auto
Inherited | no
Applies to | block-level and replaced elements

Possible Values

Value | Notes | IE | NN
rect(offsets) | The clipping region is specified through four lengths representing offsets from the top left corner of the element to the top, right, bottom, and left sides, respectively. | 4.0 | 4.0
auto | The clipping region is the same size as the element itself. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

div {
  position: absolute;
  top: 0px; left: 0px;
  overflow: hidden;
  background: lightgrey;
  border: thin solid red
  }
div#a {
  clip: auto;
  }
div#b {
  clip: rect(0px, 120px, 90px, 0px);
  }
div#c {
  clip: rect(20px, 120px, 90px, 30px);
  }
These rules set up three div elements with different values of clip but otherwise identical properties. The rendering results are shown below.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • According to the W3C specification, a clipping region is specified through four lengths representing offsets from the top, right, bottom, and left sides of the element, respectively. However, Internet Explorer and Netscape treat the four lengths as described above.
  • Netscape and Internet Explorer ignore the clip property unless the element to which it applies has its position property set to "absolute".


left

With absolute positioning, this property specifies the distance between an element's left content edge and the left edge of the element's containing block (usually the page). With relative positioning, it specifies the offset of an element's left content edge from where it would be if the element were positioned statically.
Initial Value | auto
Inherited | no
Applies to | elements whose position property has a value other than "static"

Possible Values

Value | Notes | IE | NN
auto | The value is determined by the browser. | 4.0 | 4.0
length | An exact absolute or relative length. | 4.0 | 4.0
percentage | A percentage of the containing block's width. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
.foo {
  position:absolute;
  top:10px; left:30%;
  }
This rule should place "foo" elements 10 pixels down from the top of the page and inset from the left edge of the page by 30% of the page's width.

Example 2
.foo {
  position:relative;
  left:5em;
  }
This rule should place "foo" elements so that their left edges are 5 ems to the right of where they would normally be.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


overflow

Determines what happens when the content of a block-level element cannot fit in the specified dimensions.
Initial Value | visible
Inherited | no
Applies to | block-level and replaced elements

Possible Values

Value | Notes | IE | NN
visible | Content is allowed to overflow the element's box (it may be rendered outside the box). | 4.0 | 6.0
hidden | Content is clipped at the element's borders; the clipped content is inaccessible. | 4.0 | 6.0
scroll | Content is clipped at the element's borders, and scrollbars are added so that the clipped content may be viewed. | 4.0 | 6.0
auto | The "auto" behavior is browser-dependent, but browsers should display scroll bars if content is clipped. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

div { width: 80px; height: 80px }

div.noclip { overflow: visible }
div.clip   { overflow: hidden }
div.scroll { overflow: scroll }
The rendering results of different overflow values are shown below.
visible | hidden | scroll

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0

Notes

  • Even if overflow is set to "visible", content may be clipped by a browser's window edges.


right

With absolute positioning, this property specifies the distance between an element's right content edge and the right edge of the element's containing block (usually the page). With relative positioning, it specifies the offset of an element's right content edge from where it would be if the element were positioned statically.
Initial Value | auto
Inherited | no
Applies to | elements whose position property has a value other than "static"

Possible Values

Value | Notes | IE | NN
auto | The value is determined by the browser. | 5.0 | 7.0
length | An exact absolute or relative length. | 5.0 | 7.0
percentage | A percentage of the containing block's width. | 5.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
.foo {
  position:absolute;
  bottom:10px; right:30%;
  }
This rule should place "foo" elements 10 pixels above the bottom of the page and inset from the right edge of the page by 30% of the page's width.

Example 2
.foo {
  position:relative;
  right:5em;
  }
This rule should place "foo" elements so that their right edges are 5 ems to the left of where they would normally be.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 5.0
Netscape | 7.0


top

With absolute positioning, this property specifies the distance between an element's top content edge and the top edge of the element's containing block (usually the page). With relative positioning, it specifies the offset of an element's top content edge from where it would be if the element were positioned statically.
Initial Value | auto
Inherited | no
Applies to | elements whose position property has a value other than "static"

Possible Values

Value | Notes | IE | NN
auto | The value is determined by the browser. | 4.0 | 4.0
length | An exact absolute or relative length. | 4.0 | 4.0
percentage | A percentage of the containing block's height. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
.foo {
  position:absolute;
  top:10px; left:30%;
  }
This rule should place "foo" elements 10 pixels down from the top of the page and inset from the left edge of the page by 30% of the page's width.

Example 2
.foo {
  position:relative;
  top:2em;
  }
This rule should place "foo" elements so that their top edges are 2 ems below where they would normally be.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


z-index

Sets the stacking level of a positioned element. Elements with a higher z-index are stacked on top of those with a lower z-index.
Initial Value | auto
Inherited | no
Applies to | elements whose position property is not "static"

Possible Values

Value | Notes | IE | NN
integer | An integer representing the stacking level of the element. Negative values allowed. | 4.0 | 4.0
auto | The stacking level of the element is the same as that of its parent. | 4.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

div   { display: inline;
        position: relative;
        width: 80px; height: 80px;
      }

div#a { top: 0; left: 20;
        background: yellow;
        z-index: auto
      }
div#b { top: 20; left: -80;
        background: aqua;
        z-index: -1
      }
div#c { top: 40; left: -120;
        background: lightgrey;
        z-index: 1
      }
The rules above give different z-index values to three div elements, rendered below.
a
b
c

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


vertical-align

Sets the vertical alignment of an inline element relative to its parent element or to the element's line.
Initial Value | baseline
Inherited | no
Applies to | inline elements

Possible Values

Value | Notes | IE | NN
baseline | Aligns the baseline of the element with the baseline of its parent. | 4.0 | 4.0
sub | Places the element at the appropriate position for a subscript. | 4.0 | 7.0
super | Places the element at the appropriate position for a superscript. | 4.0 | 7.0
top | Aligns the top of the element with the tallest element on the same line. | 4.0 | 4.0
middle | Aligns the vertical midpoint of the element with the baseline of its parent plus half the x-height of the parent. | 4.0 | 4.0
bottom | Aligns the bottom of the element with the lowest element on the same line. | 4.0 | 4.0
text-top | Aligns the top of the element with the top of its parent's text. | 4.0 | 4.0
text-bottom | Aligns the bottom of the element with the bottom of its parent's text. | 4.0 | 4.0
length | Raises or lowers the element by the specified distance (negative values permitted). | 6.0 | 7.0
percentage | Raises or lowers the element by the specified percentage of its line-height value (negative values permitted). | 6.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

.a { vertical-align: top }
.b { vertical-align: 50% }
.c { vertical-align: -10px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0

Notes

  • In Netscape 4.x, this property only works with images.


border-collapse

Specifies whether all the cells in a table have separate or collapsing borders.
Initial Value | collapse
Inherited | yes
Applies to | tables

Possible Values

Value | Notes | IE | NN
separate | Cells have separate borders. If cell A is on top of cell B, cell A's bottom border is distinct from cell B's top border. | 5.0 | 7.0
collapse | Adjacent borders of neighboring cells collapse into a single border. If cell A is on top of cell B, cell A's bottom border and cell B's top border collapse into one border. If the borders have different properties, the border that is the more "eye-catching" is the one that is shown (unless the style of one of the borders is "hidden", which always wins). | 5.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table.co { border-collapse:collapse }
table.se { border-collapse:separate }
The tables below illustrate the effect of the border-collapse property.
separate
solid red | yellow groove
double blue | green dotted

collapse
solid red | yellow groove
double blue | green dotted

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 5.0
Netscape | 7.0

Notes

  • Contrary to the W3C specification, Internet Explorer and Netscape use "separate" as the default value for this property.


border-spacing

Specifies the amount of space between cell borders in tables with the border-collapse property set to "separate".
Initial Value | 0
Inherited | yes
Applies to | tables

Possible Values

Value | Notes | IE | NN
length length | One or two lengths may be specified. If one is specified, it sets both the horizontal and the vertical border spacing. If two are specified, the first sets the horizontal spacing and the second, the vertical spacing. | - | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table { border-collapse: separate;
        border-spacing: 5px }
Border spacing only applies to tables with separate cell borders.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 7.0

Notes

  • Contrary to the W3C specification, Netscape 7.0's default border-spacing value is 2 pixels. Internet Explorer 6.0 also uses 2-pixel border spacing (and it does not support changing this value).


caption-side

Specifies the position of a table caption with respect to the table.

Initial Value | top
Inherited | yes
Applies to | table captions

Possible Values

Value | Notes | IE | NN
top bottom | Puts the caption above or below the table. | - | 7.0
left right | Puts the caption to the left or the right of the table. | - | -

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

caption.right {
  caption-side: right;
  margin-left: 2em;
  text-align:left;
  vertical-align:bottom; }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 7.0


empty-cells

Controls the rendering of borders around cells that have no visible content (empty cells and cells whose visibility property is set to "hidden").
Initial Value | show
Inherited | yes
Applies to | table cells

Possible Values

Value | Notes | IE | NN
show | Borders around empty cells will be drawn. | - | 6.2
hide | Borders around empty cells will not be drawn. If all the cells in a row have a value of "hide" and are empty, the entire row behaves as if its display property were set to "none". | - | 6.2

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

tr.foo { empty-cells: show }
This rule specifies that empty cells in "foo" table rows will have borders.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | 6.2

Notes

  • This property has no effect on tables with collapsed borders; in such tables, cell borders are always drawn.
  • If a cells contains spaces or non-breaking spaces (&nbsp;), it is not empty.
  • Contrary to the W3C specification, Netscape 7.0 uses "hide" as this property's default value. Internet Explorer 6.0 always hides borders around empty cells.


table-layout

Determines the method used to layout a table.
Initial Value | auto
Inherited | no
Applies to | tables

Possible Values

Value | Notes | IE | NN
auto | Tables are sized and layed out dynamically, taking into account the contents of cells. For instance, if the table has a specified width that is insufficient to accommodate its cells' contents, the table will be expanded to fit the contents. | 5.0 | 7.0
fixed | Tables are sized without taking cell contents into account. If the contents of a cell cannot fit into the specified or calculated space for that cell, the contents will overflow or be clipped. Also, columns or cells without specified widths are sized the same regardless of their contents. | 5.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

table.auto  { table-layout: auto }
table.fixed { table-layout: fixed }
The tables below, both with specified widths of 200 pixels and no specified cell widths, illustrate the different layout methods.
table-layout: auto
hello supercalifragilisticexpialidocious

table-layout: fixed
hello supercalifragilisticexpialidocious

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 5.0
Netscape | 7.0

Notes

  • When a table's table-layout property is "fixed" and no table, column, or cell widths are specified, Internet Explorer sets the table size to 100% and evenly distributes column widths, while Netscape treats the table as if its table-layout property were "auto".
  • If a table's table-layout property is "fixed" and it contains cells whose contents cannot fit in the allotted spaces, Netscape lets the cell contents overflow while Internet Explorer clips the contents at the cell borders.


color

Sets the foreground (usually text) color of an element.
Initial Value | determined by browser
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
color | The color can be specified using keywords or RGB values. | 3.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

h1 { color: olive }
h2 { color: #808000 }
h3 { color: rgb(128,128,0) }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0

Notes

  • In Netscape 4.x, this property does not work with form fields, dt, dd, hr, or table elements.
  • In Internet Explorer 3.0, this property does not work with form fields.


direction

Sets the directionality of text. This affects reading order (for bidirectional fonts), default text alignment, direction of table column layout, and direction of horizontal overflow.
Initial Value | ltr
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
ltr | Sets the text direction to left-to-right. | 6.0 | 7.0
rtl | Sets the text direction to right-to-left. | 6.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

p.hebrew { direction: rtl }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 6.0
Netscape | 7.0

Notes

  • For the direction property to have any effect on inline-level elements, the unicode-bidi property's value must be set to "embed" or "override".


letter-spacing

Specifies the amount of added or reduced space between characters of text.
Initial Value | normal
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
normal | Sets letter spacing to normal. | 4.0 | 6.0
length | Specifies a positive or negative length to add to or subtract from the default inter-character space. | 6.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

p.tight { letter-spacing: -0.05em }
p.loose { letter-spacing:     2px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 6.0


text-align

Specifies the horizontal alignment of a block-element's text.
Initial Value | depends on browser and text direction
Inherited | yes
Applies to | block-level elements

Possible Values

Value | Notes | IE | NN
left right | Aligns text along the left or right edge, respectively, of the element's content area. | 3.0 | 4.0
center | Centers the text within the element. | 3.0 | 4.0
justify | Justifies the text (distributes words so that the left and right edges of the text are both flush). | 4.0 | 4.0
character | Specifies a text character on which cells in a table column will align. This value applies only to table cells. | - | -

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

p { text-align: justify }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0


text-decoration

Specifies decoration for text.
Initial Value | none
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
none | Sets text decoration to none (normal text). | 3.0 | 4.0
underline | Sets text decoration to underline. | 3.0 | 4.0
overline | Sets text decoration to overline. | 4.0 | 6.0
line-through | Sets text decoration to line-through. | 3.0 | 4.0
blink | Sets text decoration to blinking. | - | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
.title { text-decoration: underline }
Using a rule like this one is preferable to using HTML's u tag, which is deprecated in HTML 4.0.

Example 2
a { text-decoration: none }
This rule causes hyperlinks to not be underlined.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0


text-indent

Specifies the amount of indentation for the first line of text in a block-level element. Negative values are allowed.
Initial Value | 0
Inherited | yes
Applies to | block-level elements

Possible Values

Value | Notes | IE | NN
length | Sets the amount of indentation to a relative or absolute length. | 3.0 | 4.0
percentage | Sets the amount of indentation to a percentage of the element's width. | 3.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

p { text-indent: 5em }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 3.0
Netscape | 4.0


text-shadow

Applies shadow effects to text. Accepts a comma-separated list of effects, which are applied in the order given and may overlay each other. Each effect is specified by two length values specifying the horizontal and vertical offset of the shadow, along with an optional length value giving the shadow's blur radius, and an optional color value.
Initial Value | none
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
x-offset y-offset | Sets the horizontal and vertical offset, respectively, of the shadow from the text. | - | -
blur-radius | Specifies the blur radius of the shadow. | - | -
color | Specifies the color of the shadow. If not given, the shadow takes the same color as the text. | - | -

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

Example 1
.hot { text-shadow: 3px 3px 5px red }
This rule specifies a red shadow offset by 3 pixels below and to the right of the text, with a 5-pixel blur radius.

Example 2
.wow { text-shadow:
        3px 3px red,
        6px -3px 2px yellow,
        3px -3px }
This rule applies three overlaid shadow effects to the text.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | (not supported)
Netscape | (not supported)

Notes

  • Some shadow effects may render text invisible in browsers that support only CSS1.


text-transform

Controls the capitalization of text.
Initial Value | none
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
none | Capitalization is not changed. | 4.0 | 4.0
capitalize | Puts the first character of each word in uppercase. | 4.0 | 4.0
uppercase | Puts every character in uppercase. | 4.0 | 4.0
lowercase | Puts every character in lowercase. | 4.0 | 4.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

h1 { text-transform: uppercase }
h2 { text-transform: capitalize }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 4.0
Netscape | 4.0


unicode-bidi

Allows authors to control and override the Unicode bidirectional algorithm.
Initial Value | normal
Inherited | no
Applies to | all elements

Possible Values

Value | Notes | IE | NN
normal | The element does not open an additional level of embedding with respect to the bidirectional algorithm. For inline-level elements, implicit reordering works across element boundaries. | 5.0 | 7.0
embed | If the element is inline-level, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the direction property. Inside the element, reordering is done implicitly. | 5.0 | 7.0
bidi-override | If the element is inline-level or a block-level element that contains only inline-level elements, this creates an override. This means that inside the element, reordering is strictly in sequence according to the direction property; the implicit part of the bidirectional algorithm is ignored. | 5.0 | 7.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

p.funny {    direction: rtl;
          unicode-bidi: bidi-override }
This rule is applied to the paragraph below:

Mary had a little lamb
whose fleece was white as snow.
And everywhere that Mary went
the lamb was sure to go.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 5.0
Netscape | 7.0


white-space

Determines how spaces within a block-level element are treated.
Initial Value | normal
Inherited | yes
Applies to | block-level elements

Possible Values

Value | Notes | IE | NN
normal | White space is treated normally: multiple spaces are collapsed into one, line breaks are treated as spaces, and long lines are wrapped. | 5.5 | 4.0
pre | White space is preserved exactly as given in the HTML source. | - | 4.0
nowrap | White space is collapsed, but long lines are not wrapped. | 5.5 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

<table border="1">
<colgroup span="3" width="100">
<tr>
<th>normal</th>
<th>pre</th>
<th>nowrap</th>
</tr>
<tr>
<td style="white-space:normal">Behold
the
World
Wide   Web</td>
<td style="white-space:pre">Behold
the
World
Wide   Web</td>
<td style="white-space:nowrap">Behold
the
World
Wide   Web</td>
</tr>
</table>
Each cell in the second row of the table defined by the above source has a specified width of 100 pixels and the same text, but uses a different value for white-space. Note how the "nowrap" value for the last cell causes it to exceed its specified width.

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 5.5
Netscape | 4.0


word-spacing

Specifies the amount of added or reduced space between words.
Initial Value | normal
Inherited | yes
Applies to | all elements

Possible Values

Value | Notes | IE | NN
normal | Sets word spacing to normal. | 6.0 | 6.0
length | Specifies a positive or negative length to add to or subtract from the default inter-word space. | 6.0 | 6.0

IE = Earliest version of Internet Explorer that supports this value
NN = Earliest version of Netscape that supports this value

Examples

p.tight { word-spacing: -0.3em }
p.loose { word-spacing:   10px }

Browser Support

The minimum browser versions supporting this property are:

Internet Explorer | 6.0
Netscape | 6.0