Complete List of CSS Attributes and Values

In this post I am going to discuss the CSS attributes and valures with description it will allow all readers to know about the CSS values and properties in detail.and after this post you would surely be able to play with your blog CSS and make it more beautiful.I have explained it in a way that in first column there is a CSS Property, in the second column values and at the end there is a detail for the property.

CSS Property/Attribute	Values	Detail
background	color	Allows you to set all values of the background in one declaration.
	size
	percentage
	pos-key-term
	url
	repeat
	repeat-x
	repeat-y
	no-repeat
	fixed
	scroll
background-attachment	fixed	Defines whether your background will scroll or not with the scroll bar.
	scroll
background-color	color	Allows you to set the color of the background.
	none
background-image	url	Use an image as a background. Remember to choose an image that does not interfere with a visitor's ability to read your text.
background-position	size	Define the position of your background image. You must define a background-image to use background-position.
	percentage
	pos-key-term
background-repeat	repeat	Dictate if and in which direction your background image will repeat. Vertically is the x-axis and horizontally is the y-axis.
	repeat-x
	repeat-y
	no-repeat
border	solid	There are endless types of border styles at your disposal. We recommend that you experiement with many color/border-style combinations to get an idea of all the different looks you can create.
	double
	groove
	dotted
	dashed
	inset
	outset
	ridge
	hidden
	four-sides
	width-key-term
border-bottom	size	"Set the bottom border of the element. If you would like to place a border on only one side of an HTML element or maybe have a unique look for each side of the border then use border-(direction)."
	color
	width-key-term
border-bottom-color	color	Set the color of the element's bottom border. Note: You must define a width and style if you want the border to display. Using border-color by itself will not draw a border.
border-bottom-style	solid	Set the bottom border style of the element. Note: You must define a border width if you want the border to display. Using border-style by itself will not draw a border.
	double
	groove
	dotted
	dashed
	inset
	outset
	ridge
	hidden
border-bottom-width	size	Set the width of the element's bottom border. Note: You must define a style if you want the border to display. Using border-width by itself will not draw a border.
	width-key-term
border-color	color	Set the color of the element's border. Note: You must define a width and style if you want the border to display. Using border-color by itself will not draw a border.
border-left	size	"Set the left border of the element. If you would like to place a border on only one side of an HTML elementor maybe have a unique look for each side of the borderthen use border-(direction)."
	color
	width-key-term
border-left-color	color	Set the color of the element's left border. Note: You must define a width and style if you want the border to display. Using border-color by itself will not draw a border.
border-left-style	solid	Set the left border style of the element. Note: You must define a border width if you want the border to display. Using border-style by itself will not draw a border.
	double
	groove
	dotted
	dashed
	inset
	outset
	ridge
	hidden
border-left-width	size	Set the width of the element's left border. Note: You must define a style if you want the border to display. Using border-width by itself will not draw a border.
	width-key-term
border-right	size	"Set the right border of the element. If you would like to place a border on only one side of an HTML elementor maybe have a unique look for each side of the borderthen use border-(direction)."
	color
	width-key-term
border-right-color	color	Set the color of the element's right border. Note: You must define a width and style if you want the border to display. Using border-color by itself will not draw a border.
border-right-style	solid	Set the right border style of the element. Note: You must define a border width if you want the border to display. Using border-style by itself will not draw a border.
	double
	groove
	dotted
	dashed
	inset
	outset
	ridge
	hidden
border-right-width	size	Set the width of the element's right border. Note: You must define a style if you want the border to display. Using border-width by itself will not draw a border.
	width-key-term
border-style	solid	Set the border style of the element. Note: You must define a border width if you want the border to display. Using border-style by itself will not draw a border.
	double
	groove
	dotted
	dashed
	inset
	outset
	ridge
	hidden
	four-sides
	width-key-term
border-top	size	"Set the top border of the element. If you would like to place a border on only one side of an HTML elementor maybe have a unique look for each side of the borderthen use border-(direction)."
	color
	width-key-term
border-top-color	color	Set the color of the element's top border. Note: You must define a width and style if you want the border to display. Using border-color by itself will not draw a border.
border-top-style	solid	Set the top border style of the element. Note: You must define a border width if you want the border to display. Using border-style by itself will not draw a border.
	double
	groove
	dotted
	dashed
	inset
	outset
	ridge
	hidden
border-top-width	size	Set the width of the element's top border. Note: You must define a style if you want the border to display. Using border-width by itself will not draw a border.
	width-key-term
border-width	size	Set the width of the element's border. Note: You must define a style if you want the border to display. Using border-width by itself will not draw a border.
	width-key-term
clear	left	"Specify which side may not have a floating element. If an element is already floating to the chosen side then the current item will be displayed on the following line. Use ""both"" to clear both left and right."
	right
	both
color	color	Define the color of your font.
display	block	"Control whether or not multiple elements can appear on one line. A paragraph tag only allows for one paragraph per line by default. With CSS you can make new lines occur after each element (block) or prevent new lines (inline)."
	inline
float	left	Float an element to the left or right. The content will wrap around an element that is floated.
	right
font-family	font-name	"Font family's can be divided into two groups: serif and san serif. A san serif font does not include the small lines at the end of characterswhile a serif font does include these small lines. When choosing which kind you preferremember that studies have shown that sans serif fonts are much easier to read on a computer monitor as opposed to a serif font."
font-size	percentage	Set the size of your font in a variety of ways. We recommend that you use percentages for general content and reserve static values for special cases.
	size
	fsize-key-term
font-style	italic	"Make your font italicif it is supported by that font. This has a similar effect as the italic HTML tag."
	oblique
	normal
font-variant	small-caps	Convert the font to small capitals. Note: not all fonts support this kind of style.
font-weight	weight-key-term	"Control the thickness of your font. When using numerical values for font-weightwe suggest multiples of 100 (e.g. 200300etc) because any less and you probably will not see any difference. The values range from 100(thin)-900(thick). "
	weight-value
height	size	Set the height of an element.
	auto
letter-spacing	size	Specify the exact value of the spacing between your letters. Letter-spacing works best when pixels are used to define the spacing.
line-height	size	Sets the height of the lines of text in an element.
	percentage
list-style	circle	"Define all attributes of a list element in one decleration. A useful technique is to define a style-type in addition to a list-image. If an image is not able to be loadedthen the style-type will be used as a backup."
	square
	disc
	upper-alpha
	lower-alpha
	upper-roman
	lower-roman
	decimal
	inside
	outside
	url
	none
list-style-image	url	Insert an image in place of the normal list styled bullets. A good choice for a bullet image would one that is smaller than the height of your text and is a relatively simple/plain graphic.
list-style-position	inside	"Alter the indentation of your bullets or numbering systems. You may only use keyterms when specifying the indentation. Note: ""outside"" is actually the default setting for list indentation."
	outside
list-style-type	circle	"Select the style for your list items. Numbering styles should be used with order listswhile shapes are best saved for unordered lists."
	square
	disc
	upper-alpha
	lower-alpha
	upper-roman
	lower-roman
	decimal
margin	size	Define the margin of an element with this general attribute. A margin defines the space around an element's border. We have added borders to the example so that you may see the changes in the margin more readily.
	percentage
	auto
margin-bottom	size	It is possible to define individual margins by adding a direction suffix to the margin general attribute. Margin-bottom will set the bottom margin for this element.
	percentage
	auto
margin-left	size	It is possible to define individual margins by adding a direction suffix to the margin general attribute. Margin-left will set the left margin for this element.
	percentage
	auto
margin-right	size	It is possible to define individual margins by adding a direction suffix to the margin general attribute. Margin-right will set the right margin for this element.
	percentage
	auto
margin-top	size	It is possible to define individual margins by adding a direction suffix to the margin general attribute. Margin-top will set the top margin for this element.
	percentage
	auto
padding	size	Define the padding of an element with this general attribute. A padding is the space between an element's border and the content within it. We have added borders to the example so that you may see the effects of padding more readily.
	percentage
	four-sides
padding-bottom	size	It is possible to define these individual paddings simply by adding a direction suffix to the padding attribute. Padding-bottom will set the bottom padding for this element.
	percentage
padding-left	size	It is possible to define these individual paddings simply by adding a direction suffix to the padding attribute. Padding-left will set the left padding for this element.
	percentage
padding-right	size	It is possible to define these individual paddings simply by adding a direction suffix to the padding attribute. Padding-right will set the right padding for this element.
	percentage
padding-top	size	It is possible to define these individual paddings simply by adding a direction suffix to the padding attribute. Padding-top will set the top padding for this element.
	percentage
position	absolute	Manipulate the exact position of your HTML elements. The Top and Left attributes define where the object will be placed. Move Left - Use a negative value for left. Move Right - Use a positive value for left. Move Up - Use a negative value for top. Move Down - Use a positive value for top.
	relative
	percentage
	size
text-align	right	Manipulate the alignment of your text.
	center
	left
	justify
text-decoration	line-through	"Manipulate the text's decoration. Note: to specify no text decorationbe sure that you use ""none"". Anchor underlines can be removed with that method."
	overline
	underline
	none
text-indent	size	Indent the first line of an element. This is most useful for indentation on paragraphs.
	percentage
text-transform	capitalize	"Modify the capitalization of your text with text-transform. Note: When someone copies and pastes text from your web site with CSS altered capitalizationthey will paste the originalunaltered text that appears in your HTML code."
	lowercase
	uppercase
vertical-align	vertical-values	"Sets the vertical alignment of your elementmost often text. Vertical-align aligns the content that appears in an imaginary line. Examples of these lines are along a line of text or within a of a table."
white-space	nowrap	"Prevent your text from wrapping with nowrap. A new line will not be started unless you explicitly tell the browser to with . Note: we have defined the overflow and width CSS attributesso that you may see nowrap in action."
width	size	Set the width of an element.
	percentage
	auto
word-spacing	size	Specify the exact value of the spacing between your words. Word-spacing works best when pixels are used as the spacing value.
z-index	whole-number	Set the z-index of an HTML element. The HTML element with the largest z-index will appear on top of those with a smaller z-index. z-index is useful for when using positioning and for resolving positioning conflicts.