Styling a page layout often happens by building the page in parts. Learn how to apply the float property to style the header of your projects.
- [Instructor] In this exercise, we'll focus on styling the header. Currently, this is what your header area should look like in your projects and this is what we're trying to get to. So the first thing we're going to focus on is the profile image. Something to note, images can be resized with CSS, but it's best to crop the file to the size that you need it to be. There are many image editing tools you can use such as Photoshop or Sketch, or if you're looking for a free option, there is this online tool called Pixlr.
The larger the image, the more bandwidth the browser will use to load it. So it doesn't make sense to load a large image just to make it smaller with CSS. So it's okay if you're adjusting the size a little bit, but if you can, crop your images before you use them. On the flip side, if you have a small image and make it larger with CSS, it will looked pixelated and blurry. Let's go back to our sample project. In the the CSS, let's set the width and height of our profile image to 300 pixels.
If you have an image that is around 600 or even 800 pixels, that's fine. We can reduce that size with CSS. If you do have a larger image, just remember to resize it later on. So first what I'm going to do is I'm going to add a class to the image tag and name it profile image and that way I can make sure to target only this image in my CSS. So my class is going to equal profile dash, I'm going to use img for short.
And back in my CSS files, I'll add this to my header section in the CSS. Profile-img. And I'm actually just going to set the width to 300. I don't need to set the height, because by setting the width, the height will automatically adjust to maintain the aspect ratio of the image. So let's go ahead and save the file and check our changes in the browser.
Refresh and it's a little bit smaller now, 300 pixels. So we're going to add one more CSS style to this image called border radius. Border-radius and we're going to give it a value of 50%. Save it and go back to the browser. What this is going to do is it's going to turn your image into a circular shape and this is why I recommended having a square image to begin with. If you have a rectangular image, using 50% for the border radius is going to make it look like an oval.
The element is still recognized as a rectangle by the browser, but border radius can make it appear as a circle. Another option is to set the border radius using a pixel value and that will just give you some rounded corners. Let's give that a try. So instead of 50%, let's try 6 pixels. And you can see that the corners are a little bit rounded. I'm going to put mine back to 50% because I want mine to look like a circle.
The next thing we're going to do is tighten up the design by removing some margins. Let's take a look at our page. I want the name and the tagline to be closer together so I'll remove the margin from both of these h1s and h2 headings. Back in our CSS, there's already an existing declaration block for these two headings in the header. So I will just go ahead and add my margin: 0 here. Let's go ahead and go back to the browser and check for our changes.
So now the spacing is a little bit tighter. From here, one option we can do is just center align all the content in the header. So, let's go back to our CSS and apply that to the header tag. Text-align: center. All the child elements will inherit this style and even though it's called text align center, images will actually inherit this style as well.
We also just learned about using floats. If you like your header styled this way, feel free to just leave it as is, but if you want to float the text around the image, let's remove the text align center and apply a float left to the image instead. So I'm going to remove this for now, and add a float: left to my profile image instead. I'm going to save my changes and go back to the browser.
Now depending on how much text you have in your header, it might look a little different from mine. Remember, parent elements don't recognize floated elements and that's why my image is actually displayed pretty close to the bottom of this container even though we had added padding to it. If you text is longer than the image, it will float underneath. Let me demonstrate. I'm just going to add an extra paragraph here just to make the text a little bit longer.
Notice that there's more spacing down here and that's because the text is flowing underneath the floated element and so the padding is being applied to it. So in this case, if we self-cleared the float, you won't be able to see any difference, but if your text is shorter than the height of the image, you will need to do it. If you don't want want the text to flow and wrap underneath the image, you'll have to add an extra step. We'll be exploring that in an upcoming lesson, but for now, let's self-clear it with the overflow method.
Let's go back and take a look at the HTML. Though the text is contained within the header element, if we take a closer look at the HTML, the parent element is actually the content wrap. This is where we'll need to apply the clear. So because this content wrap is being used to wrap other sections of content, it's likely that the other sections will have floated elements as well. Let's go back to the CSS file and add the overflow property to the content wrap.
I'm going to use the value of auto. Because the content wrap is being used to wrap whole sections of content, by adding the overflow: auto here, any time I add a float, it will automatically self-clear. Now let's go back to our browser and see the changes. Now I've just refreshed my page and nothing has seemed to change and that's because in this example my text is longer. So it flows around the image, which is the floated element, anyways, but if I was to remove it, you'll be able to see the difference.
So let me take out that extra paragraph and go back to the browser. If you remember before, there was less space here. Because this image is floated and the parent container was not recognizing it, by adding the overflow to the content wrap, the floated elements are now self-cleared. Let's just add on more style. I'm going to add a little bit of margin on the right side of this image, just to put some space between it and the text.
Back in the profile image, add margin-right and I'm going to use 30 pixels. Your page should now look similar to this.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property