Understanding CSS
Those who work with HTML should have a clear understanding about CSS. Basically, CSS is Cascading Style Sheets. The CSS styles show how the HTML elements can be displayed. These styles had been added in order to solve problems in HTML 4.0. Quite a lot of work can be saved when you use the external style sheets. These sheets are stored in the CSS files.
The CSS Color Chart - The Neutral and the General Purpose Colors
There are a few colors which are considered to be neural and can be used for general purpose. These colors are valid for HTML as well as CSS use. The neutral colors which are presented here are from the exterior and interior paint color swatch from Behr Premium Plus.
The cool colors are those colors which have a blue or a green tint. On the other hand, warm colors are those which have a red or a yellow tint. Gray and white are considered as neutral colors. You can also use these neutral colors for background in tables and in pages.
When you are coding CSS you would quite often have to define the colors for HTML content. You might need to create a gray background, red fonts or blue borders. In CSS you would be able to define the colors using the RGB color code or the hexadecimal color codes or by using the actual name of the color. The main benefit of using the RGB or the hexadecimal color codes is that you would get quite a lot of options when compared to using just the color name.
The Advantages of CSS
When it comes to the layout, HTML has a few limitations. There are six levels of headings available and six fonts sizes along with tables and alignment control. These options are good to get a document which is reasonably good and shows the information structure. However, if you are looking for the excellent design and layout which can be seen in brochures and magazines, HTML on its own would not do the trick.
With the help of CSS you can have better control on the layout of the web pages. You would be able to specify just how the font should be, where the element should appear on the page and what the page should like when it is printed etc.
You would also be able to save a lot of time with the help of CSS when you are responsible for maintaining large sits. Also, the W3C too recommends using CSS tags rather than HTML tags when possible. Quite a lot of HTML tags are gradually being phased out by W3C.
Neutral Colors
| Color Name | Color Code |
|---|---|
| aliceblue | |
| antiquewhite | |
| antiquewhite1 | |
| antiquewhite2 | |
| antiquewhite3 | |
| antiquewhite4 | |
| aquamarine | |
| aquamarine1 | |
| aquamarine2 | |
| aquamarine3 | |
| aquamarine4 | |
| azure | |
| azure1 | |
| azure2 | |
| azure3 | |
| azure4 | |
| Barely Blushing | |
| beige | |
| bisque | |
| bisque1 | |
| bisque2 | |
| bisque3 | |
| bisque4 | |
| black | |
| blanchedalmond | |
| blue | |
| blue1 | |
| blue2 | |
| blue3 | |
| blue4 | |
| blueviolet | |
| brown | |
| brown1 | |
| brown2 | |
| brown3 | |
| brown4 | |
| burlywood | |
| burlywood1 | |
| burlywood2 | |
| burlywood3 | |
| burlywood4 | |
| cadetblue | |
| cadetblue1 | |
| cadetblue2 | |
| cadetblue3 | |
| cadetblue4 | |
| Carmel Tan | |
| chartreuse | |
| chartreuse1 | |
| chartreuse2 | |
| chartreuse3 | |
| chartreuse4 | |
| chocolate | |
| chocolate1 | |
| chocolate2 | |
| chocolate3 | |
| chocolate4 | |
| coral | |
| coral1 | |
| coral2 | |
| coral3 | |
| coral4 | |
| cornflowerblue | |
| cornsilk | |
| cornsilk1 | |
| cornsilk2 | |
| cornsilk3 | |
| cornsilk4 | |
| crimson | |
| cyan | |
| cyan1 | |
| cyan2 | |
| cyan3 | |
| cyan4 | |
| darkblue | |
| darkcyan | |
| darkgoldenrod | |
| darkgoldenrod1 | |
| darkgoldenrod2 | |
| darkgoldenrod3 | |
| darkgoldenrod4 | |
| darkgreen | |
| darkgrey | |
| darkkhaki | |
| darkmagenta | |
| darkolivegreen | |
| darkolivegreen1 | |
| darkolivegreen2 | |
| darkolivegreen3 | |
| darkolivegreen4 | |
| darkorange | |
| darkorange1 | |
| darkorange2 | |
| darkorange3 | |
| darkorange4 | |
| darkorchid | |
| darkorchid1 | |
| darkorchid2 | |
| darkorchid3 | |
| darkorchid4 | |
| darkred | |
| darksalmon | |
| darkseagreen | |
| darkseagreen1 | |
| darkseagreen2 | |
| darkseagreen3 | |
| darkseagreen4 | |
| darkslateblue | |
| darkslategrey | |
| darkturquoise | |
| darkviolet | |
| deeppink | |
| deeppink1 | |
| deeppink2 | |
| deeppink3 | |
| deeppink4 | |
| deepskyblue | |
| deepskyblue1 | |
| deepskyblue2 | |
| deepskyblue3 | |
| deepskyblue4 | |
| dimgrey | |
| dodgerblue | |
| dodgerblue1 | |
| dodgerblue2 | |
| dodgerblue3 | |
| dodgerblue4 | |
| Dove Beige | |
| Dusted Pink | |
| Dusty Trail | |
| Eggshell Cream | |
| Far Horizon | |
| firebrick | |
| firebrick1 | |
| firebrick2 | |
| firebrick3 | |
| firebrick4 | |
| floralwhite | |
| forestgreen | |
| Frosted Lime | |
| Frosted Peach | |
| gainsboro | |
| ghostwhite | |
| gold | |
| gold1 | |
| gold2 | |
| gold3 | |
| gold4 | |
| goldenrod | |
| goldenrod1 | |
| goldenrod2 | |
| goldenrod3 | |
| goldenrod4 | |
| Green Veil | |
| green | |
| green1 | |
| green2 | |
| green3 | |
| green4 | |
| greenyellow | |
| grey | |
| grey0 | |
| grey1 | |
| grey2 | |
| grey3 | |
| grey4 | |
| grey5 | |
| grey6 | |
| grey7 | |
| grey8 | |
| grey9 | |
| grey10 | |
| grey11 | |
| grey12 | |
| grey13 | |
| grey14 | |
| grey15 | |
| grey16 | |
| grey17 | |
| grey18 | |
| grey19 | |
| grey20 | |
| grey21 | |
| grey22 | |
| grey23 | |
| grey24 | |
| grey25 | |
| grey26 | |
| grey27 | |
| grey28 | |
| grey29 | |
| grey30 | |
| grey31 | |
| grey32 | |
| grey33 | |
| grey34 | |
| grey35 | |
| grey36 | |
| grey37 | |
| grey38 | |
| grey39 | |
| grey40 | |
| grey41 | |
| grey42 | |
| grey43 | |
| grey44 | |
| grey45 | |
| grey46 | |
| grey47 | |
| grey48 | |
| grey49 | |
| grey50 | |
| grey51 | |
| grey52 | |
| grey53 | |
| grey54 | |
| grey55 | |
| grey56 | |
| grey57 | |
| grey58 | |
| grey59 | |
| grey60 | |
| grey61 | |
| grey62 | |
| grey63 | |
| grey64 | |
| grey65 | |
| grey66 | |
| grey67 | |
| grey68 | |
| grey69 | |
| grey70 | |
| grey71 | |
| grey72 | |
| grey73 | |
| grey74 | |
| grey75 | |
| grey76 | |
| grey77 | |
| grey78 | |
| grey79 | |
| grey80 | |
| grey81 | |
| grey82 | |
| grey83 | |
| grey84 | |
| grey85 | |
| grey86 | |
| grey87 | |
| grey88 | |
| grey89 | |
| grey90 | |
| grey91 | |
| grey92 | |
| grey93 | |
| grey94 | |
| grey95 | |
| grey96 | |
| grey97 | |
| grey98 | |
| grey99 | |
| grey100 | |
| honeydew | |
| honeydew1 | |
| honeydew2 | |
| honeydew3 | |
| honeydew4 | |
| hotpink | |
| hotpink1 | |
| hotpink2 | |
| hotpink3 | |
| hotpink4 | |
| indianred | |
| indianred1 | |
| indianred2 | |
| indianred3 | |
| indianred4 | |
| indigo | |
| indigo2 | |
| Ivory Tusk | |
| ivory | |
| ivory1 | |
| ivory2 | |
| ivory3 | |
| ivory4 | |
| khaki | |
| khaki1 | |
| khaki2 | |
| khaki3 | |
| khaki4 | |
| lavender | |
| lavenderblush | |
| lavenderblush1 | |
| lavenderblush2 | |
| lavenderblush3 | |
| lavenderblush4 | |
| lawngreen | |
| lemonchiffon | |
| lemonchiffon1 | |
| lemonchiffon2 | |
| lemonchiffon3 | |
| lemonchiffon4 | |
| Light Adobe | |
| Light Sand | |
| lightblue | |
| lightblue1 | |
| lightblue2 | |
| lightblue3 | |
| lightblue4 | |
| lightcoral | |
| lightcyan | |
| lightcyan1 | |
| lightcyan2 | |
| lightcyan3 | |
| lightcyan4 | |
| lightgoldenrod | |
| lightgoldenrod1 | |
| lightgoldenrod2 | |
| lightgoldenrod3 | |
| lightgoldenrod4 | |
| lightgoldenrodyellow | |
| lightgreen | |
| lightgrey | |
| lightpink | |
| lightpink1 | |
| lightpink2 | |
| lightpink3 | |
| lightpink4 | |
| lightsalmon | |
| lightsalmon1 | |
| lightsalmon2 | |
| lightsalmon3 | |
| lightsalmon4 | |
| lightseagreen | |
| lightskyblue | |
| lightskyblue1 | |
| lightskyblue2 | |
| lightskyblue3 | |
| lightskyblue4 | |
| lightslateblue | |
| lightslategrey | |
| lightsteelblue | |
| lightsteelblue1 | |
| lightsteelblue2 | |
| lightsteelblue3 | |
| lightsteelblue4 | |
| lightyellow | |
| lightyellow1 | |
| lightyellow2 | |
| lightyellow3 | |
| lightyellow4 | |
| limegreen | |
| linen | |
| magenta | |
| magenta1 | |
| magenta2 | |
| magenta3 | |
| magenta4 | |
| maroon | |
| maroon1 | |
| maroon2 | |
| maroon3 | |
| maroon4 | |
| mediumaquamarine | |
| mediumblue | |
| mediumorchid | |
| mediumorchid1 | |
| mediumorchid2 | |
| mediumorchid3 | |
| mediumorchid4 | |
| mediumpurple | |
| mediumpurple1 | |
| mediumpurple2 | |
| mediumpurple3 | |
| mediumpurple4 | |
| mediumseagreen | |
| mediumslateblue | |
| mediumspringgreen | |
| mediumturquoise | |
| mediumvioletred | |
| midnightblue | |
| mintcream | |
| mistyrose | |
| mistyrose1 | |
| mistyrose2 | |
| mistyrose3 | |
| mistyrose4 | |
| moccasin | |
| Morning Fog | |
| navajowhite | |
| navajowhite1 | |
| navajowhite2 | |
| navajowhite3 | |
| navajowhite4 | |
| navy | |
| navyblue | |
| oldlace | |
| olivedrab | |
| olivedrab1 | |
| olivedrab2 | |
| olivedrab3 | |
| olivedrab4 | |
| orange | |
| orange1 | |
| orange2 | |
| orange3 | |
| orange4 | |
| orangered | |
| orangered1 | |
| orangered2 | |
| orangered3 | |
| orangered4 | |
| orchid | |
| orchid1 | |
| orchid2 | |
| orchid3 | |
| orchid4 | |
| Ostrich Feather | |
| Pale Olive | |
| palegoldenrod | |
| palegreen | |
| palegreen1 | |
| palegreen2 | |
| palegreen3 | |
| palegreen4 | |
| paleturquoise | |
| paleturquoise1 | |
| paleturquoise2 | |
| paleturquoise3 | |
| paleturquoise4 | |
| palevioletred | |
| palevioletred1 | |
| palevioletred2 | |
| palevioletred3 | |
| palevioletred4 | |
| papayawhip | |
| peachpuff | |
| peachpuff1 | |
| peachpuff2 | |
| peachpuff3 | |
| peachpuff4 | |
| Pearly Gates | |
| peru | |
| pink | |
| pink1 | |
| pink2 | |
| pink3 | |
| pink4 | |
| Plantation White | |
| plum | |
| plum1 | |
| plum2 | |
| plum3 | |
| plum4 | |
| Porcelain White | |
| powderblue | |
| purple | |
| purple1 | |
| purple2 | |
| purple3 | |
| purple4 | |
| red | |
| red1 | |
| red2 | |
| red3 | |
| red4 | |
| rosybrown | |
| rosybrown1 | |
| rosybrown2 | |
| rosybrown3 | |
| rosybrown4 | |
| royalblue | |
| royalblue1 | |
| royalblue2 | |
| royalblue3 | |
| royalblue4 | |
| saddlebrown | |
| salmon | |
| salmon1 | |
| salmon2 | |
| salmon3 | |
| salmon4 | |
| Sand Box | |
| sandybrown | |
| seagreen | |
| seagreen1 | |
| seagreen2 | |
| seagreen3 | |
| seagreen4 | |
| seashell | |
| seashell1 | |
| seashell2 | |
| seashell3 | |
| seashell4 | |
| sgibeet | |
| sgibrightgrey | |
| sgichartreuse | |
| sgidarkgrey | |
| sgigrey0 | |
| sgigrey4 | |
| sgigrey8 | |
| sgigrey12 | |
| sgigrey16 | |
| sgigrey20 | |
| sgigrey24 | |
| sgigrey28 | |
| sgigrey32 | |
| sgigrey36 | |
| sgigrey40 | |
| sgigrey44 | |
| sgigrey48 | |
| sgigrey52 | |
| sgigrey56 | |
| sgigrey60 | |
| sgigrey64 | |
| sgigrey68 | |
| sgigrey72 | |
| sgigrey76 | |
| sgigrey80 | |
| sgigrey84 | |
| sgigrey88 | |
| sgigrey92 | |
| sgigrey96 | |
| sgigrey100 | |
| sgilightblue | |
| sgilightgrey | |
| sgimediumgrey | |
| sgiolivedrab | |
| sgisalmon | |
| sgislateblue | |
| sgiteal | |
| sgiverydarkgrey | |
| sgiverylightgrey | |
| sienna | |
| sienna1 | |
| sienna2 | |
| sienna3 | |
| sienna4 | |
| skyblue | |
| skyblue1 | |
| skyblue2 | |
| skyblue3 | |
| skyblue4 | |
| slateblue | |
| slateblue1 | |
| slateblue2 | |
| slateblue3 | |
| slateblue4 | |
| slategrey | |
| snow | |
| snow1 | |
| snow2 | |
| snow3 | |
| snow4 | |
| springgreen | |
| springgreen1 | |
| springgreen2 | |
| springgreen3 | |
| springgreen4 | |
| steelblue | |
| steelblue1 | |
| steelblue2 | |
| steelblue3 | |
| steelblue4 | |
| Subtle White | |
| tan | |
| tan1 | |
| tan2 | |
| tan3 | |
| tan4 | |
| thistle | |
| thistle1 | |
| thistle2 | |
| thistle3 | |
| thistle4 | |
| Toasted Meringue | |
| tomato | |
| tomato1 | |
| tomato2 | |
| tomato3 | |
| tomato4 | |
| turquoise | |
| turquoise1 | |
| turquoise2 | |
| turquoise3 | |
| turquoise4 | |
| Ultra Pure White | |
| violet | |
| violetred | |
| violetred1 | |
| violetred2 | |
| violetred3 | |
| violetred4 | |
| Warm Shadow | |
| Warm Summer | |
| Wedding Veil | |
| wheat | |
| wheat1 | |
| wheat2 | |
| wheat3 | |
| wheat4 | |
| White Orchid | |
| White Sail | |
| white | |
| whitesmoke | |
| yellow | |
| yellow1 | |
| yellow2 | |
| yellow3 | |
| yellow4 | |
| yellowgreen |