May 16, 2008

Defining Colors Using Css

Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > CSS (Cascading Style Sheets)

free web hosting

Defining Colors Using Css

delivi
We can specify the colors using different techniques in CSS to use within documents. No color should ever be specified within an XHTML document, it should be specified through CSS.

Lets see the different ways of specifying colors.

I. Using Color Names

You can use color names for specifying a standard set of colors. Only 16 named colors are valid for CSS. They are,
White (#ffffff), Black (#000000), Red (#ff0000), Green (#008000),
Blue (#0000ff), Silver (#c0c0c0), Gray (#808080), Teal (#008080),
Lime (#00ff00), Olive (#808000), Yellow (#ffff00), Maroon (#800000),
Purple (#800080), Fuchsia (#ff00ff), Navy (#000080), Aqua (#00ffff)

II. Using RGB Hex Codes

RGB Hex codes are most commonly used to specify colors in CSS. RGB Hex codes are six digit hexadecimal numbers. A hexadecimal numbers is made up of the digit 0-9 and letters A-F, where A representing 10 as a single digit, through to F representing 15).

Each RGB Hex Color code contains of three parts. Each part when converted to decimal will be equal to a value between 0 and 255 (00 to FF).

An example RGB Hex Color code is "#FFF8DC". The first pair of digits refers to the amount of red in a color ("ff"), the second specifies the amount of green ("f8"), and the last pair the amount of blue ("dc").

The RGB Hex Color code is always prefixed with a # symbol.

III. Using Short RGB Codes

When each of the three pairs of a RGB Hex color code consist of two of the same digit, for example #ffdd77, the code can be shortened or abbrevated as #fd7.

Remember this can only be done only when all three of the pairs are made up of two identical digits.

IV. Using Decimal Values

CSS allows you to specify the color values in decimal form. This will be quite useful if you have trouble working with hexadecimal values. You can just get the decimal values for the colors you use from your image editor or a color picker.

The following syntax is used for decimal color definitions in CSS:
CODE
* {
    1. color: rgb(255, 248, 220);
}


The above code translates to the color #fff8dc. The value for each of the three colors red, green and blue - is defined as a number between 0 and 255.

IV. Using Percentages in RGB

The Colors can also be specified in CSS as percentages in RGB. You need to add the percent sign (%) after the number you wish to use as percentage for each color.

The following syntax is used for defining colors using percentages in RGB:
CODE
*{
      color: rgb(100%, 60%, 200%);
}


The value for percentage ranges from 0 to 100 for each color component.

Note:
* If the value used for specifying colors exceeds the limit i.e. greater than 255 then the maximum value is used.
* No negative values will be accepted.
* Only the Hex Values for colors is supported by all other web programming languages.

 

 

 


Reply

jlhaslip
And here is a page with lots of colour choices to assist with Hex colour-codes:

http://jlhaslip.trap17.com/samples/colour/colour_grid.html

Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Recent Queries:-
  1. six-digit rgb-hex codes - 573.85 hr back.
Similar Topics

Keywords : defining, colors, css

  1. Job Site
    Colors alright? (7)
  2. Colors/styles For Text?
    How do we change colors? (2)
    How do i change colors or styles of text in c++? like for colors eg. : hello world for styles:
    Hello World ....
  3. Question About Erasing Colors In Fireworks
    (0)
    i'm just wondering if anyone here can tell me how to use the eraser to erase a particular color
    of a bitmap image? does the fireworks eraser tool have the capability to do this? Edited topic
    title to better fit topic. ....
  4. Editing Cutenews
    How do I change colors within template? (5)
    This one will probably be a no-brainer for most of you talented folks out there, but I'm still
    not there yet. I just installed Cutenews and want to do a simple color change to the text within
    the "default" template. All I want to do is change the color on the title and comment text. I
    wouldn't mind changing the font size either. I tried inserting html code but that didn't
    work, so either I'm inserting it the wrong place or I'm using the wrong code. What's the
    easiest way to do this? Thanks in advance for your help.....
  5. Team Apparel In Different Colors Than Their Own
    (2)
    Yesterday when I was on the bus I saw a Huskers shirt, which was nice to see, but it was pink. The
    Husker's color is red and they have nothing to do with pink. I don't like it when really
    wear a clothing item with a team name on it but it's in a different color. I think it's
    offensive to the team. It really shows that you aren't a "true" fan I think. Does anyone else
    feel like this? Sorry if you do own clothes like this, I'm not trying to be mean.....
  6. Water Colors By Sue
    (4)
    Ok, well i am not exactly advertising my website, and not really a website, but i am posting a link
    to her website so examples of what i am going to be tlaking about can be viewed. Ok, well down in
    Long Beach California i have a 'Grandma' Who is an artist, she takes pictures of random
    things she finds when she travels/when she finds somthing she likes and after she takes the picture,
    she prints it of and she paints a bigger picture of it in water colors. She sells her paintings
    infront of a place called Polly's On The Peir in Redondo Beach in Long Beach Cal....
  7. How To Increase Google Adsense Ctr
    Simple tips on colors and ad placement can increase CTR. (11)
    QUOTE ¿What is CTR? Short for click-through rate , the ratio of the number of times a
    user clicks on an online advertisement per number of viewers who view the Web site that has the
    advertisement on it. For example, if one out of 100 people who visit a specific Web site click on an
    advertisement and are taken to the advertiser's site, then the CTR of that advertisement is
    1/100, or 1%. People who use contextual ad, most of them Google Adsense , want to increase Google
    Adsense CTR i.e. click through ratio, because the higher times the surfer clicks the ....
  8. Css Problem
    I cant get the right colors. (4)
    On my site http://ojproductions.net i'm trying to get the footer the right colors. I want the
    links to be white(#FFFFFF) At all times. I want no mouse over effects and i want the visted link to
    be white. Here is the script im using now. I have tried a lot of things, but i can never get the
    visted link to be white. Its always the default purple. CODE <style
    type="text/css"> <!-- a.footer:link {color:#FFFFFF} a.footer:visted
    {color:#FFFFFF} a.footer:active {color:#FFFFFF} .footerlines {color: #FFFFFF}
    -->....
  9. Fractal Colors
    (5)
    This is an experiment in coloring fractals, I think it came out quite well. What do you think? ....
  10. Do You See Colors The Same As I Do?
    color recognition (12)
    I was thinking, and what if I see yellow as your blue? It's a weird thought, but what if we each
    see our colors like red, blue, etc, as different colors then everyone else. Like I see blue as
    blue, but what if your blue is my green? I know this sounds really weird, but think about it.....
  11. A More Darker Pop-out Sig
    i think the 2 colors are sweet (8)
    I did this one with only 2 colors black and red to me i think everyone works well, its nice and
    blended in the text works with the overall tone of it as well. ....
  12. D2 Shoutbox Help
    Can't display time, colors in shoutbox.. (2)
    I have installed Dean's shoutbox for my new forum, but I have two things that I can't edit.
    Does anyone know how to edit their global shoutbox (shoutbox that show's throughout the entire
    forum) so that it shows the time of the shout and the coloration in accordance to member title (such
    as if an admin posted, the color of the member would be red)? Thanks.......
  13. Is It Possible To Disable A Jbutton
    and make its icon still have colors? (0)
    I'm making minesweeper so I have this big matrix of JButtons. I want to have it so that when you
    click the button is disabled and the ImageIcon is changed to whatever it should be, but when you
    disable a button it becomes grayscale so the pictures are hard to see/don't look like what
    they're supposed to. Is there a way to disable the button and keep the images colorful, or does
    anyone have any other ideas? (I've thought about just removing the ActionListener but that
    might get confusing to have blank buttons that do nothing. Maybe only disabling it if t....
  14. Favorite Color
    a poll about colors (94)
    My favorite color is orange. I don't know why, I just do. But it's wierd because I like
    the color but not the fruit. We just bought this house and we are remodeling it (hte family that
    lived there REALLY trashed it up) and I told my mom that I wanted my room orange. She laughed and
    told me I was crazy. I'll just have to see and wait to see if I can paint it orange. Oh and
    by the way, sorry if someone already posted this.....
  15. The Best Css Scroolbar Creators
    Build your scrollbars easly and with lots of style/colors (6)
    FREE - Css Scroolbar Creators : Cool Web Scrollbars (the best there is, beleave me, try it)
    http://www.harmonyhollow.net IE ScrollBar FreeStyler Plus http://silveragesoftware.com
    ScrollBar http://home.hccnet.nl/s.j.francke/software/software.htm Scrollbar Skinner
    http://www.survivorx.com/download.php Easy CSS Scroller http://jariharju.cjb.net Personnaly
    i would choose the first one because has more options, but the others are also very cool, beleave
    me, i use them. They are small and take just a litle bit of memory of your pc.....
  16. 3 colors fly around cursor
    (7)
    Paste after QUOTE //Choose colours and size of effect !! var a_Colour='#FF0000';
    var b_Colour='#80FF00'; var c_Colour='#0080FF'; var Size=120; //Alter nothing below !! var
    YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.6; if (document.layers){
    window.captureEvents(Event.MOUSEMOVE); function nsMouse(evnt){ xpos =
    window.pageYOffset+evnt.pageX+6; ypos = window.pageYOffset+evnt.pageY+16; } window.onMouseMove =
    nsMouse; } else if (document.all) { function ieMouse(){ xpos =
    document.body.scrollLeft+event.x+6; ypos ....
  17. How To Change The Colors Of The Scroll Bar!
    (0)
    This tutorial will show you how to change the scroll bar colors: 1.Copy this code and paste it in
    the tag in the sorce of your page CODE <style> BODY {    scrollbar-face-color:
    #000000;    scrollbar-shadow-color: #000000;    scrollbar-highlight-color: #000000;  
     scrollbar-3dlight-color: #FF0000;    scrollbar-darkshadow-color: #FF0000;  
     scrollbar-track-color: #000000;    scrollbar-arrow-color: #FFFFFF;} </style>
    In order to change colors you need to change thise numbers: ex. #000000 is black #....
  18. Site Review
    are the colors too dark? (16)
    hello, I'm just wondering if my colors are too dark. I'm working on a mac so it looks great
    on my end. the site's personal and not being submited to search engines.
    http://home.graffiti.net/round:graffiti.net/ thanks again.....
  19. Colors in Html
    everything about colors (7)
    Hey...I've had a few problems with choosin the color in html language. I found a good page wich
    describes all you need to know.. http://bignosebird.com/colors.shtml Next thing you need and it
    really is useful is a program that shows you the color code..you have it online here:
    http://www.pagetutor.com/pagetutor/makapage/picker/ hope it helps ya....byeeeeee....

    1. Looking for defining, colors, css

Searching Video's for defining, colors, css
advertisement



Defining Colors Using Css



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE