Home

Web Development

Short Contents

Introduction
CSS Basics
Selectors
Terminology
Media Types
Paged Media
Aural Media
Colours
Fonts
Text
Blocks
Lists & counters
Tables
Miscellaneous

Full Contents

Block Display Properties

All of the following are specific to visual media.

margin-top, margin-right, margin-left, margin-bottom

Value	`length` \| `percentage` \| `auto` \| `inherit`
Initial	`0`
Used with	all elements
Inherited	no
Percentages	relative to the width of the parent element
Example	`H1 { margin-top: 2em }`

margin

Value	[ [`length` \| `percentage` \| `auto` ] [`length` \| `percentage` \| `auto` ] [`length` \| `percentage` \| `auto` ] [`length` \| `percentage` \| `auto` ]] \| `inherit`
Used with	all elements
Inherited	no
Percentages	relative to the width of the parent element
Example	`BODY { margin: 2em } BODY { margin: 1em 2em }`

This specifies the size of the top, right, bottom and left margins, in that order. If one value is given, it applies to all sides. If there are two or three, the values of the opposite sides are used for the missing ones.

padding-top, padding-right, padding-bottom, padding-left

Value	`length` \| `percentage` \| `inherit`
Initial	`0`
Used with	all elements
Inherited	no
Percentages	relative to the width of the parent element
Examples	`P { padding-top: 0.3em } P { padding-right: 10px } P { padding-left: 20% }`

padding

Value	[ [`length` \| `percentage` ] [`length` \| `percentage` ] [`length` \| `percentage` ] [`length` \| `percentage` ]] \| `inherit`
Used with	all elements
Inherited	no
Percentages	relative to the width of the parent element

Specifies the size of the top, right, bottom and left paddings, in that order. If one value is given, it applies to all sides. If there are two or three values, the values of the opposite sides are used for the missing ones.

border-top-width, border-right-width, border-bottom-width, border-left-width

Value	`thin` \| `medium` \| `thick` \| `length` \| `inherit`
Initial	`medium`
Used with	all elements
Inherited	no

This property sets the width of an element's border.

border-width

Value	[`thin` \| `medium` \| `thick` \| `length`] [`thin` \| `medium` \| `thick` \| `length`] [`thin` \| `medium` \| `thick` \| `length`] [`thin` \| `medium` \| `thick` \| `length`] \| `inherit`
Used with	all elements
Inherited	no

If one value is given, it applies to all borders. For two values, the first is applied to the top and bottom, the second to the sides. If three values are specified, they apply to the top, sides, bottom respectively. If four values are given, they are assigned to the top, right, bottom and left respectively.

border-color

Value	`color`, `color`, `color`, `color` \| `inherit`
Initial	the element's color
Used with	all elements
Inherited	no

The 'border-color' property sets the color of the four borders. The number of values specified produces the same results as for border-width.

border-top-style, border-right-style, border-bottom-style, border-left-style

| inherit

Value	`none` \| `dotted` \| `dashed` \| `solid` \| `double` \| `groove` \| `ridge` \| `inset` \| `outset`
Initial	`none`
Used with	all elements
Inherited	no

The values for this element are specified, as for border-width. Some values which may not be self-explanatory include solid (solid line), double(double line) and groove, ridge, inset and outset, which produce 3D effects

border-style

Value	[up to 4 border style types] \| `inherit`
Initial	`none`
Used with	all elements
Inherited	no

border-top, border-left, border-bottom, border-right

Value	`border-xxx-width` \|\| `border-style` \|\| `color`
Used with	all elements
Inherited	no

Sets the appearance of the border for the given side.

border

Value	`border-width` \|\| `border-style` \|\| `color`
Used with	all elements
Inherited	no

The 'border' property is a shorthand method for setting the same width, color and style on all four borders of an element.

width

Value	`length` \| `percentage` \| `auto` \| `inherit`
Initial	auto
Used with	block-level and replaced elements
Inherited	no
Percentage values	relative to width of parent element

Sets the width of an element, scaling it if necessary.

min-width

Value	`length` \| `percentage` \| `inherit`
Used with	non-table elements
Inherited	no
Percentage values	relative to width of parent element

Sets the minimum allowed width of an element.

max-width

Value	`length` \| `percentage` \| `none` \| `inherit`
Initial	`none`
Used with	non-table elements
Inherited	no
Percentage values	relative to width of parent element

Sets the maximum allowed width of an element.

height

Value	`length` \| `auto` \| `inherit`
Initial	`auto`
Used with	block-level and replaced elements
Inherited	no

