CSS Reference Manuals

CSS Properties

CSS Property Groups:

• Animation
• Background
• Borders and Outlines
• Boxes (Box)
• Color
• Content Paging Media
• Positioning
• Retractable box
• Font
• Generate content
• Grid
• Hypertext links
• Line box
• List
• Outer margin
• Marquee
• Multiple columns
• Inner margin
• Paging Media
• Positioning
• Print
• Ruby
• Voice
• Form
• Text
• 2d/3d Conversion
• Transition
• User interface

The CSS column indicates which CSS version (CSS1, CSS3, or CSS3) the property is defined in.

CSS3 Animation Properties (Animation)

Properties	description	CSS
@keyframes The	specifies the animation.	3
animation	The shorthand properties of all animated properties, in addition to the Animation-play-state property.	3
animation-name	Specifies the name of the @keyframes animation.	3
animation-duration	Specifies the seconds or milliseconds that the animation takes to complete a cycle.	3
animation-timing-function	Specifies the speed curve of the animation.	3
animation-delay	Specifies when the animation will start.	3
animation-iteration-count	Specifies the number of times the animation has been played.	3
animation-direction	Specifies whether the animation will play backwards in the next cycle.	3
animation-play-state	Specifies whether the animation is running or paused.	3
animation-fill-mode	Specifies the state outside of the animation time of the object.	3

CSS Background Properties (Background)

Properties	Description	CSS
Background	Set all the background properties in a declaration.	1
Background-attachment	Sets whether the background image is fixed or scrolls along with the rest of the page.	1
Background-color	Sets the background color of the element.	1
Background-image	Sets the background image of the element.	1
Background-position	Sets the start position of the background image.	1
Background-repeat	Sets whether and how the background image is repeated.	1
Background-clip	The drawing area that specifies the background.	3
Background-origin	Specifies the location area of the background image.	3
Background-size	Specifies the size of the background image.	3

CSS Border Properties (Border and Outline)

Properties	Description	CSS
Border	Sets all the border properties in a declaration.	1
Border-bottom	Sets all the bottom border properties in a declaration.	1
Border-bottom-color	Sets the color of the bottom border.	2
Border-bottom-style	Sets the style of the bottom border.	2
Border-bottom-width	Sets the width of the bottom border.	1
Border-color	Sets the color of the four border.	1
Border-left	Sets all the left border properties in a declaration.	1
Border-left-color	Sets the color of the left border.	2
Border-left-style	Sets the style of the left border.	2
Border-left-width	Sets the width of the left border.	1
Border-right	Set all the right border properties in a declaration.	1
Border-right-color	Sets the color of the right border.	2
Border-right-style	Sets the style of the right border.	2
Border-right-width	Sets the width of the right border.	1
Border-style	Sets the style of the four border.	1
Border-top	Sets all the top border properties in a declaration.	1
Border-top-color	Sets the color of the top border.	2
Border-top-style	Sets the style of the top border.	2
Border-top-width	Sets the width of the top border.	1
Border-width	Sets the width of the four-bar border.	1
Outline	Set all the profile properties in a declaration.	2
Outline-color	Sets the color of the outline.	2
Outline-style	Sets the style of the outline.	2
Outline-width	Sets the width of the outline.	2
Border-bottom-left-radius	Defines the shape in the lower-left corner of the border.	3
Border-bottom-right-radius	Defines the shape in the lower-right corner of the border.	3
Border-image	Shorthand property, set all border-image-* properties.	3
Border-image-outset	Specifies the amount of border image area beyond the border.	3
Border-image-repeat	Whether the image border should be tiled (repeated), covered (rounded), or stretched (stretched).	3
Border-image-slice	Specifies the inward offset of the image border.	3
Border-image-source	Specifies a picture to use as a border.	3
Border-image-width	Specifies the width of the picture border.	3
Border-radius	Shorthand property, set all four Border-*-radius properties.	3
Border-top-left-radius	Defines the shape in the upper-left corner of the border.	3
Border-top-right-radius	Defines the shape in the lower-right corner of the border.	3
Box-decoration-break		3
Box-shadow	Add one or more shadows to the box.	3

