Open In App

CSS Properties Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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

Example

@charset Rule Specifies the character encoding used in the style sheet.
Try

@keyframes Rule CSS @keyframes specify the animation rule.
Try

@media Rule Set of styles for different media/devices using the Media Queries.
Try

align-content It is used to change the behavior of the flex-wrap property.
Try

align-items Set the alignment of items inside the flexible container or in the given window.
Try

align-self Align the selected items in the flexible container.
Try

all Set all the elements’ values to their initial or inherited values.
Try

animation-delay Specifies the delay for the start of an animation.
Try

animation-direction It defines the direction of the animation.
Try

animation-duration It defines how long an animation should take to complete one cycle.
Try

animation-fill-mode It defines how styles are applied before and after animation.
Try

animation-iteration-count This specifies the number of times the animation will be repeated.
Try

animation-name This specifies the name of the @keyframes describing the animation.
Try

animation-play-state It specifies whether the animation is running or paused.
Try

animation-timing-function It specifies how animation makes transitions through keyframes.
Try

backface-visibility Decides whether the back face of an element might be visible or not to the user.
Try

background-attachment Sets whether a background image scrolls with the rest of the page or it will be fixed.
Try

background-blend-mode Defines the blending mode of each background layer of the webpage.
Try

background-clip This property defines how far the background color or image should extend.
Try

background-color Set the background color of an element.
Try

background-image Set background images for an element, You can set one or more images as well.
Try

background-origin Adjusting the background image of the webpage.
Try

background-position Sets the initial position for the background image.
Try

background-repeat It is used to repeat the background image horizontally and vertically.
Try

background-size It set the size of the background image.
Try

border This is used to style the border of an element.
Try

border-bottom Set all bottom border properties in one line.
Try

border-bottom-color Set the color of the bottom border of an element.
Try

border-bottom-left-radius Define the radius of the bottom left corner of the border.
Try

border-bottom-right-radius Define the radius of the right bottom corner of the border of a given element.
Try

border-bottom-style Set the style of the bottom border of an element.
Try

border-bottom-width Set a specific width to the bottom border of an element.
Try

border-collapse Set the borders of the cell present inside the table and tells..
Try

border-color Set a color to the border of an element.
Try

border-image It creates a border using an image instead of a normal border.
Try

border-image-outset It is a shorthand property used to specify the distance.
Try

border-image-repeat It is used to scaling and tiling the border images.
Try

border-image-slice It divides or slices an image specified by the border-image-source property.
Try

border-image-source It specifies the image source which is to be set as the border of an element.
Try

border-image-width Set the width of the border image. It can be set by providing multiple values.
Try

border-left Set the width, style, and color of the left border.
Try

border-left-color Set the color of the left-border in an Element.
Try

border-left-style Set the style of the left border of an element.
Try

border-left-width Sets the width of the left-border of an Element.
Try

border-radius It is used to round the corners of the outer border edges of an element.
Try

border-right-color Set the color of the right border in an Element.
Try

border-right Set the width, style, and color of the right border.
Try

border-right-style Set the style of the right border of an element..
Try

border-right-width Set the width of right-border of an element.
Try

border-top-color Set the color of the top border in an Element.
Try

border-top Set the width, style, and color of the top border.
Try

border-top-left-radius It specifies the radius of the top left border corner of an element.
Try

border-top-right-radius It specifies the radius of the top right border corner of an element.
Try

border-top-style It specifies the style of the top border.
Try

border-top-width Set a specific width to the top border of an element.
Try

border-style Sets the border line style for all four sides of an element’s border.
Try

border-spacing Set the distance between the borders of neighboring cells in the table.
Try

border-width Set the border line width of all four sides of an element.
Try

bottom It allows the vertical position of an element to be altered.
Try

box-shadow Set a shadow-like effect to the frames of an element.
Try

box-decoration-break Control the box decoration after the fragmentation of the paragraph.
Try

box-sizing Defines how the user should calculate the total width and height of an element.
Try

caption-side It specifies the position where the table caption is placed. It is used in HTML Tables.
Try

caret-color Set the color of the cursor in inputs, text area, or other editable areas.
Try

clear Specify which side of floating elements are not allowed to float.
Try

