RealObjects Nimbudocs Editor 5.0.6986_Beta8

CSS Property Documentation


Properties

-ro-align-content
Aligns the content of a block-level element inside the element. The property has no effect if the height of the content is larger than the block element's height.
Value auto | start | center | end
Initial auto
Applies To block-level elements
Inherited No
auto
The content is positioned as usual inside the block.
start
Content is positioned at the top of the block.
center
Content is vertically centered inside the block.
end
Content is positioned at the bottom of the block.
background
This property is a shorthand property for setting most background properties at the same place in the style sheet. Note that only the final background layer may have a background-color.
Value [ <bg-layer> , ]* <final-bg-layer>
Initial see individual properties
Inherited No
bg-layer
<bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
final-bg-layer
<bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>
See:
background-attachment
If background images are specified, this property specifies whether they are fixed with regard to the viewport ('fixed') or scroll along with the element ('scroll'). <attachment> = scroll | fixed | inherit
Value <attachment> [ , <attachment> ]*
Initial scroll
Inherited No
scroll
This keyword means that the background is fixed with regard to the element itself and does not scroll with its contents. (It is effectively attached to the element's border.)
fixed
This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a 'fixed' background doesn't move with the element.
See:
background-clip
Determines the background painting area, which determines the area within which the background is painted.
Value border-box | padding-box | content-box [, border-box | padding-box | content-box]*
Initial border-box
Inherited No
border-box
The background is painted within (clipped to) the border box.
padding-box
The background is painted within (clipped to) the padding box.
content-box
The background is painted within (clipped to) the content box.
See:
background-color
This property sets the background color of an element. The color is drawn behind any background images.
Value <color> | transparent | inherit
Initial transparent
Inherited No
<color>
Is a CSS <color> that describes the uniform color of the background. Even if one or several background-image are defined, this color can be affect the rendering, by transparency if the images aren't opaque.
See:
Example:
h1 { background-color: #F00 } /* Sets background to red. */
background-image
This property sets the background image of an element. When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).
Value <uri> | none [, <uri> | none]*
Initial none
Inherited No
<uri>
The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.
See:
Example:
body { background-image: url("marble.png") }
p { background-image: none }
background-origin
For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g. boxes on several pages), specifies which boxes 'box-decoration-break' operates on to determine the background positioning area(s).
Value border-box | padding-box | content-box | -ro-page-box | -ro-bleed-box [, border-box | padding-box | content-box | -ro-page-box | -ro-bleed-box]*
Initial padding-box
Inherited No
padding-box
The position is relative to the padding box. (For single boxes '0 0' is the upper left corner of the padding edge, '100% 100%' is the lower right corner.)
border-box
The position is relative to the border box.
content-box
The position is relative to the content box.
-ro-page-box
Only valid for background-images of pages. The background is positioned relative to the page box (including the page margins)
-ro-bleed-box
Only valid for background-images of pages. The background is positioned relative to the bleed box.
See:
background-position
If a background image has been specified, this property specifies its initial position. If only one value is specified, the second value is assumed to be 'center'. If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. Negative <percentage> and <length> values are allowed. <position> = [ [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ] ] | inherit
Value <position> [ , <position> ]*
Initial 0% 0%
Inherited No
<percentage>
A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with a value pair of '0% 0%',the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.
<length>
A length L aligns the top left corner of the image a distance L to the right of (for horizontal) or below (for vertical) the top left corner of the element's padding box. For example, with a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding box.
top
Equivalent to '0%' for the vertical position.
right
Equivalent to '100%' for the horizontal position.
bottom
Equivalent to '100%' for the vertical position.
left
Equivalent to '0%' for the horizontal position.
center
Equivalent to '50%' for the horizontal position if it is not otherwise given, or '50%' for the vertical position if it is.
See:
background-repeat
If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content, padding and border areas of a box. <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2} If two keywords are used, the first defines the horizontal repeat style, the second the vertical one.
Value <repeat-style> [ , <repeat-style> ]*
Initial repeat
Inherited No
repeat
The image is repeated both horizontally and vertically. Or for one direction if used together with another keyword.
repeat-x
The image is repeated horizontally only.
repeat-y
The image is repeated vertically only.
no-repeat
The image is not repeated: only one copy of the image is drawn.
space
The image is repeated as often as possible without clipping. The remaining space is then distributed between the images.
round
The image is repeated as often as possible without clipping. Then the remaining space is filled by scaling the images until they fit.
See:
background-size
Specifies the size of the background images. <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
Value <bg-size> [ , <bg-size> ]*
Initial auto
Inherited No
[ <length> | <percentage> | auto ]{1,2}
The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be 'auto'. A percentage is relative to the background positioning area. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio and the size of the other dimension, or failing that, using the image's intrinsic size, or failing that, treating it as 100%. If both values are 'auto' then the intrinsic width and/or height of the image should be used, if any, the missing dimension (if any) behaving as 'auto' as described above. If the image has neither an intrinsic width nor an intrinsic height, its size is determined as for 'contain'. Negative values are not allowed.
cover
Scales the image so that it completely covers the area, without changing its aspect ratio.
contain
Scales the image so that it completely fits in the area, without changing its aspect ratio.
See:
border
This property is a shorthand property for setting the same width, color, and style for all four borders of a box.
Value <line-width> || <line-style> || <color>
Initial see individual properties
Inherited No
See:
border-bottom-left-radius border-bottom-right-radius border-top-left-radius border-top-right-radius
The two length or percentage values of the 'border-*-radius' properties define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge. The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.
Value [<length> | <percentage>]{1,2}
Initial 0
Applies To all elements (but see prose)
Inherited No
See:
border-collapse
This property selects a table's border model. The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model.
Value collapse | separate | inherit
Initial separate
Applies To 'table' and 'inline-table' elements
Inherited Yes
See:
border-color
The 'border-color' property sets the color of the four borders. The 'border-color' property can have from one to four component values, and the values are set on the different sides as for 'border-width'.
Value [ <color> | transparent ]{1,4} | inherit
Initial see individual properties
Inherited No
<color>
Specifies a color value.
transparent
The border is transparent (though it may have width).
See:
-ro-border-inline-start -ro-border-inline-end -ro-border-block-start -ro-border-block-end
BiDi text direction dependent alternatives for padding-top, padding-bottom, padding-left and padding-right.
Value [ <border-width> || <border-style> || 'border-top-color' ] | inherit
Initial see individual properties
Inherited No
See:
-ro-border-inline-start-color -ro-border-inline-end-color -ro-border-block-start-color -ro-border-block-end-color
BiDi text direction dependent alternatives for border-top-color, border-bottom-color, border-left-color and border-right-color.
Value <color> | transparent | inherit
Initial the value of the 'color' property
Inherited No
See:
-ro-border-inline-start-style -ro-border-inline-end-style -ro-border-block-start-style -ro-border-block-end-style
BiDi text direction dependent alternatives for border-top-style, border-bottom-style, border-left-style and border-right-style.
Value <border-style> | inherit
Initial none
Inherited No
See:
-ro-border-inline-start-width -ro-border-inline-end-width -ro-border-block-start-width -ro-border-block-end-width
BiDi text direction dependent alternatives for border-top-width, border-bottom-width, border-left-width and border-right-width.
Value <border-width> | inherit
Initial medium
Inherited No
See:
border-radius
The 'border-radius' shorthand sets all four 'border-*-radius' properties. If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally. The four values for each radii are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left. If top-right is omitted it is the same as top-left.
Value [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
Initial see individual properties
Applies To all elements (but see prose)
Inherited No
See:
border-spacing
The lengths specify the distance that separates adjoining cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative. The distance between the table border and the borders of the cells on the edge of the table is the table's padding for that side, plus the relevant border spacing distance. For example, on the right hand side, the distance is padding-right + horizontal border-spacing.
Value <length> <length>? | inherit
Initial 0
Applies To 'table' and 'inline-table' elements
Inherited Yes
See:
border-style
The 'border-style' property sets the style of the four borders. It can have from one to four component values, and the values are set on the different sides as for 'border-width'.
Value <border-style>{1,4} | inherit
Initial see individual properties
Inherited No
<border-style>
see individual properties
See:
border-top border-right border-bottom border-left
This is a shorthand property for setting the width, style, and color of the top, right, bottom, and left border of a box.
Value [ <border-width> || <border-style> || 'border-top-color' ] | inherit
Initial see individual properties
Inherited No
See:
border-top-color border-right-color border-bottom-color border-left-color
The 'border-*-color' properties set the color of the specified border.
Value <color> | transparent | inherit
Initial the value of the 'color' property
Inherited No
<color>
Specifies a color value.
transparent
The border is transparent (though it may have width).
See:
border-top-style border-right-style border-bottom-style border-left-style
The border style properties specify the line style of a box's border (solid, double, dashed, etc.). The properties defined in this section refer to the <border-style> value type, which may take one of the following values:
Value <border-style> | inherit
Initial none
Inherited No
none
No border; the computed border width is zero.
hidden
Same as 'none', except in terms of border conflict resolution for table elements.
dotted
The border is a series of dots.
dashed
The border is a series of short line segments.
solid
The border is a single line segment.
double
The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.
groove
The border looks as though it were carved into the canvas.
ridge
The opposite of 'groove': the border looks as though it were coming out of the canvas.
inset
The border makes the box look as though it were embedded in the canvas.
outset
The opposite of 'inset': the border makes the box look as though it were coming out of the canvas.
See:
border-top-width border-right-width border-bottom-width border-left-width
The border width properties specify the width of the border area. The properties defined in this section refer to the <border-width> value type, which may take one of the following values:
Value <border-width> | inherit
Initial medium
Inherited No
thin
A thin border.
medium
A medium border.
thick
A thick border.
<length>
The border's thickness has an explicit value. Explicit border widths cannot be negative.
See:
border-width
This property is a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' at the same place in the style sheet. If there is only one component value, it applies to all sides. If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second. If there are three values, 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 there are four values, they apply to the top, right, bottom, and left, respectively.
Value <border-width>{1,4} | inherit
Initial see individual properties
Inherited No
See:
bottom
Like 'top', but specifies how far a box's bottom margin edge is offset above the bottom of the box's containing block. For relatively positioned boxes, the offset is with respect to the bottom edge of the box itself.
Value <length> | <percentage> | auto | inherit
Initial auto
Applies To positioned elements
Inherited No
<length>
The offset is a fixed distance from the reference edge. Negative values are allowed.
<percentage>
The offset is a percentage of the containing block's height. Negative values are allowed.
auto
For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. For replaced elements, the effect of this value depends on the intrinsic dimensions of the replaced content.
See:
box-decoration-break
When a block is split, this property determines whether margins, borders and paddings wrap the edges of the split box or if they should be "sliced". If a block has a background, this property determines whether the background is "sliced".
Value slice | clone
Initial clone
Inherited No
clone
Each box fragment is rendered individually. Margins, borders, and paddings wrap around all edges of the box. Backgrounds are restart in each fragment.
slice
The box fragments are rendered as if they were sliced. Background images are continued in the next fragment, margins, border and paddings are removed "between" the fragments.
See:
box-sizing
Defines which box is used to calculate the widths and heights of elements.
Value content-box | border-box
Initial content-box
Inherited No
content-box
This is the behavior as specified by CSS2.1. The width and height properties apply to the width and height of the content box of the element. The padding and border of the element are laid out and drawn outside the specified width and height.
border-box
Width and height properties on this element determine the border box of the element. That means that any padding or border specified on the element is laid out and drawn inside this specified width and height.
See:
break-before break-after
These properties describe page/column/region break behavior before/after the element's box.
Value auto | always | avoid | left | right | verso | recto | page | column | region | avoid-page | avoid-column | avoid-region
Initial auto
Applies To block-level elements
Inherited No
auto
Neither force nor forbid a page/column/region break before/after the box.
always
Always force a page break before/after the box.
avoid
Avoid a page/column/region break before/after the box.
left
Force one or two page breaks before/after the box so that the next page is formatted as a left page, inserting a blank page if necessary.
right
Force one or two page breaks before/after the box so that the next page is formatted as a right page, inserting a blank page if necessary.
verso
Same as 'left', unless the document direction is right-to-left, i.e. the root or body element has a 'direction' value of 'rtl', in which case it is the same as 'right'.
recto
Same as 'right', unless the document direction is right-to-left, i.e. the root or body element has a 'direction' value of 'rtl', in which case it is the same as 'left'.
page
Always force a page break before (after) the box.
column
Always force a column break before/after the box.
region
Always force a region break before/after the box.
avoid-page
Avoid a page break before/after the box.
avoid-column
Avoid a column break before/after the box.
avoid-region
Avoid a region break before/after the box.
See:
break-inside
This property describes the page/column/region break behavior inside the element's box.
Value auto | avoid | avoid-page | avoid-column | avoid-region
Initial auto
Applies To block-level elements
Inherited No
auto
Neither force nor forbid a page break inside the generated box.
avoid
Avoid any break inside the generated box.
avoid-page
Avoid a page/column/region break inside the generated box.
avoid-column
Avoid a column break inside the generated box.
avoid-region
Avoid a region break inside the generated box.
See:
caption-side
This property specifies the position of the caption box with respect to the table box.
Value top | bottom | inherit
Initial top
Applies To 'table-caption' elements
Inherited Yes
top
Positions the caption box above the table box.
bottom
Positions the caption box below the table box.
See:
clear
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.
Value none | left | right | -ro-inline-start | -ro-inline-end | both | inherit
Initial none
Inherited No
left
Requires that the top border edge of the box be below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
right
Requires that the top border edge of the box be below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
-ro-inline-start
BiDi text direction dependent alternative for 'left' or 'right'.
-ro-inline-end
BiDi text direction dependent alternative for 'right' or 'left'.
both
Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.
none
No constraint on the box's position with respect to floats.
See:
color
This property describes the foreground color of an element's text content.
Value <color> | inherit
Initial depends on user agent
Inherited Yes
<color>
Specifies the foreground color.
See:
-ro-column-break-before -ro-column-break-after
These properties describe column break behavior before/after the element's box.
Value auto | always | avoid | inherit
Initial auto
Applies To block-level elements
Inherited No
Deprecated!
Use break-before, break-after instead.
column-count
This property describes the number of columns of a multicol element.
Value <integer> | auto
Initial auto
Applies To non-replaced block-level elements (except table elements), table cells, and inline-block elements
Inherited No
auto
means that the number of columns will be determined by other properties (e.g., 'column-width', if it has a non-auto value).
<integer>
describes the optimal number of columns into which the content of the element will be flowed. Values must be greater than 0. If both 'column-width' and 'column-count' have non-auto values, the integer value describes the maximum number of columns.
See:
column-fill
In continuous media, this property will only be consulted if the length of columns has been constrained. Otherwise, columns will automatically be balanced.
Value balance | auto
Initial balance
Applies To multicol elements
Inherited No
balance
Balance content equally between columns, if possible.
auto
Fills columns sequentially.
See:
column-gap
The 'column-gap' property sets the gap between columns. If there is a column rule between columns, it will appear in the middle of the gap.
Value <length> | normal
Initial normal
Applies To multicol elements
Inherited No
normal
The 'normal' value is UA-specific.
<length>
Specifies the width of the gap. Column gaps cannot be negative.
See:
column-rule
This property is a shorthand for setting 'column-rule-width', 'column-rule-style', and 'column-rule-color' at the same place in the style sheet. Omitted values are set to their initial values.
Value <color> | <border-style> | <border-width> | <percentage> | none
Initial see individual properties
Applies To multicol elements
Inherited No
See:
column-rule-color
This property sets the color of the column rule.
Value <color> | none
Initial same as for 'color' property
Applies To multicol elements
Inherited No
See:
column-rule-style
The 'column-rule-style' property sets the style of the rule between columns of an element. The <border-style> values are defined in CSS2.1 and the values are interpreted as in the collapsing border model.
Value <border-style> | none
Initial none
Applies To multicol elements
Inherited No
See:
column-rule-width
This property sets the width of the rule between columns. Negative values are not allowed.
Value <border-width> | <percentage> | none
Initial medium
Applies To multicol elements
Inherited No
See:
column-span
This property describes how many columns an element spans across.
Value none | all
Initial none
Applies To block-level elements, except floating and absolutely positioned elements
Inherited No
none
The element does not span multiple columns.
all
The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context.
See:
column-width
This property describes the width of columns in multicol elements.
Value <length> | auto
Initial auto
Applies To non-replaced block-level elements (except table elements), table cells, and inline-block elements
Inherited No
auto
means that the column width will be determined by other properties (e.g., 'column-count', if it has a non-auto value).
<length>
describes the optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width). Specified values must be greater than 0.
See:
columns
This is a shorthand property for setting 'column-width' and 'column-count'. Omitted values are set to their initial values.
Value <integer> | <length> | auto
Initial see individual properties
Applies To non-replaced block-level elements (except table elements), table cells, and inline-block elements
Inherited No
content
This property is used with the :before and :after pseudo-elements to generate content in a document.
Value normal | none | [ <string> | <counter> | attr(<identifier>) | <target-counter> | <target-text> | <named-string> | <leader> ]+ | <running-element> | inherit
Initial normal
Applies To :before and :after pseudo-elements
Inherited No
none
The pseudo-element is not generated.
normal
Computes to 'none' for the :before and :after pseudo-elements.
<string>
Text content.
<counter>
Counters may be specified with two different functions: 'counter()' or 'counters()'.
attr(<attribute>)
This function returns as a string the value of attribute <attribute> for the subject of the selector.
<target-counter>
Target counters may be specified with two different functions: 'target-counter()' or 'target-counters()'.
<target-text>
Target text may be specified with the function: 'target-text()'.
<named-string>
Named strings may be specified with the function: 'string()'. The string function has two arguments. The name of the named string as identifier and the location on the page (which is optional).
<leader>
Leaders may be specified with the function: 'leader()'.
<running-element>
Running Elements may be specified with the function: 'element()' from a position property. The element function has two arguments. The name of the running element as identifier and the location on the page (which is optional).
See:
counter-increment
The 'counter-increment' property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1. Zero and negative integers are allowed.
Value none | [ <identifier> <integer>? ]+ | inherit
Initial none
Inherited No
See:
counter-reset
The 'counter-reset' property contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0.
Value none | [ <identifier> <integer>? ]+ | inherit
Initial none
Inherited No
See:
-ro-counter-set
The '-ro-counter-set' property contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0. The difference to the 'counter-reset' property is, that '-ro-counter-set' does not create a new instance of a counter if an existing counter is present. This allows '-ro-counter-set' to reset an existing counter from anywhere inside the document.
Value none | [ <identifier> <integer>? ]+ | inherit
Initial none
Inherited No
display
The computed value is the same as the specified value, except for positioned and floating elements (see Relationships between 'display', 'position', and 'float') and for the root element. For the root element, the computed value is changed as described in the section on the relationships between 'display', 'position', and 'float'. Note that although the initial value of 'display' is 'inline', rules in the user agent's default style sheet may override this value. See the sample style sheet for HTML 4 in the appendix.
Value inline | block | list-item | inline-block | table | inline-table | table-row-group | table-row | table-cell | none | inherit
Initial inline
Inherited No
block
This value causes an element to generate a block box.
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
This value causes an element to generate one or more inline boxes.
list-item
This value causes an element (e.g., LI in HTML) to generate a principal block box and a marker box. For information about lists and examples of list formatting, please consult the section on lists.
none
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants. Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption
These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).
See:
-ro-editable
This property defines whether an element and all its descendants are editable, not editable or not deletable. How this property is evaluated depends on the operation. If an operation is not a deletion operation then no-deletion is equivalent to true. If an operation is a deletion operation then no-deletion is equivalent to false.
Value true | false | no-deletion
Initial true
Inherited Yes
true
Editing is allowed.
false
Editing is prevented.
no-deletion
Editing is allowed unless it is a deletion.
See:
-ro-editable-inside
This property describes whether all descendants of an element are editable, not editable or not deletable. How this property is evaluated depends on the operation. If an operation is not a deletion operation then no-deletion is equivalent to true. If an operation is a deletion operation then no-deletion is equivalent to false.
Value true | false | no-deletion
Initial true
Inherited Yes
true
Editing is allowed.
false
Editing is prevented.
no-deletion
Editing is allowed unless it is a deletion.
See:
empty-cells
In the separated borders model, this property controls the rendering of borders and backgrounds around cells that have no visible content. Empty cells and cells with the 'visibility' property set to 'hidden' are considered to have no visible content.
Value show | hide | inherit
Initial show
Applies To 'table-cell' elements
Inherited Yes
show
When this property has the value 'show', borders and backgrounds are drawn around/behind empty cells (like normal cells).
hide
A value of 'hide' means that no borders or backgrounds are drawn around/behind empty cells. Furthermore, if all the cells in a row have a value of 'hide' and have no visible content, then the row has zero height and there is vertical border-spacing on only one side of the row.
See:
float
This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.
Value left | right | -ro-inline-start | -ro-inline-end | footnote | none | inherit
Initial none
Inherited No
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).
right
Similar to 'left', except the box is floated to the right, and content flows on the left side of the box, starting at the top.
-ro-inline-start
BiDi text direction dependent alternative for 'left' or 'right'.
-ro-inline-end
BiDi text direction dependent alternative for 'right' or 'left'.
none
The box is not floated.
See:
-ro-flow-from
The 'flow-from' property makes a block container a region and associates it with a named flow.
Value none | <identifier> | inherit
Initial
Applies To Non-replaced block containers.
Inherited No
none
The block container is not a CSS Region.
<identifier>
The block container becomes a CSS Region, and is ordered in a region chain according to its document order.
See:
-ro-flow-into
The 'flow-into' property can place an element or its contents into a named flow. Content that belongs to the same flow is laid out in regions associated with that flow. The 'flow-into' property neither affects the CSS cascade and inheritance nor the DOM position of an element or its contents. A named flow needs to be associated with one or more regions to be displayed.
Value none | <identifier> [element|content]?
Initial none
Applies To All elements, but not pseudo-elements such as ::first-line, ::first-letter, ::before or ::after.
Inherited No
none
The element is not moved to a named flow and normal CSS processing takes place.
<identifier>
If the keyword 'element' or neither keyword is present, the element is taken out of its parent's flow and placed into the named flow '<identifier>'. If the keyword 'content' is present, then only the element's contents is placed into the named flow. The values 'none', 'inherit', 'default', 'auto' and 'initial' are invalid flow names.
See:
font
The 'font' property is, except as described below, a shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' and 'font-family' at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts. All font-related properties are first reset to their initial values, including those listed in the preceding paragraph. Then, those properties that are given explicit values in the 'font' shorthand are set to those values.
Value [ [ 'font-style' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | inherit
Initial see individual properties
Inherited Yes
See:
font-family
The property value is a prioritized list of font family names and/or generic family names. Unlike most other CSS properties, component values are separated by a comma to indicate that they are alternatives.
Value [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit
Initial depends on user agent
Inherited Yes
<family-name>
The name of a font family of choice.
<generic-family>
The following generic families are defined: 'serif' (e.g., Times) 'sans-serif' (e.g., Helvetica) 'cursive' (e.g., Zapf-Chancery) 'fantasy' (e.g., Western) 'monospace' (e.g., Courier) Style sheet designers are encouraged to offer a generic font family as a last alternative. Generic font family names are keywords and must NOT be quoted.
See:
font-size
The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.
Value <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Initial medium
Inherited Yes
<absolute-size>
An <absolute-size> keyword is an index to a table of font sizes computed and kept by the UA. Possible values are: [ xx-small | x-small | small | medium | large | x-large | xx-large ]
<relative-size>
A <relative-size> keyword is interpreted relative to the table of font sizes and the font size of the parent element. Possible values are: [ larger | smaller ]. For example, if the parent element has a font size of 'medium', a value of 'larger' will make the font size of the current element be 'large'.
See:
font-style
The 'font-style' property selects between normal (sometimes referred to as "roman" or "upright"), italic and oblique faces within a font family.
Value normal | italic | oblique | inherit
Initial normal
Inherited Yes
See:
font-variant
Another type of variation within a font family is the small-caps. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The 'font-variant' property selects that font.
Value normal | small-caps | inherit
Initial normal
Inherited Yes
See:
font-weight
The 'font-weight' property selects the weight of the font. The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. The 'bolder' and 'lighter' values select font weights that are relative to the weight inherited from the parent.
Value normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Initial normal
Inherited Yes
See:
height
This property specifies the content height of boxes. This property does not apply to non-replaced inline elements. Negative values for 'height' are illegal.
Value <length> | <percentage> | auto | inherit
Initial auto
Applies To all elements but non-replaced inline elements, table columns, and column groups
Inherited No
<length>
Specifies the height of the content area using a length value.
<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.
auto
The height depends on the values of other properties.
See:
hyphenate-after
This property specifies the minimum number of characters in a hyphenated word after the hyphenation character. The 'auto' value means that the UA chooses a value that adapts to the current layout.
Value <integer> | auto
Initial auto
Inherited Yes
See:
hyphenate-before
This property specifies the minimum number of characters in a hyphenated word before the hyphenation character. The 'auto' value means that the UA chooses a value that adapts to the current layout.
Value <integer> | auto
Initial auto
Inherited Yes
See:
hyphenate-character
This property specifies a string that is shown when a hyphenate-break occurs. The 'auto' value means that the user agent should find an appropriate value.
Value <string> | auto
Initial auto
Inherited Yes
See:
hyphens
This property controls whether hyphenation is allowed to create more soft wrap opportunities within a line of text.
Value none | manual | auto
Initial manual
Inherited Yes
none
Words are not hyphenated, even if characters inside the word explicitly define hyphenation opportunities.
manual
Words are only hyphenated where there are characters inside the word that explicitly suggest hyphenation opportunities.
auto
Words may be broken at appropriate hyphenation points either as determined by hyphenation characters inside the word or as determined automatically by a language-appropriate hyphenation resource. Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation opportunities within the word.
See:
left
Like 'top', but specifies how far a box's left margin edge is offset to the right of the left edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the left edge of the box itself.
Value <length> | <percentage> | auto | inherit
Initial auto
Applies To positioned elements
Inherited No
<length>
The offset is a fixed distance from the reference edge. Negative values are allowed.
<percentage>
The offset is a percentage of the containing block's width. Negative values are allowed.
auto
For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. For replaced elements, the effect of this value depends on the intrinsic dimensions of the replaced content.
See:
letter-spacing
This property specifies spacing behavior between text characters.
Value normal | <length> | inherit
Initial normal
Inherited Yes
normal
The spacing is the normal spacing for the current font. This value allows the user agent to alter the space between characters in order to justify text.
<length>
This value indicates inter-character space in addition to the default space between characters.
See:
-ro-line-grid
Specifies whether this box creates a new baseline grid for its descendants or uses the same baseline grid as its parent.
Value match-parent | create
Initial match-parent
Applies To block containers
Inherited No
match-parent
Box assumes the line grid of its parent.
create
Box creates a new line grid using its own font and line layout settings.
See:
line-height
On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties.
Value normal | <number> | <length> | <percentage> | inherit
Initial normal
Inherited Yes
normal
Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as <number>. The computed value is 'normal'.
<length>
The specified length is used in the calculation of the line box height. Negative values are illegal.
<number>
The used value of the property is this number multiplied by the element's font size. Negative values are illegal. The computed value is the same as the specified value.
<percentage>
The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.
See:
-ro-line-snap
This property applies to all the line boxes directly contained by the element, and, when not none, causes each line box to shift until it snaps to the line grid specified by line-grid.
Value none | baseline | contain
Initial none
Inherited Yes
none
Line boxes do not snap to the grid; they stack normally.
baseline
The baseline snaps to the line grid applied to the element.
contain
Two baselines are used to align the line box: the line box is snapped so that its central baseline is centered between two of the line grid's baselines.
See:
list-style
The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image', and 'list-style-position' at the same place in the style sheet.
Value [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit
Initial see individual properties
Applies To elements with 'display: list-item'
Inherited Yes
See:
list-style-image
This property sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the 'list-style-type' marker.
Value <uri> | none | inherit
Initial none
Applies To elements with 'display: list-item'
Inherited Yes
See:
list-style-position
This property specifies the position of the marker box with respect to the principal block box.
Value inside | outside | inherit
Initial outside
Applies To elements with 'display: list-item'
Inherited Yes
outside
The marker box is outside the principal block box. The position of the list-item marker adjacent to floats is undefined in CSS 2.1. CSS 2.1 does not specify the precise location of the marker box or its position in the painting order, but does require that for list items whose 'direction' property is 'ltr' the marker box be on the left side of the content and for elements whose 'direction' property is 'rtl' the marker box be on the right side of the content. The marker box is fixed with respect to the principal block box's border and does not scroll with the principal block box's content.
inside
The marker box is placed as the first inline box in the principal block box, before the element's content and before any :before pseudo-elements.
See:
list-style-type
This property specifies appearance of the list item marker if 'list-style-image' has the value 'none' or if the image pointed to by the URI cannot be displayed. The value 'none' specifies no marker, otherwise there are three types of marker: glyphs, numbering systems, and alphabetic systems. Glyphs are specified with disc, circle, and square.
Value <counter-style> | none | inherit
Initial disc
Applies To elements with 'display: list-item'
Inherited Yes
<counter-style>
The list item marker is formatted according to the given counter style. Unordered types are: box, check, circle, diamond, disc, dash, square. Ordered types are for example lower-alpha, lower-greek or upper-roman.
See:
margin
The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' at the same place in the style sheet. If there is only one component value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, 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 there are four values, they apply to the top, right, bottom, and left, respectively.
Value <margin-width>{1,4} | inherit
Initial see individual properties
Applies To all elements except elements with table display types other than table-caption, table and inline-table
Inherited No
See:
margin-top margin-right margin-bottom margin-left
These properties set the top, right, bottom, and left margin of a box.
Value <margin-width> | inherit
Initial 0
Applies To all elements except elements with table display types other than table-caption, table and inline-table
Inherited No
See:
max-height
This property allows authors to limit box heights.
Value <length> | <percentage> | none | inherit
Initial none
Applies To all elements but non-replaced inline elements, table columns, and column groups
Inherited No
<length>
Specifies a fixed maximum computed height.
<percentage>
Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 'none'.
none
No limit on the height of the box.
See:
max-width
This property allows authors to constrain content widths to a maximum.
Value <length> | <percentage> | none | inherit
Initial none
Applies To all elements but non-replaced inline elements, table rows, and row groups
Inherited No
<length>
Specifies a fixed maximum used width.
<percentage>
Specifies a percentage for determining the used value. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width is negative, the used value is zero. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1.
none
No limit on the width of the box.
See:
min-height
This property allows authors to set a minimum box height.
Value <length> | <percentage> | inherit
Initial 0
Applies To all elements but non-replaced inline elements, table columns, and column groups
Inherited No
<length>
Specifies a fixed minimum computed height.
<percentage>
Specifies a percentage for determining the used value. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0'.
See:
min-width
This property allows authors to constrain content widths to a minimum value.
Value <length> | <percentage> | inherit
Initial 0
Applies To all elements but non-replaced inline elements, table rows, and row groups
Inherited No
<length>
Specifies a fixed minimum used width.
<percentage>
Specifies a percentage for determining the used value. The percentage is calculated with respect to the width of the generated box's containing block. If the containing block's width is negative, the used value is zero. If the containing block's width depends on this element's width, then the resulting layout is undefined in CSS 2.1.
See:
-ro-nimbu-handles-disable
Specifies which handle elements should be disabled.
Value auto | none | all | [ crop | freescale | resize ]+
Initial auto
Applies To replaced elements
Inherited No
auto
The default behavior. Has the same effect as none.
none
No handle elements should be disabled.
all
All handle elements should be disabled.
crop
Disable cropping feature for images.
freescale
When scaling elements, the aspect ratio will always remain constant.
resize
The element can no longer be resized.
Example:
img { -ro-nimbu-handles-disable: crop freescale }
-ro-nimbu-image-src
Determines if images should/can be converted to base64 data URIs by the "convert-image-to-data-uri" action
Value auto | convert | keep
Initial auto
Applies To images
Inherited No
auto
Defaults to keep. Images are not converted.
convert
Convert images to base64 data URI
keep
Images are not converted.
orphans
The 'orphans' property specifies the minimum number of lines in a block container that must be left at the bottom of a page. Only positive values are allowed.
Value <integer> | inherit
Initial 2
Applies To block container elements
Inherited Yes
See:
outline
The 'outline' property is a shorthand property, and sets all three of 'outline-style', 'outline-width', and 'outline-color'.
Value [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit
Initial see individual properties
Inherited No
See:
outline-color
The 'outline-color' accepts all colors, as well as the keyword 'invert'. 'Invert' is expected to perform a color inversion on the pixels on the screen. This is a common trick to ensure the focus border is visible, regardless of color background.
Value <color> | invert | inherit
Initial invert
Inherited No
See:
outline-style
The 'outline-style' property accepts the same values as 'border-style', except that 'hidden' is not a legal outline style.
Value <border-style> | inherit
Initial none
Inherited No
See:
outline-width
The 'outline-width' property accepts the same values as 'border-width'.
Value <border-width> | inherit
Initial medium
Inherited No
See:
overflow
This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.
Value visible | hidden
Initial visible
Applies To block containers
Inherited No
visible
This value indicates that content is not clipped, i.e., it may be rendered outside the block box.
hidden
This value indicates that the content is clipped and that no scrolling user interface should be provided to view the content outside the clipping region.
See:
overflow-wrap word-wrap
This property specifies whether the UA may arbitrarily break within a word to prevent overflow when an otherwise unbreakable string is too long to fit within the line box. It only has an effect when 'white-space' allows wrapping.
Value normal | break-word
Initial normal
Inherited Yes
normal
Lines may break only at allowed break points.
break-word
An unbreakable "word" may be broken at an arbitrary point if there are no otherwise acceptable break points in the line. Shaping characters are still shaped as if the word were not broken, and grapheme clusters must together stay as one unit. No hyphenation character is inserted at the break point.
See:
padding
The 'padding' property is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.
Value <padding-width>{1,4} | inherit
Initial see individual properties
Applies To all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited No
See:
padding-top padding-right padding-bottom padding-left
These properties set the top, right, bottom, and left padding of a box.
Value <padding-width> | inherit
Initial 0
Applies To all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited No
See:
page
This property is used to specify a particular type of page (called a named page) on which an element must be displayed. If necessary, a forced page break is introduced and a new page generated of the specified type.
Value auto | <identifier>
Initial auto
Applies To boxes that create class 1 break points
Inherited No
<identifier>
The name of a particular page type. Page type names are case-sensitive identifiers.
See:
page-break-before page-break-after
Shorthand for the 'break-before' and 'break-after' properties.
Value auto | always | avoid | left | right | inherit
Initial auto
Applies To block-level elements
Inherited No
auto
Neither force nor forbid a page break before (after) the generated box.
always
Always force a page break before (after) the generated box.
avoid
Avoid a page break before (after) the generated box.
left
Force one or two page breaks before (after) the generated box so that the next page is formatted as a left page.
right
Force one or two page breaks before (after) the generated box so that the next page is formatted as a right page.
See:
page-break-inside
Shorthand for the 'break-inside' property.
Value avoid | auto | inherit
Initial auto
Applies To block-level elements
Inherited No
auto
Neither force nor forbid a page break inside the generated box.
avoid
Avoid a page break inside the generated box.
See:
position
The 'position' and 'float' properties determine which of the positioning algorithms is used to calculate the position of a box.
Value static | relative | absolute | fixed | running(<identifier>) | inherit
Initial static
Inherited No
running(<identifier>)
Moves the element out of the normal flow and into a page margin box as a running header or footer. The page margin box needs to specify the element function with the same <identifier> used for the running element to display it.
See:
-ro-prevent-insertions-after
Disables the insertion of content after the element with this property if the element is read-only. Furthermore, the next adjacent sibling must also be read-only, or the element must be the the last child element of its parent node (i.e. this prevents typing after this element if the element is at the end of a paragraph).
Value true | false
Initial false
Applies To read-only elements
Inherited No
-ro-prevent-insertions-before
Disables the insertion of content before the element with this property if the element is read-only. Furthermore, the previous adjacent sibling must also be read-only, or the element must be the the first child element of its parent node (i.e. this prevents typing before this element if the element is at the start of a paragraph).
Value true | false
Initial false
Applies To read-only elements
Inherited No
-ro-priority
Defines the priority of a CSS style declarations. The higher the value, the higher the declaration's specificity.
Value <number>
Initial 0
Inherited No
-ro-qrcode-errorcorrectionlevel
Sets the error correction level of the QR code.
Value L | M | Q | H
Initial L
Applies To QR Code elements
Inherited No
L
Low level error correction. Up to 7% damaged data can be restored.
M
Medium level error correction. Up to 15% damaged data can be restored.
Q
Quartile level error correction. Up to 25% damaged data can be restored.
H
High level error correction. Up to 30% damaged data can be restored.
-ro-qrcode-forcedcolors
Defines whether the colors of the QR code are black and white or based on the text color and the background.
Value normal | none
Initial normal
Applies To QR Code elements
Inherited No
normal
QR code is black on white.
none
Instead of black, the value of the CSS property color is used to paint the squares. The background is visible instead of the white squares.
-ro-qrcode-quality
By default, The QR code is built from multiple squares. This method is fast and looks correct in print. However, in PDF viewers on screen the edges of neighboring squares may be visible.
Value normal | high
Initial normal
Applies To QR Code elements
Inherited No
normal
The QR code is built from multiple squares.
high
The squares are combined into one object, ensuring a seamless look, at the cost of performance.
-ro-qrcode-quietzonesize
Sets the size of the quiet (empty) zone around the QR code in modules (QR code "square" widths).
Value <integer>
Initial 1
Applies To QR Code elements
Inherited No
<integer>
Possible values are 0 (no quiet zone) and positive integers.
right
Like 'top', but specifies how far a box's right margin edge is offset to the left of the right edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the right edge of the box itself.
Value <length> | <percentage> | auto | inherit
Initial auto
Applies To positioned elements
Inherited No
<length>
The offset is a fixed distance from the reference edge. Negative values are allowed.
<percentage>
The offset is a percentage of the containing block's width. Negative values are allowed.
auto
For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. For replaced elements, the effect of this value depends on the intrinsic dimensions of the replaced content.
See:
size
This property specifies the target size and orientation of the page box's containing block. In the general case, where one page box is rendered onto one page sheet, the 'size' property also indicates the size of the destination page sheet.
Value auto | <length>{1,2} | [ <page-size> || [ portrait | landscape] ]
Initial auto
Applies To page context
Inherited No
auto
The page box will be set to a size and orientation chosen by the UA. In the usual case, the page box size and orientation is chosen to match the target media sheet.
landscape
Specifies that the page's content be printed in landscape orientation. The longer sides of the page box are horizontal. If a '<page-size>' is not specified, the size of the page sheet is chosen by the UA.
portrait
Specifies that the page's content be printed in portrait orientation. The shorter sides of the page box are horizontal. If a '<page-size>' is not specified, the size of the page sheet is chosen by the UA.
<length>
The page box will be set to the given absolute dimension(s). If only one length value is specified, it sets both the width and height of the page box (i.e., the box is a square). If two length values are specified, the first establishes the page box width, and the second the page box height. Values in units of 'em' and 'ex' refer to the page context's font. Negative lengths are illegal.
<page-size>
A page size can be specified using one of the following media names. This is the equivalent of specifying the '<page-size>' using length values. The definition of the media names comes from Media Standardized Names. A5, A4, A3, B5, B4, letter, legal, ledger
See:
-ro-source-page
Specifies which page of a PDF should be embedded as an image. Used in combination with -ro-source.
Value <integer>
Initial 1
Inherited No
src
This descriptor specifies the resource containing font data. It is required for the @font-face rule to be valid. Its value is a prioritized, comma-separated list of external references or locally-installed font face names. When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate. Fonts containing invalid data or local font faces that are not found are ignored and the user agent loads the next font in the list.
Value [ <url> [format(<string> #)]? | <font-face-name> ] #
Initial N/A
Applies To @font-face
Inherited No
See:
string-set
The 'string-set' property accepts a comma-separated list of named strings. Each named string is followed by a content list that specifies which text to copy into the named string. Whenever an element with value of 'string-set' different from 'none' is encountered, the named strings are assigned their respective value.
Value [[ <identifier> <content-list>] [, <identifier> <content-list>]* ] | none
Initial none
Inherited No
<string>
a string, e.g. "foo"
<counter>
counter() or counters() function
<content>
the 'content()' function returns the content of elements and pseudo-elements.
<attr>
the '-ro-attr()' function returns the content of one of the element's attribute.
See:
-ro-style-template
The property -ro-style-template makes a CSS style rule a Style Template. The property defines the name and type of the template. If no additional -ro-style-template-group is defined the Style Template will be sorted into a group with the same name as the template.
Value none | <string> || <type> | default | inherit
Initial none
Applies To depending on the element type
Inherited No
none
No Style Template is created.
<string>
The <string> defines the name of the Style Template. It should be unique since it identifies the Style Template inside EDF. The case of <string> is regarded.
<type>
The <type> is used to define which elements the Style Template will handle and how this is done. The following values are available: inline, inline-element, empty-block, paragraph, container, table, table-row, table-cell, table-caption, list, document
default
This value is used to create a default Style Template for a group.
See:
-ro-style-template-context
The optional property -ro-style-template-context describes what context the Style Template may be used in. A context limits the Style Template to be used only on elements whose value of the -ro-context property equals one of those defined with this property.
Value document | none | [<string>] | inherit
Initial document
Applies To depends on type, see -ro-style-template
Inherited No
document
The Style Template may be used throughout the whole document. This value is used by default.
none
The Style Template may not be used in the entire document. This option allows disabling the Style Template permanently.
<string>
The name of a context the Style Template may be used in. This context name refers to the context names defined via -ro-context property.
See:
-ro-style-template-group
The optional property -ro-style-template-group describes which group the Style Template is in. A group makes its Style Template members mutual exclusive, meaning only one of the group's members can be applied. Some things need to be considered on grouping Style Templates: All Style Templates should have the same element type. Actions will be created for those Style Templates only whose element type belongs to the majority of present element types in that group. Style Templates with same selector should not be inside the same group. If inside a group the selector of one Style Template matches another Style Template's selector the selected state of one of both Style Template's actions will be wrong. Even though the Style Template is applied one of both actions won't be selected. It is a restriction that comes with the design principle of mutual exclusive members of the Style Template group.
Value template-name | <string> | inherit
Initial template-name
Applies To depends on element type, see -ro-style-template
Inherited No
template-name
The group for the Style Template is named after the Style Template itself.
<string>
The name of the group. It identifies the Style Template group inside EDF. The case of this <string> is regarded.
See:
-ro-style-template-not-context
The optional property -ro-style-template-not-context describes what context the Style Template may not be used in. This definition limits the Style Template to be used everywhere else but on elements whose value of the -ro-context property equals one of those defined with this property. Note: This property will be ignored if -ro-style-template-context is defined.
Value none | document | [<string>] | inherit
Initial none
Applies To depends on type, see -ro-style-template
Inherited No
none
The Style Template may be used in the entire document.
document
The Style Template may not be used in the entire document. This option allows disabling the Style Template permanently.
<string>
The name of a context the Style Template may not be used in. This context name refers to the context names defined via -ro-context property.
See:
-ro-style-template-toggle-id -ro-style-template-setter-id
The optional properties -ro-style-template-toggle-id and -ro-style-template-setter-id specify the ID of the Java actions created from this Style Template. The -ro-style-template-toggle-id stands for toggle actions created from the Style Template while -ro-style-template-setter-id stands for setter actions. If one of these properties is not defined the related action's ID is generated and may change when Style Templates are (re)loaded. With a fixed ID an action created from a Style Template can be made part of a fixed user interface that retrieves the action by ID rather than via the Java StyleTemplate object.
Value none | <string> | inherit
Initial none
Applies To depends on type, see -ro-style-template
Inherited No
none
No ID is defined for the Style Template.
<string>
The ID value the action created from the Style Template will receive.
See:
-ro-tab-size
This property determines the tab size used to render preserved tab characters (U+0009). Integers represent the measure as multiples of the space character's advance width (U+0020). Negative values are not allowed.
Value <integer>
Initial 8
Applies To block containers
Inherited Yes
See:
table-layout
The 'table-layout' property controls which algorithm is used to lay out tables, including their rows and cells.
Value auto | fixed | inherit
Initial auto (fixed for excessively nested HTML table elements)
Applies To 'table' and 'inline-table' elements
Inherited No
fixed
Use the fixed table layout algorithm
auto
Use an automatic table layout algorithm
See:
text-align
This property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box.
Value start | end | left | right | center | justify | inherit
Initial start
Applies To block containers
Inherited Yes
start
Inline-level content is aligned to the start edge of the line box.
end
Inline-level content is aligned to the end edge of the line box.
left
Inline-level content is aligned to the line left edge of the line box.
right
Inline-level content is aligned to the line right edge of the line box.
center
Inline-level content is centered within the line box.
justify
Inline-level content is justified within the line box, except the last one.
See:
text-align-last
This property describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is 'justify'. If a line is also the first line of the block or the first line after a forced line break, then 'text-align-last' takes precedence over 'text-align'.
Value auto | start | end | left | right | center | justify
Initial
Applies To block containers
Inherited Yes
See:
text-decoration
This property describes decorations that are added to the text of an element using the element's color.
Value [ underline || line-through ]
Initial none
Inherited No
none
Produces no text decoration.
underline
Each line of text is underlined.
line-through
Each line of text has a line through the middle.
See:
text-indent
This property specifies the indentation of the first line of text in a block container.
Value <length> | <percentage> | inherit
Initial 0
Applies To block containers
Inherited Yes
<length>
The indentation is a fixed length.
<percentage>
The indentation is a percentage of the containing block width.
See:
text-overflow
Determines how content that overflows its line is rendered, when overflow of its paragraph has a other value than visible.
Value clip | ellipsis
Initial clip
Applies To block containers
Inherited No
clip
Inline content that overflows its block container element is clipped.
ellipsis
Clipped inline content is represented by an ellipsis character (U+2026).
See:
text-transform
This property controls capitalization effects of an element's text.
Value capitalize | uppercase | lowercase | none | inherit
Initial none
Inherited Yes
capitalize
Puts the first character of each word in uppercase; other characters are unaffected.
uppercase
Puts all characters of each word in uppercase.
lowercase
Puts all characters of each word in lowercase.
none
No capitalization effects.
See:
top
This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the top edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).
Value <length> | <percentage> | auto | inherit
Initial auto
Applies To positioned elements
Inherited No
<length>
The offset is a fixed distance from the reference edge. Negative values are allowed.
The offset is a fixed distance from the reference edge. Negative values are allowed. <percentage>
The offset is a percentage of the containing block's height. Negative values are allowed.
auto
For non-replaced elements, the effect of this value depends on which of related properties have the value 'auto' as well. For replaced elements, the effect of this value depends on the intrinsic dimensions of the replaced content.
See:
transform
This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix, then multiplying the matrices. A list of supported <transform-functions> can be found below.
Value none | <transform-function>+
Initial none
Applies To transformable elements
Inherited No
matrix(<number>[, <number>]{5,5})
specifies a 2D transformation in the form of a transformation matrix of the six values a-f.
translate( <translation-value> [, <translation-value> ]? )
specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.
translateX( <translation-value> )
specifies a translation by the given amount in the X direction.
translateY( <translation-value> )
specifies a translation by the given amount in the Y direction.
scale( <number> [, <number> ]? )
specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it takes a value equal to the first. For example, scale(1, 1) would leave an element unchanged, while scale(2, 2) would cause it to appear twice as long in both the X and Y axes, or four times its typical geometric size.
scaleX( <number> )
specifies a 2D scale operation using the [sx,1] scaling vector, where sx is given as the parameter.
scaleY( <number> )
specifies a 2D scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
rotate( <angle> )
specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.
skew( <angle> [, <angle> ]? )
specifies a 2D skew by [ax,ay] for X and Y. If the second parameter is not provided, it has a zero value.
skewX( <angle> )
specifies a 2D skew transformation along the X axis by the given angle.
skewY( <angle> )
specifies a 2D skew transformation along the Y axis by the given angle.
See:
transform-origin
This property defines the point of origin of transformations. If only one value is specified, the second value is assumed to be center.
Value [ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ]
Initial 50% 50%
Applies To transformable elements
Inherited No
<percentage>
A percentage for the horizontal offset is relative to the width of the bounding box. A percentage for the vertical offset is relative to height of the bounding box. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box.
<length>
A length value gives a fixed length as the offset. The value for the horizontal and vertical offset represent an offset from the top left corner of the bounding box.
top
Computes to 0% for the vertical position.
right
Computes to 100% for the horizontal position.
bottom
Computes to 100% for the vertical position.
left
Computes to 0% for the horizontal position.
center
Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.
See:
vertical-align
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
Value baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial baseline
Applies To inline-level and 'table-cell' elements
Inherited No
baseline
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
sub
Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)
super
Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)
text-top
Align the top of the box with the top of the parent's content area.
text-bottom
Align the bottom of the box with the bottom of the parent's content area.
<percentage>
Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'.
<length>
Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.
top
Align the top of the aligned subtree with the top of the line box.
bottom
Align the bottom of the aligned subtree with the bottom of the line box.
See:
visibility
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether).
Value visible | hidden | collapse | inherit
Initial visible
Inherited Yes
visible
The generated box is visible.
hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.
collapse
For table rows, columns, column groups, and row groups the rows or columns are hidden and do not occupy space, as if display: none were applied to them. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'.
See:
white-space
This property declares how white space inside the element is handled.
Value normal | pre | nowrap | pre-wrap | pre-line | inherit
Initial normal
Inherited Yes
normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.
pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.
nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.
pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.
pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.
See:
widows
The 'widows' property specifies the minimum number of lines in a block container that must be left at the top of a page.
Value <integer> | inherit
Initial 2
Applies To block container elements
Inherited Yes
See:
width
This property specifies the content width of boxes.
Value <length> | <percentage> | auto | inherit
Initial auto
Applies To all elements but non-replaced inline elements, table rows, and row groups
Inherited No
<length>
Specifies the width of the content area using a length unit.
<percentage>
Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.
auto
The width depends on the values of other properties.
See:

Functions

-ro-attr()
Creates a reference to the attribute of an element with the specified name. This function has the same functionality as the attr() function specified by CSS.
Parameters
                            -ro-attr(<attr-name> <type-or-unit>? [ , <attr-fallback> ]?)
<attr-name>
The attribute name
[<type-or-unit>]
Specifies how the attribute should be interpreted. Default is 'string'.
[<attr-fallback>]
If the attribute could not found, this value is used instead.
calc()
Computes mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/). The result can then be used for a wide range of properties. It can be used by any property that expects a length, frequency, angle, time, number or integer value. NOTE: The + and - operators must be surrounded with spaces.
Parameters
                            calc(expression)
expression
The mathematical expression. A whitespace is required on both sides of + and - operators. Several terms can be chained (e.g. calc(50% - 2cm + 8px); ).
Example:
height: calc(100% - 4px);
cmyk()
CMYK colors for printing.
Parameters
                            cmyk(cyan, magenta, yellow, key[, alpha]?)
cyan Number | Percentage
Cyan color component. Number between 0 and 1 or percentage.
magenta Number | Percentage
Magenta color component. Number between 0 and 1 or percentage.
yellow Number | Percentage
Yellow color component. Number between 0 and 1 or percentage.
key Number | Percentage
Key (usually black) color component. Number between 0 and 1 or percentage.
[alpha] Number | Percentage
Alpha value of the color. Number between 0 and 1 or percentage.
content()
Allows to get the content of an element or pseudo-element.
Parameters
                            content([text | before | after | first-letter]?)
text
The text content of the element. This is the default value.
before
The content of the ::before pseudo-element.
after
The content of the ::after pseudo-element.
first-letter
The first-letter of the element's content text.
Example:
string-set: content(before) " " content();
counter()
Refers to the value of a counter.
Parameters
                            counter(identifier[, list-style-type]?)
identifier
The name of the counter
[list-style-type]
Specifies the style of the number. Default is 'decimal'.
element()
This function places an element with a name specified via the running() function, in a page margin box.
Parameters
                            element(<custom-ident> [ , [ first | start | last | first-except] ]?)
custom-ident
The name of the running element as identifier, which is specified using the position property with the running() function.
[first | start | last | first-except]
Keywords that, in a case where there are multiple assignments on a page, specify which one should be used.
gray() grey()
Allows to specify a gray color
Parameters
                            gray(gray[, alpha]?)
gray Number | Percentage
The shade of gray. A number between 0 and 1 or percentage.
[alpha] Number | Percentage
The alpha channel. A number between 0 and 1 or percentage.
hsl()
Specifies a color using hue, saturation and lightness.
Parameters
                            hsl(hue, saturation, lightness)
hue Number | Angle
The hue of the color. Set using an angle of the color circle. Number are interpreted as a number of degrees.
saturation Percentage
The saturation of the color.
lightness Percentage
The lightness of the color.
hsla()
Specifies a transparent color using hue, saturation, lightness and alpha.
Parameters
                            hsla(hue, saturation, lightness, alpha)
hue Number | Angle
The hue of the color. Set using an angle of the color circle. Number are interpreted as a number of degrees.
saturation Percentage
The saturation of the color.
lightness Percentage
The lightness of the color.
alpha Percentage
The alpha channel.
leader()
Creates a repeating pattern to connect content across horizontal spaces (for example the dots in a table of contents, which connect the chapter names with the page numbers). The function takes the pattern that should be repeated. Either one of the keywords dotted, solid, space or a custom string.
Parameters
                            leader([dotted | solid | space] | <string>)
linear-gradient()
Creates a color gradient which for instance can be used as a background.
Parameters
                            linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
angle
The angle of direction for the gradient.
side-or-corner
The direction of the gradient, using keywords. Syntax is [ left | right ] || [ top | bottom ].
color-stop
Defines the colors of the gradient. Syntax is "<color> [ <percentage> | <length>]?".
Example:
background-image: linear-gradient(120deg, red, yellow);
radial-gradient()
Creates round color gradients which can be used as a background, for instance.
Parameters
                            radial-gradient([ [ <shape> || <size> ] [ at <position> ]?,
 | at <position>, ]? <color-stop> [, <color-stop> ]+)
position
Determines the center of the gradient. Uses the same syntax as the 'background-position' property. Default value is 'center'
shape
Can be either 'circle' or 'ellipse'. Default is 'ellipse'.
size
Determines the size of the gradient. Values can be lengths and percentages (if the gradient is an ellipse, two values define width and height) or keywords, which are 'closest-side', 'closest-corner', 'farthest-side' and 'farthest-corner'.
color-stop
Defines the colors of the gradient. Syntax is "<color> [ <percentage> | <length>]?".
repeating-linear-gradient()
Creates a color gradient which is repeated infinitely. It has the same syntax as linear-gradient.
Parameters
                            repeating-linear-gradient([ [ <angle> | to <side-or-corner> ] ,]?
 <color-stop> [, <color-stop>]+)
angle
The angle of direction for the gradient.
side-or-corner
The direction of the gradient, using keywords. Syntax is [ left | right ] || [ top | bottom ].
color-stop
Defines the colors of the gradient. Syntax is "<color> [ <percentage> | <length>]?".
repeating-radial-gradient()
Creates round color gradients which is repeated infinitely. Uses the same syntax as radial-gradient.
Parameters
                            repeating-radial-gradient([ [ <shape> || <size> ] [ at <position> ]?,
 | at <position>, ]? <color-stop> [, <color-stop> ]+)
position
Determines the center of the gradient. Uses the same syntax as the 'background-position' property. Default value is 'center'
shape
Can be either 'circle' or 'ellipse'. Default is 'ellipse'.
size
Determines the size of the gradient. Values can be lengths and percentages (if the gradient is an ellipse, two values define width and height) or keywords, which are 'closest-side', 'closest-corner', 'farthest-side' and 'farthest-corner'.
color-stop
Defines the colors of the gradient. Syntax is "<color> [ <percentage> | <length>]?".
rgb()
Defines an RGB color by specifying the red, green, and blue channels.
Parameters
                            rgb(red, green, blue)
red Number | Percentage
Red color component. Number between 0 and 255 or percentage.
green Number | Percentage
Green color component. Number between 0 and 255 or percentage.
blue Number | Percentage
Blue color component. Number between 0 and 255 or percentage.
rgba()
Defines an RGB color by specifying the red, green, and blue components and the alpha channel.
Parameters
                            rgba(red, green, blue, alpha)
red Number | Percentage
Red color component. Number between 0 and 255 or percentage.
green Number | Percentage
Green color component. Number between 0 and 255 or percentage.
blue Number | Percentage
Blue color component. Number between 0 and 255 or percentage.
alpha Number | Percentage
Alpha color component. Number between 0 and 1 or percentage.
running()
Moves the element out of the normal flow and into a page margin box as a running header or footer. The page margin box needs to specify the element function with the same <identifier> used for the running element to display it.
Parameters
                            running(custom-ident)
custom-ident
Defines the name of the running element, which then is referenced by the element() function.
string()
Copies the value of a named string to the document, using the content property.
Parameters
                            string(<custom-ident> [ , [ first | start | last | first-except] ]?)
custom-ident
The name of the named string which is set via the property string-set.
[first | start | last | first-except]
If there are multiple assignments on a page, this keyword specifies which one should be used.
target-counter()
Retrieves the value of the counter with the given name.
Parameters
                            target-counter(<url> , <custom-ident> [ , <counter-style> ]?)
url
The url of the target.
custom-ident
Name of the counter.
[counter-style]
Used to format the result, see the property 'list-style-type' for more information on the keywords.
target-text()
Retrieves the text value of the element referred to by the URL.
Parameters
                            target-text(<url> [ , [ content | before | after | first-letter] ]?)
url
The element whose content should be retrieved.
[content | before | after | first-letter]
Specifies what content is retrieved, using the same values as the 'string-set' property.
xhtml()
A proprietary property that allows to reference a document which then is embedded.
Parameters
                            xhtml(document)
document String | URL
An HTML document string or a URL pointing to an HTML document

Pseudo Classes

For @page rules

:first
The first page of the document.
:-ro-last
The last page of the document.
:left
A left page of the document.
:-ro-nth(n)
The nth page of the document.
Parameters
n String
:recto
Same as 'right', unless the document direction is right-to-left, i.e. the root or body element has a 'direction' value of 'rtl', in which case it is the same as 'left'.
:right
A right page of the document.
:verso
Same as 'left', unless the document direction is right-to-left, i.e. the root or body element has a 'direction' value of 'rtl', in which case it is the same as 'right'.

For elements

:checked
A checked checkbox or radio button.
:disabled
A disabled form field.
:empty
An element without children (including text nodes)
:enabled
An enabled form field.
:first-child
An element, first child of its parent
:first-of-type
An element, first sibling of its type.
:lang(languagecode)
Selects every element with a lang attribute value starting with the languagecode specified as parameter
Parameters
languagecode String
The language code to match, e.g. "de", "en", "it", etc.
:last-child
An element, last child of its parent
:last-of-type
An element, last sibling of its type.
Selects all unvisited links.
:-ro-matches(s)
An element that matches selector s.
Parameters
s String
The selector to match.
:-ro-no-content
An element without textual content.
:not(s)
An element that does not match selector s.
Parameters
s String
The selector to match.
:nth-child(n)
An element, nth child of its parent
Parameters
n Integer
:nth-last-child(n)
An element, nth last child of its parent
Parameters
n Integer
:nth-last-of-type(n)
An element, nth last sibling of its type.
Parameters
n Integer
:nth-of-type(n)
An element, nth sibling of its type.
Parameters
n Integer
:only-child
Selects every element that is the only child of its parent.
:only-of-type
An element, only sibling of its type.
:root
Selects the document's root element.

Pseudo Elements

::after
Generated content after an element.
::before
Generated content before an element.
::first-letter
Selects the first letter of each element.
::footnote-call
Generated content replacing elements that are moved to the footnote area.
::footnote-marker
Generated content preceding footnotes.

At-Rules

@charset
The character encoding that is used. The at-rule @charset does not work for a style sheet that is imported via @import.
Syntax
                            charset("encoding")
@font-face
A custom font.
Syntax
                            font-face({
    font descriptors
})
@import
Imports another style sheet into this one.
Syntax
                            import({url} [media type,…];)
@media
The specific media types to which this style sheet will apply.
Syntax
                            media(media type,… {
    ruleset
})
@namespace
Declares an XML namespace, usually with a prefix.
Syntax
                            namespace([prefix] uri)
@page
Selector for specific pages.
Syntax
                            page([name][:first|:left|:right] {
    page ruleset
})