Box Property

Properties	Description	CSS
Overflow-x	If the content overflows the element content area, crop the left/right edge of the content.	3
Overflow-y	If the content overflows the element content area, the top/bottom edge of the content is clipped.	3
Overflow-style	Specifies the preferred scrolling method for overflow elements.	3
Rotation	Rotates the element around the point defined by the Rotation-point property.	3
Rotation-point	Defines the offset point at the edge of the left border on the distance.	3

Color Property

Properties	Description	CSS
Color-profile	Flags that specify bookmarks.	3
Opacity	Specifies the level of the bookmark.	3
Rendering-intent	Specifies the target of the bookmark link.	3

Content for Paged Media properties

Properties	Description	CSS
Bookmark-label	Flags that specify bookmarks.	3
Bookmark-level	Specifies the level of the bookmark.	3
Bookmark-target	Specifies the target of the bookmark link.	3
Float-offset	Places the element in the opposite direction where the float property is normally placed.	3
Hyphenate-after	Specifies the minimum number of characters after a hyphen in a hyphen word.	3
Hyphenate-before	Specifies the minimum number of characters before a hyphen in a hyphen word.	3
Hyphenate-character	Specifies the string to display when a word breaker occurs.	3
Hyphenate-lines	Indicates the maximum number of consecutive hyphenation lines in an element.	3
Hyphenate-resource	Specifies the external resources (comma-delimited list) that help the browser determine the hyphenation point.	3
Hyphens	Sets how the word is split to improve the layout of the paragraph.	3
Image-resolution	Specifies the correct resolution of the image.	3
Marks	Add crop marks or cross marks to the document.	3
String-set		3

CSS Dimension Properties (Dimension)

Properties	Description	CSS
Height	Sets the height of the element.	1
Max-height	Sets the maximum height of the element.	2
Max-width	Sets the maximum width of the element.	2
Min-height	Sets the minimum height of the element.	2
Min-width	Sets the minimum width of the element.	2
Width	Sets the width of the element.	1

Retractable Frame properties (flexible box)

Properties	Description	CSS
Box-align	A child element that specifies how the alignment box is aligned.	3
Box-direction	Specifies the direction in which the child elements of the box are displayed.	3
Box-flex	Specifies whether the child elements of the box are scalable.	3
Box-flex-group	Assigns a scalable element to a flexible grouping.	3
Box-lines	Specifies whether line breaks are displayed when the space of the parent element box is exceeded.	3
Box-ordinal-group	Specifies the order in which the child elements of the box are displayed.	3
Box-orient	Specifies whether the child elements of the box should be arranged horizontally or vertically.	3
Box-pack	Specifies the horizontal position in the horizontal box or the vertical position in the vertical box.	3

CSS Fonts Property (font)

Properties	Description	CSS
Font	Set all font properties in a declaration.	1
Font-family	Specifies the font family for the text.	1
Font-size	Specifies the font size of the text.	1
Font-size-adjust	Specifies the aspect value for the element.	2
Font-stretch	Shrinks or stretches the current font family.	2
Font-style	Specifies the font style for the text.	1
Font-variant	Specifies whether to display text in a small capital letter font.	1
Font-weight	Specifies the weight of the font.	1

Content generation (Generated contents)

Properties	Description	CSS
Content	Use with: Before and: After pseudo-elements to insert the generated content.	2
Counter-increment	Increments or decrements one or more counters.	2
Counter-reset	Create or reset one or more counters.	2
Quotes	Sets the quotation mark type for a nested reference.	2
Crop	Allows the substituted element to be just the rectangular area of the object, not the entire object.	3
Move-to	Remove the element from the stream, and then reinsert it at the point later in the document.	3
Page-policy	Determines whether an element is applied to a counter or a string value based on the occurrence of the page.	3

