LIS 523/5 - Styles

Styles may be attached to specific HTML elements, such as those treated as layers, or they may be defined in style sheets.

A few elements of layer styles (top, right, bottom, left, z-index, clip, visibility) are accessible in JavaScript.

The following table outlines a number of style properties. Not all work correctly in all recent browsers. There may also be interaction effects, which can mean that a property will not be reflected in the view in a particular browser unless some related property has been set to an appropriate value. For more details, see the notes.

Property Meaning Possible values
top, right, bottom, left box's offset length, percentage, auto, inherit
z-index stack level of box auto, integer, inherit
clip what portion of rendered content is visible rect (top right bottom left), auto, inherit
visibility whether box is rendered visible, hidden, collapse, inherit
margin, margin-top, margin-right, margin-bottom, margin-left widths of box margins number (may be negative)
padding, padding-top, padding-right, padding-bottom, padding-left widths of padding areas number (if negative, treated as zero)
border, border-top, border-right, border-bottom, border-left width, color, and style of border thin, medium, thick, or an explicit value

transparent, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, #rgb, #rrggbb, rgb(r,g,b), rgb(r%, g%, b%)

none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

border-top-width, border-right-width, border-bottom-width, border-left-width, border-width widths of the border areas width value as for border
border-top-color, border-right-color, border-bottom-color, border-left-color, and border-color colors of border areas color value as for border
border-top-style, border-right-style, border-bottom-style, border-left-style, and border-style style of border areas style value as for border
display specifies the type of box inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table- row, table-column-group, table-column, table-cell, table-caption, none, inherit
position determine which positioning algorithm is used to calculate the box's position. static, relative, absolute, fixed, inherit (that is, normal position, offset from normal position, offset from page, offset from display area, or default)
width width of box contents length, percentage, auto, inherit
height height of box contents length, percentage, auto, inherit
line-height height of text lines normal, number, length, percentage, inherit
overflow whether content is clipped when it overflows the box visible, hidden, scroll, auto, inherit
color foreground color color, inherit
background-color background color color, transparent, inherit
font-family prioritized list of family-name, generic- family, or inherit
font-style face within font family normal, italic, oblique, inherit
font-variant font variant for bicameral font normal, small-caps, inherit
font-weight weight of font normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit
font-size font size xx-small, x-small, small, medium, large, x-large, xx- large, larger, smaller, length, percentage, inherit
text-indent indentation of first line of text length, percentage, inherit
text-align how content is aligned left, right, center, justify, inherit
text-decoration decorations to add to text none, underline, overline, line-through, blink, inherit
letter-spacing spacing between text characters normal, length, inherit
text-transform capitalization capitalize, uppercase, lowercase, none, inherit
white-space how spaces and ends of lines are treated normal, pre, nowrap, inherit
vertical-align subscripts and superscripts sub, super
list-style-type how to bullet or number a list disk, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none
list-style-image graphic for bullet(s) in list or list item url(URL)
list-style-position bullet inside or outside the left margin of a list item inside, outside
page-break-before insert one or two page breaks when printing auto, always, left, right
page-break-after insert one or two page breaks when printing auto, always, left, right
cursor type of cursor to be displayed auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, inherit

Notes

If a measurement unit is not specified, measurements are usually in pixels, but not always (for line-height, the measurement is in lines). Measurements may generally be specified in pixels (px) or in ems (em), as well as in percentages.

The clip property does not seem to work correctly in older versions of Opera or in Internet Explorer.

A visibility value of "collapse" produces the same result as "visible" in Internet Explorer, but the same result as "hidden" in other browsers.

The display property is especially useful when a stylesheet is applied to an XML file, where the tags have no default formatting associated with them.

A position value of "fixed" is supposed to specify that the element does not scroll; it has this effect in other browsers, but not in Internet Explorer.

Box offset properties work if position is set to "absolute" or "relative", not "static"; and they work in all browsers for position "fixed" except Internet Explorer.

Firefox and Netscape Navigator ignore explicit values for border widths; all browsers ignore percentage values. Border widths are also ignored if no border style is specified.

If font-family specifies a font of special symbols such as "MapInfo Cartographic", results vary: Firefox and Netscape Navigator generally ignore such fonts; Opera sometimes uses the font specified and sometimes substitutes an entirely different font; only Internet Explorer generally accepts the font as given.

All common browsers treat font-style values of "italic" and "oblique" the same: if the font has italics, as italic; if it does not have italics, as oblique.

The many values of font-weight in practice all boil down to either normal ("normal", "lighter", or any number up to 500) or bold ("bold", "bolder", or any number above 500).

For font-size, Netscape Navigator and Firefox treat "large" and "larger" the same; Opera and Internet Explorer treat "larger" as smaller than "large" but larger than "normal". Opera and Internet Explorer treat "small" as larger than "smaller", while Firefox and Netscape Navigator treat them as equivalent.

If a percentage value is given for text-indent it is always treated as a proportion of the width of the text area, including any margins, but not including the borders.

Internet Explorer ignores a text-decoration value of "blink".

Internet Explorer ignores a white-space value of "pre", but does, like other browsers, correctly process "nowrap".

The list-style properties are observed only in styles applied to lists or list items; specifying them for a containing element, such as body, has no effect.

The "left" and "right" values for page breaks are used to force the next page to be an even or an odd page.

For More Information


Home

Last updated April 20, 2007.
This page maintained by Prof. Tim Craven
E-mail (text/plain only): craven@uwo.ca
Faculty of Information and Media Studies
University of Western Ontario,
London, Ontario
Canada, N6A 5B7