CSS Background Examples
Set the background colorSet an image as the backgroundHow to repeat a background imageHow to repeat a background image only verticallyHow to repeat a background image only horizontallyHow to display a background image only one timeHow to place the background imageHow to position a background image using %How to position a background image using pixelsA fixed background image (this image will not scroll with the rest of the page)All the background properties in one declaration
Background properties explained
Text
Set the color of the textSet the background-color of the textSpecify the space between charactersSpecify the space between linesAlign the textDecorate the textIndent textControl the letters in a textSet the text direction of an elementIncrease the white space between wordsDisable text wrapping inside an element
Text properties explained
Font
Set the font of a textSet a paragraph font using the "caption" valueSet the size of the fontSet the style of the fontSet the size of the font using font-size-adjustSet the variant of the fontSet the boldness of the fontAll the font properties in one declaration
Font properties explained
Border
All the border properties in one declaration Set different borders on each sideAll the top border properties in one declarationAll the bottom border properties in one declarationAll the left border properties in one declarationAll the right border properties in one declarationSet the style of the four bordersSet the style of the top borderSet the style of the bottom borderSet the style of the left borderSet the style of the right borderAll the width border properties in one declarationSet the width of the top borderSet the width of the bottom borderSet the width of the left borderSet the width of the right borderSet the color of the four bordersSet the color of the top borderSet the color of the bottom borderSet the color of the left borderSet the color of the right border
Border properties explained
Outline
Draw a line around an element, outside the border edge (outline) (Does not work in IE)Set the style of an outline (Does not work in IE)Set the color of an outline (Does not work in IE)Set the width of an outline (Does not work in IE)
Outline properties explained
Margin
All the margin properties in one declarationSet the top margin of a text using a cm valueSet the top margin of a text using a percent valueSet the bottom margin of a text using a cm valueSet the bottom margin of a text using a percent valueSet the left margin of a text using a cm valueSet the left margin of a text using a percent valueSet the right margin of a text using a cm valueSet the right margin of a text using a percent value
Margin properties explained
Padding
Set the left padding of a tablecellSet the right padding of a tablecellSet the top padding of a tablecellSet the bottom padding of a tablecellAll the padding properties in one declaration
Padding properties explained
List
The different list-item markers in unordered listsThe different list-item markers in ordered listsAll the list style typesSet an image as the list-item markerPlace the list-item markerAll list properties in one declaration
List properties explained
Table
Set the layout of a tableShow empty cells in a tableCollapse a table borderSet the space between table bordersSet the position of the table caption
Table properties explained
Dimension
Set the height of an image using a pixel valueSet the height of an image using percentSet the width of an element using a pixel valueSet the width of an element using percentSet the maximum height of an elementSet the maximum width of an element using a pixel valueSet the maximum width of an element using percentSet the minimum height of an elementSet the minimum width of an element using a pixel valueSet the minimum width of an element using percentSpecify the space between lines using a percent valueSpecify the space between lines using a pixel valueSpecify the space between lines using a number value
Dimension properties explained
Classification
How to display an element as an inline elementHow to display an element as a block elementA simple use of the float propertyAn image with border and margins that floats to the right in a paragraphAn image with a caption that floats to the rightLet the first letter of a paragraph float to the leftCreating a horizontal menuCreating a homepage without tablesPosition an element relative to its normal positionPosition an element with an absolute valuePosition an element relative to the browser windowHow to make an element invisibleHow to make a table element collapseChange the cursorClear the sides of an element
Classification properties explained
Positioning
Position an element relative to its normal positionPosition an element with an absolute valueSet the shape of an elementHow to show overflow in an element using scrollHow to hide overflow in an elementHow to show set the browser to automatically handle overflowVertical alignment of an imagePlace an element "behind" another elementPlace an element "behind" another element 2Set the top edge of an image using a pixel valueSet the top edge of an image using a percent valueSet the bottom edge of an image using a pixel valueSet the bottom edge of an image using a percent valueSet the left edge of an image using a pixel valueSet the left edge of an image using a percent valueSet the right edge of an image using a pixel valueSet the right edge of an image using a percent value
Positioning properties explained
Generated Content
Changes the quotation marks on a page
Pseudo-classes
Add different colors to a hyperlinkAdd other styles to hyperlinksHyperlink: use of :focus (does not work in IE):first-child - change first child <p> (for IE <!DOCTYPE> must be declared):first-child - change first child <em> in all <p> elements (for IE <!DOCTYPE> must be declared):first-child - change all <em> elements in first child <p> (for IE <!DOCTYPE> must be declared):lang (does not work in IE)
Pseudo-classes explained
Pseudo-elements
Make the first letter special in a textMake the first line special in a textMake the first letter and first line specialUse :before to insert some content before an element (Does not work in IE)Use :after to insert some content after an element (Does not work in IE)
Pseudo-elements explained