Grid Properties

Properties	Description	CSS
Grid-columns	Specifies the width of each column in the grid.	3
Grid-rows	Specifies the height of each column in the grid.	3

Hyperlink Property

Properties	Description	CSS
Target	Set Target-name, Target-new, and Target-position properties.	3
Target-name	Specifies where to open the link (the target of the link).	3
Target-new	Specifies whether the target link opens in a new window or in a new tab in an existing window.	3
Target-position	Specifies where to place the new target link.	3

CSS Listing Properties (list)

Properties	Description	CSS
List-style	Set all the list properties in a declaration.	1
List-style-image	Sets the image as a list item marker.	1
List-style-position	Sets the placement position of the list item marker.	1
List-style-type	Sets the type of the list item marker.	1
Marker-offset		2

CSS margin Properties (margin)

Properties	Description	CSS
Margin	Set all margin properties in a declaration.	1
Margin-bottom	Sets the bottom margin of the element.	1
Margin-left	Sets the left margin of the element.	1
Margin-right	Sets the right margin of the element.	1
Margin-top	Sets the top margin of the element.	1

Marquee Property

Properties	Description	CSS
Marquee-direction	Sets the direction of the moved content.	3
Marquee-play-count	Sets how many times the content moves.	3
Marquee-speed	Sets how quickly content scrolls.	3
Marquee-style	Sets the style of the mobile content.	3

Multi-column properties (multi-column)

Properties	Description	CSS
Column-count	Specifies the number of columns that the element should be delimited.	3
Column-fill	Specifies how columns are populated.	3
Column-gap	Specifies the interval between columns.	3
Column-rule	Sets the shorthand property for all column-rule-* properties.	3
Column-rule-color	Specifies the color of the rule between columns.	3
Column-rule-style	Specifies the style of the rule between columns.	3
Column-rule-width	Specifies the width of the rule between columns.	3
Column-span	Specifies the number of columns that the element should span.	3
Column-width	Specifies the width of the column.	3
Columns	Specifies the shorthand properties for setting column-width and Column-count.	3

CSS Inner margin Properties (Padding)

Properties	Description	CSS
Padding	Set all padding properties in a declaration.	1
Padding-bottom	Sets the bottom padding of an element.	1
Padding-left	Sets the left padding of the element.	1
Padding-right	Sets the right padding for an element.	1
Padding-top	Sets the top padding of an element.	1

Paged Media Properties

Properties	Description	CSS
Fit	Shows how to scale a replaced element that is not auto for both the width and Height properties.	3
Fit-position	Defines the alignment of objects within the box.	3
Image-orientation	Specifies that the user agent is rotated in the clockwise direction of the image.	3
Page	Specifies the page-specific type of element that should be displayed.	3
Size	Specifies that the page content contains the dimensions and orientation of the box.	3

CSS positioning properties (positioning)

Properties	Description	CSS
Bottom	Sets the offset between the margin boundary under the anchor element and the lower boundary of its containing block.	2
Clear	Specifies which side of the element does not allow other floating elements.	1
Clip	Trims an absolutely positioned element.	2
Cursor	Specifies the type (shape) of the cursor to be displayed.	2
Display	Specifies the type of box that the element should generate.	1
Float	Specifies whether the box should float.	1
Left	Sets the offset between the left margin boundary of the anchor element and the left boundary of its containing block.	2
Overflow	Specifies what happens when the content overflows the element box.	2
Position	Specifies the positioning type of the element.	2
Right	Sets the offset between the right margin boundary of the anchor element and the right boundary of its containing block.	2
Top	Sets the offset between the top margin boundary of the anchor element and the upper boundary of its containing block.	2
Vertical-align	Sets the vertical alignment of the element.	1
Visibility	Specifies whether the element is visible.	2
Z-index	Sets the stacking order of elements.	2

CSS Printing properties (print)

