Monday, 4 December 2017

, , , ,

Lesson - 4: CSS Colors and it's Implementation - arcreationsweb

css tutorials


In last lesson we have discussed about the types of CSS and it's implementation. I hope you have read that article if you have not read as yet please read the complete article here: Lesson 3: CSS types and It's Implementation. In today's lesson we will discuss about the CSS colors. Like you all know that CSS is made to decorate the normal HTML web page, And you can not imagine a decorated web page without colors. 







In a web page there is a great role of Colors in any page. Without colors we can not say a web page is looking awsum. A great color composition makes the web page more interactive and give a better interface to the user.  We have a lot to discuss about css colors so just start without taking more time of you. 

CSS COLORS 

In HTML and CSS the colors can be specifies in 6 major ways -

  • Color Names 
  • RGB Value
  • HEX value
  • HSL Value
  • RGBA Value
  • HSLA Value
NOTE: We will discuss about all these later in the article.

BACKGROUND COLOR

Through CSS you can change the background color of the valid HTML element with so many different color choices. Let suppose we are changing the background color of an element i.e. 'P'. See how it will work -

IMPLEMENTATION 

<p style="background-color:pink;">ARCREATIONSWEB</p

TEXT COLOR

Through CSS we can easily change the color of a HTML elements. To make you understand we are taking a HTML element 'p' and we will change the color of the text between the <p> tag. 

IMPLEMENTATION 

<p style="color:DodgerBlue;">ARcreationsweb.com is the web blog where you can learn wordpress, Blogger, SEO, HTML, Education updates and How to make online money.</p>

BORDER COLOR

We can easily change the border color through the CSS colors. Sometime we need to add border to highlight the text. Than We can easily manipulated the border according to our need in terms of color.It also works within the particular HTML element like <h1>, <p>, <h2> etc... Here we are taking a example so you can understand easily what is going on - 

IMPLEMENTATION

<h1 style="border:2px solid Blue;">ARCREATIONSWEB</h1>

Here we are coming back to " In how many ways you can specify a color within the CSS. We have discussed earlier that we have 6 ways to specify a color in the CSS.

  • Color Names 
  • RGB Value
  • HEX value
  • HSL Value
  • RGBA Value
  • HSLA Value

1) COLOR NAMES 

In this type of specification we just need to type the particular name of the of the color like - RED, BLUE, YELLOW, GREEN, ORANGE, etc...Now let's see how it's implement in HTML with CSS.

IMPLEMENTATION 

<p style="color:Blue;">ARcreationsweb</p>

In this example the name of the color is specified i.e. "BLUE" so the text within the P element will be of BLUE color
2) RGB Values

In this type of specification we includes only three colors i.e. RED, GREEN, and BLUE (RGB) We use this specification when we need some specific type of color. Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0)To display the color white, all color parameters must be set to 255, like this: rgb(255, 255, 255).

IMPLEMENTATION 

<h1 style="background-color:rgb(60, 179, 113);">ARCREATIONSWEB</h1>

3) HEX Values 

In HTML, a color can be specified using a hexadecimal value in the form:
#rrggbb

IMPLEMENTATION 

<h1 style="background-color:#3cb371;">ARCREATIONSWEB</h1>

4) HSL Values

In CSS we can specify the color as HUE, SATURATION, LIGHTNESS. hsl(hue, saturation, lightness)
  • Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
  • Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
  • Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white 
IMPLEMENTATION 

<h1 style="background-color:hsl(240, 100%, 50%);">ARCREATIONSWEB</h1>

5) RGBA

This type of specification used when you need a transparent color. To make the color transparent we use "alpha" in which The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

IMPLEMENTATION

<h1 style="background-color:rgba(255, 99, 71, 0);">ARCREATIONSWEB</h1> *//fully transparent
<h1 style="background-color:rgba(255, 99, 71, 1);">ARCREATIONSWEB</h1>
*// Not transparent at all

6) HSLA

It is same as RGBA but it works with HSL value and you can get transparent color using HSLA also.  The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all). It's implementation is different. 

IMPLEMENTATION 


<h1 style="background-color:hsla(255, 99, 70);">ARCREATIONSWEB</h1*//fully transparent
<h1 style="background-color:hsla(255, 99, 71, 1);">ARCREATIONSWEB</h1>
*// Not transparent at all

So friends this is all about CSS colors and it's implementations. Go through this and if you are getting any problem in understanding the topics please let me know i will help you with that. You can share your problems iin the comment section and if more doubts you can mail me also on arcreationsweb@gmail.com

Thank you
Ashutosh Kumar
(writer and editor)
arcreationsweb
Share:

1 comment:

  1. Thank you a lot for providing individuals with a very spectacular possibility to read critical reviews from this site.
    rprogramming training in bangalore

    ReplyDelete

JOIN OUR DISCUSSION CORNER...