Margin Properties








PropertyDescriptionPossible ValuesExamples
margin-topDeclares the top margin for the element.Lengths, percentages, and the predefined value auto.
div { margin-top:5px; }

div { margin-top:15%; }

margin-rightDeclares the right margin for the element.Lengths, percentages, and the predefined value auto.
div { margin-right:5px; }

div { margin-right:15%; }

margin-bottomDeclares the bottom margin for the element.Lengths, percentages, and the predefined value auto.
div { margin-bottom:5px; }

div { margin-bottom:15%; }

margin-leftDeclares the left margin for the element.Lengths, percentages, and the predefined value auto.
div { margin-left:5px; }

div { margin-left:15%; }

marginShorthand property used to declare all the margin properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):

margin-top
margin-right
margin-bottom
margin-left

Undeclared values work as further shorthand notation. If only one length value is declared, all four margins will use that length. If two lengths are declared, the top and bottom margins will use the first length while the right and left margins will use the second length. If three lengths are declared, the top margin will use the first length, the right and left margins will use the second length, and the bottom margin will use the third length.

div { margin:5px 12px 4px 7px; }

div { margin:5px; }

div { margin:5px 10px; }

div { margin:5px 7px 4px; }




Back to Learn more About CSS

Generated Content Properties & List Properties


PropertyDescriptionPossible ValuesExamples
contentGenerates content in the document in conjunction with the :before and :afterpseudo-elements.String values, URL values, and predefined value formats:

counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote

div:before { content:"some text"; }

div:after { content:url(page2.html); }

counter-incrementDeclares the counter increment for each instance of a selector.Integers and the predefined value none.More Information
counter-resetDeclares the value the counter is set to on each instance of a selector.Integers and the predefined value none.More Information
quotesDeclares the type of quotation marks to use for quotations and embedded quotations.String values and the predefined value none.More Information



List Properties



PropertyDescriptionPossible ValuesExamples
list-style-typeDeclares the type of list marker used.
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
ol { list-style-type:upper-roman; }

ul { list-style-type:square; }

list-style-positionDeclares the position of the list marker.
inside
outside
ol { list-style-position:inside; }

ul { list-style-position:outside; }

list-style-imageDeclares an image to be used as the list marker.URL values.
ul { list-style-image:url(image.jpg); }
list-styleShorthand property to declare three list properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):

list-style-type
list-style-position
list-style-image

ul { list-style:disc inside url(image.gif); }

ol { list-style:upper-roman outside; }

marker-offsetDeclares the marker offset for elements with a value of markerset for the display property.Lengths and the predefined value auto.
li:before { display:marker; marker-offset:5px; }

Back to Learn More about CSS

Font Properties







PropertyDescriptionPossible ValuesExamples
font-familyDeclares the name of the font to be used. Previously set in HTML via the face attribute in a tag.Valid font family names or generic family names, i.e. Arial, Verdana, sans-serif, "Times New Roman", Times, serif, etc.

Font family names can be separated by a comma in the same declaration to allow additional and/or generic family names to be used if the prefereed font is unable to be displayed.

div { font-family:Arial; }

div { font-family:Arial, Helvetica, sans-serif; }

font-sizeDeclares the size of the font. Previously set in HTML via thesize attribute in a tag.Lengths (number and unit type— i.e. 1em,12pt, 10px, 80%) or one of the following predefined values:

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger

div { font-size:70%; }

div { font-size:0.85em; }

div { font-size:medium; }

font-size-adjustLimited browser support: Was part of CSS 2, but not in CSS 2.1. This property may return in CSS 3.

Declares the aspect value(font size divided by x-height).

Numeric value
div { font-size-adjust:0.54; }

div { font-size-adjust:0.46; }

font-stretchLimited browser support: Was part of CSS 2, but not in CSS 2.1. This property may return in CSS 3.

Declares the stretch of the font face.

normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
div { font-stretch:narrower; }

div { font-stretch:ultra-expanded; }

font-styleDeclares the font style.
normal
italic
oblique
div { font-style:italic; }

div { font-style:oblique; }

font-variantDeclares the font variant.
normal
small-caps
div { font-variant:normal; }

div { font-variant:small-caps; }

font-weightDeclares the font weight (lightness or boldness)
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
div { font-weight:bolder; }

div { font-weight:200; }