Sets the height of an element.

min-height

Value	`length` \| `inherit`
Initial	`0`
Used with	non-table elements
Inherited	no
Percentage values	relative to height of parent element

Sets the minimum allowed height of an element.

max-height

Value	`length` \| `percentage` \| `none` \| `inherit`
Initial	`none`
Used with	non-table elements
Inherited	no
Percentage values	relative to height of parent element

Sets the maximum allowed height of an element.

float

Value	`none` \| `left` \| `right` \| `inherit`
Initial	`none`
Used with	all elements
Inherited	no
Example	`IMG { float: left;}`

Moves the element towards one side, wrapping text around it.

clear

Value	`none` \| `left` \| `right` \| `both` \| `inherit`
Initial	`none`
Used with	all elements
Inherited	no

This property lists the sides where floating elements are not accepted.

position

Value	`static` \| `relative` \| `absolute` \| `fixed` \| `inherit`
Initial	`static`
Used with	all normal elements
Inherited	no

The values of are one of :

static : This is the normal value. left and top are ignored.
relative : The object is moved from where its normal position would be, and other objects are displayed as if it hadn't been moved.
absolute :The position and size of the object is determined by the left, right, top, and bottom properties, which are specified relative to the object in which the element is contained.
fixed : Same are absolute, but the element is fixed with respect to a reference. For normal screen type display, the element doesn't move when scrolled. With paged media, it is fixed with respect to the page

top, left, bottom, right

Value	`length` \| `percentage` \| `auto` \| `inherit`
Initial	`auto`
Used with	all non-static elements
Inherited	no

z-index

Value	`integer` \| `auto` \| `inherit`
Initial	`auto`
Used with	all non-static elements
Inherited	no

CSS2 supports layering of elements, and this property allows you to specify how high the element is when it is amongst a pile of other elements.

The integer is the level within the current stacking context, unless is is zero in which case it sets up a local context. Higher numbers are further towards the top. If auto is used, the level is the same as the element in which it is contained.

All elements are transparent unless a background is specified.

direction

Value	`ltr` \| `rtl` \| `inherit`
Initial	`ltr`
Used with	all elements
Inherited	yes

This allows you to set the direction in which text is displayed : left-to-right, or right-to-left. It also affects the direction in which table columns are displayed.

To change the text in inline-level elements, the unicode-bidi property's value must be embed or override.

unicode-bidi

Value	`normal` \| `embed` \| `bidi-override` \| `inherit`
Initial	`normal`
Used with	all elements
Inherited	no

embed : For inline elemments, this allows the direction of text to be given by the 'direction' property.
bidi-override :For inline of block elements, this causes an override, with the direction of display set by the direction property.

line-height

Value	`normal` \| `number` \| `length` \| `percentage` \| `inherit`
Initial	`normal`
Percentages	relative to the font size for the element
Used with	all elements
Inherited	yes

vertical-align

Value	`baseline` \| `sub` \| `super` \| `top` \| `text-top` \| `middle` \| `botom` \| `text-bottom` \| `length` \| `percentage` \| `inherit`
Initial	`baseline`
Percentages	relative to the line-height for the element
Used with	inline and table cell elements
Inherited	no

Some of the special values include :

baseline : Align the baseline of the element with that of its parent.
sub, super :effectively creates subscripts and superscripts
text-top, text-bottom :Align the top/bottom of the element with that of its parent.
percentage, length : Positive values raise the element by the given distance.

overflow

Value	`visible` \| `hidden` \| `scroll` \| `auto` \| `inherit`
Initial	`visible`
Used with	block elements
Inherited	no

Occasionally, the content given to an element is too wide for the space allocated to it. This property is used to indicate what should be done in such circumstances : make it visible outside the allocated space, make the parts which extend beyond the allocated boundaries hidden, make it visible by use of scrollbars, or let the viewing program automatically decide (usually causes scrollbars).

clip

Value	`shape` \| `auto` \| `inherit`
Initial	`auto`
Used with	block elements
Inherited	no

This property specifies what part of the element is visible if it is too big for the entire object to fit into the allocated space. It is used than overflow is anything other than visible.

CSS2 only allows one value for shape :

rect (top right bottom left). Each dimension is either auto or a length, and specifies the offset from each side of the box.

visibility

Value	`visible` \| `hidden` \| `collapse` \| `inherit`
Initial	`inherit`
Used with	all elements
Inherited	no

This property defines if an element is actually displayed, even though space is left for it. collapse should only be used on table rows and columns, otherwise it is the same as 'hidden'.

Site Map

(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.