CSS Quick Guide

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, evel ! We include each property's possible values, defined as either an e"plicit keyword or as one of these values#

angle: $ numeric value followed by deg, grad or rad% color: &ither a color name or he"adecimal R'( value, or an R'( triple of the form# rgb(red, green, blue) frequency: $ numeric value followed by h) or kh), indicating *ert) or kilo*ert) length: $n optional sign +either , or -., immediately followed by a number +with or without a decimal point., immediately followed by a two-character unit identifier like p" or pt or em etc% number: $n optional sign, immediately followed by a number +with or without a decimal point.% percent $n optional sign, immediately followed by a number +with or without a decimal point., immediately followed by a percent sign% shape: $ shape keyword, followed by a parentheses-enclosed list of comma-separated shapespecific parameters% Currently, the only supported shape keyword is rect, which e"pects four numeric parameters denoting the offsets of the top, right, bottom, and left edges of the rectangle% time: $ 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 /R optionally enclosed in single or double quotes, followed by a matching right parenthesis% 0or e"ample# url+1http#22www%tutorialspoint%com21.

Property azimuth

Possible Values

Description Describes the position of a sound source along the horizontal axis of the listener's environment.

angle left-side far-left left center-left center center-right right far-right

right-side Composite property for the following properties

background

Values from composite properties.

background-attachment background-color background-image background-position background-repeat

backgroundattachment backgroundcolor backgroundimage backgroundposition

scroll fixed color transparent url none percent none length top center bottom left right repeat repeat-x repeat-y no-repeat

Determines if the background image is fixed in the window or scrolls as the document scrolls !ets the background color of an element

!ets the background image of an element !ets the initial position of the element's background image" if specified# values normally are paired to provide x" y positions# default position is $% $%.

backgroundrepeat

Determines how the background image is repeated &tiled' across an element

border

!ee Description

!ets 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 borderbottom !ee Description !ets an element's bottom border# value is one or more of a color" a value for border-bottom-width" and a value forborder-style !ets the thickness of an element's bottom border.

borderbottom-width

length thin medium thick collapse separate color transparent color

bordercollapse border-color

!ets the table border rendering algorithm

!ets the color of all four of an element's borders# default is the color of the element !ets the color of an element's left borders# default is the color of the element !ets the color of an element's right borders# default is the color of the element !ets the color of an element's top borders# default is the color of the element !ets the color of an element's bottom borders# default is the color of the element !ets an element's left border# value is one or more of a color" a value for border-left-width" and a value forborder-style. !ets the thickness of an element's left border

border-leftcolor border-rightcolor border-topcolor borderbottom-color border-left

color

color

color

!ee description

border-leftwidth

length thin medium

thick !ets an element's right border# value is one or more of a color" a value for border-right-width" and a value forborder-style. !ets the thickness of an element's right border

border-right

!ee description

border-rightwidth

length thin medium thick

borderspacing

!ee description

(ith separate borders set the spacing between borders. )ne value sets vertical and horizontal spacing and two values sets horizontal and vertical spacing respectively. !ets the style of all four of an element's borders

border-style

dashed dotted double groove inset none outset ridge solid

border-top

!ee description

!ets an element's top border# value is one or more of a color" a value for border-top-width" and a value forborder-style !ets the thickness of an element's top border.

border-topwidth

length thin medium thick

border-width

length thin medium thick length percent top bottom left right both left none right shape color

!ets the thickness of all four of an element's borders

bottom

*sed with the position property to place the bottom edge of an element !ets the position for a table caption

caption-side

clear

!ets which margins of an element must not be ad+acent to a floating element# the element is moved down until that margin is clear

clip color content counterincrement

!ets the clipping mask for an element !ets the color of an element ,nserts generated content around an element. ,ncrements a counter by -# value is a list of counter names" with each name optionally followed by a value by which it is incremented. .esets a counter to zero# value is a list of counter names" with each name optionally followed by a value to which it is reset. /lays the designated sound after an element is spoken /lays the designated sound before an element is spoken

