CSS3 Properties

Animation Properties

Sl.No	Property	Description
01.	animation	Specifies the keyframe-based animations.
02.	animation-delay	Specifies when the animation will start.
03.	animation-direction	Specifies whether the animation should play in reverse on alternate cycles or not.
04.	animation-duration	Specifies the number of seconds or milliseconds an animation should take to complete one cycle.
05.	animation-fill-mode	Specifies how a CSS animation should apply styles to its target before and after it is executing.
06.	animation-iteration-count	Specifies the number of times an animation cycle should be played before stopping.
07.	animation-name	Specifies the name of @keyframes defined animations that should be applied to the selected element.
08.	animation-play-state	Specifies whether the animation is running or paused.
09.	animation-timing-function	Specifies how a CSS animation should progress over the duration of each cycle.
10.	animation-composition	Specifies how an animation's effect value combines with the underlying value of the property being animated.
11.	animation-timeline	Specifies the timeline that is used to control the progress of a CSS animation.

Background Properties

Sl.No	Property	Description
01.	background	Sets all the background properties in one declaration
02.	background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page
03.	background-clip	Specifies the painting area of the background
04.	background-color	Sets the background color of an element
05.	background-image	Sets the background image for an element
06.	background-origin	Specifies where the background image(s) is/are positioned
07.	background-position	Sets the starting position of a background image
08.	background-repeat	Sets how a background image will be repeated
09.	background-size	Specifies the size of the background image(s)

Border Properties

Sl.No	Property	Description
01.	border	Sets the width, style, and color for all four sides of an element's border.
02.	border-bottom	Sets the width, style, and color of the bottom border of an element.
03.	border-bottom-color	Sets the color of the bottom border of an element.
04.	border-bottom-left-radius	Defines the shape of the bottom-left border corner of an element.
05.	border-bottom-right-radius	Defines the shape of the bottom-right border corner of an element.
06.	border-bottom-style	Sets the style of the bottom border of an element.
07.	border-bottom-width	Sets the width of the bottom border of an element.
08.	border-color	Sets the color of the border on all the four sides of an element.
09.	border-image	Specifies how an image is to be used in place of the border styles.
11.	border-image-outset	Specifies the amount by which the border image area extends beyond the border box.
12.	border-image-repeat	Specifies whether the image-border should be repeated, rounded or stretched.
13.	border-image-slice	Specifies the inward offsets of the image-border.
14.	border-image-source	Specifies the location of the image to be used as a border.
15.	border-image-width	Specifies the width of the image-border.
16.	border-left	Sets the width, style, and color of the left border of an element.
17.	border-left-color	Sets the color of the left border of an element.
18.	border-left-style	Sets the style of the left border of an element.
19.	border-left-width	Sets the width of the left border of an element.
20.	border-radius	Defines the shape of the border corners of an element.
21.	border-right	Sets the width, style, and color of the right border of an element.
22.	border-right-color	Sets the color of the right border of an element.
23.	border-right-style	Sets the style of the right border of an element.
24.	border-right-width	Sets the width of the right border of an element.
25.	border-style	Sets the style of the border on all the four sides of an element.
26.	border-top	Sets the width, style, and color of the top border of an element.
27.	border-top-color	Sets the color of the top border of an element.
28.	border-top-left-radius	Defines the shape of the top-left border corner of an element.
29.	border-top-right-radius	Defines the shape of the top-right border corner of an element.
30.	border-top-style	Sets the style of the top border of an element.
31.	border-top-width	Sets the width of the top border of an element.
32.	border-width	Sets the width of the border on all the four sides of an element.

Color Properties

Sl.No	Property	Description
01.	color	Specify the color of the text of an element.
02.	opacity	Specifies the transparency of an element.
03.	accent-color	Sets the accent color for UI controls like checkboxes, radio buttons, and range inputs.
04.	caret-color	Sets the color of the text insertion cursor (caret) in an editable field.
05.	color-scheme	Indicates which color schemes (light/dark) an element can be rendered in.

Dimension Properties

Sl.No	Property	Description
01.	height	Specify the height of an element.
02.	max-height	Specify the maximum height of an element.
03.	max-width	Specify the maximum width of an element.
04.	min-height	Specify the minimum height of an element.
05.	min-width	Specify the minimum width of an element.
06.	width	Specify the width of an element.
07.	aspect-ratio	Sets a preferred aspect ratio for the box, used in the calculation of auto sizes.
08.	inline-size	Defines the horizontal or vertical size of an element's box depending on its writing mode.
09.	block-size	Defines the horizontal or vertical size of an element's box depending on its writing mode.

