Css colors

Posted by admin at April 13, 2020

Skip to main content

10000000 - Css colors

Color properties

Color is one of the first things you’ll want to explore when designing your Web site. Thankfully, CSS provides a wide array of tools for you to control the color of different HTML elements. There are basic color properties:

color

This property sets the foreground color of an element’s text content. By default, all text content will be set to black. If you set the color on one HTML element it will be inherited by all HTML elements within that. For example, if you set the color property on the body tag to blue, all text on your web page will be changed to blue, unless that text has a more specific color property that will override it. 

background-color

This property sets the background color of an element. This color then represents the exact space the element takes up, which is always a rectangular area. The default value is ‘transparent’ which means whatever is behind the element will shine through. Note that background-color is one example of a property that is not inherited, so you will have to directly set the background-color on each element. To set the overall color of your page, apply a background color to the body tag, and since all other element’s background colors will be transparent by default, it will appear as if everything has that same background color. 

color as a value

These color properties take in a color as their value, and there are three different ways you can define that color: keyword, a HEX code or an rgb value.

keyword

Probably the simplest and least flexible way to set colors is using a keyword. A keyword is one of the predefined colors like “blue” or “green”. 

body {
   background-color: teal; 
}

The list of color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. You can read more about these keyword colors here.

HEX

A HEX code is a 6 character code to represent the color, giving you a lot more options. The 6 characters of the code are broken into 3 sets of 2, where each set of 2 represents the amount of either red, green or blue that makes up the color. These sets are hexadecimal numbers, which means that each ranges between 00 to FF where 00 means no color and FF means all of that color. Thus #000000 represents pure black and #FFFFFF represents pure white.

When using a hex code in CSS you must put a hash character in front of the 6 characters like so:

body {
   background-color: #00CC00; /* green */
}

decimal

You can also specify colors using rgb in decimal form like so:

body {
   background-color: rgb(0,204,0); /*same green as above*/
}

This will give you the same range as HEX values. This method is a less common, but it’s up to you which method of specifying colors you prefer. 

Documentation

Here are some of the colors you can use, and the three different ways you can set their value in the color or color-background property:

colors rgb - Css colors

You can see these color properties in action using all three approaches to setting the value in this CodePen.

Other resources:


Comments

  • Write a Reply or Comment

    Your email address will not be published. Required fields are marked *