Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Usually, placing the image on the page is just the beginning of making sure it fits within the design of your site. While there are certain properties that you can set manually on an image, for the most part, you'll want to customize the look and feel of your images through Cascading Style Sheets. Using styles allows you to create different looks and behaviors based on where the image is found, the context in which it is being used, and what type of image it is. The other obvious advantage to using styles for image is the ease of updating them.
Rather than having define dozens or even hundreds of images, then modifying them individually, you can update a specific style and have the change occur site-wide. So I have the gallery.htm file opened, and what we're going to do now, I'm going to scroll down a little bit, is write a style that's going to modify these images within the gallery. One of the things that we would like to do is maybe wrap the text around the images a little bit, keep the text off of it, so they are not budding right up against the images like they are doing now, and maybe stylize our images a little bit by having a custom border around them to really sort of set them off from the rest of the images within the site.
Now, those are all things that we can do with CSS, and it's not really going to take us a long time to write the styles, a very quick, very easy style to write. So what I'm going to do is go over to my CSS Styles panel. So I'm going to open that up, and I want to scroll down, and there's a whole section here where we just have individual classes. You can see, floatRight, floatLeft, callOut. I'm going to select the very last one of those, which is quote, and I'm going to click right here to create a brand-new CSS Rule. Now, I want to do a Class Selector, and I'm just going to name this class .galleryImage.
So very descriptive name, remember because this is a Class Selector, it has to have that period on the front end of it, and you don't want any spaces in there at all, so just .galleryImage. I'm going to define that in our External Style Sheet main.css, and I'm just going to go ahead and click OK. Well, let's take each of those requirements one at a time. One of the first things I want to do is ensure that the text wraps around this image. So I'm going to go to my Box Category, and I'm going to use the Float property to do that. So whereas you can use the Image Align attribute to do that through your HTML, through CSS we're going to achieve the same results through a property called Float.
Now, we're going to talk more about Floats in the chapter on Layout. So if you're interested in learning more about Floats, there is going to be a good bit of more information there. So I'm going to grab the Float pulldown menu, and I'm going to float them to the left. That will wrap the text around the right- hand side and float the image to the left. I'm also going to do a clearLeft property. Now why in the world am I going to do that? Well, it's basically going to keep these in a single row. If you float one object to left, and then another object below it is also floated to left, the object below it tends to just come up and occupy the same line, and they sort of line up horizontally right beside each other.
So by clearing this we're basically saying, "Okay. I want to float to the left, but don't let anybody float to my left." So that's what Clear does for us, and that's why we're doing it here, so that each of these guys will be on their own separate line. Now, we need to go ahead and make sure that the text isn't going to bud right up against this image, and we want to effect the spacing from one image to the other, so that they're spaced an equal distance apart from each other. We're going to use Padding, and Margins to do that. So for Padding, I'm just going to go ahead and keep Same for all, and I'm just going to do 5 pixels worth of Padding all the way around my image.
Now, what that's going to do for us is it's actually just going to give me a little bit of space between the image and the border that I'm going to be creating. So this is more to create a decorative frame around the image than it is to control any type of spacing. For that, I'm going to use Margins. So I'm going to deselect Same for all for Margins, and I'm going to give it a Right Margin of 1em, Right Margin of 1em. Since this image is floated to left and the text will be wrapping around the right-hand side, that 1em is going to push the text away from the image by 1em, which in most cases will work out to about 16 pixels. Okay.
So we're all looking pretty good. This has been fairly easy so far. The next thing that we're going to do is do a border. So I'm going to click on the Border Category, and I'm just going to go ahead and do a solid border all the way around my file. Now, I'll tell you what. Let's do something a little different here. Let's turn off Same for all for all of these guys. We're going to do a border all the way around it, but we're going to modify that Border to give the slightest indication of maybe even a little shadow. So for the Top Border, what I'm going to do here is I'm going to do a solid Border, 1 pixel, and for Color I'm going to choose #CCC.
That's sort of a light gray. Now, for the Right Border what I'm going to do here is the solid Border, 1 pixel as well. This time I am going to change the Color to #999. That's a darker gray. So the Top will have a light gray. The Right Border is going to be a darker gray. I'm going to use the same Border for the Bottom. So solid, 1 pixel, and that #999 sort of a darker gray, and then for the left side I'm going to do solid, 1 pixel, and I'm going to do the CCC.
So I have got Top and Left are going to be the lighter gray. Right and Bottom are going to be the darker gray. They're very similar grays. It's going to be a really subtle difference. I think this is one of the things where if you try to overdo it and do like a black line there, or even a darker gray, it might look a little cheesy. So as that is, it's just going to be a really nice little subtle effect. So I'm going to go ahead and click OK, and we're going to test our rule out. I'm going to select the first graphic in our gallery, which is the Golden Gate Bridge, and for the Class, I'm going to grab the pulldown menu, and I want to find galleryImage right there.
As soon as I select that, notice that we get a nice little frame around it. That's what the Padding and the Border is giving us. We have a slightly darker line here than on the top and the left. So it gives us a little bit of an illusion of a drop-shadow without really giving us one. The text wraps around it exactly the way that we wanted it to. Cool! That looks perfect. Now, all we have to do is go and apply that to each and every one of the images within the gallery. So there is a little bit of manual application here but not a whole lot.
And the real strength and value of this is that if we ever needed to change this, let's say we decided to do a thicker border or maybe we didn't like the amount of spacing we were giving between our images, we can certainly just go back, modify that one Class and all of the images throughout our site that might be using this would updated. So that's really cool. Now also, I want to point out that this is by no means the limit of what you can do with images in CSS. Part of the fun of learning and using CSS is the creative exploration that that's going to lead to.
So I want to encourage you to experiment with your images, combining Borders, Background Colors, Padding, Margins, all sorts of different stuff for any type of creative effect that you're looking for. The important thing to remember is that you can use CSS to control the visual presentation of images as well, making sure that they conform to the overall design strategy of your site.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.