And welcome back, I want to show you a property that is commonly used with images, so I have a really
funny picture here of an alpaca.
So we're going to copy that.
Actually, we're going to use the link for this and we're going to add an image to our website.
Let's just make our font size a little bit smaller.
Perfect, and I'm going to try and add a picture to the left over here, so if we go to our about page
and in our section over here, we can try and add a picture.
So let's do an image tag.
And if you remember, we have a source and that source I just copy and pasted the link.
And if I save this and refresh.
Well, that's a big picture, so as you may remember, we have to do with.
Let's to 50 pixels and height, 50 pixels, let's say, then refresh and you can see that we broke.
Let's make that a little bit bigger actually us to.
Two hundred and 200.
Perfect, you can see here that we actually broke a bit of our success, and that is because if you
look over here, we have used this selecter which says immediate neighbor of two, we can just do this
for now.
Refresh and there you have it, but I kind of want the text to be on the right side over here.
How do we do that?
Well, we can.
So like the image and use a property called float and float, you can do right or left.
So if we do left.
If flows the image to the left and you see that the text wraps around in this property was created specifically
for these reasons to have images floating to either left or right and be able to have text wrapped around
them.
You'll see instances where float is being used for positioning elements, and that's not the best practice
because it has some funny properties for now, just use it with images if you can.
And one thing to note with float and just to show you that I can do it on the right as well, if I go
like this and refresh, it flows to the right, I kind of like this better.
So we'll keep that there.
The other thing I want to show you is that if we added anything so after the image, we want to have
a footer.
And in this Futer say website Made with love.
Close that and safe, and we also want to make this actually a lot smaller, so I'm going to do five
pixels because I want to show you something.
So you see over here, I've made this line had very, very small, but I wanted to demonstrate for you
because this is floated to the right everything just kind of tax on to the left side over here.
And if we wanted to make sure that our footer is at the bottom of the website, we would have to use
a property that always, almost always comes with float and it's usually put in the property after the
float is being used.
So in our case, footer and we have to specify clear both.
So if I save and refresh.
We have that at the bottom and let's align it to the center here and refresh.
Oh, I didn't.
And let's do center save and refresh perfect.
Now we have website made with love with a whole bunch of gibberish, but I wanted to show you that property
float for images and make sure that we clear so you can start on the website on its own past the image.
I'll see in the next one.
Bye bye.