XML - Managing Data Exchange/CSS/Reference
CSS PropertiesEdit
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
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
Absolute or relative top (y) and left (x) position of a component.
auto | |
inherit | |
(size) |
azimuthEdit
behind | |
center | |
center-left | |
center-right | |
far-left | |
far-right | |
inherit | |
left | |
left-side | |
leftwards | |
right | |
right-side | |
rightwards |
background-repeatEdit
■ ■ ■ ■ ■ ■ ■ ■ ■ |
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 |
borderEdit
Shorthand property for border-width, border-style,border-color affecting all 4 borders.
border-styleEdit
- 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-widthEdit
- 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-sideEdit
bottom | |
inherit | |
left | |
right | |
top |
clearEdit
both | |
inherit | |
left | |
none | |
right |
colorEdit
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 |
floatEdit
none | |
left | |
right |
font-familyEdit
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-sizeEdit
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-styleEdit
normal | normal |
italic | italic |
oblique | a variant of italic |
font-variantEdit
normal | The browser displays a normal font |
small-caps | The browser displays a small-caps font |
font-weightEdit
100 | |
200 | |
300 | |
400 | |
500 | |
600 | |
700 | |
800 | |
900 | |
bold | |
bolder | |
lighter | |
normal |
positionEdit
inherit | |
absolute | |
fixed | |
relative | |
static |
text-alignEdit
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-decorationEdit
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-transformEdit
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-alignEdit
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 |
visibilityEdit
collapse | |
hidden | |
inherit | |
visible |
volumeEdit
inherit | |
loud | |
medium | |
silent | |
soft | |
x-loud | |
x-soft |
white-spaceEdit
inherit | |
normal | |
nowrap | |
pre |
word-spacingEdit
inherit | |
normal | |
(size) |
z-indexEdit
auto | |
inherit | |
(integer) |