!ee description !ee description

counterreset

!ee description

cue-after

url none url

cue-before

none 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 ltr rtl block inline list-items marker none angle !ets the height at which a sound is Defines direction of the flow of an element content Controls how an element is displayed Defines shap of the cursor

cursor

direction

display

elevation

below level above higher lower hide show left none right

played

empty-cells

(ith separate borders" hides empty cells in a table Determines if an element floats to the left or right" allowing text to wrap around it or be displayed inline

float

font

!ee description

!ets 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

0ist 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. Defines the font size

font-size

xx-small x-small small medium large xlarge xx-large

larger smaller length percent none ratio wider normal narrower ultracondensed extracondensed condensed semi-condensed semiexpanded expanded extra-ex normal italic obli2ue normal small-caps normal bold bolder lighter number length Defines the height of an element Defines the font weight . if a number is used" it must be a multiple of -$$ between -$$ and 3$$# 4$$ is normal" 5$$ is the same as the keyword bold Defines a font to be in small caps Defines the style of the face" either normal or some type of slanted style Determines the amount to stretch the current font 1d+usts the current font's aspect ratio

font-sizead+ust font-stretch

font-style

font-variant

font-weight

height

auto length percent length normal length number normal percent Defines list-related styles using any of the values for

left

*sed with the position property to place the left edge of an element ,nserts additional space between text characters !ets the distance between ad+acent text baselines

letterspacing line-height

list-style

!ee description

list-style-image liststyle-position list-style-type

list-styleimage

url none

Defines an image to be used as a list item's marker" in lieu of the value for

list-style-type

. list-styleposition list-styletype

inside outside circle disc s2uare decimal lower-alpha lower-roman none upper-alpha

,ndents or extends &default' a list item's marker with respect to the item's content Defines a list item's marker either for unordered lists &circle" disc" or s2uare' or for ordered lists &decimal" loweralpha" lower-roman" none" upper-alpha" or upper-roman'

upperroman length percent auto length percent auto length percent auto length percent auto length percent auto length auto 6he 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. 6he marks property is used to set crop marks and cross marks on paged media. 6his is used with the 7page rule. Defines the top margin of an element. Default value is $. Defines the right margin of an element. Default value is $. Defines the left margin of an element. Default value is $. Defines the bottom margin of an element. Default value is $. Defines all four of an element's margins

margin

marginbottom

margin-left

margin-right

margin-top

markeroffset

marks

crop cross none inherit percent length none percent

max-height

max-height property is used to constrain the height of an element.

max-width

max-width property is used to set the

length none percent length percent length number

maximum width of an element.

min-height

min-height property is used to constrain the height of an element. min-width property is used to constrain the width of an element. !ets the minimum number of lines allowed in an orphaned paragraph fragment 6he outline property is a shorthand property to specify all outline properties. 6he outline-color property is used to specify the color of the outline. 8ote that" unlike the border property" outline does not take up extra space and it can be non-rectangular. 6he outline-style property is used to specify the style of the outline. 8ote that" unlike the border property" outline does not take up extra space and it can be non-rectangular.

min-width

orphans

outline outline-color

!ee the description

color invert

outlinecolor-style

none hidden dotted dashed solid double groove ridge inset outset thin medium thick length &i.e. -px'

outline-width

6he outline-color property is used to specify the color of the outline. 8ote that" unlike the border property" outline does not take up extra space and it can be non-rectangular.

inherit auto hidden scroll visible Defines all four padding amounts around an element Defines the bottom padding of an element. Default value is $ Defines the left padding of an element. Default value is $ Defines the right padding of an element. Default value is $ Defines the top padding of an element. Default value is $ 1ssociates a named page layout with an element 9orces or suppresses page breaks after an element. Determines how overflow content is rendered

overflow

padding paddingbottom padding-left

!ee description

length percent length percent length percent length percent name auto always avoid left right auto always avoid left right auto

paddingright padding-top

page page-breakafter

page-breakbefore

9orces or suppresses page breaks before an element.

page-break-

!uppresses page breaks within an

inside pause

avoid percent time percent time percent time fre2uency x-low low medium high x-high number url mix none repeat absolute fixed relative static

element 6he pause property is C!! shorthand for specifying shorthand property for specifying pauses in aural media. /auses a media after speaking an element /auses a media before speaking an element !ets the average pitch of an element's spoken content

pause-after

pausebefore pitch

pitch-range play-during

!ets the range of the pitch" from $ &flat' to -$$ &broad'# default is :$ ,f a *.0 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. !ets the positioning model for an element

position

2uotes richness right

0ist of strings

!ets the 2uote symbols used to 2uote text !ets the richness of the voice" from $ &flat' to -$$ &mellifluous'# default is :$ *sed with the position property to place

number length

percent auto length portrait landscape inherit normal none spell-out always once continuous digits code none number x-slow slow medium fast x-fast faster slower number

the right edge of an element. 6he size property is used in paged media to specify the size of the page.

size

speak

Determines how an element's content is spoken.

speakheader speaknumeral speakpunctuation speech-rate

Determines if table headers are spoken once for each row or column or each time a cell is spoken. Determines how numerals are spoken

Determines if punctuation is spoken or used for inflection !ets the rate of speech# a number sets the rate in words per minute

stress

!ets the stress of the voice" from $ &catatonic' to -$$ &hyperactive'# default is :$. Determines the table-rendering algorithm

table-layout

auto fixed

text-align

center +ustify left right blink line-through none overline underline length percent

!ets the text alignment style for an element

textdecoration

Defines any decoration for the text# values may be combined

text-indent

Defines the indentation of the first line of text in an element# default is $ Creates text drop shadows of varying colors and offsets 6ransforms the text in the element accordingly

text-shadow !ee description texttransform

capitalize lowercase none uppercase length percent percent baseline bottom middle sub super text-bottom text-top top

top

*sed with the position property to place the top edge of an element. !ets the vertical positioning of an element

vertical-align

visibility

collapse hidden visible

Determines if an element is visible in the document or table

voice-family volume

0ist of voices

!elects a named voice family to speak an element's content !ets the volume of spoken content# numeric values range from $ to -$$

number percent silent x-soft soft medium loud x-loud normal nowrap pre number

white-space

Defines how whitespace within an element is handled

widows

!ets the minimum number of lines allowed in a widowed paragraph fragment Defines the width of an element

width

length percent auto length normal number

wordspacing z-index

,nserts additional space between words

!ets the rendering layer for the current element.

/seudo-classes ; /seudo-elements Propert Description y

active focus hover link visited firstchild lang firstletter

*se this class to add special effect to an activated element *se this class to add special effect to an element while the element has focus *se this class to add special effect to an element when you mouse over it *se this class to add special effect to an unvisited link *se this class to add special effect to a visited link *se this class to add special effect to an element that is the first child of some other element. *se this class to specify a language to use in a specified element *se this element to add special effect to the first letter of a text

first-line *se this element to add special effect to the first line of a text before after *se this element to insert some content before an element *se this element to insert some content after an element
Property a)imuth background Description 3escribes the position of a sound source along the hori)ontal a"is of the listener's environment% Composite property for the following properties# background-attachment

