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.