CIW Course Revision Site

CSS Properties and Values

CIW Course in a Nutshell

Cascading Style Sheet Properties and Values

 

background

for changing the background colour and image of elements

initial value depends on individual properties; not inherited; percentages allowed for background-position

any combination of the values
background-attachment,
background-color, background-image,
background-repeat,
and/or background-position, or inherit
background-attachment

for determining if and how background images should scroll

initial value: scroll; not inherited

either scroll, fixed, or inherit

 

background-color

for setting just the background colour of an element

initial value: transparent; not inherited

either a color, transparent, or inherit

 

background-position

for setting the physical position of a specified background image

initial values: 0% 0%, if a single percentage is set, it is used for the horizontal position and the initial value of the vertical is set to 50%, if only one keyword is used, the initial value of the other is center; applies to a block-level and replaced elements: not inherited; percentages refer to the size of the box itself

either one or two percentages or lengths (or one percentage and one length) or one of top, center, or bottom and/or one of left, center, or right. or inherit

 

background-repeat

for determining how and if background images should be tiled

initial value: the element's color property; not inherited

one of repeat, repeat-x, repeat-y, no repeat, or inherit

 

border

for defining all aspects of the border on on or more sides of an element.

initial value depends on individual properties; not inherited.

any combination of the values of border-width, border-style, and/or a color, or inherit
border-color

for setting only the color of the border on one or more sides of an element

initial value: the element's color property; not inherited.

from one to four colours, transparent, or inherit
border-spacing

for specifying the amount of space between borders in a table

initial value: 0; may be applied only to table elements; inherited

either one or two lengths or inherit

 

border-style

for setting only the style of a border on one or more sides of an element

initial value: none; not inherited

one to four of the following values: none, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit
border-top, border-right, border-bottom, border-left

for defining all three border properties at once on only one side of an element

initial value depend on individual values; not inherited

any combination of a single value each for border-width, border-style, and/or a color, or use inherit
border-top-color, border-right-color, border-bottom-color, border-left-color

for defining just the borders colour on only one side of an element

initial value: none; not inherited

 

any color or inherit

 

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

for defining just the border's style  on only one side of an element

initial value: none; not inherited

one of none, dotted, dashed, solid, double, groove, ridge, inset, outset, or inherit
border-top-width, border-right-width, border-bottom-width, border-left-width

for defining just the border's width on only one side of an element

initial value; medium; not inherited

one of thin, medium, thick or a length
border-width

for defining the border's width on one or more sides of an element

initial value: medium; not inherited

one to four of the following values: thin, medium, thick or a length
clear

for keeping elements from floating on one or both sides of an element

initial value: none; may only be applied to block-level elements; not inherited

one of none, left, right, both, or inherit

 

bottom

for setting the distance that an element should be offset from it's parent element's bottom edge

initial value: auto; not inherited; percentages refer to height of containing block

either a percentage, length, auto, or inherit

 

color

for setting the foreground colour, text colour, of an element

initial value: parent's colour, some colours are set by browser; inherited

a color or inherit

 

cursor

for setting the cursor's shape

initial value: auto; inherited

one of auto, crosshair, default, pointer, move, re-size, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, a URL, or inherit
display

for determining how and if an item should be displayed

initial value: inline; not inherited

one of inline, block, list-item, none, inherit
float

for determining on which side of an element other elements are permitted to float

initial value: none; may not be applied to positioned elements or generated content; not inherited

one of left, right, none, inherit

 

font-family

for choosing the font family for text

initial value: depends on browser; inherited

one or more quotation mark enclosed font names followed by an optional generic font name, or use inherit
font-size

for setting the size of text

initial value: medium; the computed value is inherited; percentages refer to parent elements font size

font length is specified in pixels (px) but most browsers will support point sizes (pt)

an absolute size, a relative size, a length, a percentage, or inherit

 

font-style

for making text italic

initial value: normal; inherited

either normal, italic, oblique, or inherit

 

font-variant

for setting text in small caps

initial value: normal; inherited

either normal, small-caps, or inherit
font-weight

for applying, removing, and adjusting bold formatting