clip Specify a rectangle to clip an absolutely positioned element.
Try

column-count Divide a portion of content inside any HTML element into a given number of columns.
Try

column-fill Specify whether the columns will be filled in a balanced manner or not.
Try

column-gap Specify the amount of gap between the columns.
Try

columns Set the number of columns and the width of the columns.
Try

column-rule-color Set the color of the rule between the column.
Try

column-rule Define the width, style, and color of the rules between the columns.
Try

column-rule-style Set the style of the column rule between the columns on a multi-column layout.
Try

column-rule-width Set the width of the column rule.
Try

column-span Sets the number of columns an element can span across.
Try

column-width It is used to define the width of the columns.
Try

content Generate the content dynamically (during run time).
Try

cursor Specify the mouse cursor to be displayed while pointing to an element.
Try

counter-increment It is used to increment/decrement the value of a counter.
Try

counter-reset Create or reset the CSS counter for elements.
Try

direction Define the direction of text/writing within any block element
Try

display Define the components(div, hyperlink, heading, etc) are going to be placed on the web page
Try

empty-cells It specifies whether to display the borders or not in the empty cells in a table.
Try

filter Set the visual effect of an element.
Try

flex It is the combination of flex-grow, flex-shrink, and flex-basis properties.
Try

flex-basis Set the initial size of the flexible item.
Try

flex-direction Set the direction of the flexible items of a div.
Try

flex-flow It is used to make the flexible item reversible and wrapped if required.
Try

flex-grow Specifies how much the item will grow compared to other items inside that container.
Try

flex-shrink Specifies how much the item will shrink compared to other items inside that container.
Try

flex-wrap It specifies whether flex items are forced into a single line or wrapped onto multiple lines.
Try

font-family Set the font of an element.
Try

font-kerning Control the usage of the Kerning Information that has been stored in the Font
Try

font-size-adjust Adjusts the font size based on the height of the lowercase.
Try

font-size Set the font size of the text in an HTML document.
Try

font-stretch Set the text wider or narrower.
Try

font-style Style the given particular text in a normal, italic, or oblique face from its font family.
Try

font-variant Convert all lowercase letters into uppercase letters.
Try

font-weight Set the weight or thickness of the font being used with the HTML Text.
Try

grid Offers a grid-based layout system, with rows and columns
Try

grid-area Set a grid item size and location in a grid layout.
Try

grid-auto-columns Specify the size for the columns of implicitly generated grid containers.
Try

grid-auto-flow It specifies exactly how auto-placed items get flowed into the grid.
Try

grid-auto-rows Specify the size for the rows of implicitly generated grid containers.
Try

grid-column Specify a grid item’s size and location within a grid column.
Try

grid-column-end Explains the number of columns an item will span, or on which column line the item will end.
Try

grid-column-gap Set the gap size between the columns in a grid layout.
Try

grid-column-start Set on which column the line item will start.
Try

grid-gap Sets the gap size between the rows and columns in a grid layout.
Try

grid-row Specify the size and location in a grid layout.
Try

grid-row-end it defines the grid items’ end position.
Try

grid-row-gap Set the gap size between the grid elements.
Try

grid-row-start Defines the grid items’ start position.
Try

grid-template It defines grid columns, rows, and areas.
Try

grid-template-areas It specifies the area within the grid layout.
Try

grid-template-columns Set the number of columns and size of the columns of the grid.
Try

grid-template-rows Set the number of rows and height of the rows in a grid.
Try

hanging-punctuation Pprovides web designers some upper hand over typography on the webpage.
Try

height Set the height of an element.
Try

hyphens It defines how the words should be hyphenated to create soft wrap opportunities within words.
Try

isolation Define whether an element must create new stacking content.
Try

justify-content Alignes the flexible containers item when there is available space.
Try

left It specifies the horizontal position of a positioned element
Try

letter-spacing Set the spacing behavior between text characters .
Try

line-height Set the amount of space used for lines, such as in the text.
Try

list-style It is used to set the list style.
Try

list-style-image Set images that will be used as the list item marker.
Try

list-style-position Specifies the position of the marker box with respect to the principal block box.
Try

list-style-type It specifies the appearance(such as a disc, character, or custom counter style) of the list item marker.
Try

