Web | This Site

CSS Beginners
CSS Advanced
CSS References
CSS Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# 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, 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 for border-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 for border-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 for border-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 for border-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 for border-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; mix causes 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

Advertisement

Online Image Processing

Indian Baby Names