fontUsed as a shorthand property to declare all of the font properties at once (except font-size-adjust and font-stretch).Separate values by a space in the following order (those that are not defined will use inherited or default initial values):

font-style
font-variant
font-weight
font-size
line-height
font-family

div { font:italic small-caps bold 1em 1.2em Arial }

div { font:bold 0.8em Verdana }



Back To Learn More About CSS

Dimension Properties







PropertyDescriptionPossible ValuesExamples
heightDeclares the height of the element.Lengths, percentages, and the predefined value auto.
div { height:200px; }

div { height:50%; }

max-heightDeclares the maximum height of the element.Lengths, percentages, and the predefined value auto.
div { max-height:200px; }

div { max-height:50%; }

min-heightDeclares the minimum height of the element.Lengths, percentages, and the predefined value auto.
div { min-height:200px; }

div { min-height:50%; }

widthDeclares the width of the element.Lengths, percentages, and the predefined value auto.
div { width:500px; }

div { width:75%; }

max-widthDeclares the maximum width of the element.Lengths, percentages, and the predefined value auto.
div { max-width:500px; }

div { max-width:75%; }

min-widthDeclares the minimum width of the element.Lengths, percentages, and the predefined value auto.
div { min-width:500px; }

div { min-width:75%; }



Back to Learn More About CSS

Classification and Positioning Properties




PropertyDescriptionPossible ValuesExamples
clearDeclares the side(s) of an element where no previous floating elements are allowed to be adjacent.
left
right
both
none
div { clear:right; }

div { clear:both; }

cursorDeclares the type of cursor to be displayed.URL values, and the following prefefined values:

auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

div { cursor:crosshair; }

div { cusrsor:url(image.csr); }

div { cusrsor:url(image.csr), pointer; }

displayDeclares if/how the element displays.
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
div { display:none; }

div { display:inline; }

div { display:marker; }

floatDeclares whether a box should float to the left or right of other content, or whether it should not be floated at all.
left
right
none
div { float:left; }

div { float:right; }

visibilityDeclares the visibility of boxes generated by an element.visible
hidden
collapse
div { visibility:visible; }

div { visibility:hidden; }

topDeclares the distance that the top content edge of the element is offset below the top edge of its containing block. The positionproperty of the element must also be set to a value other than static.Lengths, percentages, and the predefined value auto.
div { top:15px; }

div { top:2%; }

rightDeclares the distance that the right content edge of the element is offset to the left of the right edge of its containing block. Theposition property of the element must also be set to a value other than static.Lengths, percentages, and the predefined value auto.
div { right:15px; }

div { right:2%; }

bottomDeclares the distance that the bottom content edge of the element is offset above the bottom edge of its containing block. Theposition property of the element must also be set to a value other than static.Lengths, percentages, and the predefined value auto.
div { bottom:15px; }

div { bottom:2%; }

leftDeclares the distance that the left content edge of the element is offset to the right of the left edge of its containing block. Theposition property of the element must also be set to a value other than static.Lengths, percentages, and the predefined value auto.
div { left:15px; }

div { left:2%; }

positionDeclares the type of positioning of an element.
static
relative
absolute
fixed
div { position:absolute; }

div { position:relative; }

clipDeclares the shape of a clipped region when the value of the overflow property is set to a value other than visible.Shapes, or the predefined value auto.

In CSS 2, the only valid shape is a rectangle, using the following format to specify the offset lengths from each side of the box:

rect(top, right, bottom, left)

div { clip:auto; }

div { clip:rect(2px, 4px, 7px, 5px); }

overflowDeclares how content that overflows the element's box is handled.
visible
hidden
scroll
auto
div { overflow:hidden; }

div { overflow:scroll; }

vertical-alignDeclares the vertical alignment of an inline-level element or a table cell.Lengths, percentages, and the following predefined values:

baseline
sub
super
top
text-top
middle
bottom
text-bottom

span { vertical-align:middle; }

td { vertical-align:top; }

z-indexDeclares the stack order of the element.Integer values and the predefined value auto.
div { z-index:2; }

div { z-index:auto; }



Border Properties








PropertyDescriptionPossible ValuesExamples
border-top-colorDeclares the color of the top border.Valid color names, RGB values, hexidecimal notation, or the predefined value transparent.
div { border-top-color:green; }