backgroundattachment background-color background-image background-position

background-color background-image background-position background-repeat

3etermines if the background image is fi"ed in the window or scrolls as the document scrolls Sets the background color of an element Sets the background image of an element Sets the initial position of the element's background image, if specified4 values normally are paired to provide ", y positions4 default position is 56 56% 3etermines how the background image is repeated +tiled. across an element

background-repeat

border border-bottom

Sets all four of an element's borders4 value is one or more of a color, a value for border-width, and a value for border-style Sets an element's bottom border4 value is one or more of a color, a value for border-bottom-width, and a value for borderstyle Sets the thickness of an element's bottom border% Sets the table border rendering algorithm Sets the color of all four of an element's borders4 default is the color of the element Sets the color of an element's left borders4 default is the color of the element Sets the color of an element's right borders4 default is the color of the element Sets the color of an element's top borders4 default is the color of the element Sets the color of an element's bottom borders4 default is the color of the element Sets an element's left border4 value is one or more of a color, a value for border-left-width, and a value for border-style% Sets the thickness of an element's left border Sets an element's right border4 value is one or more of a color, a value for border-right-width, and a value for border-style% Sets the thickness of an element's right border With separate borders set the spacing between borders% 7ne value sets vertical and hori)ontal spacing and two values sets hori)ontal and vertical spacing respectively% Sets the style of all four of an element's borders Sets an element's top border4 value is one or more of a color, a value for border-top-width, and a value for border-style Sets the thickness of an element's top border% Sets the thickness of all four of an element's borders /sed with the position property to place the bottom edge of an element Sets the position for a table caption Sets which margins of an element must not be ad8acent to a floating element4 the element is moved down until that margin is clear Sets the clipping mask for an element Sets the color of an element 9nserts generated content around an element%

