CSS Properties Complete Reference
Last Updated :
07 Jan, 2025
Improve
CSS properties are the foundation of web design, used to style and control the behaviour of HTML elements. They define how elements look and interact on a webpage.
- Used to control layout, colors, fonts, spacing, and animations on web pages.
- It is essential for making web pages responsive and accessible across devices.
- Help maintain consistency and efficiency in web design and development.
Example: In this example, we will see the use of many properties usage, all the keywords mentioned inside of { and } braces are properties.
<style>
#myDIV {
width: 400px;
height: 299px;
background-color: green;
background-repeat: no-repeat;
background-image:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
background-blend-mode: normal;
background-size: contain;
}
</style>
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. |
Best Practices for CSS Properties
- Always use descriptive names for classes and IDs to maintain readability.
- Group similar properties together to enhance code organization.
- Use shorthand properties where possible to reduce redundancy.
CSS Properties – FAQs
How can I find a list of all CSS properties?
You can refer to the CSS Properties Complete Reference for a comprehensive list of all properties with examples and browser support.
What is the difference between class and id in CSS?
The class selector is used to apply styles to multiple elements, while the id selector is unique and used to target a single element on the page.
Can CSS properties be used to animate elements?
Yes, CSS properties like transform, opacity, and background-color can be animated to create smooth transitions.
How do I handle browser compatibility with CSS properties?
Check browser support and use vendor prefixes for properties that may not be supported across all browsers.
Can I use CSS properties to create responsive designs?
Yes, CSS properties like flexbox, grid, and media queries are essential for creating responsive layouts.
