CSS

CSS Tutorial

CSS is used to control the style of a web document in a simple and easy way.

CSS stands for Cascading Style Sheet.

This tutorial gives complete understanding on CSS.

---

Other resource on this page

• CSS 1 Specification - W3C Cascading Style Sheets, level 1 Specification
• CSS 2 Specification - W3C Cascading Style Sheets, level 2 Specification
• W3C HTML Validation Service - Validate your HTML/XHTML document against W3C Standard.
• Offline HTML Validator - Download and install this software to validate your HTML/XHTML pages offline.
• Starting with HTML + CSS - A W3C tutorial on HTML and CSS.
• XHTML1.0 - W3C XHTML 1.0. It offers the same flavors as HTML 4.0 and 4.01, reformulated in XML, with minor restrictions.
• XHTML1.0 - W3C XHTML 1.1. It is based on XHTML 1.0 Strict, but includes minor changes.
• HTML 4.01 Specification - A complete specification of HTML4.01, the most popular version of HTML.
• W3C Specifications List - A comprehensive list of W3C standards. You will find most latest versions available on this page.

---

CSS Important Links

Online HTML / CSS Editor:

An online HTML / CSS Editor where you can type your HTML / CSS code and see the result online.
Online HTML / CSS Editor

CSS Tutorial in PDF:

Download a quick CSS tutorial in PDF format.
CSS Tutorial in PDF

---

---

This is a quick guide for web developers where we have listed all the CSS properties defined in the World Wide Web Consortium's Recommended Specification for Cascading Style Sheets, Level 2

We include each property's possible values, defined as either an explicit keyword or as one of these values:

• angle: A numeric value followed by deg, grad or rad.
• color: Either a color name or hexadecimal RGB value, or an RGB triple of the form:rgb(red, green, blue)
• frequency: A numeric value followed by hz or khz, indicating Hertz or kiloHertz
• length: An optional sign (either + or -), immediately followed by a number (with or without a decimal point), immediately followed by a two-character unit identifier like px or pt or em etc.
• number: An optional sign, immediately followed by a number (with or without a decimal point).
• percent An optional sign, immediately followed by a number (with or without a decimal point), immediately followed by a percent sign.
• shape: A shape keyword, followed by a parentheses-enclosed list of comma-separated shape-specific parameters. Currently, the only supported shape keyword is rect, which expects four numeric parameters denoting the offsets of the top, right, bottom, and left edges of the rectangle.
• time: A numeric value followed by s or ms, designating a time in seconds or milliseconds.
• url: The keyword url, immediately followed (no spaces) by a left parenthesis, followed by a URL optionally enclosed in single or double quotes, followed by a matching right parenthesis. For example: url("http://www.tutorialspoint.com/")

