XML - Managing Data Exchange/CSS/Reference
Jump to navigation
Jump to search
CSS Properties[edit | edit source]
background · background-attachment · background-color · background-image · background-position · background-repeat · border-collapse · border-color · border-spacing · bottom · caption-side · clear · clip · color · content · counter-increment · counter-reset · cursor · direction · display · empty-cells · font · font-size-adjust · font-stretch · font-style · font-variant · height · left · letter-spacing · line-break · line-height · list-style · list-style-image · list-style-position · list-style-type · marker-offset · max-height · max-width · min-height · min-width · outline · outline-color · outline-style · outline-width · overflow · position · quotes · right · ruby-align · ruby-overhang · ruby-position · table-layout · text-autospace · text-indent · text-justify · text-kashida-space · text-shadow · text-transform · text-underline-position · top · unicode-bidi · vertical-align · visibility · voice-family · volume · white-space · widows · width · word-break · word-spacing · word-wrap
(size)[edit | edit source]
Sizes (width,height,font-size,border-width) in CSS take a number followed by one of the unit identifiers below.
| px | Pixels, relative to the resolution of the screen | |
| % | Percent, relative to the container | |
| pc | Picas, absolute typographer unit (1pc = 12pt) | |
| pt | Points, absolute typographer unit (1pt=1/72in) | |
| em | Height of uppercase M, relative to the font size of the container | |
| ex | Height of lowercase x, relative to the font size of the container | |
| mm | Millimeters, absolute metric unit | |
| cm | Centimeters, absolute metric unit | |
| in | Inches, absolute imperial unit (1in = 2.54cm) |
(location)[edit | edit source]
Absolute or relative top (y) and left (x) position of a component.
| auto | |
| inherit | |
| (size) |
azimuth[edit | edit source]
| behind | |
| center | |
| center-left | |
| center-right | |
| far-left | |
| far-right | |
| inherit | |
| left | |
| left-side | |
| leftwards | |
| right | |
| right-side | |
| rightwards |
background-repeat[edit | edit source]
■ ■ ■ ■ ■ ■ ■ ■ ■ |
repeat | The background image will be tiled vertically and horizontally |
■ ■ ■ |
repeat-x | The background image will be repeated horizontally. Slim long images are often used to create vertical gradients. |
■ ■ ■ |
repeat-y | The background image will be repeated vertically |
| no-repeat | The background-image will be displayed only once |
border[edit | edit source]
Shorthand property for border-width, border-style,border-color affecting all 4 borders.
border-style[edit | edit source]
- if only one value is passed it will affect all 4 borders.
- if two values are passed, the first one will affect the horizontal borders and the second the vertical ones.
- if four values are passed it will refer to the borders in this order: top, right, bottom, left
| none | ||
| hidden | ||
| dotted | ||
| dashed | ||
| solid | ||
| double | ||
| groove | ||
| ridge | ||
| inset | ||
| outset |
border-width[edit | edit source]
- if only one value is passed it will affect all 4 borders.
- if two values are passed, the first one will affect the horizontal borders and the second the vertical ones.
- if four values are passed it will refer to the borders in this order: top, right, bottom, left
| thin | Defines a thin border. |
| medium | Defines a medium border. |
| thick | Defines a thick border. |
| (size) | Allows you to define the thickness of the borders. |
caption-side[edit | edit source]
| bottom | |
| inherit | |
| left | |
| right | |
| top |
clear[edit | edit source]
| both | |
| inherit | |
| left | |
| none | |
| right |
color[edit | edit source]
A CSS color value can be defined in RGB, HEX or by name. The system colors are based on the colors used by the client user interface. See List of colors for more information.
| rgb(RRR,GGG,BBB) | Every part is an integer number between 0 and 255. Example: rgb(127,0,255) | |
| #RRGGBB | Every part is a hexadecimal integer value between 00 and FF. Example: #AABBCC | |
| aliceblue | #F0F8FF | |
| antiquewhite | #FAEBD7 | |
| aqua | #00FFFF | |
| aquamarine | #7FFFD4 | |
| azure | #F0FFFF | |
| beige | #F5F5DC | |
| bisque | #FFE4C4 | |
| black | #000000 | |
| blanchedalmond | #FFEBCD | |
| blue | #0000FF | |
| blueviolet | #8A2BE2 | |
| brown | #A52A2A | |
| burlywood | #DEB887 | |
| cadetblue | #5F9EA0 | |
| chartreuse | #7FFF00 | |
| chocolate | #D2691E | |
| coral | #FF7F50 | |
| cornflowerblue | #6495ED | |
| cornsilk | #FFF8DC | |
| crimson | #DC143C | |
| cyan | #00FFFF | |
| darkblue | #00008B | |
| darkcyan | #008B8B | |
| darkgoldenrod | #B8860B | |
| darkgray | #A9A9A9 | |
| darkgreen | #006400 | |
| darkkhaki | #BDB76B | |
| darkmagenta | #8B008B | |
| darkolivegreen | #556B2F | |
| darkorange | #FF8C00 | |
| darkorchid | #9932CC | |
| darkred | #8B0000 | |
| darksalmon | #E9967A | |
| darkseagreen | #8FBC8B | |
| darkslateblue | #483D8B | |
| darkslategray | #2F4F4F | |
| darkturquoise | #00CED1 | |
| darkviolet | #9400D3 | |
| deeppink | #FF1493 | |
| deepskyblue | #00BFFF | |
| dimgray | #696969 | |
| dodgerblue | #1E90FF | |
| firebrick | #B22222 | |
| floralwhite | #FFFAF0 | |
| forestgreen | #228B22 | |
| fuchsia | #FF00FF | |
| gainsboro | #DCDCDC | |
| ghostwhite | #F8F8FF | |
| gold | #FFD700 | |
| goldenrod | #DAA520 | |
| gray | #808080 | |
| green | #008000 | |
| greenyellow | #ADFF2F | |
| honeydew | #F0FFF0 | |
| hotpink | #FF69B4 | |
| indianred | #CD5C5C | |
| indigo | #4B0082 | |
| ivory | #FFFFF0 | |
| khaki | #F0E68C | |
| lavender | #E6E6FA | |
| lavenderblush | #FFF0F5 | |
| lawngreen | #7CFC00 | |
| lemonchiffon | #FFFACD | |
| lightblue | #ADD8E6 | |
| lightcoral | #F08080 | |
| lightcyan | #E0FFFF | |
| lightgoldenrodyellow | #FAFAD2 | |
| lightgreen | #90EE90 | |
| lightgrey | #D3D3D3 | |
| lightpink | #FFB6C1 | |
| lightsalmon | #FFA07A | |
| lightseagreen | #20B2AA | |
| lightskyblue | #87CEFA | |
| lightslategray | #778899 | |
| lightsteelblue | #B0C4DE | |
| lightyellow | #FFFFE0 | |
| lime | #00FF00 | |
| limegreen | #32CD32 | |
| linen | #FAF0E6 | |
| magenta | #FF00FF | |
| maroon | #800000 | |
| mediumaquamarine | #66CDAA | |
| mediumblue | #0000CD | |
| mediumorchid | #BA55D3 | |
| mediumpurple | #9370DB | |
| mediumseagreen | #3CB371 | |
| mediumslateblue | #7B68EE | |
| mediumspringgreen | #00FA9A | |
| mediumturquoise | #48D1CC | |
| mediumvioletred | #C71585 | |
| midnightblue | #191970 | |
| mintcream | #F5FFFA | |
| mistyrose | #FFE4E1 | |
| moccasin | #FFE4B5 | |
| navajowhite | #FFDEAD | |
| navy | #000080 | |
| oldlace | #FDF5E6 | |
| olive | #808000 | |
| olivedrab | #6B8E23 | |
| orange | #FFA500 | |
| orangered | #FF4500 | |
| orchid | #DA70D6 | |
| palegoldenrod | #EEE8AA | |
| palegreen | #98FB98 | |
| paleturquoise | #AFEEEE | |
| palevioletred | #DB7093 | |
| papayawhip | #FFEFD5 | |
| peachpuff | #FFDAB9 | |
| peru | #CD853F | |
| pink | #FFC0CB | |
| plum | #DDA0DD | |
| powderblue | #B0E0E6 | |
| purple | #800080 | |
| red | #FF0000 | |
| rosybrown | #BC8F8F | |
| royalblue | #041690 | |
| saddlebrown | #8B4513 | |
| salmon | #FA8072 | |
| sandybrown | #F4A460 | |
| seagreen | #2E8B57 | |
| seashell | #FFF5EE | |
| sienna | #A0522D | |
| silver | #C0C0C0 | |
| skyblue | #87CEEB | |
| slateblue | #6A5ACD | |
| slategray | #708090 | |
| snow | #FFFAFA | |
| springgreen | #00FF7F | |
| steelblue | #4682B4 | |
| tan | #D2B48C | |
| teal | #008080 | |
| thistle | #D8BFD8 | |
| tomato | #FF6347 | |
| turquoise | #40E0D0 | |
| violet | #EE82EE | |
| wheat | #F5DEB3 | |
| white | #FFFFFF | |
| whitesmoke | #F5F5F5 | |
| yellow | #FFFF00 | |
| yellowgreen | #9ACD32 |
| transparent | transparent | 
|
|
|
|
|
|
|
| |
| activeborder | Active window border. | |||||||||
| activecaption | Active window caption. (Titlebar) | |||||||||
| appworkspace | Background color of multiple document interface (MDI). | |||||||||
| background | Desktop background. | |||||||||
| buttonface | Face color for three-dimensional display elements. | |||||||||
| buttonhighlight | Highlight color for three-dimensional display elements (for edges facing away from the light source). | |||||||||
| buttonshadow | Shadow color for three-dimensional display elements. | |||||||||
| buttontext | Text on push buttons. | |||||||||
| captiontext | Text in caption (titlebar), size box, and scrollbar arrow box. | |||||||||
| graytext | Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. | |||||||||
| highlight | Item(s) selected in a control. | |||||||||
| highlighttext | Text of item(s) selected in a control. | |||||||||
| inactiveborder | Inactive window border. | |||||||||
| inactivecaption | Inactive window caption (titlebar). | |||||||||
| inactivecaptiontext | Color of text in an inactive caption (titlebar). | |||||||||
| infobackground | Background color for tooltip controls. | |||||||||
| infotext | Text color for tooltip controls. | |||||||||
| menu | Menu background. | |||||||||
| menutext | Text in menus. | |||||||||
| scrollbar | Scroll bar gray area. | |||||||||
| threeddarkshadow | Dark shadow for three-dimensional display elements. | |||||||||
| threedface | Face color for three-dimensional display elements. | |||||||||
| threedhighlight | Highlight color for three-dimensional display elements. | |||||||||
| threedlightshadow | Light color for three-dimensional display elements (for edges facing the light source). | |||||||||
| threedshadow | threedshadow | |||||||||
| window | Window background. | |||||||||
| windowframe | Window frame. | |||||||||
| windowtext | Text in windows. |
float[edit | edit source]
| none | |
| left | |
| right |
font-family[edit | edit source]
| Font Family | cursive | default cursive font on client computer |
| Font Family | fantasy | default fantasy font on client computer |
| Font Family | monospace | default monospace font on client computer |
| Font Family | sans-serif | default sans-serif font on client computer |
| Font Family | serif | default serif font on client computer |
| Font Family | (font name) | Example: Impact |
| Font Family | (csv list of font names) | Example: Verdana,Arial,Helvetica,sans-serif |
| Font Family | (csv list of font names) | Example: 'Times New Roman',serif |
| Font Family | (csv list of font names) | Example: 'Courier New',Courier,monospace |
font-size[edit | edit source]
| Font Size | (size) | Example:11px |
| Font Size | xx-small | very small relative to default |
| Font Size | x-small | extra small relative to default |
| Font Size | smaller | smaller than default |
| Font Size | small | small |
| Font Size | inherit | inherit the font size of the parent or default |
| Font Size | medium | medium |
| Font Size | larger | larger than default |
| Font Size | large | large |
| Font Size | x-large | extra large relative to default |
| Font Size | xx-large | very large relative to default |
font-style[edit | edit source]
| normal | normal |
| italic | italic |
| oblique | a variant of italic |
font-variant[edit | edit source]
| normal | The browser displays a normal font |
| small-caps | The browser displays a small-caps font |
font-weight[edit | edit source]
| 100 | |
| 200 | |
| 300 | |
| 400 | |
| 500 | |
| 600 | |
| 700 | |
| 800 | |
| 900 | |
| bold | |
| bolder | |
| lighter | |
| normal |
position[edit | edit source]
| inherit | |
| absolute | |
| fixed | |
| relative | |
| static |
text-align[edit | edit source]
ABCDEFGHI
JKMLN OPQRSTUVW XYZ01 23456789 |
inherit | inherited from the container |
ABCDEFGHI
JKMLN OPQRSTUVW XYZ01 23456789 |
left | left (default in LTR language) |
ABCDEFGHI
JKMLN OPQRSTUVW XYZ01 23456789 |
center | center |
ABCDEFGHI
JKMLN OPQRSTUVW XYZ01 23456789 |
right | right (default in RTL languages) |
ABCDEFGHI
JKMLN OPQRSTUVW XYZ01 23456789 |
justify | space is added between words to create a visual block of text |
text-decoration[edit | edit source]
| text-decoration | blink | replaces the Netscape <blink> element. |
| text-decoration | inherit | |
| text-decoration | line-through | replaces the deprecated <s> and <strike> elements. |
| text-decoration | none | |
| text-decoration | overline | |
| text-decoration | underline | replaces the deprecated <u> element. |
text-transform[edit | edit source]
| text-transform | none | Default. Text is not transformed. |
| text-transform | capitalize | Transforms the first character of each word to uppercase. |
| text-transform | uppercase | Transforms all the characters to uppercase. |
| text-transform | lowercase | Transforms all the characters to lowercase. |
vertical-align[edit | edit source]
| baseline | The element is placed on the baseline of the parent element |
| sub | Aligns the element as it was subscript |
| super | Aligns the element as it was superscript |
| top | The top of the element is aligned with the top of the tallest element on the line |
| text-top | The top of the element is aligned with the top of the parent element's font |
| middle | The element is placed in the middle of the parent element |
| bottom | The bottom of the element is aligned with the lowest element on the line |
| text-bottom | The bottom of the element is aligned with the bottom of the parent element's font |
| % | Aligns the element in a % value of the line-height property. Negative values are allowed |
visibility[edit | edit source]
| collapse | |
| hidden | |
| inherit | |
| visible |
volume[edit | edit source]
| inherit | |
| loud | |
| medium | |
| silent | |
| soft | |
| x-loud | |
| x-soft |
white-space[edit | edit source]
| inherit | |
| normal | |
| nowrap | |
| pre |
word-spacing[edit | edit source]
| inherit | |
| normal | |
| (size) |
z-index[edit | edit source]
| auto | |
| inherit | |
| (integer) |