Up next in 10
CSS Tutorial For Beginners 53 - CSS Website Build Part 2
1K views
Feb 7, 2024
This video is the second part of a CSS tutorial series aimed at beginners. In this segment, viewers will learn how to continue building a website using Cascading Style Sheets (CSS). The tutorial likely covers topics such as styling text, adding backgrounds, formatting layouts, and incorporating various design elements to enhance the website's appearance. It serves as a helpful resource for individuals looking to expand their knowledge of CSS and improve their web development skills.
View Video Transcript
0:00
Yo, what's up guys
0:08
You're watching CSS for Beginners Lesson 53 and this video is going to be part two of
0:13
the CSS website build. Alright guys, so we're just going to start off where we left in the last video and if
0:19
you remember, I showed you we had this simple HTML file here and we started to style it
0:23
with these styles and that gave us this nicely styled nav bar right here
0:29
So we're just going to carry on and crack on with the rest of the page. So the next thing I want to do is just neaten up this image here
0:36
If you look to the very right of it, it's got this very thin white line and that's the
0:40
background under here peeping through because the image is not the full width
0:45
So we're just going to make this image here stretch all the way across. So to do that, I want to find it in my HTML
0:51
It's this image right here and it's within the lead banner ID so we'll copy that, come
0:57
down here and we'll target it in the CSS and we'll say we want the image within that
1:03
lead banner div and we're just going to say width 100% and then that scoots it right across
1:09
gives it 100% width of this wrapper so it's taken up all the room and we no longer have
1:14
that thin white bar at the end. So next thing we want to do is come down here and style these things up and to do that we're
1:23
going to go after this shop div because everything is within the shop
1:26
So we're going to grab that, copy it and paste it down here and the first thing I want
1:34
to do is give this a margin of 30 pixels and then 0 left and right
1:45
So I'm just going to give it this space in here and at the bottom here so it's away from
1:49
both banners. The next thing I want to do is give it a text align property and we're going to say center
1:58
and now everything scoots into the center there. That's really cool. So text align not only affects text when you've got that inside your div but also images so
2:07
it centralizes everything within this column. So that's really cool. So the next thing I want to do is style up that product name right here
2:17
So to do that I'm just going to give us some room down here and I'm going to say shop h2.productname
2:25
because up here you can see it's h2 and it's got a class of product name
2:29
So that's what we're grabbing there and we'll say we want that to have a few styles and
2:35
the first one is going to be a font size 16 pixels
2:44
So we just reduced that in size a little bit and we're going to give a margin bottom
2:49
of 0 because we want it to be right up against the price when we style that and that's all
2:53
we need to do for that. The next thing I'm going to do is grab the price so that's a span tag and it's got a
2:59
class of price and let's display that first of all as block and then what that does my
3:08
friends is because we're giving it a block display type it's going to take up the whole row
3:14
So block level elements take up a whole row and inline elements are stacked side to side
3:19
that's why it was stacked side to side with this and this initially because these three are all by default inline elements so we give that a display of blocks which take up now
3:26
the whole row and it's forcing these two onto the next line which is cool because we want
3:31
this to have its own row. So the next thing we want to do is increase that font size we're going to say we want
3:37
it to be a lot larger at 58 pixels and then that's going to make it roughly the same width
3:44
as this thing here so it looks nice and neat. Alright so the next thing we want to do is grab this link here and make it into a button
3:50
so to do that we're going to say shop and then it's an alink and it's got a class of
3:56
add-to-bag and that's this link right here. So let's style this up and the first thing we want to do again is give it a display of
4:08
block that's going to give it the whole row and force the stars onto the next line then
4:12
we'll give it a colour of that beige colour again which is if I can remember properly
4:16
8F746C I think yep there we go cool. Then we'll give it a text transform property of uppercase make them all capitals yep and
4:30
we'll give it a font size of 12 pixels make it a little bit smaller that's fine text decoration
4:37
of none because we want to remove that underline if I just scoot off this you can see it's
4:42
currently underlined we don't want that so we'll just put none and that takes away the
4:47
underline we'll give it some padding we'll give it 10 pixels top and bottom left and
4:53
right I'm going to give it zero because we're going to make this a definite width so we don't need to give it the padding on the left and right
5:01
The next one is going to be a border and we're going to say 2 pixels solid and we're going
5:07
to say that same beige colour again so what was that this thing here let's copy and paste
5:13
that because I'm being a bit lazy and put that there yep and then we'll give it a width
5:18
of 210 pixels so if I just scoot off this a minute you can see currently it's got that
5:23
default width of 100% because it's a block level element because of this here so by default
5:30
it's taking up the full width we don't want that width we want to give it a definite width
5:34
which is going to be kind of this size here the same width as this and this so that's
5:40
roughly about 210 pixels but now you can see it's gone off to the left over here now I
5:45
don't want that I want it to be in the middle so remember from the margin lesson I showed
5:49
you that trick and also in part 1 of this tutorial where we say margin we'll give it
5:55
30 pixels top and bottom no we won't we'll give it 20 pixels 20 pixels top and bottom
6:00
and then for the left and right we just say auto and then that scoots in right to the
6:04
centre okay so that's all we want to do for that button now it looks nice and cool I would
6:09
like a hover effect so let's put one of those in let's get this and add a pseudo class to
6:15
it now we've covered pseudo classes remember it's just a colon that we put after our selector
6:21
and the particular pseudo class we want for this is the hover one because we're giving
6:24
it a hover effect and we'll just change the colour to white and the background of the
6:30
button to that beige colour which is 8F7460 cool so let's check this out now oops that's
6:39
not working oops I didn't I didn't put the background property in that's fine okay there
6:44
we go cool so there's our button and the stars don't really need styling they're all
6:51
in the middle they've got that margin there this bottom image does have that thin gap
6:56
there where the whites poking through so we're going to get rid of that as well now that
7:01
image is within this div the footer banner so let's copy that and give that a rule down
7:10
here and then we'll say the image within it is going to be a width of 100% and boom
7:18
there we go guys that is completely done how long has that taken me what seven minutes
7:22
in this lesson and about ten minutes in the last lesson so in under 20 minutes I've styled
7:27
that with CSS and made a website the HTML took about five minutes this took about 20
7:32
at most so 25 minutes we've got ourselves a one-page website that is how simple it is
7:38
guys if you have any questions obviously feel free to comment down below otherwise
7:44
take this go out mess with it make your own websites you can do it and I'll see you guys
7:49
in the next video don't forget to subscribe if you enjoy or please like or share I'll
7:53
see you guys then
#Computer Components
#Operating Systems
#Programming
#Skins
# Themes & Wallpapers
#Software