DEV Community

Charity Parks
Charity Parks

Posted on

CSS Colors!

When using CSS, one of the fun things is being able to work with colors for your webpage! Make sure to select colors so that your content is clear to read. For example, it is easy to read black letters on a white background. There are several ways to select your colors which I will be going over.

You can select colors three (3) different ways...

  1. Color Names: There are 147 predefined color names that are recognized by most browsers. If you want to use 'red' you will simply use the predefined name of 'red'.

  2. RGB Values: This stands for your Red, Green, Blue and they are expressed by the numbers 0 through 255. For example: rgb(102, 205, 165) These numbers represent how much Red, Green and Blue is in the color.

  3. Hex Codes: Hex values represent how much red, green and blue there is by using hexadecimal code and it uses a '#' in front of it. For example: #77ceaa. The 77 represents the color in hexadecimal code for red, the ce represents the green, and the aa represents the blue.

You can choose colors for the foreground like so (I will just use color names for simplicity):

h1 {
color: DarkBlue;
}
p {
color: White;}

Same for the background colors:

body {
background-color: Red;
}
h1 {
background-color: white;
}

You can use a text editor to play around with colors for css! Happy Coding!

Top comments (0)