CSS Background

The Background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page.

Background Properties:

Property	Description	Values	NN	IE	W3C
background	A shorthand property for setting all background properties in one declaration	background-color background-image background-repeat background-attachment background-position	6.0	4.0	CSS1
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	scroll fixed	6.0	4.0	CSS1
background-color	Sets the background color of an element	color-rgb color-hex color-name transparent	4.0	4.0	CSS1
background-image	Sets an image as the background	url none	4.0	4.0	CSS1
background-position	Sets the starting position of a background image	top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos	6.0	4.0	CSS1
background-repeat	Sets if/how a background image will be repeated	repeat repeat-x repeat-y no-repeat	4.0	4.0	CSS1

go to top

CSS Text

Text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the first line in a text, and more.

Property	Description	Possible Values	NN	IE	W3C
color	Sets the color of a text	color	4.0	3.0	CSS1
direction	Sets the text direction	ltr rtl			CSS2
letter-spacing	Increase or decrease the space between characters	normal length	6.0	4.0	CSS1
text-align	Aligns the text in an element	left right center justify	4.0	4.0	CSS1
text-decoration	Adds decoration to text	none underline overline line-through blink	4.0	4.0	CSS1
text-indent	Indents the first line of text in an element	length %	4.0	4.0	CSS1
text-shadow		none color length
text-transform	Controls the letters in an element	none capitalize uppercase lowercase	4.0	4.0	CSS1
unicode-bidi		normal embed bidi-override		5.0	CSS2
white-space	Sets how white space inside an element is handled	normal pre nowrap	4.0	5.5	CSS1
word-spacing	Increase or decrease the space between words	normal length	6.0	6.0	CSS1

go to top

CSS Fonts

The Font properties allow you to change the font family, boldness, size, and the style of a text.

Notes - Useful Tips

Fonts are identified by their name in CSS1. Note that if a browser does not support the font that is specified, it will use a default font.

Font Properties:

Property	Description	Values	NN	IE	W3C
font	A shorthand property for setting all of the properties for a font in one declaration	font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar	4.0	4.0	CSS1
font-family	A prioritized list of font family names and/or generic family names for an element	family-name generic-family	4.0	3.0	CSS1
font-size	Sets the size of a font	xx-small x-small small medium large x-large xx-large smaller larger length %	4.0	3.0	CSS1
font-size-adjust	Specifies an aspect value for an element that will preserve the x-height of the first-choice font	none number			CSS2
font-stretch	Condenses or expands the current font-family	normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded			CSS2
font-style	Sets the style of the font	normal italic oblique	4.0	4.0	CSS1
font-variant	Displays text in a small-caps font or a normal font	normal small-caps	6.0	4.0	CSS1
font-weight	Sets the weight of a font	normal bold bolder lighter 100 200 300 400 500 600 700 800 900	4

go to top

CSS Borders

The Border properties allow you to specify the style, color, and width of an element's border. In HTML we used tables to create borders around a text, but with the Border properties we can create borders with nice effects, and it can be applied to any element.

Border Properties:

Property	Description	Values	NN	IE	W3C
border	A shorthand property for setting all of the properties for the four borders in one declaration	border-width border-style border-color	4.0	4.0	CSS1
border-bottom	A shorthand property for setting all of the properties for the bottom border in one declaration	border-bottom-width border-style border-color	6.0	4.0	CSS1
border-bottom-color	Sets the color of the bottom border	border-color	6.0	4.0	CSS2
border-bottom-style	Sets the style of the bottom border	border-style	6.0	4.0	CSS2
border-bottom-width	Sets the width of the bottom border	thin medium thick length	4.0	4.0	CSS1
border-color	Sets the color of the four borders, can have from one to four colors	color	6.0	4.0	CSS1
border-left	A shorthand property for setting all of the properties for the left border in one declaration	border-left-width border-style border-color	6.0	4.0	CSS1
border-left-color	Sets the color of the left border	border-color	6.0	4.0	CSS2
border-left-style	Sets the style of the left border	border-style	6.0	4.0	CSS2
border-left-width	Sets the width of the left border	thin medium thick length	4.0	4.0	CSS1
border-right	A shorthand property for setting all of the properties for the right border in one declaration	border-right-width border-style border-color	6.0	4.0	CSS1
border-right-color	Sets the color of the right border	border-color	6.0	4.0	CSS2
border-right-style	Sets the style of the right border	border-style	6.0	4.0	CSS2
border-right-width	Sets the width of the right border	thin medium thick length	4.0	4.0	CSS1
border-style	Sets the style of the four borders, can have from one to four styles	none hidden dotted dashed solid double groove ridge inset outset	6.0	4.0	CSS1
border-top	A shorthand property for setting all of the properties for the top border in one declaration	border-top-width border-style border-color	6.0	4.0	CSS1
border-top-color	Sets the color of the top border	border-color	6.0	4.0	CSS2
border-top-style	Sets the style of the top border	border-style	6.0	4.0	CSS2
border-top-width	Sets the width of the top border	thin medium thick length	4.0	4.0	CSS1
border-width	A shorthand property for setting the width of the four borders in one declaration, can have from one to four values	thin medium thick length	4.0	4.0	CSS1

go to top

CSS Margins

The Margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.

Margin Properties:

Property	Description	Values	NN	IE	W3C
margin	A shorthand property for setting the margin properties in one declaration	margin-top margin-right margin-bottom margin-left	4.0	4.0	CSS1
margin-bottom	Sets the bottom margin of an element	auto length %	4.0	4.0	CSS1
margin-left	Sets the left margin of an element	auto length %	4.0	3.0	CSS1
margin-right	Sets the right margin of an element	auto length %	4.0	3.0	CSS1
margin-top	Sets the top margin of an element	auto length %	4.0	3.0	CSS1