margin-bottom Specify the margin to be used on the bottom of an element.
Try

margin-left Set the width of the margin on the left of the desired element.
Try

margin-right Set the right margin of an element.
Try

margin-top Set the top margin of an element.
Try

max-height Set the maximum height of an element.
Try

max-width Define the maximum width of an element.
Try

min-height Set the minimum height of an element.
Try

min-width Define the minimum width of an element.
Try

mix-blend-mode Define the minimum width of an element.
Try

mask-image To set the mask of an image for a particular element.
Try

object-fit Specify the blending of an element’s background with the element’s parent.
Try

object-position Specifies how an image or video element is positioned with x/y coordinates inside its content box.
Try

order Set the order of each flexible item in relation to other items inside the flexible container.
Try

outline-color Sets the outline color of an element
Try

outline-offset Sets the amount of space between an outline and the edge or border of an element. 
Try

outline-style Set the appearance of the outline of an element.
Try

outline-width It specifies the width of this outline for a specific element.
Try

overflow-x It specifies whether to add a scroll bar horizontally.
Try

overflow-y. It specifies whether to add a scroll bar vertically.
Try

padding-bottom Set the padding on the bottom of an element.
Try

padding-left Set the padding on the left side of an element.
Try

padding-right Set the padding on the right-side of an element.
Try

padding-top Set the padding on the top of an element.
Try

page-break-after Add a page-break after the stated element.
Try

page-break-before Add a page-break-before the specified element.
Try

page-break-inside Add page breaks inside the element to which it is applied while printing.
Try

perspective Give perspective to 3D objects.
Try

perspective-origin Define the position at which the user is looking 3D object i.e. the vanishing point of the 3D object. 
Try

pointer-events Specify whether an element show pointer events and whether or not show on the pointer.
Try

quotes Set the quotation mark for quotations used in the sentence.
Try

resize Resize the element according to user requirements.
Try

right Affects the horizontal position of the element as but has no effect on non-positioned elements.
Try

scroll-behavior Set smooth animation of scroll position instead of a scroll jump
Try

cssText Set or return the value of an inline style declaration of an element.
Try

length Find the number of style declarations used for the particular element.
Try

parentRule Return the CSS Rule Object that represents a CSS rule-set that contains a selector and declaration block.
Try

table-layout It is used to display the layout of the table.
Try

tab-size It specifies the width of a tab character.
Try

text-align Set the horizontal alignment of text in an element.ie.
Try

text-align-last Set the last line of the paragraph just before the line break.
Try

text-decoration It is used to “decorate” the content of the text.
Try

text-decoration-color Set the color of decorations(overlines, underlines, and line-throughs) over the text.
Try

text-decoration-line Sets various kinds of text-decoration.
Try

text-decoration-style Set the text decoration of an element.
Try

text-indent Set the indentation of the first line in each block of text.
Try

text-justify Set the text-align to justify, which spreads the words into a complete and fixed-width line.
Try

text-overflow Specify that some text has overflown and is hidden from view.
Try

text-transform Control the capitalization of the text.
Try

text-shadow Add shadows to the text.
Try

top Set the top position of an element. The top property varies with the position of the element.
Try

transform Change the coordinate space of the visual formatting model.
Try

CSS transition Property It is used to make some transition effects.
Try

transition-delay Define the time to start the transition.
Try

transition-duration Set the time duration (in seconds or milliseconds) to complete the transition effect.
Try

transition-property Display the change in the property of an element over a specified duration. 
Try

unicode-bidi Determine how the bidirectional text is handled in a document. 
Try

user-select It specifies whether the text can be selected by the user or not.
Try

vertical-align Set the vertical alignment of the table box or inline element.
Try

visibility Specify whether an element is visible or not.
Try

white-space Control the text wrapping and white-spacing./td>
Try

word-break Specify how to break the word when the word reached at end of the line.
Try

word-spacing Increase or decreases the white space between words.
Try

word-wrap It breaks long words and wraps them into the next line.
Try

will-change Specify the browser how an element is expected to change.
Try

writing-mode Specify whether the lines of text are laid out horizontally or vertically.
Try

z-index Define the order of elements if they overlap with each other.
Try



Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads