Here are some CSS properties with their descriptions and examples.
| Property |
Description |
Value |
Example |
| color |
Used to describe the text
(foreground) color of an element. |
Name: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy,
olive, purple, red, silver, teal,
white, yellow RGB: color: #0000FF;
color: #00F; color: rgb(0,0,255);
color: rgb(0%, 0%, 100%) |
h1 {color: #666633;} |
| font-weight |
Specifies the weight, or boldness,
of the type. |
Descriptive: normal, bold, bolder,
lighter Numeric: 100, 200. .
.900 |
strong {font-weight: 700;} |
| font-size |
Specifies the size of the text element.
There are four methods for
specifying font size. |
Absolute: xx-small, x-small, small,
medium, large, x-large, xx-large
Relative: larger, smaller Length:
number + em, ex, px, pt, pc, mm,
cm, in Percentage: n% |
h1 {font-size: large;}
h1 {font-size: larger;}
h1 {font-size: 24pt;}
h1 {font-size: 125%;} |
| font-sizeadjust |
Allows authors to specify the
“aspect value” that they
wish to
maintain. It becomes helpful when
a specified font is unavailable and
the system needs hints to
determine the most suitable
substitute. |
inherit, none, number |
h5.med {font-sizeadjust:
0.58;} |
| font-variant |
Determines if the font is to display
in normal font or SMALL-CAPS |
normal, small-caps |
p {font-variant: small-caps;} |
| font-style |
Specifies that the font be displayed
in one of three ways: normal,
italic,oroblique (slanted). |
normal, italic, oblique |
h1 {font-style: italic;} |
| font-stretch |
This is the CSS indication of the
condensed or expanded nature of
the face relative to others in the
same font family. |
condensed, normal, expanded |
h2 {
font-stretch: expanded; } |
| text-decoration |
Allows text to be decorated
through one of five properties. |
none (default), underline, overline,
line-through, blink |
a: link {text-decoration:
underline;} |
| text-transform |
Affects the capitalization of the
element. |
none, capitalize, lowercase,
uppercase |
h1.title {text-transform:
capitalize;} |
| text-shadow |
Specifies one or more commaseparated
shadow effects to be
applied to the text content of the
current element. |
inherit, none, [shadow effects] |
blockquote {text-shadow:
black 3px 3px, yellow
-3px -3px;} |
| letter-spacing |
Specifies an amount of space to be
added between characters. |
normal, length |
h5.close {letter-spacing:
0.1cm;} |
| word-spacing |
Specifies an additional amount of
space to be placed between words
of the text element. |
normal, length |
h3 {word-spacing: .5em;} |
| line-height |
Will accept a value to control the
spacing between baselines of text. |
normal, number, length, percentage |
p {line-height: 200%}
p {line-height: 1.2em;} |
| vertical-align |
Affects the vertical alignment of an
element. |
baseline (default), bottom, middle,
sub, super, text-bottom, text-top,
top, percentage |
p.opener {vertical-align:
text-top;} |
| text-indent |
Specifies an amount of indentation
(from the left margin) to appear in
the first line of text in an element. |
length, percentage |
p.first {text-indent: 3em;} |
| text-align |
Affects the horizontal alignment of
the contained text elements. |
center, justify, left, right |
div.center {text-align:
center;} |
| direction |
Specifies the direction of text. |
ltr, rtl, inherit |
div {unicode-bidi: embed;
direction: rtl;} |
| unicode-bidi |
Defines levels of embedding with
regard to Unicode bidirectional
algorithm. |
inherit, normal, embed,
bidi-override |
div {unicode-bidi: embed;
direction: rtl} |
| background-color |
Sets the background color of an
element. |
color name or
transparent |
p.warning {backgroundcolor:
red;} |
| background-image |
Sets a background image for the
element. |
URL, none |
body {background-image:
url(stripes.gif);} |
| background-attachment |
Determines whether the
background image scrolls along
with the document or remains
in a fixed position. |
scroll (default), fixed |
body {background-image:
url(stripes.gif); backgroundattachment:
scroll;} |
| background-repeat |
When a background image is
specified, this property specifies
whether and how the image is
repeated. |
repeat, repeat-x,
repeat-y, no-repeat |
body {background-image:
url(stripes.gif); backgroundrepeat:
no-repeat;} |
| background-position |
When a background image has been
specified, this property specifies its
initial position relative to the box that
surrounds the content of the element
(not including its padding, border, or
margin). |
percentage, length,
top/center/bottom,
left/center/right |
body {background-image:
url(stripes.gif); background-position:
bottom left;} |
| background |
Shorthand property for specifying
all the individual background
properties in a single declaration. |
background-color,
background-image,
background-repeat,
background-attachment,
background-position |
body {background: aqua
url(stars.gif) no-repeat fixed;} |
| border-width |
Shorthand property for specifying
the width of the border for all four
sides of the element box. |
thin, medium, thick,
length |
p.header {border-width: thin} |
border-top-width,
border-left-
width,
border-bottom-
width,
border-right-width |
Specifies the border widths of the
respective sides of an element’s box. |
thin, medium, thick,
length |
p.sidebar {border-right-width:
medium; border-bottom-width:
thick} |
| border-color |
Sets the border color for each of the
four sides of an element box. |
color name,
RGB value |
blockquote {border-color: red
blue green yellow} |
border-top-color,
border-right-
color,
border-bottom
-color, border-left-
color |
Specifies the border colors of the
respective sides of an element’s box |
inherit, transparent, color,
-moz-use-text-color |
div {border-top-color: green} |
| border-style |
Sets the style of border for an
element’s box. |
inherit, none, dotted,
dashed, solid, double,
groove, ridge, inset,
outset, -moz-bg-inset,
-moz-bg-outset, |
p.example {border-style: solid
dashed} |
border-top-style,
border-right-
style,
border-bottom-style,
border-left-
style |
Specifies the border style of the
respective sides of an element’s box. |
inherit, none, dotted,
dashed, hidden, solid,
groove, ridge, inset,
outset, double,
-moz-bg-inset,
-moz-bg-outset, |
strong {border-top-style: groove} |
border-top,
border-left,
border-bottom,
border-right |
Each of these is a shorthand
property for setting the width, style,
and color of a specific side of a box. |
border-top-width,
border-style, border-color |
h1 {border-left: .5em solidblue} |
| border |
Shorthand property for setting the
border width, style, and color for all
four sides of an element box. |
border-width, border-style,
border-color |
p.example {border: 2 px dotted
#663333} |
| margin |
Shorthand property for specifying
all the margins of an element. |
length, percentage, auto |
img {margin: 0px 12px 0px 12px} |
margin-top,
margin-left,
margin-bottom,
margin-right |
These properties specify the
amount of margin on specific
sides of the element. |
length, percentage, auto |
img {margin-top: 0px} |
| padding |
Shorthand property for specifying the
padding for all sides of an element. |
length, percentage |
p.sidebar {padding: 1em} |
padding-top,
padding-left,
paddingbottom,
padding-right |
These properties specify an amount
of padding to be added around the
respective sides of an element’s
contents. |
length, percentage |
p.sidebar {padding-top: 1em} |
| position |
Determines whether normal, relative, or absolute
positioning methods are used to render the current
element box. |
inherit, static,
relative,
absolute, fixed |
h2 {position: absolute; top:
20px; right: 50px; bottom:
20px; left: 50px;} |
| direction |
Specifies the base direction (reading order) for text
content in an element. It is also meant to control the
directionality of table columns, text overflow, and
positioning of justified text. |
inherit, ltr, rtl |
div {direction: ltr;} |
| top |
Describes the vertical offset for the top edge of the
absolutely positioned element box from the top edge
of the element’s containing block. |
inherit, auto,
length,
percentage |
h2 {top:20px; right: 50px;
bottom: 20px; left: 50px;} |
| left |
Describes the horizontal offset for the left edge of the
absolutely positioned element box from the left edge
of the element’s containing block. |
inherit, auto,
length,
percentage |
h2 {top:20px; right: 50px;
bottom: 20px; left: 50px;} |
| bottom |
Describes the vertical offset for the bottom edge of the
absolutely positioned element box from the bottom
edge of the element’s containing block. |
inherit, auto,
length,
percentage |
h2 {top:20px; right: 50px;
bottom: 20px; left: 50px;} |
| right |
Describes the horizontal offset for the right edge of the
absolutely positioned element box from the right edge
of the element’s containing block. |
inherit, auto,
length,
percentage |
h2 {top:20px; right: 50px;
bottom: 20px; left: 50px;} |
| width |
Sets the width of the element. It can be applied to text
elements or as a way to resize images. |
length,
percentage, auto |
img.photo
{width: 75%;} |
| min-width |
Allows a minimum width to be set for an element box. |
inherit, length,
percentage |
h5 {min-width: 100px;} |
| max-width |
Allows a maximum width to be set for an element box |
inherit, none,
length,
percentage |
h5 {max-width: 150px;} |
| height |
Sets the height of the element. |
length,
percentage, auto |
img.photo {height: 75%;} |
| min-height |
Allows a
minimum height to be set for an element box. |
inherit, length,
percentage |
h5 {min-height: 100px;} |
| max-height |
Allows a maximum height to be set for an element box. |
inherit, none,
length,
percentage |
h5 {max-height: 150px;} |
| z-index |
Controls the placement of elements along the z-axis. |
inherit, auto,
integer |
h2 {position: absolute; top:
20px; right: 50px; bottom:
20px; left: 50px; z-index: 3;} |
| visibility |
Controls whether the content of an element box is
rendered (including the borders and backgrounds). |
inherit, visible,
hidden, collapse,
hide, show |
p {visibility: hidden;} |
| overflow |
In cases where content in an element falls outside the
element’s rendering box (due to negative margins,
absolute positioning, content exceeding the width/
height set for an element, etc.), the overflow property
describes what to do. |
inherit, visible,
hidden, scroll,
auto, -mozscrollbars-
none,
-moz-scrollbarshorizontal,
-moz-scrollbarsvertical |
blockquote {width: 50px;
height: 50px; overflow:
scroll;} |
| float |
Positions an element against the left or right border
and allows text to flow around it. |
left, right, none |
p.sidebar {float: right} |
| clear |
Specifies whether to allow floating elements on an
image’s sides. |
none, left,
right, both |
h1, h2, h3 {clear: left;} |
| clip |
A clipping area describes the portions of an element’s
rendering box that are visible (when an element’s
“overflow”
property is not set to “visible”). |
inherit, auto,
shape |
p {overflow: scroll;
position: absolute; width:
50px; height: 50px; clip:
rect(5px 40px 40px 5px);} |
| display |
Defines how and specifies if an element
is displayed. |
block, inline, list-item,
none |
p {display: block;} |
| white-space |
Defines how white space in the source for
the element is handled. |
normal, pre, nowrap |
p.haiku {whitespace:
pre;} |
| list-style-type |
Specifies the appearance of the automatic
numbering or bulleting of lists. |
disc, circle, square,
decimal, lower-roman,
upper-roman, lower-alpha,
upper-alpha, none |
ol {list-style-type:
upper-roman;}
(A., B., C., D., etc) |
| list-style-image |
Specifies a graphic to be used as a
list-item marker (bullet). |
url, none |
ul {list-style-image:
url(3dball.gif);} |
| list-style-position |
Specifies whether list items should be
set with a hanging indent. |
inside, outside |
ol {list-style-position:
outside;} |
| list-style |
Shorthand property for setting the
list-style type, image, and position
(inside, outside) in one declaration. |
list-style-type,
list-style-image,
list-style-position |
ul {list-style: list-item
url(3dball.gif) disc
inside;} |
| table-layout |
Controls the layout algorithm used to
render table structures. |
inherit, auto, fixed |
table {table-layout:
fixed;} |
| border-collapse |
The rendering of table borders is divided
into two categories in CSS2—collapsed
and separated. This property specifies
which border rendering mode to use. |
inherit, collapse, separate |
table {border-collapse:
separate;} |
| border-spacing |
Specifies the distance between the borders
of adjacent table cells in the “separated
borders” model. |
inherit, length |
table {border-spacing:
10pt 5pt;} |
| cursor |
Controls the type of cursor
that is used when a pointing
device is over an element |
inherit, default, auto, url, n-resize,
ne-resize, e-resize, se-resize, s-resize,
sw-resize, w-resize, nw-resize, crosshair,
pointer, move, text, wait, help, hand,
all-scroll, col-resize, row-resize, no-drop,
not-allowed, progress, vertical-text, alias,
cell, copy, count-down, count-up,
count-up-down, grab, grabbing, spinning |
blockquote
{cursor: help;} |
| outline |
Shorthand method for specifying
the outline-color, outline-style,
and outline-width properties
using a
single property notation |
inherit, outline-color, outline-style,
outline-width |
button {outline: red
solid thick;} |
| outline-width |
Specifies the width
for the outline of an element |
inherit, thin, medium, thick, length |
input {outlinewidth:
thin;} |
| outline-color |
Specifies a color for the outline
for an element |
inherit, invert, color |
img {outline-color:
black;} |
| outline-style |
Specifies an outline line style for
the current element |
inherit, none, dotted, dashed, solid,
groove, ridge, inset, outset, double |
button {outline-style:
groove;} |
| content |
Automatically generates content to
attach before/after a CSS selector
(using the :before and :after
pseudo-elements.) |
inherit, string, url, counter(),
open-quote, close-quote,
no-open-quote, no-closequote,
attr(x) |
em:before {content:
url("head.gif");} |
| quotes |
This property determines the type
of quotation marks that will be
used in a document. |
inherit, none, ([string][string]) |
blockquote: before {content:
open-quote} blockquote:after
{content: close-quote} |
| counter-reset |
The counter-reset property acts
like a variable assignment in a
programming language—it sets a
new value for the specified counter
whenever the current CSS selector
is encountered. |
inherit, none, [
identifier integer] |
h1:before {counter-increment:
main-heading; counter-reset:
sub-heading;} |
| counter-increment |
The counter-increment property
acts like an incremented variable in
a programming language—it
specifies the amount to increment
the specified counter by when the
current CSS selector is encountered. |
inherit, none, [
identifier integer] |
h1:before {counter-increment:
main-heading; counter-reset:
sub-heading} |
| @page |
Sets page rules. |
|
@page doublepage {size:
8.5in 11in;
page-break-after: left;} |
| page |
Used to specify a specific page type to use
when displaying an element box. |
auto, identifier |
body {page: doublepage;
page-break-after: right;} |
| size |
Describes the orientation or dimensions of the
page box. |
inherit, auto, portrait,
landscape, length |
body {size 8.5in 11in;} |
| marks |
Printed documents in the printing industry
often carry marks on the page outside the
content area. These marks are used to align
and trim groups of papers. This property
specifies what sort of marks should be
rendered just outside the rendered page box. |
inherit, none, crop,
cross |
body {marks:
crop cross;} |
| margin |
Shorthand property which allows an
author to specify margin-top, margin-right,
margin-bottom, and margin-left, properties
using a single property and value notation. |
inherit, auto, length,
percentage |
body {margin: 5px 0px
2px 25px;} |
margin-top,
margin-left,
margin-bottom,
margin-right |
Specifies the margin properties of the
respective sides of an element’s box. |
inherit, auto, length,
percentage |
address {margin-top:
33%;} |
| page-break-before |
Specifies the page-breaking behavior that
should occur before an element box and on
what side of the page the content that follows
should resume on. |
inherit, auto, avoid,
left, right, always,
empty string |
p {page-break-before:
always;} |
| page-breakafter |
Specifies the page-breaking behavior that
should occur after an element box and on
what side of the page the content that follows
should resume on. |
inherit, auto, avoid,
left, right, always,
empty string |
p {page-break-after:
always;} |
| page-break-inside |
Specifies the page-breaking behavior
that should occur inside an element’s
rendering box. |
inherit, auto, avoid |
p {page-break-inside:
avoid;} |
| orphans |
Specifies the minimum number of lines of
content for the current element that must be
left at the bottom of a page in a paged display
environment. |
inherit, integer |
p {orphans: 4;} |
| windows |
Specifies the minimum number of lines of
content for the current element that must be
left at the top of a page in a paged display
environment. |
inherit, integer |
p{windows: 1;} |
