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:
url("https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png");
            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

CSS Properties Complete Reference

HTML

Please Login to comment...