In this tutorial we will show you the solution of CSS background color code, as we know css used to style html elements, here we used internal style method to show demo.
In css in-built method they provide options for can use colors in different ways.
Generally it has five types of color pattern and we can also use anything it can acceptable.
But we need to know how to define and use them on html webpage.
Step By Step Guide On CSS Background Color Code :-
We can implement styles using three types (i.e inline,external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.
In our program we defined five <p> tags with some texts and attribute of classes ‘txt1, txt2, txt3, txt4 and txt5’.
Using them we defined ‘background-color’ property with five types of color codes in style section so we can understand clearly.
<!DOCTYPE html>
<html>
<head>
<title>COLOR CODE IN CSS</title>
<style>
.txt1{
background-color: #92a8d1;
width: fit-content;
}
.txt2{
background-color: rgb(201,76,76);
width: fit-content;
}
.txt3{
background-color: rgba(201, 76, 76, 0.3);
width: fit-content;
}
.txt4{
background-color: hsl(89,43%,51%);
width: fit-content;
}
.txt5{
background-color: hsla(89,43%,51%,0.3);
width: fit-content;
}
</style>
</head>
<body>
<p class="txt1">here i show you what is word wrap and how it is useful for you.</p>
<p class="txt2">here i show you what is word wrap and how it is useful for you.</p>
<p class="txt3">here i show you what is word wrap and how it is useful for you.</p>
<p class="txt4">here i show you what is word wrap and how it is useful for you.</p>
<p class="txt5">here i show you what is word wrap and how it is useful for you.</p>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Within <style> tag we defined background-color property with five types of color code.
- The class ‘txt1’ had hex color code for background and it is defined by six digits of letter before that ‘#’(hash) symbol.
- Then ‘txt2,txt3’ had same stype of color code (i.e)RGB mix color values. The different is ‘txt2’ class had ‘RGB’ and ‘txt3’ class had ‘RGBA’ A- means alpha it contain value refers opacity of color.
- Next ‘txt4,txt5’ had same stype of color code (i.e)HSL mix color values. The different is ‘txt4’ class had ‘HSL’ and ‘txt5’ class had ‘HSLA’ A- means alpha it contain value refers opacity of color.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here five para <p> tag we defined with some sample texts and attributes of classes ‘txt1,txt2,txt3,txt4 and txt5’ with respective values its defined by as we seen at point 4.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to use color codes in css.
When we load our program we can see each para tag texts with respective color code styles and style ‘fit-content’ used to sets background only covers text length as we defined in style section.
So now we can understand how to use color codes for styling html elements using css and it is not need any internet connection.
We can use those color code on any elements and also any color it will depends on our own.
I hope this tutorial on CSS background color code helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