Generated Content Properties

Sl.No	Property	Description
01.	content	Inserts generated content.
02.	quotes	Specifies quotation marks for embedded quotations.
03.	counter-reset	Creates or resets one or more counters.
04.	counter-increment	Increments one or more counter values.

Flexible Box Layout

Sl.No	Property	Description
01.	align-content	Specifies the alignment of flexible container's items within the flex container.
02.	align-items	Specifies the default alignment for items within the flex container.
03.	align-self	Specifies the alignment for selected items within the flex container.
04.	flex	Specifies the components of a flexible length.
05.	flex-basis	Specifies the initial main size of the flex item.
06.	flex-direction	Specifies the direction of the flexible items.
07.	flex-flow	A shorthand property for the flex-direction and the flex-wrap properties.
08.	flex-grow	Specifies how the flex item will grow relative to the other items inside the flex container.
09.	flex-shrink	Specifies how the flex item will shrink relative to the other items inside the flex container.
10.	flex-wrap	Specifies whether the flexible items should wrap or not.
11.	justify-content	Specifies how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved.
12.	order	Specifies the order in which a flex items are displayed and laid out within a flex container.
13.	gap	A shorthand for row-gap and column-gap in flex and grid containers.
14.	row-gap	Sets the size of the gap between rows in a flex or grid container.
15.	column-gap	Sets the size of the gap between columns in a flex or grid container.
16.	justify-items	Defines the default justify-self for all items within the container.
17.	justify-self	Sets the way a single box is justified inside its alignment container along the inline axis.
18.	place-content	A shorthand for align-content and justify-content.
19.	place-items	A shorthand for align-items and justify-items.
20.	place-self	A shorthand for align-self and justify-self.

Font Properties

Sl.No	Property	Description
01.	font	Defines a variety of font properties within one declaration.
02.	font-family	Defines a list of fonts for element.
03.	font-size	Defines the font size for the text.
04.	font-size-adjust	Preserves the readability of text when font fallback occurs.
05.	font-stretch	Selects a normal, condensed, or expanded face from a font.
06.	font-style	Defines the font style for the text.
07.	font-variant	Specify the font variant.
08.	font-weight	Specify the font weight of the text.
09.	font-feature-settings	Allows control over advanced typographic features in OpenType fonts.
10.	font-kerning	Controls the use of the kerning information stored in a font.
11.	font-optical-sizing	Sets whether text rendering is optimized for viewing at different sizes.
12.	font-synthesis	Controls which missing typefaces (bold, italic, small-caps) may be synthesized by the browser.
13.	font-variation-settings	Provides low-level control over OpenType or TrueType font variations.

List Properties

Sl.No	Property	Description
01.	list-style	Defines the display style for a list and list elements.
02.	list-style-image	Specifies the image to be used as a list-item marker.
03.	list-style-position	Specifies the position of the list-item marker.
04.	list-style-type	Specifies the marker style for a list-item.

Margin Properties

Sl.No	Property	Description
01.	margin	Sets the margin on all four sides of the element.
02.	margin-bottom	Sets the bottom margin of the element.
03.	margin-left	Sets the left margin of the element.
04.	margin-right	Sets the right margin of the element.
05.	margin-top	Sets the top margin of the element.

Multi-column Layout Properties

Sl.No	Property	Description
01.	column-count	Specifies the number of columns in a multi-column element.
02.	column-fill	Specifies how columns will be filled.
03.	column-gap	Specifies the gap between the columns in a multi-column element.
04.	column-rule	Specifies a straight line, or "rule", to be drawn between each column in a multi-column element.
05.	column-rule-color	Specifies the color of the rules drawn between columns in a multi-column layout.
06.	column-rule-style	Specifies the style of the rule drawn between the columns in a multi-column layout.
07.	column-rule-width	Specifies the width of the rule drawn between the columns in a multi-column layout.
08.	column-span	Specifies how many columns an element spans across in a multi-column layout.
09.	column-width	Specifies the optimal width of the columns in a multi-column element.
10.	columns	A shorthand property for setting column-width and column-count properties.

Outline Properties

Sl.No	Property	Description
01.	outline	Sets the width, style, and color for all four sides of an element's outline.
02.	outline-color	Sets the color of the outline.
03.	outline-offset	Set the space between an outline and the border edge of an element.
04.	outline-style	Sets a style for an outline.
05.	outline-width	Sets the width of the outline.

Padding Properties

Sl.No	Property	Description
01.	padding	Sets the padding on all four sides of the element.
02.	padding-bottom	Sets the padding to the bottom side of an element.
03.	padding-left	Sets the padding to the left side of an element.
04.	padding-right	Sets the padding to the right side of an element.
05.	padding-top	Sets the padding to the top side of an element.

