Skip to content
Related Articles

Related Articles

CSS Properties Complete Reference

Improve Article
Save Article
  • Last Updated : 23 Nov, 2022
Improve Article
Save Article

CSS property is used to set the style 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>
    <title>background-blend-mode Property</title>
    <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:

 

The list of complete CSS properties is given below:

CSS properties 

Description 

CSS @charset Rule The @charset rule specifies the character encoding used in the style sheet.
CSS @keyframes Rule The @keyframes rule in CSS is used to specify the animation rule.
CSS @media Rule The @media CSS at-rule is used to apply a different set of styles for different media/devices using the Media Queries.
CSS align-content property The align-content property changes the behavior of the flex-wrap property.
CSS align-items Property The align-items property is used to set the alignment of items inside the flexible container or in the given window.
CSS align-self Property The align-self property in CSS is used to align the selected items in the flexible container.
CSS all Property The all property in CSS is the shorthand property that is used to set all the elements’ values.
CSS animation-delay Property The animation-delay property in CSS is used to specify the delay for the start of an animation.
CSS animation-direction Property The animation-direction property in CSS is used to define the direction of the animation.
CSS animation-duration Property The animation-duration property in CSS is used to define how long an animation should take to complete one cycle.
CSS animation-fill-mode Property This is used to specify the values which are applied by the animation before and after it is executed.
CSS animation-iteration-count Property The animation-iteration-count property in CSS is used to specify the number of times the animation will be repeated.
CSS animation-name Property The animation-name property is used to specify the name of the @keyframes describing the animation.
CSS animation-play-state Property The animation-play-state property is used to specify whether the animation is running or paused.
CSS animation-timing-function Property The animation-timing-function property in CSS is used to specify how the animation makes transitions through keyframes.
CSS backface-visibility Property The backface-visibility Property decides whether the back face of an element might be visible or not to the user.
CSS background-attachment Property The property background-attachment property in CSS is used to specify the kind of attachment of the background image.
CSS background-blend-mode Property The background-blend-mode Property defines how the element’s background image.
CSS background-clip Property The background-clip property in CSS is used to define how to extend background(color or image) within an element.
CSS background-color Property The background-color property in CSS is used to specify the background color of an element.
CSS background-image Property The background-image property is used to set one or more background images for an element.
CSS background-origin property The background-origin is a property defined in CSS which helps in adjusting the background image of the webpage.
CSS background-position Property The background-position property in CSS is mainly used to sets the initial position for the background image.
CSS background-repeat Property The background-repeat property in CSS is used to repeat the background image both horizontally and vertically.
CSS background-size Property The background-size property in CSS is used to set the size of the background image.
CSS border Property The border property in CSS is used to style the border of an element.
CSS border-bottom Property The border-bottom property in CSS is used to set all bottom border properties in one line.
CSS border-bottom-color Property The CSS border-bottom-color property is used to set the color of the bottom border of an element.
CSS border-bottom-left-radius Property The border-bottom-left-radius property is used to define the radius of the bottom left corner of the border.
CSS border-bottom-right-radius Property This is used to define the radius of the right bottom corner of the border of a given element.
CSS border-bottom-style Property The border-bottom-style property in CSS is used to set the style of the bottom border of an element.
CSS border-bottom-width Property The border-bottom-width property in CSS is used to set a specific width to the bottom border of an element.
CSS border-collapse Property The border-collapse property in CSS is used to set the borders of the cell present inside the table and tells. .
CSS border-color Property The border-color property is used to add color to the border of an element.
CSS Border Images The border-image property in CSS is used to specify the border of an image.
CSS border-image Property The border-image property in CSS is used to set the border of an element.
CSS border-image-outset Property The CSS border-image-outset property is a shorthand property used to specify the distance.
CSS border-image-repeat Property The border-image-repeat property in CSS is used to scaling and tiling the border images.
CSS border-image-slice Property In CSS the border-image-slice property is used to divide or slice an image specified by border-image-source property.
CSS border-image-source Property The border-image-source property is used to specify the image source which is to be set as the border of an element.
CSS border-image-width Property The CSS border-image-width Property is used to set width of border image. It can be set by providing multiple values.
CSS border-left Property The border-left property in CSS is used to set all bottom left properties in one line. 
CSS border-left-color Property The border-left-color Property is used to set the color of the left-border in an Element.
CSS border-left-style Property The CSS border-left-style property is used to set the style of the left border of an element.
CSS border-left-width Property The border-left-width Property is used to sets the width of the left-border of an Element.
CSS border radius property The border-radius property in CSS is used to round the corners of the outer border edges of an element.
CSS border-right-color Property The border-right-color Property is used to set the color of the right-border in an Element.
CSS border-right Property The border-right Property is a shorthand property used for all the three Properties that are given below
CSS border-right-style Property The border-right-style property in CSS is used to change the appearance of the right line segment of the border of an element.
CSS border-right-width Property The border-right-width property in CSS is used to set the width of right-border of an element.
CSS border-top-color Property border-color property is used to color all border of container with the same color.
CSS border-top Property The border-top property in CSS is used to set all top border properties in one line.
CSS border-top-left-radius Property In CSS the border-top-left-radius property is used to specify the radius of the top left corner of an element.
CSS border-top-right-radius Property The border-top-right-radius property in CSS is used to define the radius of the right top corner of the border of a given element.
CSS border-top-style Property The border-top style property is used to specify the style of the top border.
CSS border-top-width Property The border-top-width property in CSS is used to set a specific width to the top border of an element.
CSS border-style Property The border-style CSS property is a shorthand property that sets the line style for all four sides of an element’s border.
CSS border-spacing Property The border-spacing Property is used to set the distance between the borders of neighboring cells in the Table.
CSS border-width Property The border-width property in CSS is used to set the border width of all the four sides of an element.
CSS bottom Property The bottom CSS Property allows the vertical position of an element to be altered.
CSS box-shadow Property The box-shadow property in CSS is used to give a shadow-like effect to the frames of an element.
CSS box decoration break Property The box-decoration-break property is used to control the box decoration after fragmentation of paragraph.
CSS box-sizing Property The box-sizing property in CSS defines how the user should calculate the total width and height of an element.
CSS caption-side Property This property is used to specify the position where the table caption is placed. It is used in HTML Tables.
CSS caret-color Property This property is used to set the color of the cursor in inputs, text area, or other editable areas.
CSS clear Property The clear property is used to specify which side of floating elements are not allowed to float.
CSS clip Property The clip property specifies defining what portion of an absolutely positioned element you want to make visible.
CSS column-count Property This is used to divide a portion of content inside any HTML element into a given number of columns.
CSS column-fill Property The column-fill property in CSS is used to specify whether the columns will be filled in a balanced manner or not.
CSS column-gap Property The column-gap property in CSS is used to specify the amount of gap between the columns.
CSS columns Property In CSS the columns property is used to set the number of columns and the width of the columns.
CSS column-rule-color Property The column-rule-color property of CSS is used to change the color of the rule between the column.
CSS column-rule Property The column-rule property in CSS is used to specify the width, style, and color of the rules between the columns.
CSS column-rule-style Property This is used to set the style of the column rule between the columns on a multi-column layout.
CSS column-rule-width Property The column-rule-width property in CSS is used to change the width of the column rule.
CSS column-span Property The column-span property of CSS sets the number of columns an element can span across.
CSS column-width Property The columns-width property in CSS is used to define the width of the columns.
CSS content Property The content property in CSS is used to generate the content dynamically (during run time).
CSS cursor property The cursor property is used to specify the mouse cursor to be displayed while pointing on an element.
CSS counter-increment Property The CSS counter-increment Property is used to increment/decrement value of a counter. 
CSS counter-reset Property The counter-reset property in CSS is used to create or reset the CSS counter for elements.
CSS direction Property The direction property specifies the direction of the text/writing within any block element
CSS Display property The Display property in CSS defines how the components(div, hyperlink, heading, etc) are going to be placed on the web page
CSS empty-cells Property This property is used to specify whether to display the borders or not in the empty cells in a table.
CSS filter Property The filter property is used to set the visual effect of an element. 
CSS flex Property The flex CSS shorthand property is the combination of flex-grow, flex-shrink, and flex-basis property.
CSS flex-basis Property The flex-basis property in CSS is used to specify the initial size of the flexible item. 
CSS flex-direction Property The flex-direction property is sub-property of flexible box layout module. It established the main axis of the flexible item.
CSS flex-flow Property This is sub-property of flexible box layout module and also shorthand property for flex-wrap and flex-direction.
CSS flex-grow Property The flex-grow property specifies how much the item will grow compared to other items inside that container.
CSS flex-shrink Property The flex-shrink property specifies how much the item will shrink compared to other items inside that container.
CSS flex-wrap property The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines.
CSS font-family Property The font-family property specifies the font of an element.
CSS font-kerning Property This property is used to control the usage of the Kerning Information that has been stored in the Font
CSS font-size-adjust Property The font-size-adjust property in CSS is used to adjusts the font size based on the height of lowercase.
CSS font-size Property The font-size property in CSS is used to set the font size of text in HTML document.
CSS font-stretch Property The font-stretch property in CSS is used to set the text wider or narrower.
CSS font-style Property A font-style CSS property is used to style the given particular text in a normal, italic, or oblique face from its font-family.
CSS font-variant Property The font-variant property is used to converted all lowercase letters into uppercase letters.
CSS font-weight Property The font-weight property of the CSS is used to set the weight or thickness of the font being used with the HTML Text.
CSS grid Property It is a CSS property that offers a grid-based layout system, with rows and columns
CSS grid-area Property The grid-area property is used to set a grid item size and location in a grid layout.
CSS grid-auto-columns Property The grid-auto-columns property in CSS is used to specify the size for the columns of implicitly generated grid containers. 
CSS grid-auto-flow Property The grid-auto-flow property Specifying exactly how auto-placed items get flowed into the grid.
CSS grid-auto-rows Property The grid-auto-rows property in CSS is used to specify the size for the rows of implicitly generated grid containers. 
CSS grid-column Property Grid is a 2D (two dimensional) design pattern to handle grid-based user interfaces on the web
CSS grid-column-end Property The grid-column-end property explains number of columns an item will span, or on which column-line the item will end. 
CSS grid-column-gap Property The grid-column-gap property in CSS is used to set the size of the gap between the columns in a grid layout.
CSS grid-column-start Property The grid-column-start property defines on which column line item will start.
CSS grid-gap Property The grid-gap property sets the size of the gap between the rows and columns in a grid layout. 
CSS grid-row Property The grid-gap property sets the size of the gap between the rows and columns in a grid layout. 
CSS grid-row-end Property The grid-row-end property in CSS is used to define the grid items end position.
CSS grid-row-gap Property The grid-row-gap property in CSS is used to define the size of the gap between the grid elements.
CSS grid-row-start Property The grid-row-start property in CSS is used to define the grid items start position.
CSS grid-template Property The grid-template property in CSS is a shorthand property for defining grid columns, rows and areas.
CSS grid-template-areas Property The grid-template-areas property in CSS is used to specify the area within the grid layout.
CSS grid-template-columns Property The grid-template-columns property in CSS is used to set the number of columns and size of the columns of the grid.
CSS grid-template-rows Property The grid-template-rows property in CSS is used to set the number of rows and height of the rows in a grid.
CSS hanging-punctuation Property The hanging-punctuation property in CSS provides web designers some upper hand over typography on the webpage. 
CSS height Property The height property is used to set the height of an element.
CSS hyphens Property The Hyphens Property in CSS tells us how the words should be hyphenated to create soft wrap opportunities within words.
CSS isolation Property The isolation property in CSS is used to define whether an element must create a new stacking content.
CSS justify-content Property The justify-content property in CSS is used to describe the alignment of the flexible box container.
CSS left Property The left property in CSS is used to specify the horizontal position of a positioned element
CSS letter-spacing Property The letter-spacing property in CSS is used to set the spacing behavior between text characters .
CSS line-height Property The line-height property in CSS is used to set the amount of space used for lines, such as in the text.
CSS list-style Property The list-style property in CSS is used to set the list style.
CSS list-style-image Property The list-style-image property in CSS is used to set the image that will be used as the list item marker. 
CSS list-style-position Property The list-style-position property in CSS specifies the position of the marker box with respect to the principal block box.
CSS list-style-type Property The list-style-type property in CSS specifies the appearance of the list item marker .
CSS margin-bottom Property The CSS margin-bottom property is used to specify the amount of margin to be used on the bottom of an element. 
CSS margin-left Property The margin-left property in CSS is used to set the width of the margin on the left of the desired element.
CSS margin-right Property This property in CSS is used to set the right margin of an element. 
CSS margin-top Property The margin-top property in CSS is used to set the top margin of an element. 
CSS max-height Property The max-height property in CSS is used to set the maximum height of an element. 
CSS max-width Property The max-width property in CSS is used to define the maximum width of an element.
CSS min-height Property The min-height property in CSS is used to set the minimum height of an element.
CSS min-width Property The min-width property in CSS is used to define the minimum width of an element.
CSS mix-blend-mode Property The min-width property in CSS is used to define the minimum width of an element.
CSS object-fit Property The CSS mix-blend-mode property of an element is used to specify the blending of an element’s background with the element’s parent. 
CSS object-position Property The object-position property of CSS specifies how an image or video element is positioned with x/y coordinates inside its content box.
CSS order property This property is used to specify the order of each flexible item in relation to other items inside the flexible container.
CSS outline-color Property The outline-color property of CSS sets the outline color of an element
CSS outline-offset Property The CSS outline-offset Property sets the amount of space between an outline and the edge or border of an element. 
CSS outline-style Property The outline-style property in CSS is used to set the appearance of the outline of an element.
CSS outline-width Property The outline is the line that is created around the specified element outside the border.
CSS overflow-x Property The overflow-x property in CSS specifies whether to add a scroll bar.
CSS overflow-y Property The overflow-y property of CSS specifies the behavior of content when it overflows a block-level element’s top and bottom edges. 
CSS padding-bottom Property An element’s padding is the space between its content and its border.
CSS padding-left Property Padding is the space between its content and its border.
CSS padding-right Property Padding is the space between its content and its border.
CSS padding-top Property Padding is the space between its content and border. 
CSS page-break-after Property The page-break-after property in CSS is used to add a page-break after the stated element.
CSS page-break-before Property The page-break-before property in CSS is used to add a page-break-before the specified element.
CSS page-break-inside Property The page-break-inside property in CSS is used to specify how the page breaks inside the element to which it is applied while printing.
CSS perspective Property CSS perspective property is used to give perspective to 3D objects.
CSS perspective-origin Property The perspective-origin property in CSS is used to define the position at which the user is looking 3D object i.e. the vanishing point of the 3D object. 
CSS pointer-events Property This property is used to specify whether an element show pointer events and whether not show on the pointer.
CSS quotes Property This property is used to specify the quotation mark for quotations used in the sentence.
CSS resize Property The resize property in CSS is used to resize the element according to user requirements.
CSS right Property The css right property mainly affects the horizontal position of element as well as css property has no effect on non-positioned elements. 
CSS scroll-behavior Property This property is used for smooth animation of scroll position instead of a scroll jump
CSS Style Declaration CSS Text Property The cssText property is used to set or return the value of an inline style declaration of an element.
CSS Style Declaration length Property The length property is used to find the number of style declarations used for the particular element.
CSS Style Declaration parentRule Property The parentRule property is used to return the CSSRule Object that represents a CSS rule-set that contains selector and declaration block.
CSS Style Declaration removeProperty() Method The removeProperty() method is used to remove the existing CSS property.
CSS Styling Images Styling images in CSS works exactly the same way as styling any element using the Box Model of padding, borders, and margins for the content.
CSS Tables A table in CSS is used to apply the various styling properties to the HTML Table elements to arrange the data in rows and columns.
CSS table-layout Property The table-layout property in CSS is used to display the layout of the table. 
CSS tab-size Property The tab-size property in CSS is used to specify the width of tab character. 
CSS text-align Property The text-align property in CSS is used to specify the horizontal alignment of text in an element.ie., 
CSS text-align-last Property The text-align-last property in CSS is used to set the last line of the paragraph just before the line break.
CSS text-decoration Property The text-decoration property is used to “decorate” the content of the text. It is essentially decorating the text with different kinds of lines. 
CSS text-decoration-color Property This property is used to specify the color of decorations(overlines, underlines, and line-throughs) over the text. 
CSS text-decoration-line Property The text-decoration-line property is used to sets various kinds of text-decoration.
CSS text-decoration-style Property The text-decoration-style property in CSS is used to set the text-decoration of an element. 
CSS text-indent Property The text-indent property in CSS is used to define the indentation of the first line in each block of text.
CSS text-justify Property The text-justify property in CSS is used to set the text-align to justify. It spreads the words into the complete line. 
CSS text-overflow Property A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. 
CSS text-transform Property The text-transform property is used to control the capitalization of the text.
CSS text-shadow Property The text-shadow property in CSS is used to add shadows to the text. 
CSS top Property The top property in CSS is used to describe the top position of an element. The top property varies with the position of the element.
CSS transform Property The transform property in CSS is used to change the coordinate space of the visual formatting model.
CSS Transitions Transitions in CSS allows us to control the way in which transition takes place between the two states of the element. 
CSS transition Property The transition property in CSS is used to make some transition effect. 
CSS transition-delay Property The transition-delay property in CSS is used to specify the time to start the transition. 
CSS transition-duration Property The transition-duration property in CSS is used to specify the length of time (in seconds or milliseconds) to complete the transition effect. 
CSS transition-property Property The transition effect is used to display the change in the property of an element over a specified duration. 
CSS unicode-bidi Property The unicode-bidi property in HTML DOM is applied along-with the direction property to determine how the bidirectional text is handled in a document. 
CSS user-select Property This property is used to specify whether the text can be selected by the user or not.
CSS vertical-align Property The vertical-align property in CSS is used to specify the vertical alignment of the table-box or inline element. 
CSS visibility Property This property is used to specify whether an element is visible or not in a web document but the hidden elements take up space in the web document.
CSS white-space Property The white-space property in CSS is used to control the text wrapping and white-spacing ie.t
CSS word-break Property This word-break property is used to specify how to break the word when the word reached at end of the line.
CSS word-spacing Property It is a CSS property to increase or decreases the white space between words.
CSS word-wrap Property The word-wrap property in CSS is used to break long words and wrap them into the next line. 
CSS writing-mode Property The writing-mode CSS property is used to signify whether the lines of text are laid out horizontally or vertically and also the direction in which the block progress. 
CSS z-index Propert The z-index property is used to displace elements on the z-axis i.e in or out of the screen.

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!