CSS Properties Complete Reference
CSS property is used to set the style or assign behavior of HTML elements. The CSS property contains two parts, property_name, and property_value. The property_value is enclosed within double quotes (” “).
Example: In this example, we will see the use of many properties usage, all the keywords mentioned inside of { and } braces are properties.
HTML
<!DOCTYPE html><html><head> <style> #myDIV { width: 400px; height: 299px; background-color: green; background-repeat: no-repeat; background-image: background-blend-mode: normal; background-size: contain; } </style></head><body> <div id="myDIV"></div></body></html> |
Output:
CSs Properties: The list of complete CSS properties is given below.
|
Properties |
Descriptions |
|---|---|
| @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. |
Please Login to comment...