div { border-top-color:#00FF00; }

border-top-styleDeclares the style of the top border.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
div { border-top-style:solid; }

div { border-top-style:inset; }

border-top-widthDeclares the width of the top border.Lengths or the following predefined values:

thin
medium
thick

div { border-top-width:2px; }

div { border-top-width:thin; }

border-topUsed as a shorthand property to set all the border-top properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):

border-top-width
border-top-style
border-top-color

div { border-top:2px solid green; }

div { border-top:thick double #00FF00; }

border-right-colorDeclares the color of the right border.Valid color names, RGB values, hexidecimal notation, or the predefined value transparent.
div { border-right-color:green; }

div { border-right-color:#00FF00; }

border-right-styleDeclares the style of the right border.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
div { border-right-style:solid; }

div { border-right-style:inset; }

border-right-widthDeclares the width of the right border.Lengths or the following predefined values:

thin
medium
thick

div { border-right-width:2px; }

div { border-right-width:thin; }

border-rightUsed as a shorthand property to set all the border-right properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):

border-right-width
border-right-style
border-right-color

div { border-right:2px solid green; }

div { border-right:thick double #00FF00; }

border-bottom-colorDeclares the color of the bottom border.Valid color names, RGB values, hexidecimal notation, or the predefined value transparent.
div { border-bottom-color:green; }

div { border-bottom-color:#00FF00; }

border-bottom-styleDeclares the style of the bottom border.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
div { border-bottom-style:solid; }

div { border-bottom-style:inset; }

border-bottom-widthDeclares the width of the bottom border.Lengths or the following predefined values:

thin
medium
thick

div { border-bottom-width:2px; }

div { border-bottom-width:thin; }

border-bottomUsed as a shorthand property to set all the border-bottom properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):

border-bottom-width
border-bottom-style
border-bottom-color

div { border-bottom:2px solid green; }

div { border-bottom:thick double #00FF00; }

border-left-colorDeclares the color of the left border.Valid color names, RGB values, hexidecimal notation, or the predefined value transparent.
div { border-left-color:green; }

div { border-left-color:#00FF00; }

border-left-styleDeclares the style of the left border.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
div { border-left-style:solid; }

div { border-left-style:inset; }

border-left-widthDeclares the width of the left border.Lengths or the following predefined values:

thin
medium
thick

div { border-left-width:2px; }

div { border-left-width:thin; }

border-leftUsed as a shorthand property to set all the border-left properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):

border-left-width
border-left-style
border-left-color

div { border-left:2px solid green; }

div { border-left:thick double #00FF00; }

border-colorDeclares the border color of all four borders at once.Valid color names, RGB values, hexidecimal notation, or the predefined value transparent.

Separate the color for each border by a space, declaring the colors for the borders in the following order:

border-top-color
border-right-color
border-bottom-color
border-left-color

Undeclared values work as further shorthand notation. If only one color value is declared, all four borders will use that color. If two colors are declared, the top and bottom borders will use the first color while the right and left borders will use the second color. If three colors are declared, the top border will use the first color, the right and left borders will use the second color, and the bottom border will use the third color.

div { border-color:green red blue olive; }

div { border-color:green; }

div { border-color:green red; }

div { border-color:green red blue; }

border-styleDeclares the border style of all four borders at once.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset

Undeclared values work as further shorthand notation. If only one style value is declared, all four borders will use that style. If two styles are declared, the top and bottom borders will use the first style while the right and left borders will use the second style. If three styles are declared, the top border will use the first style, the right and left borders will use the second style, and the bottom border will use the third style.

div { border-style:solid dotted dashed double; }

div { border-style:solid; }

div { border-style:solid dotted; }

div { border-style:solid dotted dashed; }

border-widthDeclares the width of all four borders at once.Lengths or the following predefined values:

thin
medium
thick

Undeclared values work as further shorthand notation. If only one width value is declared, all four borders will use that width. If two widths are declared, the top and bottom borders will use the first width while the right and left borders will use the second width. If three widths are declared, the top border will use the first width, the right and left borders will use the second width, and the bottom border will use the third width.

div { border-width:1px 3px 5px 2px; }

div { border-width:thin; }

div { border-width:2px 4px; }

div { border-width:2px 4px 5px; }

borderUsed as a shorthand to declare the border properties when all four borders will have the same appearance.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):

border-width
border-style
border-color

div { border:1px double green; }

div { border:thin solid #00FF00; }



Back to Learn More About CSS
Subscribe to: Posts (Atom)