Table Properties

Sl.No	Property	Description
01.	border-collapse	Specifies whether table cell borders are connected or separated.
02.	border-spacing	Sets the spacing between the borders of adjacent table cells.
03.	caption-side	Specify the position of table's caption.
04.	empty-cells	Show or hide borders and backgrounds of empty table cells.
05.	table-layout	Specifies a table layout algorithm.

Text Properties

Sl.No	Property	Description
01.	direction	Define the text direction/writing direction.
02.	tab-size	Specifies the length of the tab character.
03.	text-align	Sets the horizontal alignment of inline content.
04.	text-align-last	Specifies how the last line of a block or a line right before a forced line break is aligned when
05.	text-decoration	Specifies the decoration added to text.
06.	text-decoration-color	Specifies the color of the text-decoration-line.
07.	text-decoration-line	Specifies what kind of line decorations are added to the element.
08.	text-decoration-style	Specifies the style of the lines specified by the text-decoration-line property
09.	text-indent	Indent the first line of text.
10.	text-justify	Specifies the justification method to use when the text-align property is set to justify.
11.	text-overflow	Specifies how the text content will be displayed, when it overflows the block containers.
12.	text-shadow	Applies one or more shadows to the text content of an element.
13.	text-transform	Transforms the case of the text.
14.	line-height	Sets the height between lines of text.
15.	vertical-align	Sets the vertical positioning of an element relative to the current text baseline.
16.	letter-spacing	Sets the extra spacing between letters.
17.	word-spacing	Sets the spacing between words.
18.	white-space	Specifies how white space inside the element is handled.
19.	word-break	Specifies how to break lines within words.
20.	overflow-wrap	Specifies whether the browser may break lines within words to prevent overflow.
21.	writing-mode	Specifies whether lines of text are laid out horizontally or vertically.
22.	text-underline-offset	Sets the offset distance of an underline text decoration line from its original position.
23.	text-emphasis	A shorthand for text-emphasis-style and text-emphasis-color.
24.	text-emphasis-color	Sets the color of emphasis marks.
25.	text-emphasis-position	Sets where emphasis marks are drawn relative to the text.
26.	text-emphasis-style	Sets the appearance of emphasis marks on the text.
27.	unicode-bidi	Specifies how the Unicode Bidirectional Algorithm should handle bidirectional text in the element.
28.	text-rendering	Provides information to the rendering engine about what to optimize for when rendering text.

Transform Properties

Sl.No	Property	Description
01.	backface-visibility	Specifies whether or not the "back" side of a transformed element is visible when facing the user.
02.	perspective	Defines the perspective from which all child elements of the object are viewed.
03.	perspective-origin	Defines the origin (the vanishing point for the 3D space) for the perspective property.
04.	transform	Applies a 2D or 3D transformation to an element.
05.	transform-origin	Defines the origin of transformation for an element.
06.	transform-style	Specifies how nested elements are rendered in 3D space.

Transitions Properties

Sl.No	Property	Description
01.	transition	Defines the transition between two states of an element.
02.	transition-delay	Specifies when the transition effect will start.
03.	transition-duration	Specifies the number of seconds or milliseconds a transition effect should take to complete.
04.	transition-property	Specifies the names of the CSS properties to which a transition effect should be applied.
05.	transition-timing-function	Specifies the speed curve of the transition effect.

Visual formatting Properties

Sl.No	Property	Description
01.	display	Specifies how an element is displayed onscreen.
02.	position	Specifies how an element is positioned.
03.	top	Specify the location of the top edge of the positioned element.
04.	right	Specify the location of the right edge of the positioned element.
05.	bottom	Specify the location of the bottom edge of the positioned element.
06.	left	Specify the location of the left edge of the positioned element.
07.	float	Specifies whether or not a box should float.
08.	clear	Specifies the placement of an element in relation to floating elements.
09.	z-index	Specifies a layering or stacking order for positioned elements.
10.	overflow	Specifies the treatment of content that overflows the element's box.
11.	overflow-x	Specifies how to manage the content when it overflows the width of the element's content area.
12.	overflow-y	Specifies how to manage the content when it overflows the height of the element's content area.
13.	resize	Specifies whether or not an element is resizable by the user.
14.	visibility	Specifies whether or not an element is visible.
15.	cursor	Specify the type of cursor.
16.	box-shadow	Applies one or more drop-shadows to the element's box.
17.	box-sizing	Alter the default CSS box model.
18.	appearance	Controls the native appearance of an element based on the operating system theme.
19.	contain	Indicates that an element and its contents are as independent as possible from the rest of the document.
20.	isolation	Defines whether an element must create a new stacking context.
21.	mix-blend-mode	Sets how an element's content should blend with its parent's content and background.
22.	object-fit	Specifies how a replaced element's content (image/video) is resized to fit its container.
23.	object-position	Specifies the alignment of the replaced element's content within its box.
24.	pointer-events	Specifies under what circumstances an element can become the target of pointer events.
25.	user-select	Controls whether the user can select text within the element.
26.	will-change	Hints to the browser about what kind of changes to expect to allow optimization ahead of time.

