Open In App
Related Articles

CSS Properties Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
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 RuleSpecifies the character encoding used in the style sheet.
Try
@keyframes RuleCSS @keyframes specify the animation rule.
Try
@media RuleSet of styles for different media/devices using the Media Queries.
Try
align-contentIt is used to change the behavior of the flex-wrap property.
Try
align-itemsSet the alignment of items inside the flexible container or in the given window.
Try
align-selfAlign the selected items in the flexible container.
Try
allSet all the elements’ values to their initial or inherited values.
Try
animation-delaySpecifies the delay for the start of an animation.
Try
animation-directionIt defines the direction of the animation.
Try
animation-durationIt defines how long an animation should take to complete one cycle.
Try
animation-fill-modeIt defines how styles are applied before and after animation.
Try
animation-iteration-countThis specifies the number of times the animation will be repeated.
Try
animation-nameThis specifies the name of the @keyframes describing the animation.
Try
animation-play-stateIt specifies whether the animation is running or paused.
Try
animation-timing-functionIt specifies how animation makes transitions through keyframes.
Try
backface-visibilityDecides whether the back face of an element might be visible or not to the user.
Try
background-attachmentSets whether a background image scrolls with the rest of the page or it will be fixed.
Try
background-blend-modeDefines the blending mode of each background layer of the webpage.
Try
background-clipThis property defines how far the background color or image should extend.
Try
background-colorSet the background color of an element.
Try
background-imageSet background images for an element, You can set one or more images as well.
Try
background-originAdjusting the background image of the webpage.
Try
background-positionSets the initial position for the background image.
Try
background-repeatIt is used to repeat the background image horizontally and vertically.
Try
background-sizeIt set the size of the background image.
Try
borderThis is used to style the border of an element.
Try
border-bottomSet all bottom border properties in one line.
Try
border-bottom-colorSet the color of the bottom border of an element.
Try
border-bottom-left-radiusDefine the radius of the bottom left corner of the border.
Try
border-bottom-right-radiusDefine the radius of the right bottom corner of the border of a given element.
Try
border-bottom-styleSet the style of the bottom border of an element.
Try
border-bottom-widthSet a specific width to the bottom border of an element.
Try
border-collapseSet the borders of the cell present inside the table and tells..
Try
border-colorSet a color to the border of an element.
Try
border-imageIt creates a border using an image instead of a normal border.
Try
border-image-outsetIt is a shorthand property used to specify the distance.
Try
border-image-repeatIt is used to scaling and tiling the border images.
Try
border-image-sliceIt divides or slices an image specified by the border-image-source property.
Try
border-image-sourceIt specifies the image source which is to be set as the border of an element.
Try
border-image-widthSet the width of the border image. It can be set by providing multiple values.
Try
border-leftSet the width, style, and color of the left border.
Try
border-left-colorSet the color of the left-border in an Element.
Try
border-left-styleSet the style of the left border of an element.
Try
border-left-widthSets the width of the left-border of an Element.
Try
border-radiusIt is used to round the corners of the outer border edges of an element.
Try
border-right-colorSet the color of the right border in an Element.
Try
border-rightSet the width, style, and color of the right border.
Try
border-right-styleSet the style of the right border of an element..
Try
border-right-widthSet the width of right-border of an element.
Try
border-top-colorSet the color of the top border in an Element.
Try
border-topSet the width, style, and color of the top border.
Try
border-top-left-radiusIt specifies the radius of the top left border corner of an element.
Try
border-top-right-radiusIt specifies the radius of the top right border corner of an element.
Try
border-top-styleIt specifies the style of the top border.
Try
border-top-widthSet a specific width to the top border of an element.
Try
border-styleSets the border line style for all four sides of an element’s border.
Try
border-spacingSet the distance between the borders of neighboring cells in the table.
Try
border-widthSet the border line width of all four sides of an element.
Try
bottomIt allows the vertical position of an element to be altered.
Try
box-shadowSet a shadow-like effect to the frames of an element.
Try
box-decoration-breakControl the box decoration after the fragmentation of the paragraph.
Try
box-sizingDefines how the user should calculate the total width and height of an element.
Try
caption-sideIt specifies the position where the table caption is placed. It is used in HTML Tables.
Try
caret-colorSet the color of the cursor in inputs, text area, or other editable areas.
Try
clearSpecify which side of floating elements are not allowed to float.
Try
clipSpecify a rectangle to clip an absolutely positioned element.
Try
column-countDivide a portion of content inside any HTML element into a given number of columns.
Try
column-fillSpecify whether the columns will be filled in a balanced manner or not.
Try
column-gapSpecify the amount of gap between the columns.
Try
columnsSet the number of columns and the width of the columns.
Try
column-rule-colorSet the color of the rule between the column.
Try
column-ruleDefine the width, style, and color of the rules between the columns.
Try
column-rule-styleSet the style of the column rule between the columns on a multi-column layout.
Try
column-rule-widthSet the width of the column rule.
Try
column-spanSets the number of columns an element can span across.
Try
column-widthIt is used to define the width of the columns.
Try
contentGenerate the content dynamically (during run time).
Try
cursorSpecify the mouse cursor to be displayed while pointing to an element.
Try
counter-incrementIt is used to increment/decrement the value of a counter.
Try
counter-resetCreate or reset the CSS counter for elements.
Try
directionDefine the direction of text/writing within any block element
Try
displayDefine the components(div, hyperlink, heading, etc) are going to be placed on the web page
Try
empty-cellsIt specifies whether to display the borders or not in the empty cells in a table.
Try
filterSet the visual effect of an element.
Try
flexIt is the combination of flex-grow, flex-shrink, and flex-basis properties.
Try
flex-basisSet the initial size of the flexible item.
Try
flex-directionSet the direction of the flexible items of a div.
Try
flex-flowIt is used to make the flexible item reversible and wrapped if required.
Try
flex-growSpecifies how much the item will grow compared to other items inside that container.
Try
flex-shrinkSpecifies how much the item will shrink compared to other items inside that container.
Try
flex-wrapIt specifies whether flex items are forced into a single line or wrapped onto multiple lines.
Try
font-familySet the font of an element.
Try
font-kerningControl the usage of the Kerning Information that has been stored in the Font
Try
font-size-adjustAdjusts the font size based on the height of the lowercase.
Try
font-sizeSet the font size of the text in an HTML document.
Try
font-stretchSet the text wider or narrower.
Try
font-styleStyle the given particular text in a normal, italic, or oblique face from its font family.
Try
font-variantConvert all lowercase letters into uppercase letters.
Try
font-weightSet the weight or thickness of the font being used with the HTML Text.
Try
gridOffers a grid-based layout system, with rows and columns
Try
grid-areaSet a grid item size and location in a grid layout.
Try
grid-auto-columnsSpecify the size for the columns of implicitly generated grid containers.
Try
grid-auto-flowIt specifies exactly how auto-placed items get flowed into the grid.
Try
grid-auto-rowsSpecify the size for the rows of implicitly generated grid containers.
Try
grid-columnSpecify a grid item’s size and location within a grid column.
Try
grid-column-endExplains the number of columns an item will span, or on which column line the item will end.
Try
grid-column-gapSet the gap size between the columns in a grid layout.
Try
grid-column-startSet on which column the line item will start.
Try
grid-gapSets the gap size between the rows and columns in a grid layout.
Try
grid-rowSpecify the size and location in a grid layout.
Try
grid-row-endit defines the grid items’ end position.
Try
grid-row-gapSet the gap size between the grid elements.
Try
grid-row-startDefines the grid items’ start position.
Try
grid-templateIt defines grid columns, rows, and areas.
Try
grid-template-areasIt specifies the area within the grid layout.
Try
grid-template-columnsSet the number of columns and size of the columns of the grid.
Try
grid-template-rowsSet the number of rows and height of the rows in a grid.
Try
hanging-punctuationPprovides web designers some upper hand over typography on the webpage.
Try
heightSet the height of an element.
Try
hyphensIt defines how the words should be hyphenated to create soft wrap opportunities within words.
Try
isolationDefine whether an element must create new stacking content.
Try
justify-contentAlignes the flexible containers item when there is available space.
Try
leftIt specifies the horizontal position of a positioned element
Try
letter-spacingSet the spacing behavior between text characters .
Try
line-heightSet the amount of space used for lines, such as in the text.
Try
list-styleIt is used to set the list style.
Try
list-style-imageSet images that will be used as the list item marker.
Try
list-style-positionSpecifies the position of the marker box with respect to the principal block box.
Try
list-style-typeIt specifies the appearance(such as a disc, character, or custom counter style) of the list item marker.
Try
margin-bottomSpecify the margin to be used on the bottom of an element.
Try
margin-leftSet the width of the margin on the left of the desired element.
Try
margin-rightSet the right margin of an element.
Try
margin-topSet the top margin of an element.
Try
max-heightSet the maximum height of an element.
Try
max-widthDefine the maximum width of an element.
Try
min-heightSet the minimum height of an element.
Try
min-widthDefine the minimum width of an element.
Try
mix-blend-modeDefine the minimum width of an element.
Try
mask-imageTo set the mask of an image for a particular element.
Try
object-fitSpecify the blending of an element’s background with the element’s parent.
Try
object-positionSpecifies how an image or video element is positioned with x/y coordinates inside its content box.
Try
orderSet the order of each flexible item in relation to other items inside the flexible container.
Try
outline-colorSets the outline color of an element
Try
outline-offsetSets the amount of space between an outline and the edge or border of an element. 
Try
outline-styleSet the appearance of the outline of an element.
Try
outline-widthIt specifies the width of this outline for a specific element.
Try
overflow-xIt specifies whether to add a scroll bar horizontally.
Try
overflow-y.It specifies whether to add a scroll bar vertically.
Try
padding-bottomSet the padding on the bottom of an element.
Try
padding-leftSet the padding on the left side of an element.
Try
padding-rightSet the padding on the right-side of an element.
Try
padding-topSet the padding on the top of an element.
Try
page-break-afterAdd a page-break after the stated element.
Try
page-break-beforeAdd a page-break-before the specified element.
Try
page-break-insideAdd page breaks inside the element to which it is applied while printing.
Try
perspectiveGive perspective to 3D objects.
Try
perspective-originDefine the position at which the user is looking 3D object i.e. the vanishing point of the 3D object. 
Try
pointer-eventsSpecify whether an element show pointer events and whether or not show on the pointer.
Try
quotesSet the quotation mark for quotations used in the sentence.
Try
resizeResize the element according to user requirements.
Try
rightAffects the horizontal position of the element as but has no effect on non-positioned elements.
Try
scroll-behaviorSet smooth animation of scroll position instead of a scroll jump
Try
cssTextSet or return the value of an inline style declaration of an element.
Try
lengthFind the number of style declarations used for the particular element.
Try
parentRuleReturn the CSS Rule Object that represents a CSS rule-set that contains a selector and declaration block.
Try
table-layoutIt is used to display the layout of the table.
Try
tab-sizeIt specifies the width of a tab character.
Try
text-alignSet the horizontal alignment of text in an element.ie.
Try
text-align-lastSet the last line of the paragraph just before the line break.
Try
text-decorationIt is used to “decorate” the content of the text.
Try
text-decoration-colorSet the color of decorations(overlines, underlines, and line-throughs) over the text.
Try
text-decoration-lineSets various kinds of text-decoration.
Try
text-decoration-styleSet the text decoration of an element.
Try
text-indentSet the indentation of the first line in each block of text.
Try
text-justifySet the text-align to justify, which spreads the words into a complete and fixed-width line.
Try
text-overflowSpecify that some text has overflown and is hidden from view.
Try
text-transformControl the capitalization of the text.
Try
text-shadowAdd shadows to the text.
Try
topSet the top position of an element. The top property varies with the position of the element.
Try
transformChange the coordinate space of the visual formatting model.
Try
CSS transition PropertyIt is used to make some transition effects.
Try
transition-delayDefine the time to start the transition.
Try
transition-durationSet the time duration (in seconds or milliseconds) to complete the transition effect.
Try
transition-propertyDisplay the change in the property of an element over a specified duration. 
Try
unicode-bidiDetermine how the bidirectional text is handled in a document. 
Try
user-selectIt specifies whether the text can be selected by the user or not.
Try
vertical-alignSet the vertical alignment of the table box or inline element.
Try
visibilitySpecify whether an element is visible or not.
Try
white-spaceControl the text wrapping and white-spacing./td>
Try
word-breakSpecify how to break the word when the word reached at end of the line.
Try
word-spacingIncrease or decreases the white space between words.
Try
word-wrapIt breaks long words and wraps them into the next line.
Try
will-changeSpecify the browser how an element is expected to change.
Try
writing-modeSpecify whether the lines of text are laid out horizontally or vertically.
Try
z-indexDefine 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