Property	Possible Values	Description
azimuth	angle left-side far-left left center-left center center-right right far-right right-side	Describes the position of a sound source along the horizontal axis of the listener's environment.
background	Values from composite properties.	Composite property for the following properties: background-attachment background-color background-image background-position background-repeat
background-attachment	scroll fixed	Determines if the background image is fixed in the window or scrolls as the document scrolls
background-color	color transparent	Sets the background color of an element
background-image	url none	Sets the background image of an element
background-position	percent none length top center bottom left right	Sets the initial position of the element's background image, if specified; values normally are paired to provide x, y positions; default position is 0% 0%.
background-repeat	repeat repeat-x repeat-y no-repeat	Determines how the background image is repeated (tiled) across an element
border	See Description	Sets all four of an element's borders; value is one or more of a color, a value for border-width, and a value forborder-style
border-bottom	See Description	Sets an element's bottom border; value is one or more of a color, a value for border-bottom-width, and a value forborder-style
border-bottom-width	length thin medium thick	Sets the thickness of an element's bottom border.
border-collapse	collapse separate	Sets the table border rendering algorithm
border-color	color transparent	Sets the color of all four of an element's borders; default is the color of the element
border-left-color	color	Sets the color of an element's left borders; default is the color of the element
border-right-color	color	Sets the color of an element's right borders; default is the color of the element
border-top-color	color	Sets the color of an element's top borders; default is the color of the element
border-bottom-color	color	Sets the color of an element's bottom borders; default is the color of the element
border-left	See description	Sets an element's left border; value is one or more of a color, a value for border-left-width, and a value forborder-style.
border-left-width	length thin medium thick	Sets the thickness of an element's left border
border-right	See description	Sets an element's right border; value is one or more of a color, a value for border-right-width, and a value forborder-style.
border-right-width	length thin medium thick	Sets the thickness of an element's right border
border-spacing	See description	With separate borders set the spacing between borders. One value sets vertical and horizontal spacing and two values sets horizontal and vertical spacing respectively.
border-style	dashed dotted double groove inset none outset ridge solid	Sets the style of all four of an element's borders
border-top	See description	Sets an element's top border; value is one or more of a color, a value for border-top-width, and a value forborder-style
border-top-width	length thin medium thick	Sets the thickness of an element's top border.
border-width	length thin medium thick	Sets the thickness of all four of an element's borders
bottom	length percent	Used with the position property to place the bottom edge of an element
caption-side	top bottom left right	Sets the position for a table caption
clear	both left none right	Sets which margins of an element must not be adjacent to a floating element; the element is moved down until that margin is clear
clip	shape	Sets the clipping mask for an element
color	color	Sets the color of an element
content	See description	Inserts generated content around an element.
counter-increment	See description	Increments a counter by 1; value is a list of counter names, with each name optionally followed by a value by which it is incremented.
counter-reset	See description	Resets a counter to zero; value is a list of counter names, with each name optionally followed by a value to which it is reset.
cue-after	url none	Plays the designated sound after an element is spoken
cue-before	url none	Plays the designated sound before an element is spoken
cursor	url auto crosshair default active pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help progress	Defines shap of the cursor
direction	ltr rtl	Defines direction of the flow of an element content
display	block inline list-items marker none	Controls how an element is displayed
elevation	angle below level above higher lower	Sets the height at which a sound is played
empty-cells	hide show	With separate borders, hides empty cells in a table
float	left none right	Determines if an element floats to the left or right, allowing text to wrap around it or be displayed inline
font	See description	Sets all the font attributes for an element. Value is any of the values for: font-style font-variant font-weight font-size line-height font-family
font-family	List of font names	Defines the font for an element, either as a specific font or as one of the generic serif, sans-serif, cursive, fantasy, and monospace.
font-size	xx-small x-small small medium large xlarge xx-large larger smaller length percent	Defines the font size
font-size-adjust	none ratio	Adjusts the current font's aspect ratio
font-stretch	wider normal narrower ultracondensed extracondensed condensed semi-condensed semiexpanded expanded extra-ex	Determines the amount to stretch the current font
font-style	normal italic oblique	Defines the style of the face, either normal or some type of slanted style
font-variant	normal small-caps	Defines a font to be in small caps
font-weight	normal bold bolder lighter number	Defines the font weight . if a number is used, it must be a multiple of 100 between 100 and 900; 400 is normal, 700 is the same as the keyword bold
height	length auto	Defines the height of an element
left	length percent	Used with the position property to place the left edge of an element
letter-spacing	length normal	Inserts additional space between text characters
line-height	length number normal percent	Sets the distance between adjacent text baselines
list-style	See description	Defines list-related styles using any of the values for: list-style-image liststyle-position list-style-type
list-style-image	url none	Defines an image to be used as a list item's marker, in lieu of the value for: list-style-type .
list-style-position	inside outside	Indents or extends (default) a list item's marker with respect to the item's content
list-style-type	circle disc square decimal lower-alpha lower-roman none upper-alpha upperroman	Defines a list item's marker either for unordered lists (circle, disc, or square) or for ordered lists (decimal, loweralpha, lower-roman, none, upper-alpha, or upper-roman)
margin	length percent auto	Defines all four of an element's margins
margin-bottom	length percent auto	Defines the bottom margin of an element. Default value is 0.
margin-left	length percent auto	Defines the left margin of an element. Default value is 0.
margin-right	length percent auto	Defines the right margin of an element. Default value is 0.
margin-top	length percent auto	Defines the top margin of an element. Default value is 0.
marker-offset	length auto	The marker-offset property can be used in bulleted lists for specifying the distance between the nearest border edges of a marker box (or bullet) and its associated principal box.
marks	crop cross none inherit	The marks property is used to set crop marks and cross marks on paged media. This is used with the @page rule.
max-height	percent length none	max-height property is used to constrain the height of an element.
max-width	percent length none	max-width property is used to set the maximum width of an element.
min-height	percent length	min-height property is used to constrain the height of an element.
min-width	percent length	min-width property is used to constrain the width of an element.
orphans	number	Sets the minimum number of lines allowed in an orphaned paragraph fragment
outline	See the description	The outline property is a shorthand property to specify all outline properties.
outline-color	color invert	The outline-color property is used to specify the color of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular.
outline-color-style	none hidden dotted dashed solid double groove ridge inset outset	The outline-style property is used to specify the style of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular.
outline-width	thin medium thick length (i.e. 1px) inherit	The outline-color property is used to specify the color of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular.
overflow	auto hidden scroll visible	Determines how overflow content is rendered
padding	See description	Defines all four padding amounts around an element
padding-bottom	length percent	Defines the bottom padding of an element. Default value is 0
padding-left	length percent	Defines the left padding of an element. Default value is 0
padding-right	length percent	Defines the right padding of an element. Default value is 0
padding-top	length percent	Defines the top padding of an element. Default value is 0
page	name	Associates a named page layout with an element
page-break-after	auto always avoid left right	Forces or suppresses page breaks after an element.
page-break-before	auto always avoid left right	Forces or suppresses page breaks before an element.
page-break-inside	auto avoid	Suppresses page breaks within an element
pause	percent time	The pause property is CSS shorthand for specifying shorthand property for specifying pauses in aural media.
pause-after	percent time	Pauses a media after speaking an element
pause-before	percent time	Pauses a media before speaking an element
pitch	frequency x-low low medium high x-high	Sets the average pitch of an element's spoken content
pitch-range	number	Sets the range of the pitch, from 0 (flat) to 100 (broad); default is 50
play-during	url mix none repeat	If a URL is provided, it is played during an element's spoken content . specifying repeat loops the audio; mixcauses it to mix with, rather than replace, other background audio.
position	absolute fixed relative static	Sets the positioning model for an element
quotes	List of strings	Sets the quote symbols used to quote text
richness	number	Sets the richness of the voice, from 0 (flat) to 100 (mellifluous); default is 50
right	length percent	Used with the position property to place the right edge of an element.
size	auto length portrait landscape inherit	The size property is used in paged media to specify the size of the page.
speak	normal none spell-out	Determines how an element's content is spoken.
speak-header	always once	Determines if table headers are spoken once for each row or column or each time a cell is spoken.
speak-numeral	continuous digits	Determines how numerals are spoken
speak-punctuation	code none	Determines if punctuation is spoken or used for inflection
speech-rate	number x-slow slow medium fast x-fast faster slower	Sets the rate of speech; a number sets the rate in words per minute
stress	number	Sets the stress of the voice, from 0 (catatonic) to 100 (hyperactive); default is 50.
table-layout	auto fixed	Determines the table-rendering algorithm
text-align	center justify left right	Sets the text alignment style for an element
text-decoration	blink line-through none overline underline	Defines any decoration for the text; values may be combined
text-indent	length percent	Defines the indentation of the first line of text in an element; default is 0
text-shadow	See description	Creates text drop shadows of varying colors and offsets
text-transform	capitalize lowercase none uppercase	Transforms the text in the element accordingly
top	length percent	Used with the position property to place the top edge of an element.
vertical-align	percent baseline bottom middle sub super text-bottom text-top top	Sets the vertical positioning of an element
visibility	collapse hidden visible	Determines if an element is visible in the document or table
voice-family	List of voices	Selects a named voice family to speak an element's content
volume	number percent silent x-soft soft medium loud x-loud	Sets the volume of spoken content; numeric values range from 0 to 100
white-space	normal nowrap pre	Defines how whitespace within an element is handled
widows	number	Sets the minimum number of lines allowed in a widowed paragraph fragment
width	length percent auto	Defines the width of an element
word-spacing	length normal	Inserts additional space between words
z-index	number	Sets the rendering layer for the current element.

Pseudo-classes & Pseudo-elements:

Property	Description
:active	Use this class to add special effect to an activated element
:focus	Use this class to add special effect to an element while the element has focus
:hover	Use this class to add special effect to an element when you mouse over it
:link	Use this class to add special effect to an unvisited link
:visited	Use this class to add special effect to a visited link
:first-child	Use this class to add special effect to an element that is the first child of some other element.
:lang	Use this class to specify a language to use in a specified element
:first-letter	Use this element to add special effect to the first letter of a text
:first-line	Use this element to add special effect to the first line of a text
:before	Use this element to insert some content before an element
:after	Use this element to insert some content after an element