Grid Layout Properties

Sl.No	Property	Description
01.	grid	A shorthand for grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns and grid-auto-flow.
02.	grid-area	Specifies a grid item's size and location within a grid by contributing lines, spans or nothing.
03.	grid-auto-columns	Sets the size of implicitly created grid columns.
04.	grid-auto-flow	Controls how auto-placed items are inserted in the grid (row, column, or dense packing).
05.	grid-auto-rows	Sets the size of implicitly created grid rows.
06.	grid-column	A shorthand for grid-column-start and grid-column-end.
07.	grid-column-end	Specifies where to end the grid item in the column direction.
08.	grid-column-start	Specifies where to start the grid item in the column direction.
09.	grid-row	A shorthand for grid-row-start and grid-row-end.
10.	grid-row-end	Specifies where to end the grid item in the row direction.
11.	grid-row-start	Specifies where to start the grid item in the row direction.
12.	grid-template	A shorthand for grid-template-rows, grid-template-columns and grid-template-areas.
13.	grid-template-areas	Specifies how to display columns and rows using named grid item areas.
14.	grid-template-columns	Defines the line names and track sizing functions of the grid columns.
15.	grid-template-rows	Defines the line names and track sizing functions of the grid rows.

Filter Properties

Sl.No	Property	Description
01.	filter	Applies graphical effects like blur, brightness, contrast, or color shift to an element.
02.	backdrop-filter	Applies graphical effects to the area behind an element (requires the element to be at least partially transparent).

Masking Properties

Sl.No	Property	Description
01.	clip-path	Specifies the clipping region using a basic shape, SVG source, or geometry box.
02.	mask	A shorthand property for all the mask-* properties.
03.	mask-clip	Specifies the area which is affected by the mask image.
04.	mask-composite	Specifies the compositing operation used on the current mask layer with those below it.
05.	mask-image	Specifies an image to be used as a mask layer for an element.
06.	mask-mode	Specifies whether the mask layer image is treated as a luminance or alpha mask.
07.	mask-origin	Specifies the origin position of the mask layer image.
08.	mask-position	Sets the starting position of a mask layer image within the mask positioning area.
09.	mask-repeat	Specifies whether and how a mask image is repeated (tiled).
10.	mask-size	Specifies the size of a mask layer image.
11.	mask-type	Specifies whether an SVG mask element is treated as a luminance or alpha mask.

Scroll Properties

Sl.No	Property	Description
01.	scroll-behavior	Specifies the scrolling behavior for a scrolling box when triggered by navigation or CSSOM scrolling API.
02.	scroll-margin	A shorthand for all the scroll-margin longhands (top, right, bottom, left).
03.	scroll-margin-bottom	Sets the scroll margin on the bottom of an element.
04.	scroll-margin-left	Sets the scroll margin on the left of an element.
05.	scroll-margin-right	Sets the scroll margin on the right of an element.
06.	scroll-margin-top	Sets the scroll margin on the top of an element.
07.	scroll-padding	A shorthand for all the scroll-padding longhands.
08.	scroll-padding-bottom	Sets the scroll padding on the bottom of the scroll container.
09.	scroll-padding-left	Sets the scroll padding on the left of the scroll container.
10.	scroll-padding-right	Sets the scroll padding on the right of the scroll container.
11.	scroll-padding-top	Sets the scroll padding on the top of the scroll container.
12.	scroll-snap-align	Specifies the box's snap position as an alignment of its snap area within its snap container.
13.	scroll-snap-stop	Specifies whether the scroll container is allowed to pass over possible snap positions.
14.	scroll-snap-type	Specifies how strictly snap points are enforced on the scroll container.
15.	overscroll-behavior	Specifies what the browser does when reaching the boundary of a scrolling area.
16.	overscroll-behavior-x	Specifies the overscroll behavior for the horizontal axis.
17.	overscroll-behavior-y	Specifies the overscroll behavior for the vertical axis.