background="uri")
none | no image assigned (to override the inherited property) -- this is the initial value
|
inherit | makes the property inherited from the parent element
|
background-repeat | specifies whether the image is repeated or not
|
repeat | repeat the image both horizontally & vertically -- this is the initial value
|
repeat-x | repeat the image horizontally
|
repeat-y | repeat the image vertically
|
no-repeat | the image is not to be repeated
|
inherit | makes the image inherited from the parent element
|
background-attachment | used with an image background -- specifies whether the image is fixed in the viewport, or attached to the document, and scrolls with it
|
fixed | the image is fixed in the viewport
|
scroll | the image scrolls with the document -- this is the initial value
|
inherit | the property is inherited from the parent element
|
background-position | used with an image background -- specifies the position of the image with respect to the document's padding area1
|
x% y% - Example:
19% 84% | the point at x% across and y% down in the image is placed at the point at x% across and y% down of the document padding area - with 0% 0% the upper left corner of the image is at the upper left corner of the padding area, whereas 100% 100% places the lower right corner of the image at the lower right corner of the padding area -- initial value: 0% 0%
|
x y - Exemple:
3cm 2cm | places the position of the image upper left corner at the coordinates (x, y) with respect to the padding area -- if no measure unit is specified, the coordinates are in pixels -- a measure unit such as cm can be specified
Combination of absolute coordinates is allowed -- for example: 50% 3cm
|
top|center|bottom left|center|right | Example: background-position:center right;
As the first symbol:
| top | designates the 0% position
| | center | designates the 50% position
| | bottom | designates the 100% position
|
As the second symbol:
| left | designates the 0% position
| | center | designates the 50% position
| | right | designates the 100% position
|
If one value is specified, it sets the horizontal position, the vertical position is 50%
|
inherit | the property is inherited from the parent element
|
border | defines the properties of the border1. These properties can be separately defined through the properties:
- border-color
- border-width
- border-style
You can assign to the 'border' property the values suitable for these properties.
|
border-collapse | Defines the border collapse property for table elements. The possible values are:
|
collapse | Example: border-collapse:collapse - adjacent borders are collapse into a single border (this is the initial value)
|
separate | Example: border-collapse:separate - adjacent borders remain separate
|
inherit | Example: border-collapse:inherit - the property is inherited from the parent element
|
border-color | Defines the color property of the border.
The possible values are:
|
color | Example: border-color:red - specifies the color of the border
|
inherit | the property is inherited from the parent element
|
One color can be specified for all the 4 borders, or colors can be individually specified for the different borders as follows:
| - | 4 values can be specified, one for each side - the assignment follows this clock-wise order: top-right-bottom-left.
| | - | with 3 values, they are assigned in the following order to: top-right-bottom, the left side is assigned the same value as the right
| | - | with 2 values, the first value is assigned to the top and bottom sides, the second to the right and left
| | - | with 1 value, all 4 sides are assigned this value
|
The property can also be split into 4 properties to be defined independently:
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
|
border-spacing | property of a table element -- defines the spacing between the table cells; the space is transparent and the table background color shows through
|
length | Example: border-spacing: 1em; - both horizontal and vertical spacing are 1 line height
When 1 value is specified, it defines both horizontal spacing (space to the left and the right of each cell) and vertical spacing (space above and below)
|
length length | Example: border-spacing:1em 0; - horizontal spacing is 1 em (1 line height), vertical spacing is 0
|
border-width | defines the width of the border1 on the 4 sides
|
thin | Example: border-width:thin - thin border
|
medium | Example: border-width:medium - medium width border
|
thick | Example: border-width:thick - thick border
|
length | Example: border-width:2 - defines the width as a length data type value.
|
Using the 'border' property, different values can be assigned to the different sides:
| - | 4 values can be specified, one for each side - the assignment follows this clock-wise order: top-right-bottom-left.
| | - | with 3 values, they are assigned in the following order to: top-right-bottom, the left side is assigned the same value as the right
| | - | with 2 values, the first value is assigned to the top and bottom sides, the second to the right and left
| | - | with 1 value, all 4 sides are assigned this value
|
The property can also be split into:
- border-top-width,
- border-right-width,
- border-bottom-width,
- border-left-width,
with each property independently assigned.
|
border-style | Defines the style of the 4 borders:
|
none | no border the border-width property is forced to 0
|
hidden | same as 'none', except in conflict resolution for table elements (the 'hidden' border has precedence and hides the borders with which it is in conflict)
|
dotted | border is a series of dots
|
dashed | the border is a series of dashes
|
solid | the order is a solid line
|
double | the border is two solid lines
|
groove | the border looks like a groove
|
ridge | the border looks like a ridge
|
inset | the border makes the block looks as though it is depressed to a level below the surrounding surface
|
outset | the border makes the block look as though it is raised above the surrouding level.
|
One style can be specified for all the 4 borders, or styles can be individually specified for the different borders as follows:
| - | 4 values can be specified, one for each side - the assignment follows this clock-wise order: top-right-bottom-left.
| | - | with 3 values, they are assigned in the following order to: top-right-bottom, the left side is assigned the same value as the right
| | - | with 2 values, the first value is assigned to the top and bottom sides, the second to the right and left
| | - | with 1 value, all 4 sides are assigned this value
|
The property can also be split into 4 properties to be defined independently:
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
|
bottom | Used for a positioned element - specifies the distance between the bottom of the element content1 and the bottom of the containing element, which is at the bottom edge of its bottom-margin.
The other properties used in this connection are:
- left
- right
- top
|
length | Example: bottom:20 - distance expressed as a length data type value
|
len% | Example: bottom:5% - distance expressed as a percentage of the total element height
|
auto | hte distance is automatically determined -- this is the initial value
|
inherit | the property is inherited from the parent element
|
caption-side | used with a table CAPTION element, specifies the position of the caption relative to the table
|
top | the caption is on top of the table -- this is the initial value
|
bottom | the caption is on the right of the table
|
left | the caption is on the left of the table
|
right | the caption is on the right of the table
|
inherit | the property is inherited from the parent element
|
clear | specifies the side(s) of an element that can NOT be adjacent to an ealier floating element, so that if the case may arise, the element be set on a line below the floating element.
|
none | none of the sides is to be clear of contact
|
left | the left side should be clear
|
right | the right side should be clear
|
both | both sides should be clear
|
inherit | the property is inherited from the parent element
|
clip | When the text in an element is too large for this element, the clip property defines which part of the content is visible. The clip is that viewport which shows the visible part.
|
shape
| Example: clip:rect(9,5,20,15) - defines the clip as a geometric figure -- presently only a rectangle is allowed.
The above example defines a rectangle whose top right corner is 9 pixel from the top and 5 from the right, and whose bottom left corner is 20 pixels from the bottom and 15 from the left.
|
auto | the clip has the same size as the element content
|
inherit | the property is inherited from the parent element
|
color | specifies the foreground color of an element
|
color | Example: #DD0000 - specifies the color
|
inherit | the property is inherited from the parent element
|
content | Adds text before or after an element of a given type.
The content property is defined for one of the pseudo classes before or after. These classes are called 'pseudo' because elements are assigned to them without the 'class' attribute being used.
Here is a sample page using the content property:
<HTML><HEAD><TITLE>PROPERTIES - CONTENT</TITLE>
<STYLE>
DIV:before {content:"----"}
DIV:after {content: "!!!!"}
Q:before {content:' " '}
Q:after {content:' " '}
P:before {content:open-quote}
P:after {content:close-quote}
</STYLE>
</HEAD>
<BODY>
<DIV>some text</DIV>
<Q>quoted text</Q>
<P>other text</P>
</BODY></HTML>
To see the result, please click here
May be your browser doesn't support this property (Internet Explorer 6.0 does not), so you would not see what is being commented on now.
In the STYLE element, the line
DIV.before {content:"-----"}
defines the property content for all the DIV elements of the (pseudo) class 'before'. This property is assigned the value "-----". Similarly, the subsequent line defines the property content for all the DIV elements of the (pseudo) class 'after'. If your browser supports this property, the before and after text specified in the STYLE element is added to the content of the element, like this:
.
The content property is defined for all the element of a given type.
|
string | Example: content:"-----" - specifies a text string that is displayed before or after all elements of a given type
|
uri | Example: content:http//www.company.com/text.html - identifies a document the contents of which is displayed before or after all the elements of given type.
|
counter(name, style) | Example: counter(para, decimal) - causes a counter to be incremented and displayed before or after all the elements of a certain type.
|
open-quote | Example: content:open-quote - causes an opening quote sign to be displayed (normally) before all elements of a given type.
|
close-quote | Example: content:close-quote - causes a closing quote sign to be displayed (normally) after all elements aof a given type.
|
attr(X) | Example: content:attr(id) - causes the value of the attribute named in the parentheses to be displayed before or after all elements of a given type.
|
inherit | the property is inherited from the parent element
|
counter-increment | defined in a style sheet for an element - increments a number of counters each time an element of the same type is encountered -- these are specified in a space separated list. The counters need not be defined beforehand. They exist by being named in a counter-increment property. The counter-reset property can set them to any desired value. If no such property was encountered first, a counter has an inital value of 0.
Counters are displayed by being passed as arguments to the function counter() or counters() assigned as value to the content property:
content:counters(counter-1, counter-2)
|
identifier integer | Example: counter-increment:chapter 1 section - each counter in the list is represented by a pair of identifier/integer where the 'identifier' is a name composed of letters, digits and hyphen, with the first character a letter, and 'integer' the quantity by which the counter is incremented -- by default the 'integer' value is 1
|
none | Example: counter-increment:none - no increment
|
inherit | the property is inherited from the parent element
|
counter-reset | defined in a style sheet for an element - resets a number of counters each time an element of the same type is encountered -- these are specified in a space separated list.
Counters are displayed by being passed as arguments to the function counter() or counters() assigned as value to the content property:
content:counters(counter-1, counter-2)
|
identifier integer | Example: counter-reset:section 1 paragraph 1 - each counter in the list is represented by a pair of identifier/integer where the 'identifier' is a name composed of letters, digits and hyphen, with the first character a letter, and 'integer' the value to which the counter is reset
|
none | Example: counter-ncrement:none - no increment
|
inherit | the property is inherited from the parent element
|
cursor | defines the shape of the cursor that is displayed when the mouse pointer hovers over the element. Here is an example:
<DIV style="cursor:pointer;">pointer cursor</DIV>
<DIV style="cursor:move;">move cursor</DIV>
<DIV style="cursor:w-resize;">w-resize cursor</DIV>
<DIV style="cursor:wait;">wait cursor</DIV>
The sequence is displayed like this (please point the mouse on the text, to see):
pointer cursor
move cursor
w-resize cursor
wait cursor
The possible values are:
|
url(uri) | Example: url(http://www.ste.com/html/sign.gif) - the cursor is an image contained in a file located by its URI - note the use of the 'url' function.
|
auto | determined by the user agent based on the context
|
crosshair | cross-hair cursor
|
default | default cursor depending on the platform
|
pointer | a sign indicating a link (often a hand -- see example above)
|
move | the element can be moved (see above example).
|
resize | the same as move.
|
n-resize | the element can be resized by moving its boundary to the North
|
ne-resize | the element can be resized by moving its boundary to the North-East
|
e-resize | the element can be resized by moving its boundary to the East
|
se-resize | the element can be resized by moving its boundary to the South-East
|
s-resize | the element can be resized by moving its boundary to the South
|
sw-resize | the element can be resized by moving its boundary to the South-West
|
w-resize | the element can be resized by moving its boundary to the West
|
nw-resize | the element can be resized by moving its boundary to the North-West
|
text | the cursor usually indicating a text entry area
|
wait | the cursor indicating a wait state (an hour glass or a clock)
|
help | a cursor indication help is available for the element
|
inherit | the property is inherited from the parent element
|
direction | specifies the reading direction of th text contained in the element
|
LTR | Left to Right - this the initial value
|
RTL | Right to Left
|
inherit | the property is inherited from the parent element
|
display | This property is mainly used to define structures such as tables or lists, in a language like XML. These structures are taken care of by the elements of the HTML language. In this language, the display property can be used to display in-line an element which natively is displayed as a block, and vice versa. Here is an example:
This text is followed by an in-line table.
<TABLE style="display:inline;" border="1">
<TR><TD>AAA<TD>BBB
<TR><TD>CCC<TD>DDD
</TABLE>
Sequel: <SPAN style="display:block; border:thin dashed red; width:150">this is to be in a block</SPAN> contituation
To see how the document is displayed, please click here
The values useful in HTML are:
|
inline | causes the element to be displayed in-line
|
block | causes the element to be displayed as block
|
inherit | the property is inherited from the parent element
|
float | floats the element to the left or the right of the display space (a page or a table cell, etc.) and lets the surrounding text flow resp. to its right or its left.
|
left | the element is floated to the left and lets the text flow to the right
|
right | the element is floated to the right and lets the text flow to the left
|
none | the element is processed normally
|
inherit | the property is inherited from the parent element
|
font | defines the font properties of the characters contained in the element. These properties can be separated into more precisely targeted properties:
- font-family,
- font-size,
- font-style,
- font-variant,
- font-weight,
- line-height
Values defined for these properties can be assigned to the 'font' property.
Values specifically defined for the 'font' property refer to system fonts which can have other values defined in a space separated list:
|
caption | the font is used for captioned controls (such as buttons)
|
icon | the font is used for icons labelling
|
menu | the font is used in menus
|
message-box | the font is used in dialog box
|
small-caption | the font is used for labelling small controls
|
status-bar | the font is used in window status bars
|
font-family | specifes the font family name as one in a list
|
family list | Example: "arial, univers, sans-serif" - The characters in the element are to be rendered in one of the fonts in the list. This list contains particular font names, and also generic names which designate a number of fonts of similar characteristics. It is recommended to name a generic family, in case the user agent cannot find any of the particular fonts in the list.
|
family-name | Example: arial - A family name is the name of one of the fonts specified in the family list. Some of the family names are: Times New Roman, Bodoni, Garamond, Arial, Univers, Helvetica, Courier New, Prestige.
|
generic-family | Example: sans-serif - Generic families are categories of fonts that include sets of the particular fonts - the following generic families are defined in the HTML specification:
| - | cursive - this family includes such fonts as Caflish Script, Adobe Poetica, Snell Roundhand, Zapf-Chancery
| | - | fantasy - this family includes such fonts as Alpha Geometrique, Critter, Cottonwood, FR Reactor, Studz
| | - | monospace - all characters have the same width - fonts of this family include Courrier New, Prestige, Everson Mono
| | - | sans-serif - characters without serif - fonts in this family include MS arial, MS verdana, helvetica, univers, futura
| | - | serif - characters decorated with serifs which are slight projections finishing off the strokes of the letters - fonts in this family include Time New Roman, Bodoni, Garamond, Minion Web
|
|
font-size | specifies the font size
|
absolute-size | Example: font-size:medium - the possible values are, with their obvious meaning, from the smallest to the largest: xx-small | x-small | small | medium | large | x-large | xx-large
|
relative-size | Example: font-size:larger - the possible values are larger and smaller
|
length | Example: font-size:12px - expresses the font size as a length data type
|
percentage | Example: font-size:85% - expresses the font size as a percentage of the font size in the parent element
|
inherit | the property is inherited from the parent element
|
font-size-adjust | In typographer parlance, a glyph is a graphical representation of a character when rendered on the supporting medium. The term 'glyph' is to be used because in some languages the same character can have more than one representation. Here are some tentative definitions:
| - | The font size is the heigth of an abstract rectangle that contains the highest glyph in the font
| | - | The x-height of a font is the height of the lower case glyphs.
| | - | The aspect of a font is the result of dividing the x-height by the font size
|
It is the x-height that determines legibility. Different fonts have different aspects, so that with the same font size, they do not offer the same legibility. The higher the aspect, the more legible a font is, at the same font size.
When a font family is specified and cannot be found, the user agent has to find a substitute font of approximately the same appearance. To preserve the intended legibility, not the font size, but the x-height is to be made equivalent, and the font size is to be adjusted accordingly. This is done by reference to the 'aspect' which is an information usually associated with a font, rather then the x-height.
The document author uses the font-size-adjust property to specify the aspect value of the first choice font (as specified by the font-family property), to help the user agent adjust the font size of a substite font. The possible property values are:
|
none | do not preserve x-height
|
number | Example: font-size-adjust:0.46 - specifies the aspect value of the first choice font.
|
inherit | the property is inherited from the parent element
|
font-stretch | This property is used with the font-family property to direct the user agent to choose a font with a desired stretch (horizontal extension)
|
normal | Example: font-stretch:normal
|
relative | Example: font-stretch:wider
The possible relative values are wider and narrower
|
absolute | Example: font-stretch:extra-condensed - The possible absolute values are, from the narrowest to the widest:
ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded
|
inherit | the property is inherited from the parent element
|
font-style | specifies the font style as normal, oblique or italic:
|
normal | specifies the normal font
|
oblique | specifies a font classified as oblique by the user agent
|
italic | specifies a font classified as italic by the user agent
|
inherit | the property is inherited from the parent element
|
font-variant | Specifies the characters as normal or small-caps. Here is how your browser renders small caps :
small-caps
(the source of this is <span style="font-variant:small-caps">small-caps</span>)
The possible values are:
|
normal | normal font
|
small-caps | small caps font
|
inherit | the property is inherited from the parent element
|
font-weight | specifies the weight of the font - here are the possible values and how they are rendered by your browser:
|
normal | Example: font-weight:normal - sample: rendered text
|
bold | Example: font-weight:bold - sample: rendered text
|
bolder | Example: font-weight:bolder - sample: rendered text
|
light | Example: font-weight:light - sample: rendered text
|
lighter | Example: font-weight:lighter - sample: rendered text
|
100 | Example: font-weight:100 - sample: rendered text
|
200 | Example: font-weight:200 - sample: rendered text
|
300 | Example: font-weight:300 - sample: rendered text
|
400 | Example: font-weight:400 - sample: rendered text
|
500 | Example: font-weight:500 - sample: rendered text
|
600 | Example: font-weight:600 - sample: rendered text
|
700 | Example: font-weight:700 - sample: rendered text
|
800 | Example: font-weight:800 - sample: rendered text
|
900 | Example: font-weight:900 - sample: rendered text
|
height | specify the content1 height of a block2 element.
|
length | Example: height:72 - specifies the height as a data of the length type
|
percentage | height:33% - specifies the height as a percentage of the containing element height
|
auto | height:auto - lets the user agent determine the element height
|
inherit | the property is inherited from the parent element
|
left | Used with a positioned element - specifies the distance between the element left edge and the containing element left edge (the left edge is the left side of the left margin1.
The other properties used in this connection are:
- bottom
- right
- top
|
length | Example: left:12 - specifies the distance as a data of the length type - the example specifies 12 pixels.
|
percentage | left:33% - specifies the distance as a percentage of the containing element width.
|
auto | left:auto - lets the user agent determine the distance
|
inherit | the property is inherited from the parent element
|
letter-spacing | specifies the space width between 2 consecutive letters.
|
normal | Example: letter-spacing:normal - lets the user agent apply the normal letter spacing of the fonts.
|
length | Example: letter-spacing:-1 - specifies an extra space added to the normal inter-character spacing - negative values are allowed (limits may be set by the user agent).
|
inherit | the property is inherited from the parent element
|
line-height | defines the line height of an element, i.e. the height including the top and bottom margins1.
If the element is an in-line element, the property defines its exact height
If the element is a block element, the property defines the minimum height of its lines
|
normal | Example line-height:normal - the line height is determined by the user agent, based on the font-size (usually, it is about 120% of the font size)
|
number | Example line-height:14 - the line height is expressed as a number
|
length | Example line-heigth:14 - the line height is expressed as a length data type
|
percentage | Example line-height:120% - the line height is expressed as a percentage of the font size in the element
|
inherit | the property is inherited from the parent element
|
list-style | specifies the properties of a list element as defined by the UL, OL or DL tag. this property can be split into:
- list-style-type
- list-style-position
- list-style-image
The values defined for the latter can be assigned to the 'list-style' property.
This property can be made to inherit from the conaining element, by the value 'inherit'
|
list-style-image | defines an image to be used as the list marker
|
uri | Example: list-style-image:url(http://www.company.com/images/diamond.gif" - the url function is to be used - its argument is the URI of the image file.
|
none | Example: list-style-image:none - no image
|
inherit | the property is inherited from the parent element
|
list-style-position | specifies the position of the marker with respect to the rectangular box containing the list element (i.e. the UL element)
|
inside | the marks are inside - for example:
<UL style="list-style-position:inside;width:200px">
<LI>xxxxxxxxxxxxxx xxxxxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxx xxxxxx xxxxxxx xxxxx xxxxxxx
<LI>yyyyyyy yyyyyyyy yyyyyyy yyyyyy yyyyyyy yyyyy yyyyyy
</UL>
would yield:
- xxxxxxxxxxxxxx xxxxxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxx
xxxxxx xxxxxxx xxxxx xxxxxxx
- yyyyyyy yyyyyyyy yyyyyyy yyyyyy yyyyyyy yyyyy yyyyyy
|
outside | the marks are outside - this is the initial value
|
inherit | the property is inherited from the parent element
|
list-style-type | specifies the appearance of the list-item marker.
There are 3 types of marker:
- glyphs
- numeric
- alphabetic
|
glyph | Example: list-style-type:disc - the possible values in this category are:
- disc
- circle
- square
|
numeric | Example: list-style-type:decimal - the possible values in this category are:
decimal | decimal number starting with a 1.
| decimal-leading-zero | decimal number padded by leading zero as needed to give all the marks the same number of digits
| lower-roman | lower case roman numerals
| upper-roman | upper case roman numerals
| hebrew | traditional Hebrew numbering
| georgian | traditional Georgian numbering
| armenian | traditional Armenian numbering
| cjk-ideographic | Plain ideographic numbers
| |
| hiragana | a, i, u, e, o, ka, ki, ...
| katakana |
| hiragana-hiroha |
| katakana-hiroha |
|
|
alphabetic | Example: list-style-type:lower-alpha - the possible types in this category are:
lower-alpha or equivalently lower-latin | lower case letters
| upper-alpha or equivalently upper-latin | upper case letters
| lower-greek | greek letters
|
|
inherit | the property is inherited from the parent element
|
margin | specifies the width of the element margin1.
|
length | Example: margin:0.5em - the margin, on the 4 sides, is assign a width equal to 0.5 of the line height. The possible units are:
em - current line height
px - pixels
ex - x-height of the current font
|
percentage | Example: margin:5% - the margin width is expressed as a percentage of the box containing the element text.
|
auto | Example: margin:auto - lets the user agent automatically determine the margin width - this is the initial value
|
One width can be specified for all the 4 margins, or widths can be individually specified for the different margins as follows:
| - | 4 values can be specified, one for each side - the assignment follows this clock-wise order: top-right-bottom-left.
| | - | with 3 values, they are assigned in the following order to: top-right-bottom, the left side is assigned the same value as the right
| | - | with 2 values, the first value is assigned to the top and bottom sides, the second to the right and left
| | - | with 1 value, all 4 sides are assigned this value
|
The property can also be split into 4 properties to be defined independently:
- margin-top
- margin-right
- margin-bottom
- margin-left
|
marker-offset | Used with a list element - the text in a list element is contained in a box, and the markers are in a box to the left (if list-style-position is 'outside'), separated from the former. The marker-offet property specifies the distance between these two.
|
length | Example: marker-offset:0.3em - the markers are at a distance worth 0.3 line height. The possible measure units are:
| em | current line height
| | px | pixels
| | ex | current font x-height
|
|
auto | Example: marker-offset:auto - let the user agent determine the offset
|
inherit | the property is inherited from the parent element
|
marks | specifies the page marks that are laid out on the outside of the page boxes, for use in preparing printed documents
|
crop | Example: marks:crop - the pages receive the crop mark that indicate where to cu
|
cross | Example: marks:cross - the pages receive the cross marks used to align sheets
|
none | Example: marks:none - no mark
|
inherit | the property is inherited from the parent element
|
max-height | specifies the maximum height of the element
|
length | Example: max-height:200px - the maximum height is specified as a length type data. The measure units that can be used are:
| em | current line height
| | px | pixels
| | ex | current font x-height
|
|
percentage | Example: max-height:33% - the maximum height of the element is specified in terms of percentage of the containing element
|
none | Example: max-height:none - there is no limit - this is the initial value
|
inherit | the property is inherited from the parent element
|
max-width | specifies the maximum width of the element
|
length | Example: max-width:300px - the maximum width is specified as a length type data. The measure units that can be used are:
| em | current line height
| | px | pixels
| | ex | current font x-height
|
|
percentage | Example: max-width:70% - the maximum width of the element is specified in terms of percentage of the containing element
|
none | Example: max-height:none - there is no limit - this is the initial value
|
inherit | the property is inherited from the parent element
|
min-height | specifies the minimum height of the element
|
length | Example: min-height:5em - the minimum height is specified as a length type data. The measure units that can be used are:
| em | current line height
| | px | pixels
| | ex | current font x-height
|
|
percentage | Example: min-height:33% - the minimum height of the element is specified in terms of percentage of the containing element
|
inherit | the property is inherited from the parent element
|
min-width | specifies the minimum width of the element
|
length | Example: min-width:5em - the minimum width is specified as a length type data. The measure units that can be used are:
| em | current line height
| | px | pixels
| | ex | current font x-height
|
|
percentage | Example: min-height:33% - the minimum width of the element is specified in terms of percentage of the containing element
|
inherit | the property is inherited from the parent element
|
orphans | used for paged documents - specifies the minimum number of lines of a paragraph that must be left at the bottom of a page (if there is room for less, the entire paragraph is sent to the next page.)
|
integer | Example: orphans:3 - the initial value is 2
|
inherit | the property is inherited from the parent element
|
outline | define the properties of the element outline. The outline is the space that lies just outside of the border1. Separate values can be defined in the properties:
outline-color
outline-style
outline-width
All the values defined for the latter can be assigned to the 'outline' property.
|
outline-color | assign a color to the outline.
|
color | Example: outline-color#DD00DD - the color is a datum of the color type.
|
invert | Example: outline-color:invert - the color is the inverted of the underlying surface
|
inherit | the property is inherited from the parent element
|
outline-style | defines the style properties of the outline - this property can have all the values of the border-style property.
|
outline-width | defines the width properties of the outline - this property can have all the values of the border-width property.
|
overflow | specifies if and how the content of the element is clipped if if overflows the box containing the element. the possible values are:
|
visible | Example: overflow:visible - the content is not clipped, it may be rendered outside the element block box3
|
hidden | Example: overflow:hidden - the contents are clipped and no scrolling mechanism is provided so that the area outside the clip is not accessible
|
scroll | Example: overflow:scroll - the contents are clipped and a scrolling mechanism is provided
|
auto | Example: overflow:auto - the action is user agent independent - there should be a scrolling mechanism to give access to the overflowed data
|
inherit | the property is inherited from the parent element
|
padding | specifies the width of the padding1 area on the 4 sides.
This can also equivalently defined in the padding-width property.
The width value can be specified as follows:
|
length | Example: padding:5px - the width is expressed as a length type datum. The possible measure units are:
| em | current line height
| | px | pixels
| | ex | current font x-height
|
|
percent | Example: padding:5% - the padding area width is defined as a percentage of the width of the containing element
|
Using the 'padding' property, different width values can be assigned to the different sides:
| - | 4 values can be specified, one for each side - the assignment follows this clock-wise order: top-right-bottom-left.
| | - | with 3 values, they are assigned in the following order to: top-right-bottom, the left side is assigned the same value as the right
| | - | with 2 values, the first value is assigned to the top and bottom sides, the second to the right and left
| | - | with 1 value, all 4 sides are assigned this value
|
The property can also be split into:
- padding-top,
- padding-right,
- padding-bottom,
- padding-left,
with each property independently assigned.
|
page | identifies a type of page.
|
identifier | Example: page:narrow - assings an element to the type of page identified by the value of the property
An identifier can only contain letters and digits and the hyphen, and UNICODE characters with code from 161 on. The first character must be a letter.
|
page-break-after | defined for a block type element - specifies how a page break can occur after the element
|
auto | Example: page-break-after:auto - neutral: neither forces nor forbids a page break after the element block
|
always | Example: page-break-after:always - always forces a page break after the element block
|
left | Example: page-break-after:left - forces one or two page breaks after the element block so that the next page is formatted as a left page
|
right | Example: page-break-after:right - forces one or two page breaks after the element block so that the next page is formatted as a right page
|
avoid | Example: page-break-after:avoid - avoid a page break after the element block
|
inherit | the property is inherited from the parent element
|
page-break-before | defined for a block type element - specifies how a page break can occur before the element
|
auto | Example: page-break-before:auto - neutral: neither forces nor forbids a page break before the element block
|
always | Example: page-break-before:always - always forces a page break before the element block
|
left | Example: page-break-before:left - forces one or two page breaks before the element block so that the next page is formatted as a left page
|
right | Example: page-break-before:right - forces one or two page breaks before the element block so that the next page is formatted as a right page
|
avoid | Example: page-break-before:avoid - avoid a page break before the element block
|
inherit | the property is inherited from the parent element
|
page-break-inside | defined for a block type element - specifies how a page break can occur inside the element
|
auto | Example: page-break-inside:auto - neutral: neither forces nor forbids a page break inside the element block
|
avoid | Example: page-break-inside:avoid - avoid a page break inside the element block
|
inherit | the property is inherited from the parent element
|
position | sets the position of the element in the text flow. An element whose position is modified by this property is called 'positioned'
|
static | Example: position:static - No action: the element is normal
|
relative | Example: position:relative - The element block is shifted relative to its normal position in the text flow. The shifted position is determined by the top, bottom, left and right properties. This positioning does not alter the placing of the subsequent elements in the flow, whose positions are the same as if the positioning did not occur.
|
absolute | Example: position:absolute - the element is taken out of its normal position in the text flow, and placed according to the top, bottom, left and right properties.
The element is considered not existing in the current flow so that the subsequent text is placed disregarding the element.
|
fixed | Example: position:fixed - the element is positioned as with the 'absolute' value, but it is fixed:
| - | on a continuous medium, it is fixed to the viewport and does not move when the document is scrolled
| | - | on a paged medium, it is fixed to the page.
|
|
inherit | the property is inherited from the parent element
|
quotes | specifies the quotes to use before and after en element
|
none | Example: quotes:none - the open-quote and close-quote values assigned to the before and after pseudo-classes of the element are cancelled: they produce no quotes.
|
string string | Example: quotes:' " ' ' " ' " ' " " ' " - each string represents a pair of open and close quote sign. When the quoted elements are embedded, tha first pair is used for the outer quotes, the second for the inner.
|
inherit | the property is inherited from the parent element
|
right | Used for a positioned element - specifies the distance between the right edges of the element content1 and the containing element.
The other properties used in this connection are:
- left
- bottom
- top
|
length | Example: right:20 - distance expressed as a length data type value
|
len% | Example: right:5% - distance expressed as a percentage of the total element height
|
auto | the distance is automatically determined
|
inherit | the property is inherited from the parent element
|
size | defines the size and orientation of a page box3
|
length | Example: size:8.5in 11in - specifying the page size as length type data defines the absolute size of the page. The complete specification is:
where:
width - is the page width described by a number, followed by a unit symbol
height - is the page height described by a number, followed by a unit symbol
The units can be:
in - for inch
cm - for centimeter
px - for pixel (this is the default value)
If only one length is specified, it is the common value of width and height (the page is square)
|
auto | Example: size:auto - the page is adjusted to the target sheet
|
portait | Example: |
lanscape | Example: |
inherit | the property is inherited from the parent element
|
table-layout | controls the algorithm used to lay out table cells, rows and columns
|
auto | Example: table-layout:auto - use any algorithm
|
fixed | Example: table-layout:fixed - use the fast fixed algorithm that does not depend on the content of the cells
|
inherit | the property is inherited from the parent element
|
text-align | controls the alignment of text in the element
|
left | Example: text-align:left - aligns the text to the left
|
right | Example: text-align:right -fe aligns the text to the right
|
center | Example: text-align:center - centers the text
|
justify | Example: text-align:justify - justifies the text (aligns on both side)
|
string | Example: text-align:'.' - align the text on the specified string - the value used in the example aligns the text on the '.' that can be a decimal point.
|
inherit | the property is inherited from the parent element
|
text-decoration | specifies the decoration of the text in the element
|
none | Example: text-decoration:none - no decoration
|
underline | Example: text-decoration:underline - underline the text in the element
|
overline | Example: text-decoration:overline - line of text has a line above it
|
line-through | Example: text-decoration:line-through - each line of text is struck by a line through its middle
|
blink | Example: text-decoration:blink - the text is caused to blink (conforming user agents are not require to support this value)
|
inherit | the property is inherited from the parent element
|
text-indent | defines the indentation of the first line in a block element.
|
length | Example: text-indent:20 - specifies the absolute indentation value as a length type data. The measurement unit is one of the following:
em - line height
px - pixels (this is the default value)
ix - current font x-height
|
percent | Example: text-indent:5% - specifies the text indentation as a percentage of the total line width
|
inherit | the property is inherited from the parent element
|
text-shadow | defines a shadow for the text in the element
|
none | Example: text-shadow:none - no shadow
|
lngth lngth lngth | Example: text-shadow: 3px 3px - defines the shadow with 3 length data type values:
| - | the horizontal distance to the right from the text - if negative, the shadow is to the left
| | - | the vertical distance below the text - if negative, the shadow is above
| | - | an optional blur radius that introduces a blur effect
|
|
color | Example: text-shadow:blue - specifies a color for the shadow effect - if used, is added to the above, in a space separated list
|
inherit | the property is inherited from the parent element
|
text-transform | controls the capitalization effect of the element
|
none | Example: text-transform - no capitalization effect
|
capitalize | Example: text-transform:capitalize - Sets the first character of each word in upper case
|
uppercase | Example: text-transform:uppercase - Sets all the letters in the element in uppercase
|
lowercase | Example: text-transform:lowercase - Sets all the letters in the element in lowercase
|
inherit | the property is inherited from the parent element
|
top | Used for a positioned element - specifies the distance between the top of the element content1 and the top of the containing element, which is at the top edge of its top-margin.
The other properties used in this connection are:
- left
- right
- bottom
|
length | Example: top:20 - distance expressed as a length data type value
|
len% | Example: top:5% - distance expressed as a percentage of the total element height
|
auto | hte distance is automatically determined -- this is the initial value
|
inherit | the property is inherited from the parent element
|
unicode-bidi | handles bidirectional text
|
normal | Example: unicode-bidi - the element does not open an additional level of embedding with respect to the bidirectional algorithm.
|
embed | Example: unicode-bidi - if the element is inline-level, this value opens an additonal embedding level with respect to the bidirectionel algorithm
|
bidi-override | Example: unicode-bidi:bidi-override - if the element is inline-level or a block-level element that contains only inline elements, this value creates an override
|
inherit | the property is inherited from the parent element
|
vertical-align | defines text vertical alignment in a block-level element
|
baseline | Example: vertical-align:baseline - align the base line text with the base line of the element
|
middle | Example: vertical-align:middle - align the midpoint of the text box with the base of the element plus half the x-height of the font
|
text-top | line
Example: vertical-align:text-top - align the top of the text box with the top of the element font
|
text-bottom |
Example: vertical-align:text-bottom - align the bottom of the text box with the bottom of the element font
|
sub | Example: vertical-align:sub - lower the baseline of the text to the subscript position
|
super | Example: vertical-align:super - raise the baseline of the text to the superscript position
|
percentage | Example: vertical-align:20% - raise (positive value) or lower (negative value) the base line of the text by the specified percentage of the line height
|
length | Example: vertical-align:5 - raise (positive value) or lower (negative value) the base line of the text by the quantity specified
The quantity is specified by a length data type value.
The measurement units can be:
cm - centimeters
em - line height
px - pixels (this is the default value)
ex - current font x-height
|
top | Example: vertical-align:top - align the top of the text box with the top of the line
|
bottom | Example: vertical-align:bottom - align the bottom of the text box with the bottom of the line
|
inherit | the property is inherited from the parent element
|
visibility | specifies wheter the element is visible
|
visible | Example: visibility:visible - the element is visible
|
hidden | Example: visibility:hidden - the element is invisible
|
collapse | Example: visibility:collapse - in a table, removes the element from display - elsewhere, has the same effect as hidden
|
inherit | the property is inherited from the parent element
|
white-space | indicates how user agents are to handle white-space and line breaks in the element
|
normal | Example: white-space:normal - normal handling: consecutive white space characters (including CRLF) are to be replaced by a single space - line breaks are introduced to fit the text into the element box
|
pre | Example: white-space:pre - white space is displayed as is, line breaks are controlled by the CRLF characters or BR elements contained in the text - the user agent does not break lines at the end of the display area
|
nowrap | Example: white-space:nowrap - white space is collapsed into a single space, as in the 'normal' case, but as in the 'pre' case, no line break is generated - line breaks are controlled by the BR elements contained in the text
|
inherit | the property is inherited from the parent element
|
widows | used for paged documents - specifies the minimum number of lines of a paragraph that must be displayed at the top of a page.
|
integer | Example: widows:3 - the initial value is 2
|
inherit | the property is inherited from the parent element.
|
width | specifies the content area3 width of a block element
|
length | Example: width:250px - absolute width, expressed as a length data type value. Some of the possible measurement units are:
cm - centimeters
em - line height
px - pixels (this is the default value)
ex - current font x-height
|
percentage | Example: width:50% - relative width, expressed as a percentage of the containing element width
|
auto | Example: width:auto - width is determined by the user agent taking into account information from the environment.
|
inherit | the property is inherited from the parent element
|
word-spacing | specifies the spacing values between words
|
normal | Example: word:spacing:normal - normal word spacing, as defined by the current font or the user agent.
|
length | Example: word-spacing:1 - specifies the space to be added to the normal spacing beteween words. If no unit is specifies, the default is "pixels".
|
inherit | the property is inherited from the parent element
|
z-index | Used for positioned elements - specifies the element stack level
The stack level value is an integer starting at 0. An element with the larger stack level overlays an element with a smaller stack level.
|
auto | Example: z-index:auto - the stack level of the element is the same as its parent's - the element does not establish a local stack
|
integer | Example: z-index:2 - the element is assigned the specified stack level. It estabishes a local stack in which its stack level is 0.
|
inherit | the property is inherited from the parent element
|
NOTES
|