Up next in 10
CSS Colors, CSS Border | CSS Course for Beginners
68K views
Oct 16, 2024
CSS Course for Beginners: CSS Colors and Border. In this video, you'll learn about CSS Colors and CSS Border. Tutorial Link: https://www.tutorialspoint.com/css/css_colors.htm Get Certification in Web Development: https://www.tutorialspoint.com/certification/web-developer-guide-for-2022/index.asp Use coupon ""YOUTUBE12"" to get “FLAT 12%’’ OFF at Checkout. Quality Learning to UPSKILL yourself only at TutorialsPoint. Timestamps: 00:00 Introduction 00:10 CSS Colors 03:13 CSS Border 04:56 rgb color format 07:30 hex color format 08:46 hsl color format 09:24 More CSS colors In this CSS course for beginners, you’ll learn important CSS concepts step by step to help build beautiful, responsive websites. This series will cover essential topics like Flexbox, Positioning, the Box Model, Layout, Typography, Colors, Project, and more to help you master web design. Whether you're new to coding or looking to refine your skills, this course will guide you through each concept simply, ensuring a strong foundation in CSS. Tutorialspoint, a leading ed-tech platform, offers Simply Easy Learning at affordable prices. Check out more Trending Courses to Learn: http://bit.ly/3KBW32w
View Video Transcript
0:00
Hello and welcome to Tutorials Point
0:02
In this video, we will learn about CSS borders and CSS colors
0:07
So without wasting time, let's get started. We have the welcome to Chapter 2 text
0:12
Alright, now first we are going to talk about CSS colors. Earlier, we already played with a lot of colors, right
0:20
Let's go to Style.C.S. The first color that we played was this targeting the whole HTML document and then we did something called as background color of pink
0:29
if I save it, as you can see, we have the pink color for our whole HTML file
0:34
Secondly, we can do many things. For example, we have this H1 tag
0:38
So we are going to target this. So I'll write H1 and then give it a color
0:43
Let's say a color of something like brown. I'll save it and as you can see, it becomes brown
0:50
It is not visible. So we need some better color. Maybe blue will do
0:54
Yeah. So we have this in blue color. All right. So basically we can use multiple colors to design our web pages
1:03
For example, similarly, we can have a div. And this do can have multiple things
1:10
For example, an H2 tag saying this is a deal and it can also have a paragraph tag
1:16
So a paragraph tag, let's write some major text. And basically in VS code, you can light Loram and then the number of words you want
1:24
So for example, 30, it will give you random 30 words. then I hit Enter, something like this
1:29
I'll save it and we have a heading and then we have some paragraph text
1:34
All right, we can even target this one. For example, for the H2, I want the color to be white
1:42
I save it and as you can see it becomes white. Similarly, for the paragraph tag, I want some different color
1:48
Let's say I want the color to be aqua. I'll save it and it becomes aqua
1:53
It's not really visible. So let's just change it to something else. over this color as you can see you can just select it from the bar as well something like this
2:02
right so let's have some maybe yellow color i'll save it and it becomes yellow it's really not
2:09
visible so let's just keep it to black right so this is how we can use colors and these
2:16
and there are not only these red pink blue white green color in CSS there are actually a lot of
2:22
colors in CSS for example instead of the background color to pink
2:26
I can write something right red. So it becomes red or maybe a good color is tomato
2:32
Light red. I'll save it and as you can see it becomes the tomato color
2:37
We have many other color here. As you can see, you can hover over here and then you can select the color and from here
2:43
you can select the transparency. For example, I'll write this. As you can see, it becomes less transparent
2:50
Okay, so we have these different types of color. Let this be to pink now So using background color we can specify the background color of an element and using just the color property we can specify the text color basically right Now this is a DAO is not visible
3:06
in white. So let me just remove this style ink. And yeah, it's now visible in black. Now
3:12
we can also have borders for our elements. We have H1, we have dev, we have H2, a paragraph
3:19
tag. We can have for all of these, we can have borders. For example, if I want to, we want to be
3:23
want to have a border for this H1, welcome to chapter 2. What I'm going to do is I'm going to write a property called as border
3:31
Now inside borders, we have to pass three values. First will be the size of the border
3:36
For example, I wanted to be 10 pixels. Second will be the type of border
3:41
There are different types of borders. If I type it, as you can see, we have something called solid and then I can size color of the border
3:50
In this case, let me write black for now. and if I save it, as you can see, we have a border, which is 10 pixels in size and it is of solid type and the color is black
4:01
We have multiple types. We have a dotted one also, something like this
4:06
If I save it, as you can see, we have a dotted border. We can also change the size
4:12
For example, instead of 10, let me write two pixels. And as you can see, it becomes small
4:16
Let's now keep it solid and we have black. And we can have multiple colors
4:20
for example blue. Write something like this. Now let's say for the dev, I want to give it a border
4:27
I will simply say border. And then basically here I'm going to write, let's say, 1PX and then write solid and then
4:39
write red. If I save it, as you can see, our div has a border of red color that has a width of one
4:46
pixel and it is of type solid. Now, you will understand more about borders when we talk about CSS box model in the coming videos
4:56
Now, after the borders, we are going to talk about various color formats in CSS
5:01
We already know that this basic names of pink, blue, red, green, we can use all of these
5:06
But there are actually multiple types of formats for colors in CSS
5:12
First one is the simple names that you have this pink, blue, red, but there are also other values
5:18
Let's first talk about the RGB values. Now, for example, instead of this background color pink, what I'm going to do is I'm going to type RGB
5:30
Now, this RGB stands for red, green, blue. All right? Once we do that if you hit enter, as you can see, we have three values
5:38
One, first is of the red, second is of the green, and third is of the blue
5:43
Now, for example, if I write 0 for the green, blue, 0, and for the red, I'll write 255
5:51
If I save it it becomes red color That means if we have 255 the first value of red it will be red color Now if I put it to 0 and save it it is black color Now if we only specify the green value as 255 save it it becomes green color Now if we only specify the blue value as 255 and 0 for all the two for the other two and save it it becomes blue color That is red green and blue The short form for RGB
6:22
So basically, the referral represents colors from 0 to 255. So how many colors would that be
6:31
Not 255, but 256 colors can be represented in this very format
6:37
So for example, I would select a random color here. Okay, let's select something like this, this light green
6:43
Okay. If I save it, as you can see, now this value of RGB gets us this one shade of green color
6:51
Now, you may say, what is this? value. This is a fourth value right here. What does this value mean if you would want to know
6:58
Now, this value means the transparency and it is selected by this second slider here. So how much
7:04
transparent you want it to be all the way from zero to all the way from this one? As you can see
7:09
if we write zero that there is no transparency. If we go here, as you can see, point one
7:16
point zero and as you can see it becomes transparent. So let us just make it a less transparent
7:21
and save it and we have something like this. Now, this is the first type of format that is RGB or RGBA
7:29
Now, we also have another type of format. Let me just comment it out and save it
7:33
And as you can see, it's again in the default white color
7:38
Another type of color format is I'll write background color and this time I'm going to
7:44
talk about hexadecimal colors. Now, what is this hexadecimal colors? It basically starts with a hash
7:50
all right and after that we have six values the first two values are for the red color the second two values are for the green colors and and the last two values are for the blue colors right so for example if i write something like f f f so it's red for the first two then the second two is green and the last two will be blue if i save it as you can see it's white color no problem now let me just use the same
8:20
slider and have some different colors. For example, a blue color, something like this, or maybe a purple color
8:26
As you can see, it automatically changes, right? Oops. So let me just go here and select
8:33
So if I select here, as you can see, we have some different shades
8:37
Let me save it. And as you can see, it becomes purple color. So this is another value
8:42
This is another format. And it is called as hexadecimal colors. Apart from this, there is one other also that is called as H.S
8:50
or HSLA colors Now this HSL basically stands for hue saturation and lightness So let me just comment it out and let me show you this type of format as well If I write
9:02
color, sorry, if I write the background color, something like this, and then I write HSL and I hit
9:11
Enter, as you can see, it has three values. It has hue, saturation, and lightness
9:16
Now here we can have multiple values as well, right? So more on these colors, if you go to your browser and you simply search for CSS colors and you hit enter, you will find the MDN web docs
9:34
These are very good documentations for all the web development related technologies
9:39
For example, the CSS. As you can see, they talk about different colors. Then they talk about standard colors
9:44
as you can see we have the black and what is the RGB, the red green blue value for it
9:50
We have silver color. So let's, we have this gray color. Let me just use this gray color in my CSS
9:55
If I just, let me just comment this one out and here inside this background color, I will use this gray color
10:06
So I'll just copy and paste it here. And if I save it and go back to browser, as you can see, it becomes gray color
10:14
So we have a lot of colors here, as you can see, with their HECS, with their RGB Hex values
10:22
As you can see, they have a list of colors in fact
10:26
So you can check and you can use multiple colors from this. And then it also talks about the transparency that I told you earlier
10:33
Okay. Now, also there are many sites. For example, there is one site called a color palette, something like this
10:42
If we search for it, the first, okay, the color hunt, you can call it. And there are actually multiple sites that will give you random colors for your next website, right
10:50
So if I click on this color hunt, as you can see, it gives us multiple combinations
10:54
And we can directly just copy and paste. For example, I like this green color
10:58
Just click on it, it copied. And now let's go back to the browser
11:02
And here I'm going to paste the same one. And as you can see, we need to have a hash here and a semicolon
11:08
And if I save it, it becomes in that very color. So here you can select multiple colors
11:12
colors for your websites. Now here let me just choose any random color. Let's say this color. Let's
11:19
see how this looks on our website. If I save it, yeah, this looks better. So you can check out
11:26
these ones. I'll also have all the links related to the video topics in the description below
11:31
You can check them out. Let me close this. So we just talked about different types of colors
11:36
That will be enough for this video. In the next video, we will learn about CSS backgrounds
11:41
fonts and margin property. So make sure to subscribe to the channel, hit that like button and I will see you in the next video
#Computers & Electronics
#Skins
# Themes & Wallpapers
#Web Design & Development