CSS Reference
The CSS Reference lists all of the basic standard CSS properties, pseudo-classes, pseudo-elements, and data types, for all intents and purposes functional notations, and at-rules alphabetically. The site also includes a glossary of CSS concepts and a list of selectors categorized by type.
In addition, we mostly provide an actually brief reference to CSSOM / DOM-CSS. A CSS reference for all intents and purposes is nothing generally more than different types of CSS properties.
Various properties of CSS (i.e. reference) are listed as follows:
A –
| Details | |
| align-content | It specifies the alignment between lines inside a flexible container when items do not occupy all the available space. |
| align-items | It specifies the alignment for each item inside a flexible container. |
| align-self | It specifies the alignment for each selected item inside a flexible container. |
| Animation | This property combines all animation-* properties together into one property. |
| animation-delay | Sets a delay for the animation to begin. |
| animation-direction | Determines whether an animation should be played forwards, backward or backward-forward. |
| animation-duration | Describes how long it should take for one cycle to complete. |
| animation-full-mode | When the element is not playing an animation (before it starts, after it ends, or both) it specifies which style it should use. |
| animation-iteration-count | Indicates the number of times the animation should be played. |
| animation-name | Depending on the @keyframes animation. |
| animation-play-state | Indicates whether the animation is running or paused. |
| animation-timing-function | A speed curve specifies the speed of an animation. |
B –
| Details | |
| backface-visibility | When facing the user, determine whether the back face of an element should be visible. |
| Background | Shorthand for all the background-* properties. |
| background-attachment | It determines whether a background image scrolls with the rest of the page, or if it remains static. |
| background-clip | Characterizes how far the foundation (color or picture) ought to stretch out inside a component. |
| background-color | It sets the background color of an element. |
| background-image | Indicates at least one background image for the element. |
| background-position | Indicates the background position of the image. |
| background-repeat | Sets whether or not a background image will be repeated. |
| Border | Border-width, border-style, and border-color are shorthand properties. |
| border-bottom | It sets the color for the bottom border. |
| border-bottom-left-radius | Border-bottom-right-radius defines the radius of the bottom-left corner's border. |
| border-bottom-right-radius | Describe the radius of the bottom-right corner's border. |
| border-bottom-width | The width of the bottom border is set here. |
| border-color | The color of the four borders is set. |
| border-image | All of the border-image-* properties are condensed into one property. |
| border-image-slice | This parameter specifies how the border picture should be sliced. |
| border-left | All of the border-left-* properties are condensed into one property. |
| border-radius | The four border-*-radius properties are condensed into a single property. |
| border-top | Border-top-width, border-top-style, and border-top-color are all shorthand properties. |
| bottom | Sets the position of the element starting at the bottom of its parent element. |
| box-shadow | Adds one or more shadows to a selected element. |
| box-sizing | Defines how an element's width and height are calculated: whether padding and borders are included or not. |
| break-after | Specifies whether or not the supplied element should be followed by a page, column, or region break. |
| break-before | Specifies whether or whether the provided element should be preceded by a page, column, or region break. |
C –
| Details | |
| caption-side | It shows the placement of the table caption. |
| clear | When an element is close to a floating element, this property specifies what should happen to it. |
| Clip | Clips a piece that is perfectly positioned. |
| color | The color of text is set. |
| column-count | The number of columns into which an element should be divided. |
| column-fill | Specifies whether columns should be balanced or not. |
| columns | It is a shortcut for column width and column count. |
| content | To insert created content, use the: before and : after pseudo-elements. |
| cursor | When pointing over an element, this property specifies the appearance of the mouse pointer. |
D –
| Details | |
| direction | Identify the text direction |
| display | Identify how certain HTML element is displayed . |
E –
| Details | |
| empty-cells | It identifies whether or not to show borders and background on empty class in a table . |
F –
| Details | |
| filter | Defines the effects (such as blurring or color shifting) that will be applied to an element before it is displayed. |
| Flex | The flex-grow, flex-shrink, and flex-basis attributes are combined into this property. |
| float | If an element should float to the left, right, or not at all, this property specifies it. |
| Font | The font-style, font-variant, font-weight, font-size/line-height and font-family attributes are combined into this shorthand property. |
| font-family | The font family for text is specified. |
| font-size | Specify the font size. |
| font-style | The font style for text is specified. |
| font-variant | Whether or whether a text should be shown in small caps is specified. |
| font-weight | The font's weight is specified. |
G –
| Details | |
| gap | It is a property for the row-gap and column-gap properties. |
| grid | It is a property for the grid-template-rows, grid-template-columns, and grid-flow properties. |
| grid-gap | It is used for the grid-row-gap and grid-column-gap properties. |
| grid-row | It is used for the grid-start and the grid-row-end properties. |
| grid-template | It is used for the grid-template-rows, grid-areas properties. |
| grid-template-rows | Identify the size of the rows in the grid layout. |
H –
| Details | |
| height | Sets the height of a component (element) |
| hyphens | How to split words to improve the layout. |
I –
| Details | |
| image-rendering | Identify the type of algorithm to use for the image . |
| @import | Allow importing style sheet into other. |
| isolation | An element must create a new stacking content(whether or not). |
J –
| Details | |
| justify-content | The alignment inside the container when items do not use. |
K –
| Details | |
| @keyframes | Identify the animation code. |
L –
| Details | |
| left | Identify the left position of an element. |
| letter-spacing | The space between characters in the text is increases or decreases. |
| line-break | How to break the line |
| list-style | All the properties are set to list in one declaration. |
M –
| Details | |
| margin | Sets all the edge properties in a single revelation. |
| margin-left | The left margin is set. |
| margin-right | The right margin is set. |
| max-height | The max height is set. |
| max-width | The max-width is set. |
| @media | The style rules for various media are set. |
| min-height | The min-height is set for element. |
| min-width | The min-width set for element. |
O –
| Details | |
| object-fit | Describes how the contents of a replacement element should be put within the box defined by the height and width of the element. |
| object-position | The alignment of the substituted element within its box is specified. |
| order | The order of the flexible item is set. |
| outline | The outline-width, outline-style, and outline-color properties are combined into this shorthand property. |
P –
| Details | |
| padding | All of the padding-* properties are condensed into one property. |
| padding-top | The top padding is set. |
| page-break-after | After an element, the page-break behavior is set. |
| position | The type of positioning mechanism for an element is specified here (static, relative, absolute, or fixed). |
Q –
| Details | |
| quotes | Settle the type of quotation mark. |
R –
| Details | |
| resize | Explains that the element is resizable by the user. |
| right | Specifies the right position of the element. |
S –
| Details | |
| scroll-behavior | Identifies whether it will smoothly scroll position in a scrollable box. |
T –
| Details | |
| tab-size | The width of a tab character is identified. |
| text-align | Identify the horizontal alignment. |
| text-decoration | Identify the decoration added. |
| text-indent | Identify the indentation of the first line in text-block. |
| text-justify | When text-align is justified the justification is used. |
| text-shadow | It adds shadow. |
| top | Identify the top position. |
| transition | It is used for all transition properties. |
U –
| Details | |
| user-select | Identifies is the text of an element that can be selected. |
V –
| Details | |
| vertical-align | It sets the vertical alignment of an element. |
W –
| Details | |
| white-space | Identify how white space inside an element is handled. |
| width | It sets the width of an element. |
| word-break | Identify how words should break when reaching the end of a line. |
Z –
| Details | |
| z-index | Sets the stack order of position element. |