Tutorials Point


  CSS Beginners
  CSS Advanced
  CSS References
  CSS Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS Quick Guide


previous next AddThis Social Bookmark Button


Advertisements

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/")

PropertyPossible ValuesDescription
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:

PropertyDescription
: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

previous next Printer Friendly

Advertisements


  

Advertisements