CSS Properties
Alphabetical list of all CSS properties from the Cascading Style Sheets 2 (CSS2) specification. The CSS properties are listed alphabetically to help you quickly find the property you're looking for, or to find out whether it exists or not.
CSS properties are used to apply styles to structured documents, such as those created with HTML or XML. Note that not all browsers/user agents support all CSS properties, so you should try to test your pages in as many browsers as you can.
* azimuth
* background
* background-attachment
* background-color
* background-image
* background-position
* background-repeat
* border
* border-collapse
* border-color
* border-spacing
* border-style
* border-top
* border-right
* border-bottom
* border-left
* border-top-color
* border-right-color
* border-bottom-color
* border-left-color
* border-top-style
* border-right-style
* border-bottom-style
* border-left-style
* border-top-width
* border-right-width
* border-bottom-width
* border-left-width
* border-width
* bottom
* caption-side
* clear
* clip
* color
* content
* counter-increment
* counter-reset
* cue
* cue-after
* cue-before
* cursor
* direction
* display
* elevation
* empty-cells
* float
* font
* font-family
* font-size
* font-size-adjust
* font-stretch
* font-style
* font-variant
* font-weight
* height
* left
* letter-spacing
* line-height
* list-style
* list-style-image
* list-style-position
* list-style-type
* margin
* margin-top
* margin-right
* margin-bottom
* margin-left
* marker-offset
* marks
* max-height
* max-width
* min-height
* min-width
* orphans
* outline
* outline-color
* outline-style
* outline-width
* overflow
* padding
* padding-top
* padding-right
* padding-bottom
* padding-left
* page
* page-break-after
* page-break-before
* page-break-inside
* pause
* pause-after
* pause-before
* pitch
* pitch-range
* play-during
* position
* quotes
* richness
* right
* size
* speak
* speak-header
* speak-numeral
* speak-punctuation
* speech-rate
* stress
* table-layout
* text-align
* text-decoration
* text-indent
* text-shadow
* text-transform
* top
* unicode-bidi
* vertical-align
* visibility
* voice-family
* volume
* white-space
* widows
* width
* word-spacing
* z-index
| |
CSS Color Codes
When coding CSS, you will often need to define a color for an HTML element. For example, you might need to create a red font, a yellow background, or a blue border.
In CSS, you define a color using either the hexadecimal color code, the RGB color code, or the actual color name. A benefit of using hexadecimal and RGB color codes is that you have many more options than just supplying a color name.
The color picker and chart on this page provide you with the hexadecimal color codes. The color picker also provides the RGB color code.
Hexadecimal color codes are often referred to as "hexadecimal colors", "hex colors codes", "color values" and a few other terms. "Hexadecimal color values" is probably the most accurate term as they are made up of hexadecimal numbers.
Option 1: Color Picker
Use this color picker to find a suitable color. To use it:
1. Use the slider on the right to change the hue.
2. Click anywhere in the large square to pick a color.
3. Once you're happy with the color, copy the hexadecimal value from the bottom field (the series of 6 digits/letters in bold (for example #FFFFFF).
Option 2: Web Safe Colors
Below is a chart covering the 216 hexidecimal color values from the web safe palette. Use this chart if you prefer to use colors from the web safe palette.
CSS Media Type
You can use CSS to change the appearance of your web page depending on the media type that's viewing it. For example, you can specify one font for when your web page is viewed on a computer screen and another for when it's viewed with a handheld device or braille device.
Recognized CSS media types:
Media Type Description
all For all media type devices.
aural For speech synthesizers
braille For braille tactile feedback devices
embossed For paged braille printers
handheld For handheld devices
print For printed versions and print preview on the screen.
projection For projected presentations such as projectors and
transparencies.
screen Computer screens.
tty media using a fixed-pitch character grid, such as
teletypes,terminals,or portable devices with limited
display capabilities.
tv Television-type devices
There are two methods for creating separate styles depending on the media type:
* Use the @media rule. For example:
* Use the Media attribute when linking to an external style sheet. For example:
CSS Template
CSS template be used as a default style sheet on your websites. Of course, you will probably need to change it but at least using the template will ensure you cover all bases.
ADDRESS,
BLOCKQUOTE,
BODY, DD, DIV,
DL, DT,
FIELDSET, FORM,
FRAME, FRAMESET,
H1, H2, H3, H4,
H5, H6, IFRAME,
NOFRAMES,
OBJECT, OL, P,
UL, APPLET,
CENTER, DIR,
HR, MENU, PRE { display: block }
LI { display: list-item }
HEAD { display: none }
TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }
TH { font-weight: bolder; text-align: center }
CAPTION { text-align: center }
BODY { padding: 8px; line-height: 1.33 }
H1 { font-size: 2em; margin: .67em 0 }
H2 { font-size: 1.5em; margin: .83em 0 }
H3 { font-size: 1.17em; margin: 1em 0 }
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU { margin: 1.33em 0 }
H5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6 { font-size: .67em; margin: 2.33em 0 }
H1, H2, H3, H4,
H5, H6, B,
STRONG { font-weight: bolder }
BLOCKQUOTE { margin-left: 40px; margin-right: 40px }
I, CITE, EM,
VAR, ADDRESS { font-style: italic }
PRE, TT, CODE,
KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
BIG { font-size: 1.17em }
SMALL, SUB, SUP { font-size: .83em }
SUB { vertical-align: sub }
SUP { vertical-align: super }
S, STRIKE, DEL { text-decoration: line-through }
HR { border: 1px inset }
OL, UL, DIR,
MENU, DD { margin-left: 40px }
OL { list-style-type: decimal }
OL UL, UL OL,
UL UL, OL OL { margin-top: 0; margin-bottom: 0 }
U, INS { text-decoration: underline }
CENTER { text-align: center }
BR:before { content: "\A" }
/* An example of style for HTML 4.0's ABBR/ACRONYM elements */
ABBR, ACRONYM { font-variant: small-caps; letter-spacing: 0.1em }
A[href] { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
/* Elements that are block-level in HTML4 */
ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET,
FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER,
DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT,
COL, COLGROUP, TD, TH, CAPTION
{ unicode-bidi: embed }
/* End bidi settings */
@media print {
@page { margin: 10% }
H1, H2, H3,
H4, H5, H6 { page-break-after: avoid; page-break-inside: avoid }
BLOCKQUOTE,
PRE { page-break-inside: avoid }
UL, OL, DL { page-break-before: avoid }
}
@media speech {
H1, H2, H3,
H4, H5, H6 { voice-family: paul, male; stress: 20; richness: 90 }
H1 { pitch: x-low; pitch-range: 90 }
H2 { pitch: x-low; pitch-range: 80 }
H3 { pitch: low; pitch-range: 70 }
H4 { pitch: medium; pitch-range: 60 }
H5 { pitch: medium; pitch-range: 50 }
H6 { pitch: medium; pitch-range: 40 }
LI, DT, DD { pitch: medium; richness: 60 }
DT { stress: 80 }
PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
EM { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
STRONG { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
DFN { pitch: high; pitch-range: 60; stress: 60 }
S, STRIKE { richness: 0 }
I { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
B { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
U { richness: 0 }
A:link { voice-family: harry, male }
A:visited { voice-family: betty, female }
A:active { voice-family: betty, female; pitch-range: 80; pitch: x-high }
