How can you add and remove RGB from any page using HTML?

I will remove this particular RGB, I’ll write a hash and I’ll write double f double 0 double zero let’s save this let’s go back to my okay yeah one second yep now reload my page you can see it is in red now the same thing i can do for this also so I’m mixing red with green let’s see what comes up yellow okay now let’s mix up with green and blue and give the red as zero so green and blue let’s see what happens it is kind of a light blue okay now coming back to my HTML color codes you can see here the Hexa value is given so for this purple color my Hexa value is d 9 0 3 f a.

I can put it here obviously you can’t remember all the Hexa values right again you can’t do the trial and error methods again and again correct so you can take help of this particular HTML color codes and you can see you are getting that purple color here right, so this is your hexadecimal values how you can give hex values remember that always you have to put a hash symbol in front of your hexadecimal values okay now next if you check out this particular website you can find a lot of things which is given here so you can see if you select you can select from these blocks also which fade color do you want because these colors are used in any web applications you will never see a very bright color in your web application.

In your websites you can only see a kind of light color or a faded color this kind of colors right so they have given a section where we can actually get all the faded colors okay which is very good for your website then there’s a color chart okay there’s a names given for all the kind of red colors or all the faded colors of pink and all, so there are names there are values and the RGB values are also given okay color names if you want to write the names you can browse the full list if I click on it you can see all the names of the colors are coming here okay we can write this color there is no problem we can write tomato so if you look here what I can do here I can give here tomato okay let me save this and reload my page, so this is coming like automatically right so these names also you can directly write it down but obviously you can’t remember all the names and that is why we don’t follow that we basically follow the hex or the um RGB right like suppose this one, what I’m going to do I’m going to just write it here I don’t know how to pronounce it but I think it’s fuchsia okay so let’s go back to our code and refresh it so you can see that kind of color is coming here perfect now let’s go back and let’s see what else do we have, so that is what they’re saying can’t remember can’t remember all 140 HTML color names we have got you covered check out our guide for a quick reference of all the HTML color names grouped by a color that is what we have seen then there is color library.

You can take out any color from here okay there’s CSS color basic given here so these things are not monetary for you right now uh let’s go ahead and let’s see this hsl HSL is the hue saturation and light okay so what we are going to do here is you can see here when you will put the mouse here you will get the full form also of this yeah you can see hue saturation and lightness value correct the same thing which you do it in your pics when you click a picture you try to edit that right and you try to add some contrast some hue some saturation values you increase the saturation value decrease the saturation value the same values they are talking about okay let’s see what happens here so for this.

How you will write you will basically write it in the same manner how you wrote the um rgb so we are going to give the hsl value now so let’s go to our browser and here i am going to select this particular command so this is kind of a dark blue some kind of faded blue kind of color let’s give it here and let’s see whether it is giving me the same kind of color or not right so hue is 204 saturation is 78 and 44 is your lightness so let’s reload my page and you are getting that color that blue color right so it’s always better to use rgb or hex rather than hsl because hsl hue saturation and lightness you can’t actually identify you can’t actually understand that what are these values right so it’s always better to use red green and blue or the hexadecimal values right now i hope you understood how to mention these colors and yes in the starting i told you that how many colors css can use it’s infinity okay there are so many colors so there is no count that how many colors you can use in any website okay these are any numbers you can use you can you can put any value whatever you want in your rgb and you can get that color right so let’s move ahead.

Let’s see what is the next topic in our tutorial we are going to talk about CSS background now moving into the topic of CSS background let’s see what we are going to discuss here and what is the meaning of this background is it background color or is it background image now when you talk about CSS background CSS background basically means that in your website in the background you can actually put any image as your background product okay so a whole image can be put down here and above the image you can write the content whatever you want to write now how to give this background image that is one question the next is how the size of that image will fix to my screen width that is second question the third question is that can we repeat the images again and again that means suppose if the content is really big and automatically there is a scroll bar coming in your web page save to scroll down when you scroll down whether the same background image will repeat or will not that is the third question.

Let’s find out the answer to these three questions and understand how we can use css background in any website the first thing is background image now obviously first we need the background image right so the background image property is used to set an image as a background of an element by default the image covers the entire element so by default the image will cover the entire element okay now suppose if your image is of hd quality that means your image is basically of this size this is what is hd right if this is if this is the size of your image that means it will cover the whole screen width of your laptop or whatever device you’re using but suppose if your image is a little bit smaller than that then obviously it is not going to completely cover your screen it will be slightly in the center okay and the spaces here will be empty the image will not come in this particular portions right so it totally depends on the quality of the image or the size of the image which image are you using in your background background repeat the next one is background repeat.

Let’s see what it is by default the background-image property repeats the background image horizontally and vertically some images are repeated only vertically or only horizontally right now suppose if your image is really very small okay now if you want to repeat that image horizontally so that image will come up like this so every time that image will keep on repeating this is vertically now when you want to make your image come horizontally then the image will come like this okay so i will show you this particular thing in the application also in the practical application also but right now just understand that you can actually repeat your images horizontally and vertically however you want okay next background-position what will be the position of your background image it is used to define the initial position of the background image by default the background image is placed on the top left of the web page if you are not specifying any position it will be on the top left top left is what is this portion right so this is your top left.

We have understood theoretically that how we can put the background image how we can repeat our image vertically horizontally and how we can actually position our background image but now let’s write a program and practically let’s see that how we can work with the background image remember in our folder

Leave a Reply