CSS Tutorial: Appendix A

	Sign In Sign-Up

Appendix A

This appendix covers most style properties, with them divided into categories. I don't have a few of the less commonly used ones, but this is a pretty complete list. I also have the CSS2 updates, but if you have any style properties you need help with, e-mail me.

Font	Text	Background
Border	Positioning	Size
	Other

Font Properties

Name	Values	Explanation
font-family	Name of a font	This sets the name of the font to be used in the denoted section.
font-size	[relative], [absolute], [length], [percentage]	Sets the size of the font, the values can be expressed in many ways. If you want to see the different values, click here.
font-style	normal, italic, oblique	Applies a style to the current font. Italic and oblique are pretty much the same thing.
font-weight	normal, bold, bolder, lighter, or a number 100-900	The number must be in a 100 unit increment (550 isn't okay), with 400 the same as normal, and 700 the same as bold.

Text Properties

Name	Values	Explanation
color	Color name or Hex value	Sets the color for the text, using a color name (black, white, etc...) or a hex value (#000000).
letter-spacing	normal, [length]	Sets the distance between letters, it can be any unit of measurement (pixels, inches, centimeters, etc...)
list-style-image	none, [url]	Defines a URL for an image to be used as a bullet for a list.
list-style-type	none, circle, disk, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, disk.	Sets the type of bullet to be used for a list.
text-align	left, right, center, justify	Describes how text is aligned in the enclosing element. Replicates the <DIV ALIGN="*"> tag.
text-decoration	none, underline, overline, line-through	Specifies any special decoration for the text. Very useful for the a:type psuedo-classes.
text-transform	none, capitalize, uppercase, lowercase	Sets the capitalization of the words. capitalize will cap the first letter of each word, lowercase will lowercase every letter, uppercase will uppercase every letter, and none will remove any inherited settings.

Background Properties

Name	Values	Explanation
background-color	transparent, [color]	Sets a background color, which can be a color name (blue, green, etc...), a hex number (#000000), or by RGB value (255,0,0).
background-image	none, [url]	Defines an URL to an image, but must be inside parenthases, and have url: in front of it. Here's an example. background-image:url(../pics/background.gif)
background-attachment	scroll, fixed	Sets whether the background image should remain fixed or scroll when the page scrolls.
background-repeat	repeat, repeat-x, repeat-y, no-repeat	Determines whether the image is repeated to fill the containing element. If repeat-x or repeat-y are used, the image will repeat on that axis. repeat will repeat the image in both directions.

Border Properties

Name	Values	Explanation
border-color	[color]	Sets the color of a border around an image or a block that has a border.
border-width	thin, medium, thick, [length]	Sets the width of the border around and element. Can set each side using border-top-width, border-bottom-width, border-right-width, and border-left-width.
clear	none, both, left, right	The following elements are displayed below an element which is aligned, instead of wrapping around it.
margin	auto, [length], [percentage]	Sets the size of the margins around an element. Can set each side using margin-top, margin-bottom, margin-right, and margin-left.
padding	auto, [length], [percentage]	Sets the space between the content and the border of and element. Can set each side using padding-top, padding-bottom, padding-right, and padding-left.

Positioning Properties

Name	Values	Explanation
position	absolute, relative, static	Specifies if the element can be positioned directly. absolute is a fixed point on the screen at a specified location. relative means it will be positioned normally, depending on the preceding elements. static is like absolute, except it doesn't scroll with the rest of the content.
top	auto, [length], [percentage]	Sets the vertical position of an element on the webpage. Used in conjunction with position.
left	auto, [length], [percentage]	Sets the horizontal position of an element on the webpage. Used in conjunction with position.
z-index	[number]	Controls how the elements on a page overlap. Allows a 2.5-D appearance, by layering the elements like pieces of paper.

Sizing Properties

Name	Values	Explanation
height	auto, [length]	Sets the vertical size of an element.
width	auto, [length]	Sets the horizontal size of an element.

Other Properties

Name	Values	Explanation
float	none, left, right	Causes following elements to be wrapped to the left or right of the element, rather than be below it.
visibility	visible, hidden	Sets the visibility of the element.
cursor	auto, crosshair, default hand, move, text, wait, [direction]-resize, help, auto	Sets the type of cursor the mouse pointer should be. Can be one of the words, or a directional resize, such as n-resize, sw-resize, etc...

Previous Chapter