CSS Properties - 218 Properties and its Values (Reference)
Css
3
CSS is used to style the content of a web page. There are lots of properties and values that can be used to style the content of a web page. Here is the list of some of the properties that can be used to style the content of a web page.
Css properties:
height
The height property sets the height of an element.
height: auto;
height: length;
height: initial;
height: inherit;
width
The width property sets the width of an element.
width: auto;
width: value;
width: initial;
width: inherit;
color
The color property sets the color of an element's text.
color: color;
color: initial;
color: inherit;
display
The display property specifies the type of rendering box used for an element.
display : inline;
display : block;
display : contents;
display : flex;
display : grid;
display : inline-block;
display : inline-flex;
display : inline-grid;
display : inline-table;
display : list-item;
display : run-in;
display : table;
display : table-caption;
display : table-column-group
display : table-header-group;
display : table-footer-group;
display : table-row-group;
display : table-cell;
display : table-column;
display : table-row;
display : none;
display : initial;
display : inherit;
float
The float property specifies whether or not an element should float.
float: none;
float: left;
float: right;
float: initial;
float: inherit;
z-index
The z-index property sets the stack order of an element.
z-index: auto;
z-index: number;
z-index: initial;
z-index: inherit;
filter
The filter property sets the filter effect applied to an element.
filter : none;
filter : blur();
filter : brightness()
filter : contrast();
filter : drop-shadow();
filter : grayscale();
filter : hue-rotate();
filter : invert();
filter : opacity();
filter : saturate();
filter : sepia();
filter : url();
cursor
The cursor property specifies the mouse cursor displayed when the mouse pointer is over an element.
cursor : alias;
cursor : all-scroll;
cursor : auto;
cursor : cell;
cursor : context-menu;
cursor : col-resize;
cursor : copy;
cursor : crosshair;
cursor : default;
cursor : e-resize;
cursor : ew-resize;
cursor : grab;
cursor : grabbing;
cursor : help;
cursor : move;
cursor : n-resize;
cursor : ne-resize;
cursor : nesw-resize;
cursor : ns-resize;
cursor : nw-resize;
cursor : nwse-resize;
cursor : no-drop;
cursor : none;
cursor : not-allowed;
cursor : pointer;
cursor : progress;
cursor : row-resize;
cursor : s-resize;
cursor : se-resize;
cursor : sw-resize;
cursor : text;
cursor : url(myBall.cur),auto;
cursor : w-resize;
cursor : wait;
cursor : zoom-in;
cursor : zoom-out;
cursor : alias;
cursor : all-scroll;
cursor : auto;
cursor : cell;
cursor : context-menu;
cursor : col-resize;
cursor : copy;
cursor : crosshair;
cursor : default;
cursor : e-resize;
cursor : ew-resize;
cursor : grab;
cursor : grabbing;
cursor : help;
cursor : move;
cursor : n-resize;
cursor : ne-resize;
cursor : nesw-resize;
cursor : ns-resize;
cursor : nw-resize
cursor : nwse-resize;
cursor : no-drop;
cursor : none;
cursor : not-allowed;
cursor : pointer;
cursor : progress;
cursor : row-resize;
cursor : s-resize;
cursor : se-resize
cursor : sw-resize;
cursor : text;
cursor : url(myBall.cur),auto;
cursor : w-resize;
cursor : wait;
cursor : zoom-in;
cursor : zoom-out;
cursor : initial;
cursor : inherit;
opacity
The opacity property sets the opacity of an element.
opacity: number;
opacity: initial;
opacity: inherit;
order
The order property sets the order of a positioned element.
order: number;
order: initial;
order: inherit;
pointer-events
The pointer-events property specifies under what circumstances a mouse cursor can trigger an element.
pointer-events: auto;
pointer-events: none;
position
The position property sets the position of an element in relation to other elements.
position: static;
position: absolute;
position: fixed;
position: relative;
position: sticky;
position: initial;
position: inherit;
white-space
The white-space property specifies how white space inside an element is handled.
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-line;
white-space: pre-wrap;
white-space: initial;
white-space: inherit;
animation,animation-name,animation-duration,animation-delay,animation-direction,animation-fill-mode,animation-play-state,animation-iteration-count,animation-timing-function
Animation properties and values are listed here.
background,background-attachment,background-blend-mode,background-clip,background-color,background-image,background-origin,background-position,background-repeat,background-size
Background properties and values are listed here.
border,border-color,border-style,border-width,border-radius,border-spacing,border-collapse
Border properties and values are listed here.
border-top,border-top-color,border-top-style,border-top-width,border-top-left-radius,border-top-right-radius
Border properties and values are listed here.
border-bottom,border-bottom-color,border-bottom-style,border-bottom-width,border-bottom-left-radius,border-bottom-right-radius
Border properties and values are listed here.
border-left,border-left-color,border-left-style,border-left-width
Border properties and values are listed here.
border-right,border-right-color,border-right-style,border-right-width
Border properties and values are listed here.
border-image,border-image-outset,border-image-repeat,border-image-slice,border-image-source,border-image-width
Border properties and values are listed here.
top
The top property sets the top position of an element.
top: auto;
top: length;
top: initial;
top: inherit;
bottom
The bottom property sets the bottom position of an element.
bottom: auto;
bottom: length;
bottom: initial;
bottom: inherit;
left
The left property sets the left position of an element.
left: auto;
left: length;
left: initial;
left: inherit;
right
The right property sets the right position of an element.
right: auto;
right: length;
right: initial;
right: inherit;
margin
The margin property sets the margin of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.
margin: length;
margin: auto;
margin: initial;
margin: inherit;
// top right bottom left
// top right_left bottom
// top_bottom right_left
// top_bottom_right_left
margin-bottom
The margin-bottom property sets the bottom margin of an element.
margin-bottom: length;
margin-bottom: auto;
margin-bottom: initial;
margin-bottom: inherit;
margin-left
The margin-left property sets the left margin of an element.
margin-left: length;
margin-left: auto;
margin-left: initial;
margin-left: inherit;
margin-right
The margin-right property sets the right margin of an element.
margin-right: length;
margin-right: auto;
margin-right: initial;
margin-right: inherit;
margin-top
The margin-top property sets the top margin of an element.
margin-top: length;
margin-top: auto;
margin-top: initial;
margin-top: inherit;
padding
The padding property sets the padding of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.
padding: length;
padding: auto;
padding: initial;
padding: inherit;
// top right bottom left
// top right_left bottom
// top_bottom right_left
// top_bottom_right_left
padding-bottom
The padding-bottom property sets the bottom padding of an element.
padding-bottom: length;
padding-bottom: initial;
padding-bottom: inherit;
padding-left
The padding-left property sets the left padding of an element.
padding-left: length;
padding-left: initial;
padding-left: inherit;
padding-right
The padding-right property sets the right padding of an element.
padding-right: length;
padding-right: initial;
padding-right: inherit;
padding-top
The padding-top property sets the top padding of an element.
padding-top: length;
padding-top: initial;
padding-top: inherit;
flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap
align-content,align-items,align-self,justify-content,justify-items,justify-self
place-content
The place-content property is a shorthand for the align-content and justify-content properties.
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;
place-content: inherit;
place-content: initial;
place-content: unset;
place-items
The place-items property is a shorthand for the align-items and justify-items properties.
place-items : auto center;
place-items : normal start;
place-items : center normal;
place-items : start auto;
place-items : end normal;
place-items : self-start auto;
place-items : self-end normal;
place-items : flex-start auto;
place-items : flex-end normal
place-items : left auto;
place-items : right normal;
place-items : baseline normal;
place-items : first baseline auto;
place-items : last baseline normal;
place-items : stretch auto;
place-items : inherit;
place-items : initial;
place-items : unset;
place-self
The place-self property is a shorthand for the align-self and justify-self properties.
place-self : auto center;
place-self : normal start;
place-self : center normal;
place-self : start auto;
place-self : end normal;
place-self : self-start auto;
place-self : self-end normal;
place-self : flex-start auto;
place-self : flex-end normal
place-self : left auto;
place-self : right normal;
place-self : baseline normal;
place-self : first baseline auto;
place-self : last baseline normal;
place-self : stretch auto;
place-self : inherit;
place-self : initial;
place-self : unset;
grid,grid-template,grid-template-columns,grid-template-rows
grid-gap,grid-column-gap,grid-row-gap
grid-auto-columns,grid-auto-rows,grid-auto-flow
grid-template-areas,grid-area
grid-column,grid-column-start,grid-column-end
grid-row,grid-row-start,grid-row-end
box-decoration-break
The box-decoration-break property specifies whether or not an element's borders are rendered. It can have the following values:
box-decoration-break: slice;
box-decoration-break: clone;
box-decoration-break: initial;
box-decoration-break: inherit;
box-decoration-break: unset;
box-shadow
The box-shadow property adds shadow to an element. It accepts a comma-separated list of shadows to be applied to the element. Each shadow is specified by three length values, an optional color, and an optional blur radius.
box-shadow: none;
box-shadow: h-offset v-offset blur spread color;
box-shadow: inset;
box-shadow: initial;
box-shadow: inherit;
box-sizing
The box-sizing property controls the behavior of the width and height properties. It can have the following values:
box-sizing: content-box;
box-sizing: border-box;
box-sizing: initial;
box-sizing: inherit;
break-after
The break-after property allows you to force a page break after an element. It can have the following values:
break-after : auto;
break-after : all;
break-after : always;
break-after : avoid;
break-after : avoid-column;
break-after : avoid-page;
break-after : avoid-region
break-after : column;
break-after : left;
break-after : page;
break-after : recto;
break-after : region;
break-after : right;
break-after : verso;
break-after : initial;
break-after : inherit;
break-before
The break-before property allows you to force a page break before an element. It can have the following values:
break-before : auto;
break-before : all;
break-before : always;
break-before : avoid;
break-before : avoid-column;
break-before : avoid-page;
break-before : avoid-region
break-before : column;
break-before : left;
break-before : page;
break-before : recto;
break-before : region;
break-before : right;
break-before : verso;
break-before : initial;
break-before : inherit;
break-inside
The break-inside property allows you to force a page break inside an element. It can have the following values:
break-inside : auto;
break-inside : all;
break-inside : always;
break-inside : avoid;
break-inside : avoid-column;
break-inside : avoid-page;
break-inside : avoid-region
break-inside : column;
break-inside : left;
break-inside : page;
break-inside : recto;
break-inside : region;
break-inside : right;
break-inside : verso;
break-inside : initial;
break-inside : inherit;
column-count,column-fill,column-gap,column-rule,column-rule-color,column-rule-style,column-rule-width,column-span,column-width,columns
font,font-family,font-size,font-style,font-weight,font-feature-settings,font-kerning,font-size-adjust,font-stretch,font-variant,font-variant-caps
list-style
The list-style property is a shorthand for setting the list-style-type, list-style-image, list-style-position, and list-style-position properties.
list-style: type position image;
list-style: initial;
list-style: inherit;
list-style-image
The list-style-image property sets the image that will be used as the list item marker.
list-style-image: none;
list-style-image: url;
list-style-image: initial;
list-style-image: inherit;
list-style-position
The list-style-position property sets the position of the marker image in the list item.
list-style-position: inside;
list-style-position: outside;
list-style-position: initial;
list-style-position: inherit;
list-style-type
The list-style-type property sets the marker (such as a disc, character, or custom counter style) of a list item element.
list-style-type : disc;
list-style-type : armenian;
list-style-type : circle;
list-style-type : cjk-ideographic;
list-style-type : decimal;
list-style-type : decimal;-leading-zero
list-style-type : georgian;
list-style-type : hebrew;
list-style-type : hiragana;
list-style-type : hiragana-iroha;
list-style-type : katakana;
list-style-type : katakana-iroha;
list-style-type : lower-alpha;
list-style-type : lower-greek;
list-style-type : lower-latin
list-style-type : lower-roman;
list-style-type : none;
list-style-type : square;
list-style-type : upper-alpha;
list-style-type : upper-greek;
list-style-type : upper-latin;
list-style-type : upper-roman;
list-style-type : initial;
list-style-type : inherit;
max-height
The max-height property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height.
max-height: none;
max-height: length;
max-height: initial;
max-height: inherit;
max-width
The max-width property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified for max-width.
max-width: none;
max-width: length;
max-width: initial;
max-width: inherit;
min-height
The min-height property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.
min-height: length;
min-height: initial;
min-height: inherit;
min-width
The min-width property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.
min-width: length;
min-width: initial;
min-width: inherit;
outline
The outline property sets an outline around an element. It is a shorthand for setting outline-style, outline-width, and outline-color.
outline: width style color;
outline: initial;
outline: inherit;
outline-color
The outline-color property sets the color of an element's outline.
outline-color: invert;
outline-color: color;
outline-color: initial;
outline-color: inherit;
outline-offset
The outline-offset property offsets an outline from the border edge.
outline-offset: length;
outline-offset: initial;
outline-offset: inherit;
outline-style
The outline-style property sets the style of an element's outline.
outline-style : none;
outline-style : hidden;
outline-style : dotted
outline-style : dashed;
outline-style : solid;
outline-style : double;
outline-style : groove;
outline-style : ridge;
outline-style : inset;
outline-style : outset;
outline-style : initial;
outline-style : inherit;
outline-width
The outline-width property sets the width of an element's outline.
outline-width: medium;
outline-width: thin;
outline-width: thick;
outline-width: length;
outline-width: initial;
outline-width: inherit;
overflow
The overflow property sets what happens if content overflows an element's box.
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
overflow: initial;
overflow: inherit;
overflow-x
The overflow-x property sets what happens if content overflows an element's left and right edges.
overflow-x: visible;
overflow-x: hidden;
overflow-x: scroll;
overflow-x: auto;
overflow-x: initial;
overflow-x: inherit;
overflow-y
The overflow-y property sets what happens if content overflows an element's top and bottom edges.
overflow-y: visible;
overflow-y: hidden;
overflow-y: scroll;
overflow-y: auto;
overflow-y: initial;
overflow-y: inherit;
page-break-after
The page-break-after property sets the page-breaking behavior after an element.
page-break-after: auto;
page-break-after: always;
page-break-after: avoid;
page-break-after: left;
page-break-after: right;
page-break-after: initial;
page-break-after: inherit;
page-break-before
The page-break-before property sets the page-breaking behavior before an element.
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: initial;
page-break-before: inherit;
page-break-inside
The page-break-inside property sets the page-breaking behavior inside an element.
page-break-inside: auto;
page-break-inside: avoid;
page-break-inside: initial;
page-break-inside: inherit;
perspective
The perspective property defines how far an element is from the view on the z-axis.
perspective: length;
perspective: none;
perspective-origin
The perspective-origin property defines the position the viewer is looking at. It is used as the vanishing point for the perspective property.
perspective-origin: x-axis y-axis;
perspective-origin: initial;
perspective-origin: inherit;
text-align,text-align-last,text-decoration,text-decoration-color,text-decoration-line,text-decoration-style,text-indent,text-justify,text-overflow,text-shadow,text-transform
transform
The transform property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
transform : none;
transform : transform-functions;
transform : initial;
transform : inherit;
transform : none;
transform : matrix(n,n,n,n,n,n);
transform : matrix3d;
transform : (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n);
transform : translate(x,y);
transform : translate3d(x,y,z);
transform : translateX;(x)
transform : translateY(y);
transform : translateZ(z);
transform : scale(x,y);
transform : scale3d(x,y,z);
transform : scaleX(x);
transform : scaleY(y);
transform : scaleZ(z);
transform : rotate(angle);
transform : rotate3d(x,y,z,angle)
transform : rotateX(angle);
transform : rotateY(angle);
transform : rotateZ(angle);
transform : skew(x-angle,y-angle);
transform : skewX(angle);
transform : skewY(angle);
transform : perspective(n);
transform : initial;
transform : inherit;
transform-origin
The transform-origin property sets the origin for an element's transformations.
transform-origin: x-axis y-axis z-axis;
transform-origin: initial;
transform-origin: inherit;
transform-style
The transform-style property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.
transform-style: flat;
transform-style: preserve-3d;
transform-style: initial;
transform-style: inherit;
transition,transition-delay,transition-duration,transition-property,transition-timing-function
word-break
The word-break property is used to specify how (or if) to break lines within words.
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word;
word-break: initial;
word-break: inherit;
word-spacing
The word-spacing property specifies the spacing behavior between tags and words.
word-spacing: normal;
word-spacing: length;
word-spacing: initial;
word-spacing: inherit;
word-wrap
The word-wrap property controls whether or not the browser may break lines within words in order to prevent overflow.
word-wrap: normal;
word-wrap: break-word;
word-wrap: initial;
word-wrap: inherit;
writing-mode
The writing-mode property defines whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
direction
The direction property specifies the text direction/writing direction.
direction: ltr;
direction: rtl;
direction: initial;
direction: inherit;
letter-spacing
The letter-spacing property specifies spacing behavior between text characters.
letter-spacing: normal;
letter-spacing: length;
letter-spacing: initial;
letter-spacing: inherit;
line-height
The line-height property specifies the height that is used in text-autosizing mode, which is a non-standard mode that only works in Firefox.
line-height: normal;
line-height: number;
line-height: length;
line-height: initial;
line-height: inherit;
visibility
The visibility property specifies whether or not an element is visible.
visibility: visible;
visibility: hidden;
visibility: collapse;
visibility: initial;
visibility: inherit;
backface-visibility
The backface-visibility property determines whether or not the back face of an element is visible when turned towards the user.
backface-visibility: visible;
backface-visibility: hidden;
backface-visibility: initial;
backface-visibility: inherit;
counter-increment
The counter-increment property increments the value of CSS Counters by a given value.
counter-increment: none;
counter-increment: id;
counter-increment: initial;
counter-increment: inherit;
counter-reset
The counter-reset property resets CSS Counters to a given value.
counter-reset: none;
counter-reset: name number;
counter-reset: initial;
counter-reset: inherit;
object-fit
The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: scale-down;
object-fit: none;
object-fit: initial;
object-fit: inherit;
object-position
The object-position property specifies the alignment of the replaced element inside its box.
object-position: position;
object-position: initial;
object-position: inherit;
all
The all property is a shorthand for setting all of the properties in a single declaration.
all: initial;
all: inherit;
all: unset;
caption-side
The caption-side property determines the position of the caption box with respect to the content of the table.
caption-side: top;
caption-side: bottom;
caption-side: initial;
caption-side: inherit;
caret-color
The caret-color property sets the color of the insertion caret, the visible marker where the next character typed will be inserted.
caret-color: auto;
caret-color: color;
caret-color: initial;
caret-color: inherit;
clear
The clear property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.
clear: none;
clear: left;
clear: right;
clear: both;
clear: initial;
clear: inherit;
clip
The clip property specifies what part of an element’s content is visible.
clip: auto;
clip: shape;
clip: initial;
clip: inherit;
content
The content property is used with the :before and :after pseudo-elements.
content : normal;
content : none;
content : counter
content : attr;
content : string;
content : open-quote;
content : close-quote;
content : no-open-quote;
content : no-close-quote;
content : url;
content : initial;
content : inherit;
-webkit-line-clamp
The -webkit-line-clamp property allows limiting the number of lines in an element.
.xx {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
-webkit-line-clamp: none;
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
empty-cells
The empty-cells property specifies whether or not to display borders and background on empty cells in a table.
empty-cells: show;
empty-cells: hide;
empty-cells: initial;
empty-cells: inherit;
hanging-punctuation
The hanging-punctuation property specifies whether or not a punctuation mark should hang from the start or the end of a line of text.
hanging-punctuation : none;
hanging-punctuation : first;
hanging-punctuation : last;
hanging-punctuation : allow-end;
hanging-punctuation : force-end;
hanging-punctuation : initial;
hanging-punctuation : inherit;
no chrome support
hyphens
The hyphens property specifies whether or not to use automatic hyphenation when breaking lines of text.
hyphens: none;
hyphens: manual;
hyphens: auto;
hyphens: initial;
hyphens: inherit;
isolation
The isolation property specifies whether an element should be isolated.
isolation: auto;
isolation: isolate;
isolation: initial;
isolation: inherit;
mix-blend-mode
The mix-blend-mode property specifies how the content of the element is to blend with the content of the element that follows it.
mix-blend-mode : normal;
mix-blend-mode : multiply;
mix-blend-mode : screen;
mix-blend-mode : overlay;
mix-blend-mode : darken
mix-blend-mode : lighten;
mix-blend-mode : color-dodge;
mix-blend-mode : color-burn;
mix-blend-mode : difference;
mix-blend-mode : exclusion;
mix-blend-mode : hue;
mix-blend-mode : saturation;
mix-blend-mode : color;
mix-blend-mode : luminosity;
quotes
The quotes property specifies how quotation marks should be displayed.
quotes: none;
quotes: string;
quotes: initial;
quotes: inherit;
resize
The resize property specifies whether or not an element is resizable.
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: initial;
resize: inherit;
scroll-behavior
The scroll-behavior property specifies the behavior of the scrolling mechanism of the scrollable area.
scroll-behavior: auto;
scroll-behavior: smooth;
scroll-behavior: initial;
scroll-behavior: inherit;
tab-size
The tab-size property specifies the length of the tab character.
tab-size: number;
tab-size: length;
tab-size: initial;
tab-size: inherit;
table-layout
The table-layout property specifies the algorithm used to lay out the table cells, rows, and columns.
table-layout: auto;
table-layout: fixed;
table-layout: initial;
table-layout: inherit;
unicode-bidi
The unicode-bidi property specifies the level of embedding with respect to the bidirectional algorithm.
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: bidi-override;
unicode-bidi: initial;
unicode-bidi: inherit;
user-select
The user-select property specifies whether the text of a element should be selectable by the user.
user-select: auto;
user-select: none;
user-select: text;
user-select: all;
vertical-align
The vertical-align property specifies the vertical alignment of an inline or table-cell box.
vertical-align : baseline;
vertical-align : length
vertical-align : sub;
vertical-align : super;
vertical-align : top;
vertical-align : text-top;
vertical-align : middle;
vertical-align : bottom;
vertical-align : text-bottom;
vertical-align : initial;
vertical-align : inherit;
@import,@keyframes,@media,@font-face,@charset
Prev
4
2
2
3
7
0
7