# Universal Styles
You can set universal styles for components in the **style** attribute or **.css** files.
| Name | Type | Default Value | Mandatory | Description |
| ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- |
| width | <length> \| <percentage>5+ | - | No | Component width.
If this attribute is not set, the default value **0** is used. |
| height | <length> \| <percentage>5+ | - | No | Component height.
If this attribute is not set, the default value **0** is used. |
| padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides in a declaration.
The attribute can have one to four values:
- If you set only one value, it specifies the padding for all the four sides.
- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.
- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.
- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).|
| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. |
| margin | <length> \| <percentage>5+ | 0 | No | Shorthand attribute to set the margin for all sides in a declaration. The attribute can have one to four values:
- If you set only one value, it specifies the margin for all the four sides.
- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.
- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.
- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).|
| margin-[left\|top\|right\|bottom] | <length> \| <percentage>5+ | 0 | No | Left, top, right, and bottom margins. |
| border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. |
| border-color | <color> | black | No | Shorthand attribute to set the color for all borders. |
| border-radius | <length> | - | No | Radius of round-corner borders. |
| background-color | <color> | - | No | Background color. |
| opacity5+ | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
| display | string | flex | No | Type of the box containing an element. Available values are as follows:
- **flex**: flexible layout
- **none**: not rendered|
| [left\|top] | <length> \| <percentage>6+ | - | No | Edge of the element.
- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.
- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.|
> **NOTE**
>
> The aforementioned universal styles are not mandatory.
>
> Currently, the following color formats are supported:
> - rgb(255, 255, 255)
>
> - rgba(255, 255, 255, 1.0)
>
> - HEX formats: \#rrggbb and \#aarrggbb
>
> - Enumeration format: as listed in Table 1. The enumeration format is not supported in the script.
**Table 1** Color enums
| Name | Hexadecimal Code | Color |
| -------------------- | -------- | ---------------------------------------- |
| 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 |  |
| darkgrey | \#a9a9a9 |  |
| darkkhaki | \#bdb76b |  |
| darkmagenta | \#8b008b |  |
| darkolivegreen | \#556b2f |  |
| darkorange | \#ff8c00 |  |
| darkorchid | \#9932cc |  |
| darkred | \#8b0000 |  |
| darksalmon | \#e9967a |  |
| darkseagreen | \#8fbc8f |  |
| darkslateblue | \#483d8b |  |
| darkslategray | \#2f4f4f |  |
| darkslategrey | \#2f4f4f |  |
| darkturquoise | \#00ced1 |  |
| darkviolet | \#9400d3 |  |
| deeppink | \#ff1493 |  |
| deepskyblue | \#00bfff |  |
| dimgray | \#696969 |  |
| dimgrey | \#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 |  |
| grey | \#808080 |  |
| 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 |  |
| lightgray | \#d3d3d3 |  |
| lightgreen | \#90ee90 |  |
| lightpink | \#ffb6c1 |  |
| lightsalmon | \#ffa07a |  |
| lightseagreen | \#20b2aa |  |
| lightskyblue | \#87cefa |  |
| lightslategray | \#778899 |  |
| lightslategrey | \#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 |  |
| rebeccapurple | \#663399 |  |
| red | \#ff0000 |  |
| rosybrown | \#bc8f8f |  |
| royalblue | \#4169e1 |  |
| saddlebrown | \#8b4513 |  |
| salmon | \#fa8072 |  |
| sandybrown | \#f4a460 |  |
| seagreen | \#2e8b57 |  |
| seashell | \#fff5ee |  |
| sienna | \#a0522d |  |
| silver | \#c0c0c0 |  |
| skyblue | \#87ceeb |  |
| slateblue | \#6a5acd |  |
| slategray | \#708090 |  |
| slategrey | \#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 |  |