@charset Rule | Specifies the character encoding used in the style sheet. | |
@keyframes Rule | CSS @keyframes specify the animation rule. | |
@media Rule | Set of styles for different media/devices using the Media Queries. | |
align-content | It is used to change the behavior of the flex-wrap property. | |
align-items | Set the alignment of items inside the flexible container or in the given window. | |
align-self | Align the selected items in the flexible container. | |
all | Set all the elements’ values to their initial or inherited values. | |
animation-delay | Specifies the delay for the start of an animation. | |
animation-direction | It defines the direction of the animation. | |
animation-duration | It defines how long an animation should take to complete one cycle. | |
animation-fill-mode | It defines how styles are applied before and after animation. | |
animation-iteration-count | This specifies the number of times the animation will be repeated. | |
animation-name | This specifies the name of the @keyframes describing the animation. | |
animation-play-state | It specifies whether the animation is running or paused. | |
animation-timing-function | It specifies how animation makes transitions through keyframes. | |
backface-visibility | Decides whether the back face of an element might be visible or not to the user. | |
background-attachment | Sets whether a background image scrolls with the rest of the page or it will be fixed. | |
background-blend-mode | Defines the blending mode of each background layer of the webpage. | |
background-clip | This property defines how far the background color or image should extend. | |
background-color | Set the background color of an element. | |
background-image | Set background images for an element, You can set one or more images as well. | |
background-origin | Adjusting the background image of the webpage. | |
background-position | Sets the initial position for the background image. | |
background-repeat | It is used to repeat the background image horizontally and vertically. | |
background-size | It set the size of the background image. | |
border | This is used to style the border of an element. | |
border-bottom | Set all bottom border properties in one line. | |
border-bottom-color | Set the color of the bottom border of an element. | |
border-bottom-left-radius | Define the radius of the bottom left corner of the border. | |
border-bottom-right-radius | Define the radius of the right bottom corner of the border of a given element. | |
border-bottom-style | Set the style of the bottom border of an element. | |
border-bottom-width | Set a specific width to the bottom border of an element. | |
border-collapse | Set the borders of the cell present inside the table and tells.. | |
border-color | Set a color to the border of an element. | |
border-image | It creates a border using an image instead of a normal border. | |
border-image-outset | It is a shorthand property used to specify the distance. | |
border-image-repeat | It is used to scaling and tiling the border images. | |
border-image-slice | It divides or slices an image specified by the border-image-source property. | |
border-image-source | It specifies the image source which is to be set as the border of an element. | |
border-image-width | Set the width of the border image. It can be set by providing multiple values. | |
border-left | Set the width, style, and color of the left border. | |
border-left-color | Set the color of the left-border in an Element. | |
border-left-style | Set the style of the left border of an element. | |
border-left-width | Sets the width of the left-border of an Element. | |
border-radius | It is used to round the corners of the outer border edges of an element. | |
border-right-color | Set the color of the right border in an Element. | |
border-right | Set the width, style, and color of the right border. | |
border-right-style | Set the style of the right border of an element.. | |
border-right-width | Set the width of right-border of an element. | |
border-top-color | Set the color of the top border in an Element. | |
border-top | Set the width, style, and color of the top border. | |
border-top-left-radius | It specifies the radius of the top left border corner of an element. | |
border-top-right-radius | It specifies the radius of the top right border corner of an element. | |
border-top-style | It specifies the style of the top border. | |
border-top-width | Set a specific width to the top border of an element. | |
border-style | Sets the border line style for all four sides of an element’s border. | |
border-spacing | Set the distance between the borders of neighboring cells in the table. | |
border-width | Set the border line width of all four sides of an element. | |
bottom | It allows the vertical position of an element to be altered. | |
box-shadow | Set a shadow-like effect to the frames of an element. | |
box-decoration-break | Control the box decoration after the fragmentation of the paragraph. | |
box-sizing | Defines how the user should calculate the total width and height of an element. | |
caption-side | It specifies the position where the table caption is placed. It is used in HTML Tables. | |
caret-color | Set the color of the cursor in inputs, text area, or other editable areas. | |
clear | Specify which side of floating elements are not allowed to float. | |
clip | Specify a rectangle to clip an absolutely positioned element. | |
column-count | Divide a portion of content inside any HTML element into a given number of columns. | |
column-fill | Specify whether the columns will be filled in a balanced manner or not. | |
column-gap | Specify the amount of gap between the columns. | |
columns | Set the number of columns and the width of the columns. | |
column-rule-color | Set the color of the rule between the column. | |
column-rule | Define the width, style, and color of the rules between the columns. | |
column-rule-style | Set the style of the column rule between the columns on a multi-column layout. | |
column-rule-width | Set the width of the column rule. | |
column-span | Sets the number of columns an element can span across. | |
column-width | It is used to define the width of the columns. | |
content | Generate the content dynamically (during run time). | |
cursor | Specify the mouse cursor to be displayed while pointing to an element. | |
counter-increment | It is used to increment/decrement the value of a counter. | |
counter-reset | Create or reset the CSS counter for elements. | |
direction | Define the direction of text/writing within any block element | |
display | Define the components(div, hyperlink, heading, etc) are going to be placed on the web page | |
empty-cells | It specifies whether to display the borders or not in the empty cells in a table. | |
filter | Set the visual effect of an element. | |
flex | It is the combination of flex-grow, flex-shrink, and flex-basis properties. | |
flex-basis | Set the initial size of the flexible item. | |
flex-direction | Set the direction of the flexible items of a div. | |
flex-flow | It is used to make the flexible item reversible and wrapped if required. | |
flex-grow | Specifies how much the item will grow compared to other items inside that container. | |
flex-shrink | Specifies how much the item will shrink compared to other items inside that container. | |
flex-wrap | It specifies whether flex items are forced into a single line or wrapped onto multiple lines. | |
font-family | Set the font of an element. | |
font-kerning | Control the usage of the Kerning Information that has been stored in the Font | |
font-size-adjust | Adjusts the font size based on the height of the lowercase. | |
font-size | Set the font size of the text in an HTML document. | |
font-stretch | Set the text wider or narrower. | |
font-style | Style the given particular text in a normal, italic, or oblique face from its font family. | |
font-variant | Convert all lowercase letters into uppercase letters. | |
font-weight | Set the weight or thickness of the font being used with the HTML Text. | |
grid | Offers a grid-based layout system, with rows and columns | |
grid-area | Set a grid item size and location in a grid layout. | |
grid-auto-columns | Specify the size for the columns of implicitly generated grid containers. | |
grid-auto-flow | It specifies exactly how auto-placed items get flowed into the grid. | |
grid-auto-rows | Specify the size for the rows of implicitly generated grid containers. | |
grid-column | Specify a grid item’s size and location within a grid column. | |
grid-column-end | Explains the number of columns an item will span, or on which column line the item will end. | |
grid-column-gap | Set the gap size between the columns in a grid layout. | |
grid-column-start | Set on which column the line item will start. | |
grid-gap | Sets the gap size between the rows and columns in a grid layout. | |
grid-row | Specify the size and location in a grid layout. | |
grid-row-end | it defines the grid items’ end position. | |
grid-row-gap | Set the gap size between the grid elements. | |
grid-row-start | Defines the grid items’ start position. | |
grid-template | It defines grid columns, rows, and areas. | |
grid-template-areas | It specifies the area within the grid layout. | |
grid-template-columns | Set the number of columns and size of the columns of the grid. | |
grid-template-rows | Set the number of rows and height of the rows in a grid. | |
hanging-punctuation | Pprovides web designers some upper hand over typography on the webpage. | |
height | Set the height of an element. | |
hyphens | It defines how the words should be hyphenated to create soft wrap opportunities within words. | |
isolation | Define whether an element must create new stacking content. | |
justify-content | Alignes the flexible containers item when there is available space. | |
left | It specifies the horizontal position of a positioned element | |
letter-spacing | Set the spacing behavior between text characters . | |
line-height | Set the amount of space used for lines, such as in the text. | |
list-style | It is used to set the list style. | |
list-style-image | Set images that will be used as the list item marker. | |
list-style-position | Specifies the position of the marker box with respect to the principal block box. | |
list-style-type | It specifies the appearance(such as a disc, character, or custom counter style) of the list item marker. | |
margin-bottom | Specify the margin to be used on the bottom of an element. | |
margin-left | Set the width of the margin on the left of the desired element. | |
margin-right | Set the right margin of an element. | |
margin-top | Set the top margin of an element. | |
max-height | Set the maximum height of an element. | |
max-width | Define the maximum width of an element. | |
min-height | Set the minimum height of an element. | |
min-width | Define the minimum width of an element. | |
mix-blend-mode | Define the minimum width of an element. | |
mask-image | To set the mask of an image for a particular element. | |
object-fit | Specify the blending of an element’s background with the element’s parent. | |
object-position | Specifies how an image or video element is positioned with x/y coordinates inside its content box. | |
order | Set the order of each flexible item in relation to other items inside the flexible container. | |
outline-color | Sets the outline color of an element | |
outline-offset | Sets the amount of space between an outline and the edge or border of an element. | |
outline-style | Set the appearance of the outline of an element. | |
outline-width | It specifies the width of this outline for a specific element. | |
overflow-x | It specifies whether to add a scroll bar horizontally. | |
overflow-y. | It specifies whether to add a scroll bar vertically. | |
padding-bottom | Set the padding on the bottom of an element. | |
padding-left | Set the padding on the left side of an element. | |
padding-right | Set the padding on the right-side of an element. | |
padding-top | Set the padding on the top of an element. | |
page-break-after | Add a page-break after the stated element. | |
page-break-before | Add a page-break-before the specified element. | |
page-break-inside | Add page breaks inside the element to which it is applied while printing. | |
perspective | Give perspective to 3D objects. | |
perspective-origin | Define the position at which the user is looking 3D object i.e. the vanishing point of the 3D object. | |
pointer-events | Specify whether an element show pointer events and whether or not show on the pointer. | |
quotes | Set the quotation mark for quotations used in the sentence. | |
resize | Resize the element according to user requirements. | |
right | Affects the horizontal position of the element as but has no effect on non-positioned elements. | |
scroll-behavior | Set smooth animation of scroll position instead of a scroll jump | |
cssText | Set or return the value of an inline style declaration of an element. | |
length | Find the number of style declarations used for the particular element. | |
parentRule | Return the CSS Rule Object that represents a CSS rule-set that contains a selector and declaration block. | |
table-layout | It is used to display the layout of the table. | |
tab-size | It specifies the width of a tab character. | |
text-align | Set the horizontal alignment of text in an element.ie. | |
text-align-last | Set the last line of the paragraph just before the line break. | |
text-decoration | It is used to “decorate” the content of the text. | |
text-decoration-color | Set the color of decorations(overlines, underlines, and line-throughs) over the text. | |
text-decoration-line | Sets various kinds of text-decoration. | |
text-decoration-style | Set the text decoration of an element. | |
text-indent | Set the indentation of the first line in each block of text. | |
text-justify | Set the text-align to justify, which spreads the words into a complete and fixed-width line. | |
text-overflow | Specify that some text has overflown and is hidden from view. | |
text-transform | Control the capitalization of the text. | |
text-shadow | Add shadows to the text. | |
top | Set the top position of an element. The top property varies with the position of the element. | |
transform | Change the coordinate space of the visual formatting model. | |
CSS transition Property | It is used to make some transition effects. | |
transition-delay | Define the time to start the transition. | |
transition-duration | Set the time duration (in seconds or milliseconds) to complete the transition effect. | |
transition-property | Display the change in the property of an element over a specified duration. | |
unicode-bidi | Determine how the bidirectional text is handled in a document. | |
user-select | It specifies whether the text can be selected by the user or not. | |
vertical-align | Set the vertical alignment of the table box or inline element. | |
visibility | Specify whether an element is visible or not. | |
white-space | Control the text wrapping and white-spacing./td> | |
word-break | Specify how to break the word when the word reached at end of the line. | |
word-spacing | Increase or decreases the white space between words. | |
word-wrap | It breaks long words and wraps them into the next line. | |
will-change | Specify the browser how an element is expected to change. | |
writing-mode | Specify whether the lines of text are laid out horizontally or vertically. | |
z-index | Define the order of elements if they overlap with each other. | |