CSS Properties Details


Font Properties
PropertyPurpose
FontTo combine several of the following properties into one
font-familySpecifies the typeface or Family of font
font-sizeSpecifies the size of a font
font-weightSpecifies the font should be normal or bold
font-styleSpecifies the font should be normal,italic or oblique
font-stretch To control the width of the actual characters in a font
font-variant Specifies the font should be normal or small caps
font-size-adjustTo alert the aspect ratio of the size of the font's Characters

Text Properties
PropertyPurpose
colorSpecifices the color of the text
text-alignSpecifices the horizontal alignment of text within containing element
vertical-alignSpecifices the Vertical alignment of text within containing element
text-decoration Specifies the decoration added to text
text-indent Specifies an indent from the left border for the text
text-transform Specifies the content of the element should all be uppercase,lowercase or capitalized
text-shadowSpecifies that the text should have a drop shadow
letter-spacing Controls the width between letters
word-spacing Controls the amount of space between each word
white-space Specifies the white space should be collapsed,preserved or prevented from wrapping
direction Specfies the direction of text

Background Properties
PropertyPurpose
background Specifies all the background properties in one declaration
background-colorSpecifies a background color
background-repeatThe background image should be repeated
background-image Specifies an image to use as the background
background-attachmenIndicates a bacckground image should be in one position on the pages
Background-positionIndicates where an image should be positioned

Border Properties
PropertyPurpose
borderSpecifies all the border properties in one declaration
border-colorSpecifies the color of the four borders
border-styleSpecifies the style of the four borders
border-widthSpecifies the width of the four borders
border-topSpecifies all the top border properties in one declaration
border-top-widthSpecifies the width of the top border
border-top-styleSpecifies the style of the top border
border-top-colorSpecifies the color of the top border
border-bottomSpecifies all the bottom border properties in one declaration
border-bottom-widthSpecifies the width of the bottom border
border-bottom-styleSpecifies the style of the bottom border
border-bottom-colorSpecifies the color of the bottom border
border-leftSpecifies all the left border properties in one declaration
border-left-widthSpecifies the width of the left border
border-left-styleSpecifies the style of the left border
border-left-colorSpecifies the color of the left border
border-rightSpecifies all the rigth border properties in one declaration
border-right-widthSpecifies the width of the right border
border-right-styleSpecifies the style of the right border
border-right-colorSpecifies the color of the right border

Border-Radius Properties
PropertyPurpose
border-radiusSpecifies all the border-radius properties in one declaration
border-top-left-radiusThe shape of the border of the top-left corner
border-top-right-radiusThe shape of the border of the top-right corner
border-bottom-left-radiusThe shape of the border of the bottom-left corner
border-bottom-right-radiusThe shape of the border of the bottom-right corner

Border-Image Properties
PropertyPurpose
border-imageSets all the border-image properties in one declaration
border-image-outsetSpecifies the amount by which the border image area extends beyond the border box
border-image-repeatSpecifies whether the image-border should be repeated, rounded or stretched
border-image-sliceSpecifies the inward offsets of the image-border
border-image-sourceSpecifies an image to be used as a border
border-image-widthSpecifies the widths of the image-border

Postion Properties
PropertyPurpose
static This is the same as normal flow(This is the Default)
relative The position of the box can be offset from where it would be if it were left in normal flow
abslouteThe box is positioned exactly using x and y coordinates from the top-left corner of the containing element
fixed The position is calculated from the top-left corner and does not change postion.

Floating Properties
PropertyPurpose
leftThe floated to left of the containing element
rightThe floated to right of the containing element
topThe floated to top of the containing element
inheritSpecifies all the floating properties in one declaration

Clear Properties
PropertyPurpose
leftThe element with the clear property cannot have content on the left side of it
rightThe element with the clear property cannot have content on the right side of it
topThe element with the clear property cannot have content on the top side of it
bottom The element with the clear property cannot have content on the bottom side of it
noneAllows floating on either side

List Properties
PropertyPurpose
list-styleSpecifies all the properties for a list in one declaration
list-style-positionSpecifies the marker should appear in relation to the text
list-style-imageSpecifies an image for the marker rather than a bullet point or number
list-style-type Control the shape or appearance of the marker
marker-offset Specifies the distance between a marker andd text in the list

Table Properties
PropertyPurpose
border-collapseThe borders of two table cells touch , this property indicates whether both border should be visible
border-spacingSpecifies the width of the space that should appear between table cells
table-layout Specifies the layout algorithm to be used for a table
empty-cells Specifies whether the border should be shown if a cell is empty
caption-side Specifies which side of a table the caption should appear on

Outline Properties
PropertyPurpose
outline-widthSpecifies the width of the outline
outline-style Specifies the line style for the ouyline
outline-color Specifies the color of the outline
outline Specifies all the outline properties in one declaration

Box offset Properties
PropertyPurpose
top Offset position from the top of the containing element
leftOffset position from the left of the containing element
rightOffset position from the right of the containing element
bottom Offset position from the bottom of the containing element

Dimensions Properties
PropertyPurpose
heightSpecifies the height of a box
line-heightSpecifies the height of a line of text
max-heightSpecifies the maximun height for a box
min-heightSpecifies the minimum height for a box
widthSpecifies the width of a box
max-widthSpecifies the maximum width for a box
min-widthSpecifies the minimum width for a box
Cursor Properties
PropertyPurpose
autoSpecifies the height of a box
crosshairSpecifies the height of a line of text
defaultSpecifies the maximun height for a box
pointerSpecifies the minimum height for a box
moveSpecifies the width of a box
e-resize,
 ne-resize,
 nw-resize,
 n-resize,
 se-resize,
 sw-resize,
 s-resize,
 w-resize
Indicate that an edge can be moved.Stretching a box with the mouse

Share this article on