Stylin’ with CSS

The Blog and Books of Charles Wyke-Smith

CSS Properties Reference List

Background
Property Description Values
background A shorthand property for setting all background properties in one declaration background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scrollfixed
background-color Sets the background color of an element color-rgbcolor-hexcolor-nametransparent
background-image Sets an image as the background url(URL)none
background-position Sets the starting position of a background image top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx% y%xpos ypos
background-repeat Sets if/how a background image will be repeated repeatrepeat-xrepeat-yno-repeat
Back to Top  
Border
Property Description Values
border A shorthand property for setting all of the properties for the four borders in one declaration border-widthborder-styleborder-color
border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-widthborder-styleborder-color
border-bottom-color Sets the color of the bottom border border-color  
border-bottom-style Sets the style of the bottom border border-style  
border-bottom-width Sets the width of the bottom border thinmediumthicklength
border-color Sets the color of the four borders, can have from one to four colors color
border-left A shorthand property for setting all of the properties for the left border in one declaration border-left-widthborder-styleborder-color
border-left-color Sets the color of the left border border-color
border-left-style Sets the style of the left border border-style
border-left-width Sets the width of the left border thinmediumthicklength
border-right A shorthand property for setting all of the properties for the right border in one declaration border-right-widthborder-styleborder-color
border-right-color Sets the color of the right border border-color
border-right-style Sets the style of the right border border-style
border-right-width Sets the width of the right border thinmediumthicklength
border-style Sets the style of the four borders, can have from one to four styles nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
border-top A shorthand property for setting all of the properties for the top border in one declaration border-top-widthborder-styleborder-color
border-top-color Sets the color of the top border border-color
border-top-style Sets the style of the top border border-style
border-top-width Sets the width of the top border thinmediumthicklength
border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values thinmediumthicklength
Back to Top  
Classification
Property Description Values
clear Sets the sides of an element where other floating elements are not allowed leftrightbothnone
cursor Specifies the type of cursor to be displayed urlautocrosshairdefaultpointermovee-resizene-resizenw-resizen-resizese-resizesw-resizes-resizew-resizetextwaithelp
display Sets how/if an element is displayed noneinlineblocklist-itemrun-incompactmarkertableinline-tabletable-row-grouptable-header-grouptable-footer-grouptable-rowtable-column-grouptable-columntable-celltable-caption
float Sets where an image or a text will appear in another element leftrightnone
position Places an element in a static, relative, absolute, or fixed position staticrelativeabsolutefixed
visibility Sets if an element should be visible or invisible visiblehiddencollapse
Back to Top  
Dimension
Property Description Values
height Sets the height of an element autolength%
line-height Sets the distance between lines normalnumberlength%
max-height Sets the maximum height of an element nonelength%
max-width Sets the maximum width of an element nonelength%
min-height Sets the minimum height of an element length%
min-width Sets the minimum width of an element length%
width Sets the width of an element autolength%
Back to Top  
Font
Property Description Values
font A shorthand property for setting all of the properties for a font in one declaration font-stylefont-variantfont-weightfont-size/line-heightfont-familycaptioniconmenumessage-boxsmall-captionstatus-bar
font-family A prioritized list of font family names and/or generic family names for an element family-namegeneric-family
font-size Sets the size of a font xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength%
font-size-adjust Specifies an aspect value for an element that will preserve the x-height of the first-choice font nonenumber
font-stretch Condenses or expands the current font-family normalwidernarrowerultra-condensedextra-condensedcondensedsemi-condensedsemi-expandedexpandedextra-expandedultra-expanded
font-style Sets the style of the font normalitalicoblique
font-variant Displays text in a small-caps font or a normal font normalsmall-caps
font-weight Sets the weight of a font normalboldbolderlighter100200300400500600700800 900
Back to Top  
Generated Content
Property Description Values
content Generates content in a document. Used with the ::before and ::after pseudo-elements stringurlcounter(name)counter(name, list-style-type)counters(name, string)counters(name, string, list-style-type)attr(X)open-quoteclose-quoteno-open-quoteno-close-quote
counter-increment Sets how much the counter increments on each occurrence of a selector noneidentifiernumber
counter-reset Sets the value the counter is set to on each occurrence of a selector noneidentifiernumber
quotes Sets the type of quotation marks nonestring string
Back to Top  
List and Marker
Property Description Values
list-style A shorthand property for setting all of the properties for a list in one declaration list-style-typelist-style-positionlist-style-image
list-style-image Sets an image as the list-item marker noneurl
list-style-position Sets where the list-item marker is placed in the list insideoutside
list-style-type Sets the type of the list-item marker nonedisccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-alphaupper-alphalower-greeklower-latinupper-latinhebrewarmeniangeorgiancjk-ideographichiraganakatakanahiragana-irohakatakana-iroha
marker-offset   autolength
Back to Top  
Margin
Property Description Values
margin A shorthand property for setting the margin properties in one declaration margin-topmargin-rightmargin-bottommargin-left
margin-bottom Sets the bottom margin of an element autolength%
margin-left Sets the left margin of an element autolength%
margin-right Sets the right margin of an element autolength%
margin-top Sets the top margin of an element autolength%
Back to Top  
Outlines
Property Description Values
outline A shorthand property for setting all the outline properties in one declaration outline-coloroutline-style outline-width
outline-color Sets the color of the outline around an element colorinvert
outline-style Sets the style of the outline around an element nonedotteddashedsoliddoublegrooveridgeinsetoutset
outline-width Sets the width of the outline around an element thinmediumthicklength
Back to Top  
Padding
Property Description Values
padding A shorthand property for setting all of the padding properties in one declaration padding-toppadding-rightpadding-bottompadding-left
padding-bottom Sets the bottom padding of an element length%
padding-left Sets the left padding of an element length%
padding-right Sets the right padding of an element length%
padding-top Sets the top padding of an element length%
Back to Top  
Positioning
Property Description Values
bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element auto%length
clip Sets the shape of an element. The element is clipped into this shape, and displayed shapeauto
left Sets how far the left edge of an element is to the right/left of the left edge of the parent element auto%length
overflow Sets what happens if the content of an element overflow its area visiblehiddenscrollauto
position Places an element in a static, relative, absolute, or fixed position staticrelativeabsolutefixed
right Sets how far the right edge of an element is to the left/right of the right edge of the parent element auto%length
top Sets how far the top edge of an element is above/below the top edge of the parent element auto%length
vertical-align Sets the vertical alignment of an element baselinesubsupertop text-topmiddlebottomtext-bottomlength%
z-index Sets the stack order of an element autonumber
Back to Top  
Text
Property Description Values
border-collapse Sets whether the table borders are collapsed into a single border or detached as in standard HTML collapseseparate
border-spacing Sets the distance that separates cell borders (only for the “separated borders” model) length length
caption-side Sets the position of the table caption topbottomleftright
empty-cells Sets whether or not to show empty cells in a table (only for the “separated borders” model) showhide
table-layout Sets the algorithm used to display the table cells, rows, and columns autofixed
Back to Top  
Text
Property Description Values
color Sets the color of a text color
direction Sets the text direction ltrrtl
line-height Sets the distance between lines normalnumberlength%
letter-spacing Increase or decrease the space between characters normallength
text-align Aligns the text in an element leftrightcenterjustify
text-decoration Adds decoration to text noneunderlineoverlineline-throughblink
text-indent Indents the first line of text in an element length%
text-shadow Adds a shadow to text nonecolorlength
text-transform Controls the letters in an element nonecapitalizeuppercaselowercase
unicode-bidi   normalembedbidi-override
white-space Sets how white space inside an element is handled normalprenowrap
word-spacing Increases or decreases the space between words normallength
Back to Top  
Pseudo-Classes
Property Description
:active Adds special style to an activated element
:focus Adds special style to an element while the element has focus
:hover Adds special style to an element when you mouse over it
:link Adds special style to an unvisited link
:visited Adds special style to a visited link
:first-child Adds special style to an element that is the first child of some other element
:lang Allows the author to specify a language to use in a specified element
Back to Top  
Pseudo-Elements
Property Description
::first-letter Adds special style to the first letter of a text
::first-line Adds special style to the first line of a text
::before Inserts some content before an element
::after Inserts some content after an element
Back to Top  
Media Types
Property Description
all Used for all media type devices
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
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and terminals
tv Used for television-type devices
* Used as the media attribute of the link tag or with the @media attribute.
Back to Top