initial value: normal; the numeric values are considered keywords and not integers (you can't choose 150, for example); inherited

either normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, or inherit
height

for setting the height of an element

initial value: auto; may be applied to all elements except non-replaced inline elements, table columns, and column groups; not inherited

either a length, percentage, auto, or inherit

 

left

for setting the distance that an element should be offset from it's parent element's left edge

initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to width of containing block

either a length, percentage, auto, or inherit

 

letter-spacing

for setting the amount of space between letters

initial vale: normal; inherited

either normal, a length, or inherit
line-height

for setting the amount of space between lines of text

initial value: normal; inherited; percentages refer to the font size of the element itself

either normal, a number, a length, a percentage, or inherit
list-style

for setting a list's marker (regular or custom) and it's position

initial value: depends on initial values of individual elements; may only be applied to list elements; inherited

any combination of the values for list-style-type, list-style-position and/or list-style-image, or use inherit
list-style-image

for designating a custom marker for a list

initial value: none; may only be applied to list elements; overrides list-style-type; inherited

either a URL, none, or inherit

 

list-style-position

for determining the position of a list's marker

initial value: outside; may only be applied to list elements; inherited

either inside, outside, or inherit

 

list-style-type

for setting a list's marker

initial value: disc; may only be applied to list elements; not used if list-style-image is valid; inherited

either disc, circle, square, descimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none, or inherit
margin

for setting the amount of space between one or more sides of an element's border and it's parent element

initial value: depends on browser and on value of width; not inherited; 

one to four of the following: length, percentage, auto, or inherit

 

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

for setting the amount of space between only one side of an element's border and it's parent element

initial value: 0; not inherited; percentages refer to width of containing block; the values for margin-right and margin-left may be overridden if sum of width, margin-right, and margin-left are larger than the parent element's containing block

either a length, percentage, auto, or inherit

 

 

marks

for printing crop marks and/or cross marks

initial value: none; can only be applied in a @page rule

either crop, cross or both, or use none or inherit
max-height, max-width

for setting the maximum height and/or width of an element respectively

initial value: none; may not be applied to non-replaced inline elements or table elements; not inherited; percentages refer to height/width of containing block

either a length, percentage, none, or inherit

 

min-height, min-width

for setting the minimum height and/or width of an element respectively

initial value: 0; may not be applied to non-replaced inline elements or table elements; not inherited; percentages refer to height/width of containing block

either a length, percentage, or inherit

 

 

orphans

for specifying how many lines of an element may appear alone at the bottom of a page

initial value: 2; may only be applied to block-level elements; inherited

either an integer or inherit

 

overflow

for specifying where extra content should go if it does not fit in the element's content area

initial value: visible; may only be applied to block-level and replaced elements; not inherited

either visible, hidden, scroll, auto, or inherit

 

padding

for specifying the distance between one or more sides of an element's content area and it's border

initial value: depends on browser; not inherited; percentages refer to width of containing block

one to four lengths or percentages, or inherit

 

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

for specifying the distance between one side of an element's content area and it's border

initial value: 0; not inherited; percentages refer to width of containing block

either a length, percentage, or inherit

 

page

for specifying on which kind of page an element should be printed

initial value: auto; may only be applied to block-level elements; inherited; names are defined with @page rule

either a page area's name or auto

 

page-break-after, page-break-before

for specifying when page breaks should or should not occur, when page is printed

initial value: auto; may only be applied to block-level elements; inherited

either always, avoid, auto, right, left, or inherit

 

page-break-inside

for keeping page breaks from dividing an element across pages, when printed

initial value: auto; may only be applied to block-level elements; inherited

either avoid, auto, or inherit

 

position

for determining how an element should be positioned with respect to the document's flow

initial value: static; may not be applied to generated content; not inherited

either static, relative, absolute, fixed, or inherit

 

right

for setting the distance that an element should be offset from its parent element's right edge

initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to width of containing block

either a length, percentage, auto, or inherit

 

size

for determining the size of the printing area in a defined page

initial value: auto; may only be used within an @page rule

either individual lengths for width and height, a single value for both width and height, landscape, portrait, auto, or inherit
table-display

for choosing the algorithm that should be used to determine the widths of cells

initial value: auto; not inherited

one of fixed, auto, or inherit

 

text-align

for aligning text

initial value: depends on browser and writing direction; may only be applied to block-level elements; inherited

one of left, right, center, justify, or inherit

 

text-decoration

for decorating text (mostly with lines)

initial value: none; not inherited

any combination of underline, overline, line-through, and blink, none, or inherit
text-indent

for setting the amount of space the first line of a paragraph should be indented

initial value: 0; may only be applied to block-level elements; percentages refer to width of containing block

either a length, percentage, or inherit

 

text-transform

for setting the capitalisation of an element's text

initial value: none; inherited

either capitalize, uppercase, lowercase, none, or inherit
top

for setting the distance that an element should be offset from its parent element's top edge

initial value: auto; may only be applied to positioned elements; not inherited; percentages refer to height of containing block

either a length, percentage, auto, or inherit

 

vertical-align

for aligning elements vertically

initial value: baseline; may only be applied to inline-level and table cell elements; not inherited; percentage refer to the element's line-height property

either baseline, sub, super, top, text-top, middle, bottom, text-bottom, a percentage, a length, or inherit
visibility

for hiding elements without taking item out of the document's flow

initial value: inherit; which rather makes the fact that it's not inherited a moot point

either visible, hidden, collapse, or inherit

 

white-space

for specifying how white space should be treated

initial value: normal; may only be applied to block-level elements; inherited

either normal, pre, nowrap, or inherit

 

widows

for specifying how many lines of an element may appear alone at the top of a page

initial value: 2; may only be applied to bloc-level elements; inherited

either an integer or inherit

 

width

for setting the width of an element

initial value: auto; may not be applied to non-replaced inline elements, table rows, or row groups; not inherited; percentages refer to width of containing block

either a length, percentage, auto, or inherit

 

word-spacing

for setting the distance between words

initial value: normal; inherited

either normal, a length, or inherit
z-index

for setting the depth of an element with respect to overlapping elements

initial value: auto; may only be applied to positioned elements; not inherited

either auto, an integer, or inherit

 

See the other pages in this section for an explanation of the more commonly used of these properties

Design by Stephen

Certified Internet Webmaster

Page last Edited: 10 Nov 2011