go to top

CSS Padding

The Padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once.

Padding Properties:

Property	Description	Values	NN	IE	W3C
padding	A shorthand property for setting all of the padding properties in one declaration	padding-top padding-right padding-bottom padding-left	4.0	4.0	CSS1
padding-bottom	Sets the bottom padding of an element	length %	4.0	4.0	CSS1
padding-left	Sets the left padding of an element	length %	4.0	4.0	CSS1
padding-right	Sets the right padding of an element	length %	4.0	4.0	CSS1
padding-top	Sets the top padding of an element	length %	4.0	4.0	CSS1

go to top

List Properties:

Property	Description	Values	NN	IE	W3C
list-style	A shorthand property for setting all of the properties for a list in one declaration	list-style-type list-style-position list-style-image	6.0	4.0	CSS1
list-style-image	Sets an image as the list-item marker	none url	6.0	4.0	CSS1
list-style-position	Places the list-item marker in the list	inside outside	6.0	4.0	CSS1
list-style-type	Sets the type of the list-item marker	none 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	4.0	4.0	CSS1
marker-offset		auto length			CSS2

go to top

Dimension Properties:

Property	Description	Values	NN	IE	W3C
height	Sets the height of an element	auto length %	6.0	4.0	CSS1
line-height	Sets the distance between lines	normal number length %	4.0	4.0	CSS1
max-height	Sets the maximum height of an element	none length %			CSS2
max-width	Sets the maximum width of an element	none length %			CSS2
min-height	Sets the minimum height of an element	length %			CSS2
min-width	Sets the minimum width of an element	length %			CSS2
width	Sets the width of an element	auto % length	4.0	4.0	CSS1

go to top

Classification Properties:

Property	Description	Values	NN	IE	W3C
clear	Sets the sides of an element where other floating elements are not allowed	left right both none	4.0	4.0	CSS1
cursor	Specifies the type of cursor to be displayed	url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help	6.0	4.0	CSS2
display	Sets how/if an element is displayed	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	4.0	4.0	CSS1
float	Sets where an image or a text will appear in another element	left right none	4.0	4.0	CSS1
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed	4.0	4.0	CSS2
visibility	Sets if an element should be visible or invisible	visible hidden collapse	6.0	4.0	CSS2

go to top

CSS Positioning

The Positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.

Positioning Properties:

Property	Description	Values	NN	IE	W3C
bottom	Specifies the bottom edge of an element	auto % length	6.0	5.0	CSS2
clip	Sets the shape of an element. The element is clipped into this shape, and displayed	shape auto	6.0	4.0	CSS2
left	Specifies the left edge of an element	auto % length	4.0	4.0	CSS2
overflow	Sets what happens if the content of an element overflow its area	visible hidden scroll auto	6.0	4.0	CSS2
position	Places an element in a static, relative, absolute or fixed position	static relative absolute fixed	4.0	4.0	CSS2
right	Specifies the right edge of an element	auto % length		5.0	CSS2
top	Sets how far the top edge of an element is above/below the top edge of the parent element	auto % length	4.0	4.0	CSS2
vertical-align	Sets the vertical alignment of an element	baseline sub super top text-top middle bottom text-bottom length %	4.0	4.0	CSS1
z-index	Sets the stack order of an element	auto number	6.0	4.0	CSS2

go to top

Pseudo-classes

Pseudo-elements

Media Types

Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.

The @media Rule

The @media rule allows different style rules for different media in the same style sheet.

The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:

Pseudo-elements	NN	IE	W3C	Purpose
first-letter		5.5	CSS1	Adds special style to the first letter of a text
first-line		5.5	CSS1	Adds special style to the first line of a text
:before			CSS2	Inserts some content before an element
:after			CSS2	Inserts some content after an element

Media Type	Description	NN	IE
All	Used for all media type devices		4.0
Aural	Used for speech and sound synthesizers
Braille	Used for braille tactile feedback devices
embossed	Used for paged braille printers
Handheld	Used for small or handheld devices
Print	Used for printers		4.0
projection	Used for projected presentations, like slides
Screen	Used for computer screens		4.0
Tty	Used for media using a fixed-pitch character grid, like teletypes and terminals
Tv	Used for television-type devices

1. Background

2. Text

3. Fonts

4. Borders

5. Margins

6. Padding

7. List

8. Dimension

9. Classification

10. Positioning

11. Pseudo-classes

12. Pseudo-elements

* Media Types

CSS Background

Background Properties:

CSS Text

CSS Fonts

Notes - Useful Tips

Font Properties:

CSS Borders

Border Properties:

CSS Margins

Margin Properties:

CSS Padding

Padding Properties:

List Properties:

Dimension Properties:

Classification Properties:

CSS Positioning

Positioning Properties:

Pseudo-classes

Pseudo-elements

Media Types

The @media Rule

Different Media Types

Pseudo-classes	NN	IE	W3C	Purpose
Active		4.0	CSS1	Adds special style to a selected link
Hover		4.0	CSS1	Adds special style to a link when you mouse over it
Link	4.0	3.0	CSS1	Adds special style to an unvisited link
visited	4.0	3.0	CSS1	Adds special style to a visited link
:first-child	7.0		CSS2	Adds special style to an element that is the first child of some other element
:lang			CSS2	Allows the author to specify a language to use in a specified element