| Property | Description | Values | Example |
|---|---|---|---|
background |
Defines a variety of background properties within one declaration. | background: [ image position/size repeat attachment origin clip color ] | initial | inherit | body {background: #ffff00 url(“smiley.png”) no-repeat fixed center;} |
background-image |
Defines an element’s background image. | background-image: url | none | initial | inherit | body {background-image: url(“images/pattern.jpg”);} |
background-repeat |
Specify whether/how the background image is tiled. | background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit | body {background-image: url(“images/gradient.png”);background-repeat: repeat-x;} |
border-bottom-color |
Sets the color of the bottom border of an element. | border-bottom-color: color | transparent | inherit | p {border-style: solid; border-bottom-color: #ff0000;} |
background-position |
Defines the origin of a background image. | background-position: [ percentage | length | left | center | right ]1 or 2 values | initial | inherit | p {background-image: url(“images/smiley.png”); background-position: 50% center;} |
background-attachment |
Specify whether the background image is fixed in the viewport or scrolls. | background-attachment: scroll | fixed | initial | inherit | body {background-image: url(“images/recycle.jpg”); background-attachment: fixed;} |
background-color |
Defines an element’s background color. | background-color: color | transparent | initial | inherit | body {background-color: yellow;} h1 {background-color: rgb(255,0,0);} p {background-color: #00ff00; |
border-bottom-style |
Sets the style of the bottom border of an element. | border-bottom-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit | p {border-bottom-style: dashed; border-bottom-width: 3px;} |
border |
Sets the width, style, and color for all four sides of an element’s border. | border: [ border-width border-style border-color ] | initial | inherit | h1 {border: 5px solid #ff0000;} |
border-bottom |
Sets the width, style, and color of the bottom border of an element. | ||
border-bottom-width |
Sets the width of the bottom border of an element. | ||
border-collapse |
Specifies whether table cell borders are connected or separated. | border-collapse: separate | collapse | initial | inherit | table {border-collapse: collapse;}th, td {border: 1px solid black;} |
border-color |
Sets the color of the border on all the four sides of an element. | border-color: [ color | transparent ] 1 to 4 values | inherit | p {border-style: solid; border-color: #ff0000;} |
border-left |
Sets the width, style, and color of the left border of an element. | border-left: [ border-left-width border-left-style border-left-color ] | initial | inherit | h1 {border-left: 5px solid #ff0000;} |
border-left-color |
Sets the color of the left border of an element. | ||
border-left-style |
Sets the style of the left border of an element. | ||
border-left-width |
Sets the width of the left border of an element. | border-left-width: thin | medium | thick | length | inherit | p {border-style: solid; border-left-width: 15px;} |
border-right |
Sets the width, style, and color of the right border of an element. | border-right: [ border-right-width border-right-style border-right-color ] | initial | inherit | h1 {border-right: 5px dashed #ff0000;} |
border-right-color |
Sets the color of the right border of an element. | border-right-color: color | transparent | initial | inherit | p {border-style: solid; border-right-color: #ff0000;} |
border-right-style |
Sets the style of the right border of an element. | ||
border-right-width |
Sets the width of the right border of an element. | ||
border-spacing |
Sets the spacing between the borders of adjacent table cells. | border-spacing: [ length ] 1 or 2 values | initial | inherit | table {border-collapse: separate;border-spacing: 10px 20px;} |
border-style |
Sets the style of the border on all the four sides of an element. | border-style: [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] 1 to 4 values | initial | inherit | p {border-style: double;border-width: 5px;} |
border-top |
Sets the width, style, and color of the top border of an element. | border-top: [ border-top-width border-top-style border-top-color ] | initial | inherit | h1 {border-top: 5px solid #ff0000;} |
border-top-color |
Sets the color of the top border of an element. | ||
border-top-style |
Sets the style of the top border of an element. | ||
border-top-width |
Sets the width of the top border of an element. | ||
border-width |
Sets the width of the border on all the four sides of an element. | border-width[ thin | medium | thick | length ] 1 to 4 values | inherit | p {border-style: solid;border-width: 5px;} |
bottom |
Specify the location of the bottom edge of the positioned element. | top: length | percentage | auto | initial | inherit | p {position: absolute;bottom: 150px;} |
clear |
Specifies the placement of an element in relation to floating elements. | clear: left | right | auto | both | none | initial | inherit | clearfix:after {content: “.”;display: block;height: 0;visibility: hidden;clear: both;} |
clip |
Defines the clipping region. | clip: shape | auto | initial | inherit | img {position: absolute;clip: rect(0px,50px,200px,10px);} |
color |
Specify the color of the text of an element. | color: color | initial | inherit | body {color: red;}h1 {color: #00ff00;} |
content |
Inserts generated content. | content: normal | none | counter | string | url(url) | attr(attribute) | open-quote | close-quote | no-open-quote | no-close-quote | initial | inherit | h1::before {content: “Note: “;display: inline;} |
counter-increment |
Increments one or more counter values. | counter-increment: [ identifier integer ]1 or more pairs | none | initial | inherit | body {counter-reset: section;}h1 {counter-reset: category;}h1:before {counter-increment: section;content: “Section ” counter(section) “. “;}h2:before {counter-increment: category;content: counter(section) “.” counter(category) ” “;} |
counter-reset |
Creates or resets one or more counters. | ||
cursor |
Specify the type of cursor. | cursor: [url(address of cursor file),]0 or more times | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | initial | inherit | h1 {cursor: copy;}p {cursor: help;}a {cursor: url(“custom.gif”), url(“custom.cur”), default;} |
direction |
Define the text direction/writing direction. | direction: ltr | rtl | initial | inherit | p {direction: rtl;unicode-bidi: bidi-override;} |
display |
Specifies how an element is displayed onscreen. | display: inline | block | contents | flex | flow | flow-root | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit | div {display: inline;}span {display: block;} |
empty-cells |
Show or hide borders and backgrounds of empty table cells. | empty-cells: show | hide | initial | inherit | table {empty-cells: show;} |
float |
Specifies whether or not a box should float. | float: left | right | none | initial | inherit | p.red {float: left;}p.green {float: right;} |
font |
Defines a variety of font properties within one declaration. | font: [ font-style font-variant font-weight font-size/line-height font-family ] | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit | h1 {font: bold 2.5em “Times New Roman”, Times, serif;}p {font: normal 1.2em Arial, Helvetica, sans-serif;} |
font-family |
Defines a list of fonts for element. | font-family: [ family-name | generic-family ] [, family-name | generic-family ]one or more pairs | initial | inherit | body {font-family: Arial, Helvetica, sans-serif;}h1 {font-family: “Times New Roman”, Times, serif;} |
font-size |
Defines the font size for the text. | font-size: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | length | percentage | initial | inherit | body {font-size: 14px;}h1 {font-size: 2em;} |
font-style |
Defines the font style for the text. | font-style: normal | italic | oblique | initial | inherit | p {font-style: italic;} |
font-variant |
Specify the font variant. | font-variant: normal | small-caps | initial | inherit | p {font-variant: small-caps;} |
font-weight |
Specify the font weight of the text. | font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | initial | inherit | h1 {font-weight: normal;}p {font-weight: bold;} |
left |
Specify the location of the left edge of the positioned element. | left: length | percentage | auto | initial | inherit | p {position: absolute;left: 150px;} |
letter-spacing |
Sets the extra spacing between letters. | letter-spacing: length | normal | initial | inherit | h1 {letter-spacing: -3px;}p {letter-spacing: 15px;} |
line-height |
Sets the height between lines of text. | line-height: length | percentage | number | normal | initial | inherit | p {line-height: 1.5;}div {line-height: 300%;} |
list-style |
Defines the display style for a list and list elements. | list-style: [ list-style-type list-style-position list-style-image ] | initial | inherit | ul {list-style: circle inside;}ol {list-style: upper-latin outside;} |
list-style-image |
Specifies the image to be used as a list-item marker. | list-style-image: url | none | initial | inherit | ul {list-style-image: url(“images/arrow.png”);} |
list-style-position |
Specifies the position of the list-item marker. | list-style-position: inside | outside | initial | inherit | ol {list-style-position: inside;}ul {list-style-position: outside;} |
list-style-type |
Specifies the marker style for a list-item. | list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | initial | inherit | ol {list-style-type: decimal-leading-zero;}ul {list-style-type: square;} |
margin |
Sets the margin on all four sides of the element. | margin: [ length | percentage | auto ] 1 to 4 values | initial | inherit | h1 {margin: 25px;}p {margin: 50px 100px;} |
margin-bottom |
Sets the bottom margin of the element. | margin-bottom: length | percentage | auto | initial | inherit | h1 {margin-bottom: 25px;} |
margin-left |
Sets the left margin of the element. | ||
margin-right |
Sets the right margin of the element. | ||
margin-top |
Sets the top margin of the element. | ||
max-height |
Specify the maximum height of an element. | max-height: length | percentage | none | initial | inherit | p {max-height: 100px;} |
max-width |
Specify the maximum width of an element. | ||
min-height |
Specify the minimum height of an element. | min-height: length | percentage | initial | inherit | p {min-height: 100px;} |
min-width |
Specify the minimum width of an element. | ||
outline |
Sets the width, style, and color for all four sides of an element’s outline. | outline: [ outline-width outline-style outline-color ] | initial | inherit | p.one {outline: 2px solid #ff0000;}p.two {color: #00ff00;outline-top: 5px solid;} |
height |
Specify the height of an element. | height: length | percentage | auto | initial | inherit | p {height: 50px;background-color: #f0e68c;} |
position |
Specifies how an element is positioned. | position: static | relative | absolute | fixed | sticky | initial | inherit | h1 {position: absolute;top: 100px;left: 150px;} |
quotes |
Specifies quotation marks for embedded quotations. | quotes: [string string]one or more pairs | none | initial | inherit | q {quotes: ‘[‘ ‘]’ ‘”‘ ‘”‘;}q:before {content: open-quote;}q:after {content: close-quote;} |
right |
Specify the location of the right edge of the positioned element. | right: length | percentage | auto | initial | inherit | p {position: absolute;right: 150px;} |
padding |
Sets the padding on all four sides of the element. | padding: [ length | percentage] 1 to 4 values | initial | inherit | p.one {padding: 20px;}p.two {padding: 35px 15px;} |
padding-bottom |
Sets the padding to the bottom side of an element. | padding-bottom: length | percentage | initial | inherit | h1 {padding-bottom: 2em;}p {padding-bottom: 50px;} |
padding-left |
Sets the padding to the left side of an element. | ||
padding-right |
Sets the padding to the right side of an element. | ||
padding-top |
Sets the padding to the top side of an element. | ||
page-break-after |
Insert a page breaks after an element. | page-break-after: auto | always | avoid | left | right | initial | inherit | @media print {p.footnotes {page-break-after: always;}} |
page-break-before |
Insert a page breaks before an element. | ||
page-break-inside |
Insert a page breaks inside an element. | page-break-inside: auto | avoid | initial | inherit | @media print {ul {page-break-inside: avoid;}} |
outline-style |
Sets a style for an outline. | outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit | p {outline-style: double;outline-width: 5px;} |
outline-width |
Sets the width of the outline. | ||
outline-color |
Sets the color of the outline. | outline-color: color | invert | initial | inherit | p {outline-style: solid;outline-color: #ff0000;} |
text-transform |
Transforms the case of the text. | text-transform: capitalize | lowercase | none | uppercase | initial | inherit | p {text-transform: capitalize;} |
top |
Specify the location of the top edge of the positioned element. | top: length | percentage | auto | initial | inherit | p {position: absolute;top: 150px;} |
table-layout |
Specifies a table layout algorithm. | table-layout: auto | fixed | initial | inherit | table {width: 250px;table-layout: fixed;} |
text-align |
Sets the horizontal alignment of inline content. | text-align: left | right | center | justify | initial | inherit | h1 {text-align: center;}p {text-align: justify;} |
vertical-align |
Sets the vertical positioning of an element relative to the current text baseline. | vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length | percentage | initial | inherit | img {vertical-align: middle;}span {vertical-align: super;} |
visibility |
Specifies whether or not an element is visible. | visibility: visible | hidden | collapse | initial | inherit | p {visibility: hidden;}div {visibility: hidden;} |
white-space |
Specifies how white space inside the element is handled. | white-space: normal | pre | nowrap | pre-line | pre-wrap | initial | inherit | code {white-space: pre;}p {white-space: nowrap;} |
width |
Specify the width of an element. | width: length | percentage | auto | initial | inherit | p {width: 300px;background-color: #f0e68c;} |
z-index |
Specifies a layering or stacking order for positioned elements. | z-index: integer | auto | initial | inherit | div {position: absolute;lop: 30px;left: 30px;z-index: 2;} |
text-indent |
Indent the first line of text. | text-indent: length | percentage | initial | inherit | p {text-indent: 100px;} |
text-decoration |
Specifies the decoration added to text. | text-decoration: none | [ underline | overline | line-through | blink ] one or more values | initial | inherit | a {text-decoration: none;}h1 {text-decoration: overline;} |
overflow |
Specifies the treatment of content that overflows the element’s box. | overflow: auto | hidden | scroll | visible | initial | inherit | div {width: 400px;height: 300px;overflow: scroll;} |
word-spacing |
Sets the spacing between words. | word-spacing: length | normal | initial | inherit | p {word-spacing: 50px;} |
caption-side |
Specify the position of table’s caption. | caption-side: top | bottom | initial | inherit | caption {caption-side: bottom;} |
| New Properties in CSS3 | |||
align-content |
Specifies the alignment of flexible container’s items within the flex container. | ||
align-items |
Specifies the default alignment for items within the flex container. | ||
align-self |
Specifies the alignment for selected items within the flex container. | ||
animation |
Specifies the keyframe-based animations. | ||
animation-delay |
Specifies when the animation will start. | ||
animation-direction |
Specifies whether the animation should play in reverse on alternate cycles or not. | ||
animation-duration |
Specifies the number of seconds or milliseconds an animation should take to complete one cycle. | ||
animation-fill-mode |
Specifies how a CSS animation should apply styles to its target before and after it is executing. | ||
animation-iteration-count |
Specifies the number of times an animation cycle should be played before stopping. | ||
animation-name |
Specifies the name of @keyframes defined animations that should be applied to the selected element. |
||
animation-play-state |
Specifies whether the animation is running or paused. | ||
animation-timing-function |
Specifies how a CSS animation should progress over the duration of each cycle. | ||
backface-visibility |
Specifies whether or not the “back” side of a transformed element is visible when facing the user. | ||
background-clip |
Specifies the painting area of the background. | ||
background-origin |
Specifies the positioning area of the background images. | ||
background-size |
Specifies the size of the background images. | ||
border-bottom-left-radius |
Defines the shape of the bottom-left border corner of an element. | ||
border-bottom-right-radius |
Defines the shape of the bottom-right border corner of an element. | ||
border-image |
Specifies how an image is to be used in place of the border styles. | ||
border-image-outset |
Specifies the amount by which the border image area extends beyond the border box. | ||
border-image-repeat |
Specifies whether the image-border should be repeated, rounded or stretched. | ||
border-image-slice |
Specifies the inward offsets of the image-border. | ||
border-image-source |
Specifies the location of the image to be used as a border. | ||
border-image-width |
Specifies the width of the image-border. | ||
border-radius |
Defines the shape of the border corners of an element. | ||
border-top-left-radius |
Defines the shape of the top-left border corner of an element. | ||
border-top-right-radius |
Defines the shape of the top-right border corner of an element. | ||
box-shadow |
Applies one or more drop-shadows to the element’s box. | ||
box-sizing |
Alter the default CSS box model. | ||
column-count |
Specifies the number of columns in a multi-column element. | ||
column-fill |
Specifies how columns will be filled. | ||
column-gap |
Specifies the gap between the columns in a multi-column element. | ||
column-rule |
Specifies a straight line, or “rule”, to be drawn between each column in a multi-column element. | ||
column-rule-color |
Specifies the color of the rules drawn between columns in a multi-column layout. | ||
column-rule-style |
Specifies the style of the rule drawn between the columns in a multi-column layout. | ||
column-rule-width |
Specifies the width of the rule drawn between the columns in a multi-column layout. | ||
column-span |
Specifies how many columns an element spans across in a multi-column layout. | ||
column-width |
Specifies the optimal width of the columns in a multi-column element. | ||
columns |
A shorthand property for setting column-width and column-count properties. |
||
flex |
Specifies the components of a flexible length. | ||
flex-basis |
Specifies the initial main size of the flex item. | ||
flex-direction |
Specifies the direction of the flexible items. | ||
flex-flow |
A shorthand property for the flex-direction and the flex-wrap properties. |
||
flex-grow |
Specifies how the flex item will grow relative to the other items inside the flex container. | ||
flex-shrink |
Specifies how the flex item will shrink relative to the other items inside the flex container. | ||
flex-wrap |
Specifies whether the flexible items should wrap or not. | ||
font-size-adjust |
Preserves the readability of text when font fallback occurs. | ||
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. | ||
opacity |
Specifies the transparency of an element. | ||
order |
Specifies the order in which a flex items are displayed and laid out within a flex container. | ||
outline-offset |
Set the space between an outline and the border edge of an element. | ||
font-stretch |
Selects a normal, condensed, or expanded face from a font. | ||
overflow-x |
Specifies the treatment of content that overflows the element’s box horizontally. | ||
overflow-y |
Specifies the treatment of content that overflows the element’s box vertically. | ||
perspective |
Defines the perspective from which all child elements of the object are viewed. | ||
perspective-origin |
Defines the origin (the vanishing point for the 3D space) for the perspective property. | ||
resize |
Specifies whether or not an element is resizable by the user. | ||
tab-size |
Specifies the length of the tab character. | ||
text-align-last |
Specifies how the last line of a block or a line right before a forced line break is aligned when text-align is justify. |
||
text-decoration-color |
Specifies the color of the text-decoration-line. |
||
text-decoration-line |
Specifies what kind of line decorations are added to the element. | ||
text-decoration-style |
Specifies the style of the lines specified by the text-decoration-line property |
||
text-justify |
Specifies the justification method to use when the text-align property is set to justify. |
||
text-overflow |
Specifies how the text content will be displayed, when it overflows the block containers. | ||
text-shadow |
Applies one or more shadows to the text content of an element. | ||
transform |
Applies a 2D or 3D transformation to an element. | ||
transform-origin |
Defines the origin of transformation for an element. | ||
transform-style |
Specifies how nested elements are rendered in 3D space. | ||
transition |
Defines the transition between two states of an element. | ||
transition-delay |
Specifies when the transition effect will start. | ||
transition-duration |
Specifies the number of seconds or milliseconds a transition effect should take to complete. | ||
transition-property |
Specifies the names of the CSS properties to which a transition effect should be applied. | ||
transition-timing-function |
Specifies the speed curve of the transition effect. | ||
word-break |
Specifies how to break lines within words. | ||
word-wrap |
Specifies whether to break words when the content overflows the boundaries of its container. | ||
Last Update: July 10, 2026
Total 0 Votes:
0
0