بسم الله الرحمن الرحیم
كليپهاي آماده
زمينه زرد <span style="background-color:#FFFF66;">\1</span>
زمينه آبي <span style="background-color:#0000FF;">\1</span>
زمينه قرمز <span style="background-color:#FF0000;">\1</span>
زمينه سبز <span style="background-color:#00FF00;">\1</span>
Hex values are written as 3 double digit numbers, starting with a # sign.
Color Examples
| Color | Color HEX | Color RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
Measurement Values
| Unit | Description |
|---|---|
| % | percentage |
| in | inch |
| cm | centimeter |
| mm | millimeter |
| em | 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses |
| ex | one ex is the x-height of a font (x-height is usually about half the font-size) |
| pt | point (1 pt is the same as 1/72 inch) |
| pc | pica (1 pc is the same as 12 points) |
| px | pixels (a dot on the computer screen) |
CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).
| Selector | Example | Example description | CSS |
|---|---|---|---|
| .class | .intro | Selects all elements with class="intro" | 1 |
| #id | #firstname | Selects the element with id="firstname" | 1 |
| * | * | Selects all elements | 2 |
| element | p | Selects all <p> elements | 1 |
| element,element | div,p | Selects all <div> elements and all <p> elements | 1 |
| element element | div p | Selects all <p> elements inside <div> elements | 1 |
| element>element | div>p | Selects all <p> elements where the parent is a <div> element | 2 |
| element+element | div+p | Selects all <p> elements that are placed immediately after <div> elements | 2 |
| [attribute] | [target] | Selects all elements with a target attribute | 2 |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" | 2 |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" | 2 |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" | 2 |
| :link | a:link | Selects all unvisited links | 1 |
| :visited | a:visited | Selects all visited links | 1 |
| :active | a:active | Selects the active link | 1 |
| :hover | a:hover | Selects links on mouse over | 1 |
| :focus | input:focus | Selects the input element which has focus | 2 |
| :first-letter | p:first-letter | Selects the first letter of every <p> element | 1 |
| :first-line | p:first-line | Selects the first line of every <p> element | 1 |
| :first-child | p:first-child | Selects every <p> element that is the first child of its parent | 2 |
| :before | p:before | Insert content before the content of every <p> element | 2 |
| :after | p:after | Insert content after every <p> element | 2 |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute equal to "it" (Italian) | 2 |
| element1~element2 | p~ul | Selects every <ul> element that are preceded by a <p> element | 3 |
| [attribute^=value] | a[src^="https"] | Selects every <a> element whose src attribute value begins with "https" | 3 |
| [attribute$=value] | a[src$=".pdf"] | Selects every <a> element whose src attribute value ends with ".pdf" | 3 |
| [attribute*=value] | a[src*="w3schools"] | Selects every <a> element whose src attribute value contains the substring "w3schools" | 3 |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent | 3 |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent | 3 |
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent | 3 |
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent | 3 |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child | 3 |
| :last-child | p:last-child | Selects every <p> element that is the last child of its parent | 3 |
| :root | :root | Selects the document’s root element | 3 |
| :empty | p:empty | Selects every <p> element that has no children (including text nodes) | 3 |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) | 3 |
| :enabled | input:enabled | Selects every enabled <input> element | 3 |
| :disabled | input:disabled | Selects every disabled <input> element | 3 |
| :checked | input:checked | Selects every checked <input> element | 3 |
| :not(selector) | :not(p) | Selects every element that is not a <p> element | 3 |
| ::selection | ::selection | Selects the portion of an element that is selected by a user | 3 |
| Property | Description | CSS |
|---|---|---|
| bottom | Specifies the bottom position of a positioned element | 2 |
| clear | Specifies which sides of an element where other floating elements are not allowed | 1 |
| clip | Clips an absolutely positioned element | 2 |
| cursor | Specifies the type of cursor to be displayed | 2 |
| display | Specifies how a certain HTML element should be displayed | 1 |
| float | Specifies whether or not a box should float | 1 |
| left | Specifies the left position of a positioned element | 2 |
| overflow |
Specifies what happens if content overflows an element's box | 2 |
| position | Specifies the type of positioning method used for an element (static, relative, absolute or fixed) | 2 |
| right | Specifies the right position of a positioned element | 2 |
| top | Specifies the top position of a positioned element | 2 |
| visibility | Specifies whether or not an element is visible | 2 |
| z-index | Sets the stack order of a positioned element | 2 |
| Property | Description | CSS |
|---|---|---|
| content | Used with the :before and :after pseudo-elements, to insert generated content | 2 |
| counter-increment | Increments one or more counters | 2 |
| counter-reset | Creates or resets one or more counters | 2 |
| quotes | Sets the type of quotation marks for embedded quotations | 2 |
| crop | Allows a replaced element to be just a rectangular area of an object, instead of the whole object | 3 |
| move-to | Causes an element to be removed from the flow and reinserted at a later point in the document | 3 |
| page-policy | Determines which page-based occurance of a given element is applied to a counter or string value | 3 |
| Property | Description | CSS |
|---|---|---|
| font | Sets all the font properties in one declaration | 1 |
| font-family | Specifies the font family for text | 1 |
| font-size | Specifies the font size of text | 1 |
| font-style | Specifies the font style for text | 1 |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font | 1 |
| font-weight | Specifies the weight of a font | 1 |
| @font-face | A rule that allows websites to download and use fonts other than the "web-safe" fonts | 3 |
| font-size-adjust | Preserves the readability of text when font fallback occurs | 3 |
| font-stretch | Selects a normal, condensed, or expanded face from a font family | 3 |
| Property | Description | CSS |
|---|---|---|
| background | Sets all the background properties in one declaration | 1 |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page | 1 |
| background-color | Sets the background color of an element | 1 |
| background-image | Sets the background image for an element | 1 |
| background-position | Sets the starting position of a background image | 1 |
| background-repeat | Sets how a background image will be repeated | 1 |
| background-clip | Specifies the painting area of the background | 3 |
| background-origin | Specifies the positioning area of the background images | 3 |
| background-size | Specifies the size of the background images | 3 |
| Property | Description | CSS |
|---|---|---|
| border | Sets all the border properties in one declaration | 1 |
| border-bottom | Sets all the bottom border properties in one declaration | 1 |
| border-bottom-color | Sets the color of the bottom border | 1 |
| border-bottom-style | Sets the style of the bottom border | 1 |
| border-bottom-width | Sets the width of the bottom border | 1 |
| border-color | Sets the color of the four borders | 1 |
| border-left | Sets all the left border properties in one declaration | 1 |
| border-left-color | Sets the color of the left border | 1 |
| border-left-style | Sets the style of the left border | 1 |
| border-left-width | Sets the width of the left border | 1 |
| border-right | Sets all the right border properties in one declaration | 1 |
| border-right-color | Sets the color of the right border | 1 |
| border-right-style | Sets the style of the right border | 1 |
| border-right-width | Sets the width of the right border | 1 |
| border-style | Sets the style of the four borders | 1 |
| border-top | Sets all the top border properties in one declaration | 1 |
| border-top-color | Sets the color of the top border | 1 |
| border-top-style | Sets the style of the top border | 1 |
| border-top-width | Sets the width of the top border | 1 |
| border-width | Sets the width of the four borders | 1 |
| outline | Sets all the outline properties in one declaration | 2 |
| outline-color | Sets the color of an outline | 2 |
| outline-style | Sets the style of an outline | 2 |
| outline-width | Sets the width of an outline | 2 |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner | 3 |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner | 3 |
| border-image | A shorthand property for setting all the border-image-* properties | 3 |
| border-image-outset | Specifies the amount by which the border image area extends beyond the border box | 3 |
| border-image-repeat | Specifies whether the image-border should be repeated, rounded or stretched | 3 |
| border-image-slice | Specifies the inward offsets of the image-border | 3 |
| border-image-source | Specifies an image to be used as a border | 3 |
| border-image-width | Specifies the widths of the image-border | 3 |
| border-radius | A shorthand property for setting all the four border-*-radius properties | 3 |
| border-top-left-radius | Defines the shape of the border of the top-left corner | 3 |
| border-top-right-radius | Defines the shape of the border of the top-right corner | 3 |
| box-decoration-break | 3 | |
| box-shadow | Attaches one or more drop-shadows to the box | 3 |
مي توانيد از كد هاي زير هم استفاده كنيد :
| 000000 | 000020 | 000040 | 000060 | 000080 | 0000a0 | 0000c0 | 0000ff |
| 002000 | 002020 | 002040 | 002060 | 002080 | 0020a0 | 0020c0 | 0020ff |
| 004000 | 004020 | 004040 | 004060 | 004080 | 0040a0 | 0040c0 | 0040ff |
| 006000 | 006020 | 006040 | 006060 | 006080 | 0060a0 | 0060c0 | 0060ff |
| 008000 | 008020 | 008040 | 008060 | 008080 | 0080a0 | 0080c0 | 0080ff |
| 00a000 | 00a020 | 00a040 | 00a060 | 00a080 | 00a0a0 | 00a0c0 | 00a0ff |
| 00c000 | 00c020 | 00c040 | 00c060 | 00c080 | 00c0a0 | 00c0c0 | 00c0ff |
| 00ff00 | 00ff20 | 00ff40 | 00ff60 | 00ff80 | 00ffa0 | 00ffc0 | 00ffff |
| 200000 | 200020 | 200040 | 200060 | 200080 | 2000a0 | 2000c0 | 2000ff |
| 202000 | 202020 | 202040 | 202060 | 202080 | 2020a0 | 2020c0 | 2020ff |
| 204000 | 204020 | 204040 | 204060 | 204080 | 2040a0 | 2040c0 | 2040ff |
| 206000 | 206020 | 206040 | 206060 | 206080 | 2060a0 | 2060c0 | 2060ff |
| 208000 | 208020 | 208040 | 208060 | 208080 | 2080a0 | 2080c0 | 2080ff |
| 20a000 | 20a020 | 20a040 | 20a060 | 20a080 | 20a0a0 | 20a0c0 | 20a0ff |
| 20c000 | 20c020 | 20c040 | 20c060 | 20c080 | 20c0a0 | 20c0c0 | 20c0ff |
| 20ff00 | 20ff20 | 20ff40 | 20ff60 | 20ff80 | 20ffa0 | 20ffc0 | 20ffff |
| 400000 | 400020 | 400040 | 400060 | 400080 | 4000a0 | 4000c0 | 4000ff |
| 402000 | 402020 | 402040 | 402060 | 402080 | 4020a0 | 4020c0 | 4020ff |
| 404000 | 404020 | 404040 | 404060 | 404080 | 4040a0 | 4040c0 | 4040ff |
| 406000 | 406020 | 406040 | 406060 | 406080 | 4060a0 | 4060c0 | 4060ff |
| 408000 | 408020 | 408040 | 408060 | 408080 | 4080a0 | 4080c0 | 4080ff |
| 40a000 | 40a020 | 40a040 | 40a060 | 40a080 | 40a0a0 | 40a0c0 | 40a0ff |
| 40c000 | 40c020 | 40c040 | 40c060 | 40c080 | 40c0a0 | 40c0c0 | 40c0ff |
| 40ff00 | 40ff20 | 40ff40 | 40ff60 | 40ff80 | 40ffa0 | 40ffc0 | 40ffff |
| 600000 | 600020 | 600040 | 600060 | 600080 | 6000a0 | 6000c0 | 6000ff |
| 602000 | 602020 | 602040 | 602060 | 602080 | 6020a0 | 6020c0 | 6020ff |
| 604000 | 604020 | 604040 | 604060 | 604080 | 6040a0 | 6040c0 | 6040ff |
| 606000 | 606020 | 606040 | 606060 | 606080 | 6060a0 | 6060c0 | 6060ff |
| 608000 | 608020 | 608040 | 608060 | 608080 | 6080a0 | 6080c0 | 6080ff |
| 60a000 | 60a020 | 60a040 | 60a060 | 60a080 | 60a0a0 | 60a0c0 | 60a0ff |
| 60c000 | 60c020 | 60c040 | 60c060 | 60c080 | 60c0a0 | 60c0c0 | 60c0ff |
| 60ff00 | 60ff20 | 60ff40 | 60ff60 | 60ff80 | 60ffa0 | 60ffc0 | 60ffff |
| 800000 | 800020 | 800040 | 800060 | 800080 | 8000a0 | 8000c0 | 8000ff |
| 802000 | 802020 | 802040 | 802060 | 802080 | 8020a0 | 8020c0 | 8020ff |
| 804000 | 804020 | 804040 | 804060 | 804080 | 8040a0 | 8040c0 | 8040ff |
| 806000 | 806020 | 806040 | 806060 | 806080 | 8060a0 | 8060c0 | 8060ff |
| 808000 | 808020 | 808040 | 808060 | 808080 | 8080a0 | 8080c0 | 8080ff |
| 80a000 | 80a020 | 80a040 | 80a060 | 80a080 | 80a0a0 | 80a0c0 | 80a0ff |
| 80c000 | 80c020 | 80c040 | 80c060 | 80c080 | 80c0a0 | 80c0c0 | 80c0ff |
| 80ff00 | 80ff20 | 80ff40 | 80ff60 | 80ff80 | 80ffa0 | 80ffc0 | 80ffff |
| a00000 | a00020 | a00040 | a00060 | a00080 | a000a0 | a000c0 | a000ff |
| a02000 | a02020 | a02040 | a02060 | a02080 | a020a0 | a020c0 | a020ff |
| a04000 | a04020 | a04040 | a04060 | a04080 | a040a0 | a040c0 | a040ff |
| a06000 | a06020 | a06040 | a06060 | a06080 | a060a0 | a060c0 | a060ff |
| a08000 | a08020 | a08040 | a08060 | a08080 | a080a0 | a080c0 | a080ff |
| a0a000 | a0a020 | a0a040 | a0a060 | a0a080 | a0a0a0 | a0a0c0 | a0a0ff |
| a0c000 | a0c020 | a0c040 | a0c060 | a0c080 | a0c0a0 | a0c0c0 | a0c0ff |
| a0ff00 | a0ff20 | a0ff40 | a0ff60 | a0ff80 | a0ffa0 | a0ffc0 | a0ffff |
| c00000 | c00020 | c00040 | c00060 | c00080 | c000a0 | c000c0 | c000ff |
| c02000 | c02020 | c02040 | c02060 | c02080 | c020a0 | c020c0 | c020ff |
| c04000 | c04020 | c04040 | c04060 | c04080 | c040a0 | c040c0 | c040ff |
| c06000 | c06020 | c06040 | c06060 | c06080 | c060a0 | c060c0 | c060ff |
| c08000 | c08020 | c08040 | c08060 | c08080 | c080a0 | c080c0 | c080ff |
| c0a000 | c0a020 | c0a040 | c0a060 | c0a080 | c0a0a0 | c0a0c0 | c0a0ff |
| c0c000 | c0c020 | c0c040 | c0c060 | c0c080 | c0c0a0 | c0c0c0 | c0c0ff |
| c0ff00 | c0ff20 | c0ff40 | c0ff60 | c0ff80 | c0ffa0 | c0ffc0 | c0ffff |
| ff0000 | ff0020 | ff0040 | ff0060 | ff0080 | ff00a0 | ff00c0 | ff00ff |
| ff2000 | ff2020 | ff2040 | ff2060 | ff2080 | ff20a0 | ff20c0 | ff20ff |
| ff4000 | ff4020 | ff4040 | ff4060 | ff4080 | ff40a0 | ff40c0 | ff40ff |
| ff6000 | ff6020 | ff6040 | ff6060 | ff6080 | ff60a0 | ff60c0 | ff60ff |
| ff8000 | ff8020 | ff8040 | ff8060 | ff8080 | ff80a0 | ff80c0 | ff80ff |
| ffa000 | ffa020 | ffa040 | ffa060 | ffa080 | ffa0a0 | ffa0c0 | ffa0ff |
| ffc000 | ffc020 | ffc040 | ffc060 | ffc080 | ffc0a0 | ffc0c0 | ffc0ff |
| ffff00 | ffff20 | ffff40 | ffff60 | ffff80 | ffffa0 | ffffc0 | ffffff |
| 000000 | 000020 | 000040 | 000060 | 000080 | 0000a0 | 0000c0 | 0000ff |
| 002000 | 002020 | 002040 | 002060 | 002080 | 0020a0 | 0020c0 | 0020ff |
| 004000 | 004020 | 004040 | 004060 | 004080 | 0040a0 | 0040c0 | 0040ff |
| 006000 | 006020 | 006040 | 006060 | 006080 | 0060a0 | 0060c0 | 0060ff |
| 008000 | 008020 | 008040 | 008060 | 008080 | 0080a0 | 0080c0 | 0080ff |
| 00a000 | 00a020 | 00a040 | 00a060 | 00a080 | 00a0a0 | 00a0c0 | 00a0ff |
| 00c000 | 00c020 | 00c040 | 00c060 | 00c080 | 00c0a0 | 00c0c0 | 00c0ff |
| 00ff00 | 00ff20 | 00ff40 | 00ff60 | 00ff80 | 00ffa0 | 00ffc0 | 00ffff |
| 200000 | 200020 | 200040 | 200060 | 200080 | 2000a0 | 2000c0 | 2000ff |
| 202000 | 202020 | 202040 | 202060 | 202080 | 2020a0 | 2020c0 | 2020ff |
| 204000 | 204020 | 204040 | 204060 | 204080 | 2040a0 | 2040c0 | 2040ff |
| 206000 | 206020 | 206040 | 206060 | 206080 | 2060a0 | 2060c0 | 2060ff |
| 208000 | 208020 | 208040 | 208060 | 208080 | 2080a0 | 2080c0 | 2080ff |
| 20a000 | 20a020 | 20a040 | 20a060 | 20a080 | 20a0a0 | 20a0c0 | 20a0ff |
| 20c000 | 20c020 | 20c040 | 20c060 | 20c080 | 20c0a0 | 20c0c0 | 20c0ff |
| 20ff00 | 20ff20 | 20ff40 | 20ff60 | 20ff80 | 20ffa0 | 20ffc0 | 20ffff |
| 400000 | 400020 | 400040 | 400060 | 400080 | 4000a0 | 4000c0 | 4000ff |
| 402000 | 402020 | 402040 | 402060 | 402080 | 4020a0 | 4020c0 | 4020ff |
| 404000 | 404020 | 404040 | 404060 | 404080 | 4040a0 | 4040c0 | 4040ff |
| 406000 | 406020 | 406040 | 406060 | 406080 | 4060a0 | 4060c0 | 4060ff |
| 408000 | 408020 | 408040 | 408060 | 408080 | 4080a0 | 4080c0 | 4080ff |
| 40a000 | 40a020 | 40a040 | 40a060 | 40a080 | 40a0a0 | 40a0c0 | 40a0ff |
| 40c000 | 40c020 | 40c040 | 40c060 | 40c080 | 40c0a0 | 40c0c0 | 40c0ff |
| 40ff00 | 40ff20 | 40ff40 | 40ff60 | 40ff80 | 40ffa0 | 40ffc0 | 40ffff |
| 600000 | 600020 | 600040 | 600060 | 600080 | 6000a0 | 6000c0 | 6000ff |
| 602000 | 602020 | 602040 | 602060 | 602080 | 6020a0 | 6020c0 | 6020ff |
| 604000 | 604020 | 604040 | 604060 | 604080 | 6040a0 | 6040c0 | 6040ff |
| 606000 | 606020 | 606040 | 606060 | 606080 | 6060a0 | 6060c0 | 6060ff |
| 608000 | 608020 | 608040 | 608060 | 608080 | 6080a0 | 6080c0 | 6080ff |
| 60a000 | 60a020 | 60a040 | 60a060 | 60a080 | 60a0a0 | 60a0c0 | 60a0ff |
| 60c000 | 60c020 | 60c040 | 60c060 | 60c080 | 60c0a0 | 60c0c0 | 60c0ff |
| 60ff00 | 60ff20 | 60ff40 | 60ff60 | 60ff80 | 60ffa0 | 60ffc0 | 60ffff |
| 800000 | 800020 | 800040 | 800060 | 800080 | 8000a0 | 8000c0 | 8000ff |
| 802000 | 802020 | 802040 | 802060 | 802080 | 8020a0 | 8020c0 | 8020ff |
| 804000 | 804020 | 804040 | 804060 | 804080 | 8040a0 | 8040c0 | 8040ff |
| 806000 | 806020 | 806040 | 806060 | 806080 | 8060a0 | 8060c0 | 8060ff |
| 808000 | 808020 | 808040 | 808060 | 808080 | 8080a0 | 8080c0 | 8080ff |
| 80a000 | 80a020 | 80a040 | 80a060 | 80a080 | 80a0a0 | 80a0c0 | 80a0ff |
| 80c000 | 80c020 | 80c040 | 80c060 | 80c080 | 80c0a0 | 80c0c0 | 80c0ff |
| 80ff00 | 80ff20 | 80ff40 | 80ff60 | 80ff80 | 80ffa0 | 80ffc0 | 80ffff |
| a00000 | a00020 | a00040 | a00060 | a00080 | a000a0 | a000c0 | a000ff |
| a02000 | a02020 | a02040 | a02060 | a02080 | a020a0 | a020c0 | a020ff |
| a04000 | a04020 | a04040 | a04060 | a04080 | a040a0 | a040c0 | a040ff |
| a06000 | a06020 | a06040 | a06060 | a06080 | a060a0 | a060c0 | a060ff |
| a08000 | a08020 | a08040 | a08060 | a08080 | a080a0 | a080c0 | a080ff |
| a0a000 | a0a020 | a0a040 | a0a060 | a0a080 | a0a0a0 | a0a0c0 | a0a0ff |
| a0c000 | a0c020 | a0c040 | a0c060 | a0c080 | a0c0a0 | a0c0c0 | a0c0ff |
| a0ff00 | a0ff20 | a0ff40 | a0ff60 | a0ff80 | a0ffa0 | a0ffc0 | a0ffff |
| c00000 | c00020 | c00040 | c00060 | c00080 | c000a0 | c000c0 | c000ff |
| c02000 | c02020 | c02040 | c02060 | c02080 | c020a0 | c020c0 | c020ff |
| c04000 | c04020 | c04040 | c04060 | c04080 | c040a0 | c040c0 | c040ff |
| c06000 | c06020 | c06040 | c06060 | c06080 | c060a0 | c060c0 | c060ff |
| c08000 | c08020 | c08040 | c08060 | c08080 | c080a0 | c080c0 | c080ff |
| c0a000 | c0a020 | c0a040 | c0a060 | c0a080 | c0a0a0 | c0a0c0 | c0a0ff |
| c0c000 | c0c020 | c0c040 | c0c060 | c0c080 | c0c0a0 | c0c0c0 | c0c0ff |
| c0ff00 | c0ff20 | c0ff40 | c0ff60 | c0ff80 | c0ffa0 | c0ffc0 | c0ffff |
| ff0000 | ff0020 | ff0040 | ff0060 | ff0080 | ff00a0 | ff00c0 | ff00ff |
| ff2000 | ff2020 | ff2040 | ff2060 | ff2080 | ff20a0 | ff20c0 | ff20ff |
| ff4000 | ff4020 | ff4040 | ff4060 | ff4080 | ff40a0 | ff40c0 | ff40ff |
| ff6000 | ff6020 | ff6040 | ff6060 | ff6080 | ff60a0 | ff60c0 | ff60ff |
| ff8000 | ff8020 | ff8040 | ff8060 | ff8080 | ff80a0 | ff80c0 | ff80ff |
| ffa000 | ffa020 | ffa040 | ffa060 | ffa080 | ffa0a0 | ffa0c0 | ffa0ff |
| ffc000 | ffc020 | ffc040 | ffc060 | ffc080 | ffc0a0 | ffc0c0 | ffc0ff |
| ffff00 | ffff20 | ffff40 | ffff60 | ffff80 | ffffa0 | ffffc0 | ffffff |
CSS Colors
Colors in CSS can be specified by the following methods:
Hexadecimal Colors
Hexadecimal color values are supported in all major browsers.
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 0 and FF.
For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 0.
Example
RGB Colors
RGB color values are supported in all major browsers.
An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).
For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.
Also, the following values define the same color: rgb(0,0,255) and rgb(0%,0%,100%).
Example
RGBA Colors
RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example
HSL Colors
HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.
HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.
An HSL color value is specified with: hsl(hue, saturation, lightness).
Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.
Example
HSLA Colors
HSLA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the object.
An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha), where the alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example
This is a paragraph.
This text contains subscript text.
This text contains superscript text.