Welcome back to the project.
So in this video we're going to go over how to style the image section.
So this section right here we're going to style.
So the first thing we want to do is we're not going to go to the global that see us as we're gonna make
a new file and it's going to be called Main that's RSS.
So let's right click on the CSX folder to new file and we're going to control us and do that CSR us.
And the first thing I want you to do is we're going to comment out this section so that we can divide
it up so we know what section we're in when we're writing out our as us.
So I want you to do a left now left a backslash and then a star and then we're gonna do these kind of
funky lines that you can find right next to the backspace if you're on Windows
I think I went too far.
There we go back.
There we go.
There.
That's fine right.
OK.
You can go as far as short as you want it doesn't really matter.
It's just to kind of keep this separate.
So we're going to start let's tab in a few times.
We're going to start image section.
OK.
And then we'll return and go back.
Is that in.
And so now we know that this is the image section I'd like to center this.
You don't have to get that wild if you don't want to.
It just so that you know what section we're in to make it easy to find things because you'll notice
right here you can see the that section right there.
And then when we end this we're going to do the same thing so we're going to start in the backslash
and then we'll copy this turn a couple of times here.
Paste it there and then do.
End image location or image section because it's part of the reason why do that is when you're editing
the styling or the see us it makes it easier to find everything.
Think of this as like your index of a book.
You know exactly where to go.
You know you're looking for these.
This pops out on the screen even on this little screen over here.
You can see where it starts and ends.
So it's just a good habit to get into.
So now what we're going to do is we're in the section I.D. content that's the first element that we're
going to style give properties to.
So we're going to do color white positions gonna be absolute top is gonna be 400 pixels and left is
going to be 600 pixels.
OK.
The next we're gonna do image idea slide and we're going to do with 100 percent.
Sorry not widows with.
There we go.
One hundred percent.
And then height is gonna be auto then we're gonna do button and let's open and close that.
And then do with 50 percent we're gonna do height 50 pixels background is gonna be hashtag 1 7 2 0 3
5 and then we're gonna do color white font size is gonna be 2 ms or 32 pixels.
So we're going to do two M's and then border will be none.
OK.
And then we're gonna do button hover and that's gonna be background.
Hashtag 0 9 5 6 8 D.
And then we'll close that.
Now what I want to do is show you what we have built so far.
So we're going right click open in the browser and so now you can see
OK so we're pretty much there.
The only thing that we need to update is the heading One heading three and paragraph sizes.
OK.
So we've we're just about there.
So let's do each one.
Font size is gonna be forums.
And then I'm going do h three.
Font size font size is gonna be two M's.
Then we're going to paragraph and the font size is gonna be two.
OK.
So we'll save that.
Let's right click open in the browser as you can see it and now we have the right sizes.
So we've styled the header section from the previous video and now we have styled the image section.
So in the next video we're gonna cover the our featured courses section and I'll show you how to style
that and make it look like the final product.
OK.
So I'll see in the next video.
Thanks for watching.