border-bottom-width border-collapse border-color border-left-color border-right-color border-top-color border-bottom-color border-left border-left-width border-right border-right-width border-spacing

border-style border-top border-top-width border-width bottom caption-side clear

clip color content

counter-increment

9ncrements a counter by :4 value is a list of counter names, with each name optionally followed by a value by which it is incremented% Resets a counter to )ero4 value is a list of counter names, with each name optionally followed by a value to which it is reset% ;lays the designated sound after an element is spoken ;lays the designated sound before an element is spoken 3efines shap of the cursor 3efines direction of the flow of an element content Controls how an element is displayed Sets the height at which a sound is played With separate borders, hides empty cells in a table 3etermines if an element floats to the left or right, allowing te"t to wrap around it or be displayed inline Sets all the font attributes for an element% <alue is any of the values for# font-style

counter-reset cue-after cue-before cursor direction display elevation empty-cells float font

font-family

font-variant font-weight font-si)e line-height font-family

3efines the font for an element, either as a specific font or as one of the generic serif, sans-serif, cursive, fantasy, and monospace% 3efines the font si)e $d8usts the current font's aspect ratio 3etermines the amount to stretch the current font 3efines the style of the face, either normal or some type of slanted style 3efines a font to be in small caps 3efines the font weight % if a number is used, it must be a multiple of :55 between :55 and =554 >55 is normal, ?55 is the same as the keyword bold 3efines the height of an element

font-si)e font-si)e-ad8ust font-stretch font-style font-variant font-weight

height

left letter-spacing line-height list-style

/sed with the position property to place the left edge of an element 9nserts additional space between te"t characters Sets the distance between ad8acent te"t baselines 3efines list-related styles using any of the values for# list-style-image

list-style-image

liststyle-position list-style-type

3efines an image to be used as a list item's marker, in lieu of the value for# list-style-type 9ndents or e"tends +default. a list item's marker with respect to the item's content 3efines a list item's marker either for unordered lists +circle, disc, or square. or for ordered lists +decimal, loweralpha, lowerroman, none, upper-alpha, or upper-roman. 3efines all four of an element's margins 3efines the bottom margin of an element% 3efault value is 5% 3efines the left margin of an element% 3efault value is 5% 3efines the right margin of an element% 3efault value is 5% 3efines the top margin of an element% 3efault value is 5% The marker-offset property can be used in bulleted lists for specifying the distance between the nearest border edges of a marker bo" +or bullet. and its associated principal bo"% The marks property is used to set crop marks and cross marks on paged media% This is used with the @page rule% ma"-height property is used to constrain the height of an element% ma"-width property is used to set the ma"imum width of an element% min-height property is used to constrain the height of an element% min-width property is used to constrain the width of an element% Sets the minimum number of lines allowed in an orphaned paragraph fragment The outline property is a shorthand property to specify all outline properties% The outline-color property is used to specify the color of the outline% Aote that, unlike the border property, outline does not take up e"tra space and it can be non-rectangular%