Properties	Description	CSS
Orphans	Sets the minimum number of rows that must be retained at the bottom of the page when pagination occurs within an element.	2
Page-break-after	The paging behavior after the element is set.	2
Page-break-before	The paging behavior before the element is set.	2
Page-break-inside	Sets the paging behavior inside an element.	2
Widows	Sets the minimum number of rows that must be retained at the top of the page when pagination occurs within an element.	2

CSS Table Properties (table)

Properties	Description	CSS
Border-collapse	Specifies whether to merge table borders.	2
Border-spacing	Specifies the distance between adjacent cell borders.	2
Caption-side	Specifies the position of the table title.	2
Empty-cells	Specifies whether to display borders and backgrounds on empty cells in the table.	2
Table-layout	Sets the layout algorithm for the table.	2

CSS literal properties (text)

Properties	Description	CSS
Color	Sets the color of the text.	1
Direction	Specifies the direction of the text/direction of writing.	2
Letter-spacing	Sets the character spacing.	1
Line-height	Sets the row height.	1
Text-align	Specifies the horizontal alignment of the text.	1
Text-decoration	Specifies the adornment effect added to the text.	1
Text-indent	Specifies indentation for the first line of a text block.	1
Text-shadow	Specifies the shadow effect added to the text.	2
Text-transform	Controls the case of text.	1
Unicode-bidi	Sets the text orientation.	2
White-space	Specifies how to handle whitespace in an element.	1
Word-spacing	Sets the word spacing.	1
Hanging-punctuation	Specifies whether the punctuation character is outside the wireframe.	3
Punctuation-trim	Specifies whether punctuation characters are trimmed.	3
Text-align-last	Sets how to align the last line or the row immediately preceding the Force line break.	3
Text-emphasis	Applies a focus marker to the text of the element and the foreground color of the highlighted marker.	3
Text-justify	Specifies the alignment method that is used when text-align is set to "justify".	3
Text-outline	Specifies the outline of the text.	3
Text-overflow	Specifies what happens when the text overflows the containing element.	3
Text-shadow	Adds a shadow to the text.	3
Text-wrap	Specifies the line-wrapping rules for text.	3
Word-break	Rules for non-Chinese-Japanese-Korean text.	3
Word-wrap	Allows splitting of long, indivisible words and wrapping to the next line.	3

2d/3d Conversion Properties (Transform)

Properties	Description	CSS
Transform	Applies a 2D or 3D conversion to an element.	3
Transform-origin	Allows you to change the position of the element being converted.	3
Transform-style	Specifies how nested elements are displayed in 3D space.	3
Perspective	Specifies the perspective effect of the 3D element.	3
Perspective-origin	Specifies the bottom position of the 3D element.	3
Backface-visibility	Defines whether the element is visible when it is not facing the screen.	3

Transition Properties (Transition)

Properties	Description	CSS
Transition	Shorthand property, which is used to set four transition properties in one property.	3
Transition-property	Specifies the name of the CSS property that the transition is applied to.	3
Transition-duration	Defines the time that the transition effect takes.	3
Transition-timing-function	A time curve that specifies the transition effect.	3
Transition-delay	Specifies when the transition effect begins.	3

User interface Properties (user-interface)

Properties	description	CSS
appearance	allows you to set elements as the appearance of a standard user interface element	3
box-sizing	allows you to define exactly what is appropriate for a particular area.	3
icon	provides the creator with the ability to set element styles using the icon equivalents.	3
nav-down	specifies where to navigate when using the Arrow-down navigation key.	3
nav-index	sets the tab control order for the element.	3
nav-left	specifies where to navigate when using the Arrow-left navigation key.	3
nav-right	specifies where to navigate when using the Arrow-right navigation key.	3
nav-up	specifies where to navigate when using the Arrow-up navigation key.	3
outline-offset	offsets the contour and draws the outline at the edge of the bounding rectangle.	3
Resize	Specifies whether the dimensions of the element can be adjusted by the user.	3

CSS Reference manual