Basic to Semantic HTML: How to Structure Web Pages....(FREE COURSE Enroll Now)steemCreated with Sketch.

in #html7 years ago (edited)

Get full course for free.
Basic to Semantic HTML: How to Structure Web Pages
Link: https://www.udemy.com/basic-to-semantic-html-how-to-structure-web-pages
HTML Colors

Video Script:

In this video i will tell you about HTML colors. In HTML, a color can be specified by using a color name, a RGB value, or a HEX value. So first we will see color name. In html a color can be specified using a color name. color name can be red, orange, yellow, green, blue like that. Now let's see it in action. i have added a h2 element styled with background color red and some content in it. Now refresh the page ...there was a spelling mistake. ok now here is the h2 with background color. now we will add more just copy and paste it 3 more .. and here we change the background color name. green here, orange here and yellow .. now refresh the page and here is the result. back ground color styled with red color so here is the background color is red. Here is the green ..green and orange here is orange background and yellow here it is. so we can use color names for styling background colors. not only background colors we can use it for font color. we give it for example green in the first h2 element and now you can see the result in browser it's not visible with red so I will just change it to white here is white.
Now we will go for rgb colors. rgb value in html a color can also be specified as an rgb value. using this formula rgb which means (red, green, blue). Each parameter (red, green, blue) defines the intensity of the color between 0 and 255. For example rgb(255,0,0) is displayed as red because red is set to its highest value 255 and others are set to zero to display the color black all color parameter must be set to zero. and to display the white color we should use highest value which is 255 i all parameters So here it is in action. I will use rgb in first h2 element. here we will use three parameters 255 for r...red , zero for green and zero for blue. save it and refresh the page. Here you can nothing changed here because 255 is the highest value of red. If we change value to zero then it will change to black because all parameters has zero value and that's the rgb value of black. If we want to show white color we have to set the value to the highest of rgb which is (255,255,255) now here it is white background. Next we will see rgb value one by one, we will use parameter each one time. So 255 for red,0 for green and 0 for red. and same here 0 for red, 255 for green and 0 for blue.and same here 0 for red ,0 for green and 255 for blue. Now save and refresh the page. 255 for heighest value for red. Here is the background red, Highest value 255 for green and other are zero here's the green background. Now in the last Highest value for blue and red and green are zero so here is the blue back ground.
Next we will learn about the hex Value. In Html color can also be specified in hexadecimal value in the form #RRGGBB. Where RR (red) GG ( green) BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255) in rgb.
change it to hexadecimal values #FF0000 is equal red color you can see in browser red color of first h2 element with hexadecimal value and in second h2 element i ll change it to #FFFF00 and it will show yellow color and in third h2 element if i change it to #FFFFFF then it is white color . and if we change third h2 elements GG to FF and RR BB are both zero then it will show green color. Now ill just add one more elements here and change its BB value to FF and RR ,GG will be 0 then it will show the blue color. I am adding one more just copy and paste it and set all values to 0 then it will show black color. now refresh the page and here you can see it in action.
So we ca use HTML colors in three ways First we can use it with name , Second can be use with rgb decimal values, and third it can be use with hexadecimal values. ok I will see you in the next videos.

#steemitpowerupph #udemy #html #code #semantic #webstructure #html5

Sort:  

Availabbe #free for limited time in the mean time i m adding more videos in this course.