How to Use Colors in CSS

Now we are going to make our life full of colors……. :) Yes we are going to learn how to use colors in CSS and it’s very interesting. Many styles accept colors as values, or part of their values, such as color, background and border.

Note : The colors spelling use in CSS is American spellings, not the British (or other) for example: color instead of colour, and gray instead of grey. But CSS 3 colors allow either spelling of grey-based colours, but you may find that browsers expect the American spellings.

There are five main ways to specify colors, #rrggbb, #rgb the two rgb( ) syntaxes and actually typing the name of the color. You can choose which is best for you. For the first two methods, the colors are defined in hex.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

  #rrggbb
 
        * rr = 00 to ff for red
        * gg = 00 to ff for green
        * bb = 00 to ff for blue
 
        eg. #b85c4f
 
  #rgb
 
        * r = 0 to f for red
        * g = 0 to f for green
        * b = 0 to f for blue
 
        eg. #b54
 
  rgb( cr, cg, cb )
 
        * cr = 0 to 255 for red
        * cg = 0 to 255 for green
        * cb = 0 to 255 for blue
 
        eg. rgb( 184, 92, 79 )
 
  rgb( pr, pg, pb )
 
        * pr = 0% to 100% for red
        * pg = 0% to 100% for green
        * pb = 0% to 100% for blue
 
        eg. rgb( 72%, 36%, 31% )

 
Glory of Different Color in CSS

First of all, there are the 16 main HTML colors (plus orange) - I put the black backgrounds in so you could see the colors better aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

CSS 3 also defines many other colors (click here to CSS 3 supporting colors) and most current browsers support them. However, there are still browsers in use that do not. Whether you choose to use them is up to you.

Although System Colors are deprecated in the CSS3 however we talk about that because still CSS1 and CSS 2 is used mostly. There are some the system colors (click here to see complete list), which give the colors specified by the operating system. Support for these depends on what is provided by the operating system and browser.

Generally, it is a good idea not to rely on these except in controlled situations. There is also inherit which inherits the relevant color from the parent element. Backgrounds can also use transparent.



Pages : 1 2 3