This isn't meant to be a comprehensive list of CSS Settings, they keep adding new ones and some I have not covered at all.
This Faustina, serif Typeface
The quick brown fox jumped over the lazy dogs. 12345678910. abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ .,?!#@$%&()[]{}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
The quick brown fox jumped over the lazy dogs. 12345678910. abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ .,?!#@$%&()[]{}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
CSS Background Properties
The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
| Property | Description | Values | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| Background | A shorthand property for setting all background properties in one declaration | background-color background-image background-repeat background-attachment background-position |
4 | 1 | 6 | 1 |
| Background Attachment | Sets whether a background image is fixed or scrolls with the rest of the page | scroll fixed |
4 | 1 | 6 | 1 |
| Background Color | Sets the background color of an element | color-rgb color-hex color-name transparent |
4 | 1 | 4 | 1 |
| Background Image | Sets an image as the background | url(URL) none |
4 | 1 | 4 | 1 |
| Background Position | Sets the starting position of a background image | top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
4 | 1 | 6 | 1 |
| Background Repeat | Sets if/how a background image will be repeated | repeat repeat-x repeat-y no-repeat |
4 | 1 | 4 | 1 |
CSS Text Properties
CSS Test & Font size Demonstration PageThe CSS text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the first line in a text, and more.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
| Property | Description | Values | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| Text Color | Sets the color of a text | color | 3 | 1 | 4 | 1 |
| Text Direction | Sets the text direction | ltr rtl |
6 | 1 | 6 | 2 |
| Line Height | Sets the distance between lines | normal number length% | 4 | 1 | 4 | 1 |
| Letter Spacing | Increase or decrease the space between characters | normal length | 4 | 1 | 6 | 1 |
| Text Align | Aligns the text in an element | left right center justify |
4 | 1 | 4 | 1 |
| Text Decoration | Adds decoration to text | none underline overline line-through blink |
4 | 1 | 4 | 1 |
| Text indent | Indents the first line of text in an element | length % | 4 | 1 | 4 | 1 |
| Text Shadow | none color length |
|||||
| Text Transform | Controls the letters in an element | none capitalize uppercase lowercase |
4 | 1 | 4 | 1 |
| Unicode-bidi | normal embed bidi-override |
5 | 2 | |||
| Text White-space | Sets how white space inside an element is handled | normal pre nowrap |
5 | 1 | 4 | 1 |
| Text Word Spacing | Increase or decrease the space between words | normal length |
6 | 1 | 6 | 1 |
CSS Font Properties
The CSS font properties allow you to change the font family, boldness, size, and the style of a text.
Note: In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will use a default font.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
| Property | Description | Values | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| Font | A shorthand property for setting all of the properties for a font in one declaration | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar |
4 | 1 | 4 | 1 |
| Font Family | A prioritized list of font family names and/or generic family names for an element | family-name generic-family |
3 | 1 | 4 | 1 |
| Font Size | Sets the size of a font | xx-small x-small small medium large x-large xx-large smaller larger length % |
3 | 1 | 4 | 1 |
| Font Size Adjust | Specifies an aspect value for an element that will preserve the x-height of the first-choice font | none number |
- | - | - | 2 |
| Font Stretch | Condenses or expands the current font-family | normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded |
- | - | - | 2 |
| Font Style | Sets the style of the font | normal italic oblique |
4 | 1 | 4 | 1 |
| Font font-variant.font-variant | Displays text in a small-caps font or a normal font | normal small-caps |
4 | 1 | 6 | 1 |
| Font Weight | Sets the weight of a font | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 |
4 | 1 | 4 | 1 |
CSS Border Properties
The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
| Property | Description | Values | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| Border | A shorthand property for setting all of the properties for the four borders in one declaration | border-width border-style border-color |
4 | 1 | 4 | 1 |
| Border Bottom | A shorthand property for setting all of the properties for the bottom border in one declaration | Border Bottom Width border-style border-color |
4 | 1 | 6 | 1 |
| Border Bottom Color | Sets the color of the bottom border | border-color | 4 | 1 | 6 | 2 |
| Border Bottom Style | Sets the style of the bottom border | border-style | 4 | 1 | 6 | 2 |
| Border Bottom Width | Sets the width of the bottom border | thin medium thick length |
4 | 1 | 4 | 1 |
| Border Color | Sets the color of the four borders, can have from one to four colors | color | 4 | 1 | 6 | 1 |
| Border Left | A shorthand property for setting all of the properties for the left border in one declaration | border-left-width border-style border-color |
4 | 1 | 6 | 1 |
| Border Left Color | Sets the color of the Left border | Border color | 4 | 1 | 6 | 2 |
| Border Left Style | Sets the style of the Left border | Border style | 4 | 1 | 6 | 2 |
| Border Left Width | Sets the width of the Left border | thin medium thick length |
4 | 1 | 4 | 1 |
| Border Right | A shorthand property for setting all of the properties for the right border in one declaration | Border right-width Border style Border color |
4 | 1 | 6 | 1 |
| Border Right Color | Sets the color of the right border | Border color | 4 | 1 | 6 | 2 |
| Border Right Style | Sets the style of the right border | Border style | 4 | 1 | 6 | 2 |
| Border Right Width | Sets the width of the right border | thin medium thick length |
4 | 1 | 4 | 1 |
| Border Style | Sets the style of the four borders, can have from one to four styles | none hidden dotted dashed solid double groove ridge inset outset |
4 | 1 | 6 | 1 |
| Border Top | A shorthand property for setting all of the properties for the top border in one declaration | Border top-width Border style Border color |
4 | 1 | 6 | 1 |
| Border Top Color | Sets the color of the top border | Border color | 4 | 1 | 6 | 2 |
| Border Top Style | Sets the style of the top border | Border style | 4 | 1 | 6 | 2 |
| Border top width | Sets the width of the top border | thin medium thick length |
4 | 1 | 4 | 1 |
| Border Width | A shorthand property for setting the width of the four borders in one declaration, can have from one to four values | thin medium thick length |
4 | 1 | 4 | 1 |
CSS Outline Properties
An outline is a line that is drawn around elements, outside the border edge, to make the element "stand out".
The CSS outline properties sets the outlines around elements. You can specify the style, color, and width of the outline.
Note: Outlines do not take up space, and they do not have to be rectangular.
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
| Property | Description | Values | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| Outline | A shorthand property for setting all the outline properties in one declaration | outline-color outline-style outline-width |
- | 1.5 | - | 2 |
| Outline color | Sets the color of the outline around an element | color invert |
- | 1.5 | - | 2 |
| Outline Style | Sets the style of the outline around an element | none dotted dashed solid double groove ridge inset outset |
- | 1.5 | - | 2 |
| Outline Width | Sets the width of the outline around an element | thin medium thick length |
- | 1.5 | - | 2 |
CSS Margin Properties
The CSS margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and Left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.
Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
| Property | Description | Values | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| Margin margin | A shorthand property for setting the margin properties in one declaration | Margin top Margin right Margin bottom Margin left |
4 | 1 | 4 | 1 |
| Margin Bottom | Sets the bottom margin of an element | auto length % |
4 | 1 | 4 | 1 |
| Margin Left | Sets the Left margin of an element | auto length % |
3 | 1 | 4 | 1 |
| Margin Right | Sets the right margin of an element | auto length % |
3 | 1 | 4 | 1 |
| Margin Top | Sets the top margin of an element | auto length % |
3 | 1 | 4 | 1 |
CSS Padding Properties
The CSS padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and Left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).| Property | Description | Values | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| Padding | A shorthand property for setting all of the padding properties in one declaration | Padding top Padding right Padding bottom Padding left |
4 | 1 | 4 | 1 |
| Padding Bottom | Sets the bottom padding of an element | length % |
4 | 1 | 4 | 1 |
| Padding Left | Sets the Left padding of an element | length % |
4 | 1 | 4 | 1 |
| Padding Right | Sets the right padding of an element | length % |
4 | 1 | 4 | 1 |
| Padding Top | Sets the top padding of an element | length % |
4 | 1 | 4 | 1 |
CSS List Properties
Lists page The CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).| Property | Description | Values | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| List Style | A shorthand property for setting all of the properties for a list in one declaration | list-style-type list-style-position list-style-image |
4 | 1 | 6 | 1 |
| List Style Image | Sets an image as the list-item marker | none url |
4 | 1 | 6 | 1 |
| List Style-position.List Style-position | Sets where the list-item marker is placed in the list | inside outside |
4 | 1 | 6 | 1 |
| List Style Type | Sets the type of the list-item marker | none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
4 | 1 | 4 | 1 |
| marker-offset | auto length |
1 | 7 | 2 |
CSS Table Properties
The CSS table properties allow you to set the layout of a table. Browser support: IE: Internet Explorer, M: Mac IE only, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).| Property | Description | Values | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| Table Border Collapse | Sets whether the table borders are collapsed into a single border or detached as in standard HTML | collapse separate |
5 | 1 | 7 | 2 |
| Table Border Spacing | Sets the distance that separates cell borders (only for the "separated borders" model) | length length | 5M | 1 | 6 | 2 |
| Table Caption Side | Sets the position of the table caption | top bottom left right |
5M | 1 | 6 | 2 |
| Table Empty Cells | Sets whether or not to show empty cells in a table (only for the "separated borders" model) | show hide |
5M | 1 | 6 | 2 |
| Table Layout | Sets the algorithm used to display the table cells, rows, and columns | auto fixed |
5 | 1 | 6 | 2 |