Home arrow Style Sheets arrow Learn CSS, Manipulating Colors

Learn CSS, Manipulating Colors

In the thrid part of this series still covering CSS Basics, Michael Youssef discusses manipulating colors in CSS. He also takes a brief look at the hexadecimal number system and how it's useful with color values. He also defines the meaning of a keyword and the Hexadecimal number system.

Author Info:
By: Michael Youssef
Rating: 4 stars4 stars4 stars4 stars4 stars / 22
May 30, 2005
  1. · Learn CSS, Manipulating Colors
  2. · Keywords
  3. · Using RGB Color Values
  4. · Haxadecimal Color Values
  5. · CSS Comments

print this article

Learn CSS, Manipulating Colors
(Page 1 of 5 )

Colors can change the way your websites look, and your users form a first impression from the colors you use. So even if your content is very unique, bad colors will mean fewer users. In fact, understanding and manipulating colors is a broad artistic topic that fills books, but we will focus on what we need to for CSS.

Using Colors by keywords

CSS can define colors by name, so you can directly use this name instead of RGB values. For instance, you can use "red" instead of the RGB value (255, 0, 0). The declaration would look like background-color: red. I will talk more about RGB colors shortly. The CSS 2.1 Specifications define 17 named colors: black, silver, gray, navy, blue, aqua, teal, purple, fuchsia, white, lime, green, maroon, red, orange, yellow and oliver. You can take a look at the colors on W3C website CSS 2.1 Specifications (http://www.w3.org/TR/CSS21/syndata.html#color-units).

These colors are fine but still we need more named colors so the CSS 3.0 Specifications has defined 147 named colors which you can take a look at the CSS 3.0 Specifications http://www.w3.org/TR/2003/CR-css3-color-20030514/. Let's take a look at an example on the next page.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials