CSS Colors Simplified!

CSS Colors Simplified!

Ansub Khan

Published on Nov 29, 2021

5 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Table of contents

  • Abstract
  • Content
  • CSS Color Basics
  • HEX Color Code
  • RGB Color Value
  • HSL Color Values
  • Changing Color Using Class and Id
  • CSS Background Color
  • CSS Background Image
  • Summary

Abstract

CSS Color Property helps us to add colors to the webpage which makes the website quite appealing. using CSS Color Property we can give color to the text, make changes in the background and also add gradients. and it is actually quite easy to add colors to the website. we only have to use a simple syntax.

Content

Color Basics Hex Color Code RGB Color Values HSL Color Values Changing Color Using Class and Id CSS Background Color CSS Link Color Summary

CSS Color Basics

CSS (short for cascading stylesheets ) makes it very easy to add colors also there are a lot of formats that we can use to add colors like HTML Color Names, RGB, and HSL Value.

let’s start with the most basic way of adding color to your website:

body{

color: red;

}

this is going to change the text of the website to Red, so whenever you are going to add any text in your HTML it is going to appear in red color.

you must be wondering that we just typed red and this is showing text in red color?

they are W3C color names assigned by the W3C to specify colors in web pages or files. These names can be used instead of their corresponding hexadecimal value to refer to that color in an HTML file or CSS stylesheet. These names are supported by all modern web browsers and used because it's easier to remember color names than color codes.

some examples of W3C colors are green, yellow, blue, MediumSlateBlue, etc.

visit the W3C website to see the complete list of colors.

HEX Color Code

The most common way to add color to an HTML element using CSS is with hex color codes. To change the default color of your website's text, use the CSS color property in your stylesheet. the default color of your website's text.

body{
color: #ff0000;
}

Hex color codes start with a hashtag (#) and are followed by six letters and/or numbers. The first two letters/numbers refer to red, the next two refer to green, and the last two refer to blue. The color values are defined in values between 00 and FF

RGB Color Value

RGB Color Value is commonly found in many design apps and technologies, here RGB stands for Red Green Blue. RGB colors can be used by wrapping the values in parentheses and adding rgb in lowercase in front of them.

body{
color: rgb(225, 0,0)
}

we can also change the opacity of the color when it comes to rgb(), we just have to add ‘a’ in rgb() and add the value between 0 and 1, to control the opacity. for example, if I am setting 0.5 opacity then the text would have 50% opacity.

body{
    color: rgba(225, 0, 0, 0.5);
}

HSL Color Values

HSL Stands for Hue, Saturation, and Lightness, Hue is measured in degrees from 0 – 360, while Saturation and Lightness use a scale of 0% – 100%.

body{
color: hsl(0, 100%, 50%);
}

It should be noted that the rgba(), hsl(), and hsla() functions are relatively new additions to CSS and are not supported by some older browsers. Depending on your needs, you may want to experiment with different methods for adjusting the opacity of your colors.

Changing Color Using Class and Id

now to change the color of a specific element, you can directly call that element in CSS, for example, if we want to change the color of all H1s to Blue then we can call H1 in CSS like this:

h1{
color: blue;
}

but what if we want to change the color of specific elements inside a Class or Id?

for that, we are going to call the class or id inside CSS and change their color.

<body>
  <div id="parent">Id name is Parent</div>
  <div class="child">Class name is Child</div>
</body>
#parent{
    color: red;
}

.child{
    color: blue;
}

CSS Background Color

the background is something that consists of the width and height of the element, this is going to include the padding and borders but does not include margin, to change the background color in CSS we use background-color property. for example, let’s try changing the background color of our webpage to Green.

body{
background-color: green;
}

we can also create a rectangle using CSS Color Properties:

<body>
    <div class="box"></div>
  </body>
body {
  background-color: red;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

CSS Background Image

CSS Background Image property allows us to place the image inside the HTML, you can add images like JPG, PNG, SVG, etc. for that we use the url() syntax. for example, if we want to add a image of deer in my HTML body we will type this:

body{
background-image: url(deer.jpg);
}

we can also add gradient using the same property

body {
  background-image: linear-gradient(red, yellow);
}

here we have a choice to add the color and what type of gradient we want to add

CSS defines three types of gradients:

Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Conic Gradients (rotated around a center point)

The background property in CSS allows you to control the background of any element

body {
  background:
     url(sweettexture.jpg)    /* image */
     red;                     /* color */
}

Summary

CSS Color Property helps us to add colors to the webpage which makes the website quite appealing. using CSS Color Property we can easily add the color inside CSS there are different color formats that CSS Color Property supports They are known as Hex Code, RGB Color Code, HSL Color Code to change the text color we use the “color” property to change the background we use ‘background-color” property. to change the background to an image or a gradient we use “background-image” property.

 
Share this