list-style-position list-style-type

margin margin-bottom margin-left margin-right margin-top marker-offset

marks ma"-height ma"-width min-height min-width orphans outline outline-color

outline-color-style

The outline-style property is used to specify the style of the outline% Aote that, unlike the border property, outline does not take up e"tra space and it can be non-rectangular% The outline-color property is used to specify the color of the outline% Aote that, unlike the border property, outline does not take up e"tra space and it can be non-rectangular% 3etermines how overflow content is rendered 3efines all four padding amounts around an element 3efines the bottom padding of an element% 3efault value is 5 3efines the left padding of an element% 3efault value is 5 3efines the right padding of an element% 3efault value is 5 3efines the top padding of an element% 3efault value is 5 $ssociates a named page layout with an element 0orces or suppresses page breaks after an element% 0orces or suppresses page breaks before an element% Suppresses page breaks within an element The pause property is CSS shorthand for specifying shorthand property for specifying pauses in aural media% ;auses a media after speaking an element ;auses a media before speaking an element Sets the average pitch of an element's spoken content Sets the range of the pitch, from 5 +flat. to :55 +broad.4 default is B5 9f a /R is provided, it is played during an element's spoken content % specifying repeat loops the audio4 mix causes it to mi" with, rather than replace, other background audio% Sets the positioning model for an element Sets the quote symbols used to quote te"t Sets the richness of the voice, from 5 +flat. to :55 +mellifluous.4 default is B5 /sed with the position property to place the right edge of an element% The si)e property is used in paged media to specify the si)e of the page% 3etermines how an element's content is spoken%

outline-width

overflow padding padding-bottom padding-left padding-right padding-top page page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during

position quotes richness right si)e speak

speak-header speak-numeral speak-punctuation speech-rate stress table-layout te"t-align te"t-decoration te"t-indent te"t-shadow te"t-transform top vertical-align visibility voice-family volume white-space widows width word-spacing )-inde"

3etermines if table headers are spoken once for each row or column or each time a cell is spoken% 3etermines how numerals are spoken 3etermines if punctuation is spoken or used for inflection Sets the rate of speech4 a number sets the rate in words per minute Sets the stress of the voice, from 5 +catatonic. to :55 +hyperactive.4 default is B5% 3etermines the table-rendering algorithm Sets the te"t alignment style for an element 3efines any decoration for the te"t4 values may be combined 3efines the indentation of the first line of te"t in an element4 default is 5 Creates te"t drop shadows of varying colors and offsets Transforms the te"t in the element accordingly /sed with the position property to place the top edge of an element% Sets the vertical positioning of an element 3etermines if an element is visible in the document or table Selects a named voice family to speak an element's content Sets the volume of spoken content4 numeric values range from 5 to :55 3efines how whitespace within an element is handled Sets the minimum number of lines allowed in a widowed paragraph fragment 3efines the width of an element 9nserts additional space between words Sets the rendering layer for the current element%

Pseudo-classes & Pseudo-elements:

Property #active #focus #hover Description /se this class to add special effect to an activated element /se this class to add special effect to an element while the element has focus /se this class to add special effect to an element when you mouse over it

#link #visited #first-child #lang #first-letter #first-line #before #after

/se this class to add special effect to an unvisited link /se this class to add special effect to a visited link /se this class to add special effect to an element that is the first child of some other element% /se this class to specify a language to use in a specified element /se this element to add special effect to the first letter of a te"t /se this element to add special effect to the first line of a te"t /se this element to insert some content before an element /se this element to insert some content after an element