Up next in 10
CSS Tutorial For Beginners 40 - Borders
586 views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers explore the concept of borders, an essential feature for adding visual distinction and structure to HTML elements in web development. The video likely covers how to use CSS properties such as border to define borders around elements, allowing for customization of border width, style, and color. Viewers can expect to learn about different border styles, including solid, dashed, dotted, double, and more, as well as how to apply border-radius to create rounded corners. Practical examples and demonstrations may be included to illustrate the application of border properties in CSS styling. This tutorial serves as a valuable resource for beginners seeking to enhance the visual appeal and layout of their web pages using CSS.
View Video Transcript
0:00
Yo guys what the hell is going on you're watching CSS for beginners
0:10
lesson 40 and in this video we're gonna talk all about borders that's coming up
0:14
all right so here I am back in the code guys and the first thing you're gonna notice
0:18
is the fact that I've got all of these different rules here all these different
0:22
selectors and they kind of correspond to these divs over here which all have a class
0:27
of box but they all have one of these selectors one of these classes associated with them too. Okay? So I'll talk about these in a minute, but to begin
0:34
with, I just want to briefly talk about what the border property is and how we use the
0:38
shorthand and longhand notations control it. So first of all, the border is part of the box
0:43
model. Okay? It's the kind of perimeter of the element just outside of the padding, but
0:47
before the margin, and we can specify three values for it, and that is the width, the style
0:53
and the colour. Now, the width obviously controls how wide or how thick the border is. The
0:59
the style controls whether it's dotted or dashed and you'll notice that that corresponds to these here
1:04
and the color quite clearly specifies the color so to go over the long hand way of doing this first
1:11
of all the way we control it is by first of all right in border and then we choose a side so top
1:17
so we do dash top and then dash one of the values that are talked about and we'll start off with whip
1:22
that's the first one and we'll say 10 pixels okay so we're saying here guys that we want the border top
1:27
width to be 10 pixels now the second value was border top style and there are many
1:35
different styles you can see here a multitude of different keywords we can choose all of which correspond to one of these classes here so I go through these in a second i just going to choose solid for now because that the most common one that just a solid thick line and then the third property is border
1:50
dash top dash color and we just control the color here let's just say blue so that there my
1:57
friends is a full border top property using three different properties border top width border top
2:03
style border top color and it's giving it these three values here now
2:06
Now, that's pretty long-winded, yeah? We'd have to do this in total 12 times if we had all four sides styled like this
2:13
Okay? So that's not a great way to do it. However, we can say border top, and then we can specify all of the three values within this one property
2:23
So the first it said was thickness, which was 10 pixels. Then was the style, which was solid
2:28
And then finally, it was the colour, which was blue. So that is exactly the same as writing all three out separately
2:34
Right? First is thickness, second is style, and the third is the colour
2:39
But there's a quick way. Say, for example, we wanted to style all sides, not just the top
2:43
We just write border, and then we do exactly the same. 10 pixels for the thickness, solid for the style and blue for the colour
2:52
And that is the ultimate shorthand for the border property. Dead quick, and it's going to apply the border to all sides with these three values
2:59
Okay, so now we've seen that. I'm going to delete it, and we're going to go through the different border styles
3:03
So, same again, we'll use the shorthand, and we're going to just say one pixel for the width
3:08
then we're going to say blue for the colour, and then we're going to say dashed for the
3:13
style, because that's one of the keywords here, dashed. In fact I just show you these keywords If I write border dash style and it a great way if you ever forget to see all of the different keywords here Okay that dashed one was the top So we going to go through all of these different keywords
3:29
So we've done that one. Let's just copy and paste this and then paste it in all of these
3:37
Oops. Down here like this. Then we'll just change the keywords to match up to the class
3:45
So that's dotted. This is double. By the way guys, I very rarely use all of these different border styles
3:54
The ones I mainly use, oops, I've spelled that wrong, what's going on, groove
3:58
The ones I mainly use are solid, occasionally dashed, and occasionally dotted
4:04
It's good for things like surrounding voucher codes, as if it's like a cutting, something that you cut out
4:11
But mainly, like I say, solid. So they're here if you want to use them
4:16
but I very rarely do anyway so we've done all these now solid
4:22
so we'll save that and save this and we'll view this in a browser
4:28
and see what they look like open with Chrome alright there we go guys
4:33
the first two here dashed and dotted they're perfectly fine and the solid
4:38
one this is what a solid one looks like however the double groove
4:42
insert and outset and ridge they all look the same don't they and that's because
4:46
because they're all one pixel thick. Now these are speciality borders and they require
4:51
larger border widths to work properly. So I'm just going to go back into the code and
4:56
let change this to no that will change double to four pixels we change groove to four pixels inset to four and you get the pattern we just going to change them all to four pixels these properties okay so let
5:13
view this once more in a browser open with Chrome and now there you go we can see
5:20
the double one but hang on the groove is still not big enough the inset is still not big enough outset and ridge still not big enough so what's going on well let's
5:27
just try increasing these even more let's just put the 14 inside save that again and view in a browser one last time all right now we can
5:42
start to see them you see here this groove is kind of like a groove it's like a
5:48
bevel almost around the board it's very subtle you might have to put your head
5:52
your face right next to the screen to see it the inset here is just these two lines
5:56
that make it look like an inset outset is just basically swat swat
6:00
these colours here and the ridge is a little bit like the groove but again swapping the
6:06
colours around so very sort of differences between all of those they're good for things like
6:10
making picture frames I suppose online but you do need to have larger borders to
6:15
kind of appreciate those so that about covers it for the lesson on borders if you
6:21
have any questions whatsoever feel free to comment down below I'll answer all of those as soon as possible otherwise if you enjoy these videos please subscribe
6:28
like and share them and I'll see you guys in the next one
#Skins
# Themes & Wallpapers