CSS Color Properties – Text and background colors

CSS

0 Comments

CSS has multiple properties for changing the color or background color of elements on your page.

Example

<style>
	.btn {
        ...

		color: white;
		/* color code for a light shade of blue */
		background-color: #3498db;
	}

    .btn.gray {
        background-color: #737373;
    }
</style>

<input type="button" class="btn" value="Button 1">
<input type="button" class="btn gray" value="Button 2">

Result

color property (Line 5)
Changes the color of the text inside the button to white. You can specify all of the common colors by their name (red, green, blue, etc..). Full list of CSS color names.
background-color property
Changes the background color of the button to a shade of blue. Since we didn't use a common color, we had to specify the color code. Use a CSS color picker to get color codes.
.btn.gray selector (Line 10)
This selects all elements that have both of the following 2 classes: btn and gray. If you look on line 16, you'll see we added a second class to Button 2 called gray. This is what allows us to change the background-color of the second button (without losing all the other styles we applied to btn).

Practice in Editor

Leave a Comment