CSS Style Property Reference
Table of contents
Overview
Within the style attribute of a visual element, or a selector in a stylesheet or group, properties alter the actual visual apperance of the element they are on, or matched to. Each property has a name and one or more values, depending on what is being set.
Within the element style
<div style='property-name: value [ , value2, ...]; property-name2: value [ , value2, ...]' >...</div>
As part of a referenced style-sheet or style element.
selector {
property-name: value [ , value2, ... ];
property-name2: value [ , value2, ... ];
}
Property Value Keywords
The style property global values (initial, revert, inherit, etc.) are not supported by the library, and that property will be ignored. If there has been a value set on that property previously (or with lower precedence) then it will be maintained for the content that would have had the global value set on it. See the CSS Selector Precedence article for more information on ordering and assigning values.
Unsupported Properties
If the style group, style sheet or style attribute contains an unknown or unsupported property, then that property will be skipped over. However further properties that are known will still be parsed and used during document output.
Supported Style Properties
The library supports the use of the following properties with associated values. The actual output result will vary based on the element the property is applied to and the value of other properties.
Element Fills.
The following properties are supported to alter the basic color of elements.
| Property | Description |
|---|---|
| color | Defines the fill color of any character content, and any decoration applied. |
| opacity | Defines the opacity of the element itself. |
Element Backgrounds.
The following properties are supported to alter the background appearance of ‘boxed’* elements NOTE: The background area is a rectangular shape including any padding are that is applied to the elelemt (and chaildren).
| Property | Description |
|---|---|
| background | A shorthand pproperty for setting the background properties of an element. |
| background-color | Specifies the colour that will fill the entire background. |
| background-image | Specifies an image, or gradient, that will fill the entire background. |
| background-repeat | Specifies how that image, if it is smaller than the element size will repeat. |
| background-size | Specifies the horizontal and vertical size of the image to repeat |
| background-position | Specifies both the horizontal and vertical starting postion of the image (including the repeat). |
| background-position-x | Specifies just the horizontal starting postion of the image (including the repeat). |
| background-psition-y | Specifies Just the vertical starting postion of the image (including the repeat). |
Element Borders
The following properties alter the border appearance on ‘boxed’* elements. NOTE: By default borders do not affect the spacing around an element. Thick borders will impinge on outer and inner content, if no margins or padding are applied.
| Property | Description |
|---|---|
| border | A shorthand property of setting the style, width and color of all the borders |
| border-width | Sets the width of all the borders around an element. |
| border-color | Sets the color of all the borders around an element. |
| border-style | Sets the style (solid, dash, none) of all the borders around an element. |
| border-radius | Sets the corner radius, of a border when switching between sides. Only one value is (currently) supported. |
| border-top | A shorthand property of setting the style, width and color of the top borders. |
| border-top-color | Sets the color of the top border of an element. |
| border-top-width | Sets the width of the top border of an element. |
| border-top-style | Sets the style of the top border of an element. |
| border-left | A shorthand property of setting the style, width and color of the left borders. |
| border-left-color | Sets the color of the left border of an element. |
| border-left-width | Sets the width of the left border of an element. |
| border-left-style | Sets the style of the left border of an element. |
| border-bottom | A shorthand property of setting the style, width and color of the bottom borders. |
| border-bottom-color | Sets the color of the bottom border of an element. |
| border-bottom-width | Sets the width of the bottom border of an element. |
| border-bottom-style | Sets the style of the bottom border of an element. |
| border-top | A shorthand property of setting the style, width and color of the right borders. |
| border-right-color | Sets the color of the right border of an element. |
| border-right-width | Sets the width of the right border of an element. |
| border-right-style | Sets the style of the right border of an element. |
Element Position and Size.
The following properties are supported to alter the position and size appearance of ‘boxed’* elements.
| Property | Description |
|---|---|
| position | Defines the way the element is positioned within the current page at the time of layout. |
| display | Defines how the elements contents should be laid-out - in a block, inline with the flow, or just ignored. |
| float | Defines the positioning of the element on the current line. And how content will move around it. |
| top | Specifies the top postion for an element that can be explictly moved. |
| left | Specifies the left postion for an element that can be explictly moved. |
| bottom | Specifies the bottom postion for an element that can be explictly moved, as long as top is not set. |
| right | Specifies the top postion for an element that can be explictly moved, as long as left is not set. |
| width | Specifies the width taken up for the ‘boxed’ element. |
| height | Specifies the height taken up for the ‘boxed’ element. |
| min-width | Specifies the minimim width for the ‘boxed’ element. |
| min-height | Specifies the minimim height for the ‘boxed’ element. |
| max-width | Specifies the maximum width the ‘boxed’ element is allowed consume on the page |
| max-height | Specifies the maximum width the ‘boxed’ element is allowed consume on the page |
| transform | Specifies (a series of) transform operations that should be performed on the final output of the element and its children when finally output |
| overflow | Stipulates the action (or non-action) that will be taken if the contents of the element exceed the available size of this container element. |
Element Spacing
The following properties manage the spacing in and around elements. The border rectangle is the boundary between the margins and padding and is where a border around the element would be shown if one is specified. The content rectangle is where the flowing children of the element (if any) are going to be positioned. NOTE: By default, and by design, the library does not collapse any margin spacing, nor does it allocate space for the width of a border.
| Property | Description |
|---|---|
| padding | A shorthand property of setting the space between the border rectangle and the rectangle where the content is displayed for a boxed element. |
| padding-top | Sets the space between the top of the border rectangle and the start of any content for a boxed element. |
| padding-left | Sets the space between the left of the border rectangle and the start of any content for a boxed element. |
| padding-bottom | Sets the space between the bottom of the border rectangle and the start of any content for a boxed element. |
| padding-right | Sets the space between the right of the border rectangle and the start of any content for a boxed element. |
| padding-inline | Sets the start and end padding of an inline element to either one value or two values. |
| padding-inline-start | Sets the start padding of an inline element to a specific value. |
| padding-inline-end | Sets the end padding of an inline element to a specific value. |
| margin | A shorthand property of setting the space between other sibling content and the border rectangle of any inner the content for a boxed element. |
| margin-top | Sets the space between other content and the top of the border rectangle of any inner content for a boxed element. |
| margin-left | Sets the space between other content and the left of the border rectangle of any inner content for a boxed element. |
| margin-bottom | Sets the space between the bottom of the border rectangle and other content for a boxed element. |
| margin-right | Sets the space between the right of the border rectangle and other content for a boxed element. |
| margin-inline | Sets the start and end margins of an inline element to either one value or two values. |
| margin-inline-start | Sets the start margins of an inline element to a specific value. |
| margin-inline-end | Sets the start margins of an inline element to a specific value. |
Pages and Columns
The following properties control the page sizes, columns and breaks within. The ‘page’ at-rule allows definition of custom page sizes, overall and in-groups.
| Property | Description |
|---|---|
| column-count | Specifies the number of columns within a block |
| column-gap | Specifies the alley width between columns |
| column-width | Specifies ideal column widths for content within an container so they are not smaller than the desired width but fill the container’s width |
| break-inside | Setting to avoid, will ensure that the content within is in a single region, column and/or page where possible. |
| break-after | Setting to always, will ensure that any following content begins on a new region, column and/or page where possible. |
| break-before | Setting to always, will ensure that the content begins on a new region, column and/or page where possible. |
| page-break-inside | Setting to avoid, will ensure that the content within is in a single page where possible. |
| page-break-after | Setting to always, will ensure that any following content begins on a new page where possible. |
| page-break-before | Setting to always, will ensure that the content begins on a new page where possible. |
| page | Specifies the name of the page group style from an at-rule, that should be used to define the size and layout af any pages within this section. |
Fonts and Type Faces
The following properties control the font that any text will use, including families and styles, and remote font registration. The ‘font-face’ at-rule allows definition of custom fonts, that can be used here.
| Property | Description |
|---|---|
| font | Shorthand property for setting the font family, style, weight and size. |
| font-style | Specifies the style of the font-face in the family. If the style is not available, then the library will fallback to an available style within the family. |
| font-family | Specifies one or more family names to use, in order of preference. The library has built in fonts for the standard ‘serif’, ‘sans-serif’ and ‘monospace’ fonts, and will always be available. |
| font-weight | Specifies the numeric weight (100 - 900), or ‘normal’ or ‘bold’. If the actual font-weight is not available, then the library will fallback to the nearest available weight. |
| font-size | Specifies the numeric size of the text to display when the document is output. This can be an absolute unit or a relative unit or percentage. The absolute (x-large, small etc.) and relative (larger / smaller) are supported. |
Text and Character Adjustment
The following properties control the way any text within the element will be output.
| Property | Description |
|---|---|
| text-align | Specifies the horizontal alignment of content on a line, or content within a block with a specific width (inc. full width) or a table cell. |
| vertical-align | Specifies the vertical alignment of content on a line, or content within a block with a specific height or a table cell |
| line-height | Specifies the leading of a line which can either be a relative or an absolute value. |
| text-decoration | Specifies any decoration on the text - A line above, below or in the middle of the characters is supported. |
| text-decoration-line | As per text-decoration - Specifies any decoration on the text - A line above, below or in the middle of the characters is supported. |
| letter-spacing | Defines an adjustment to the space applied between letters on a word, phrase or run of text. O is the standard value. |
| hyphens | Sets the model for hypenation, auto or none. NOTE: The library default is none, the manual option is considered equivalent to none. |
| hyphenate-limit-chars | Specifies upt to 3 values representing the minimum word length to hyphenate and then the minimum left and or right length of characters, allowed before or after a hyphen. |
| hyphenate-character | Specifies the character to use for a hyphen. Default is ‘-‘ |
| word-spacing | Defines an adjustment to the space applied between words on a phrase or run of text. O is the standard value. |
| white-space | Specifies if white space (tags, returns, spaces, etc.) should be preserved in the output document. |
Lists, Counters and Content
The following properties manage counter values, updating and displaying dynamic incrementing content. The ‘counter-style’ at-rule allows definition of custom fonts, that can be used here.
| Property | Description |
|---|---|
| content | The content propety is commonly used to add some textual content before (CSS ::before selector) or after (CSS ::after selector), the element that the style is applied to. |
| counter-reset | Accepts a space separated list of names of ‘counter-identies’ and optionally a following number for an initial value to reset to. If not provided, then the default for that counter will be used |
| counter-increment | Accepts a space separated list of names of ‘counter-identites’ and optionally a following number for teh value to increment by. If a number is not provided then the counter is incremented by 1 |
| list-style | Specifies the format of the prefixed value that will be displayed against a list item - e.g. lower-roman, along with options for inside or outside (not currently supported) |
| list-style-type | Expicity specifies the format of the prefixed value that will be displayed against a list item - e.g. lower-roman, or none if no value should be shown. |
- ‘boxed’ encapsulate all their content within a rectangular ‘box’, e.g. block, or inline-block.