Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Often some of the most simple design elements actually turn out to be very complex once you start attempting to style them. Coming up with creative solutions to CSS problems are just as much a part of your designing with CSS, as planning the layout in the first place. To illustrate this point, our next exercise we'll focus on supplying quotation mark graphics to our blockquotes, and doing something really cool with our pages' background graphics. Now, I have seen many blockquote styled with quotation marks around graphics, but most of these will be a single graphic at the top of the blockquote to highlight the nature of the element.
What we want to do is have a subtle background graphic that shows a graphic quotation mark underneath the beginning of the quote and one underneath the person's name of the quote. You can see that here, here we have the opening quotation mark, here we have the closing quotation mark. Now, if all the quotes were exactly of the same size, we could create one larger background graphic and just be done with it, but of course that's not going to be the case. So we'll need our quotations marks to be placed in the proper location, regardless of the size of the quote. This will require us to add little bit of extra markup, but as you are going to find out, we can make that logical and semantic.
So I'm going to leave Firefox and go back into Dreamweaver, and open up the 06_10 file. Now I'm going to scroll down to find our blockquote, and for the most part it's styling exactly the way we want it to. The one thing it is not doing however is it's not displaying our background graphic. So what I'm going to do is go over to my CSS Styles, find my blockquote rule and double click that. I'm going to go to the Background category, and I'm going to browse for my Background-image. Now, I want to make sure I'm browsing in the 06_10/_images directory, and what I'm looking for is the upQuote.gif. Click OK.
Choose no-repeat for Background-repeat, and click OK again. So now our background graphic shows up. One of the really cool things about this is the padding that we have on the existing blockquote. In addition to the line height, it's giving us the spacing we need, so we don't even really have to do any positioning of our background graphic. Well, that takes care of the first half, what about the second half? This is where it gets tricky. We want to position the quotation mark roughly in the same position at the end of the name, and offset the name a bit from the rest of the blockquote. To do this, we'll throw a span around the name and write a specific style to it.
By treating the span as a block level element, we'll be able to position it separately from the rest of the blockquote and position the background graphic inside of it as desired. As a bonus, we are going to pass a class attribute into the span, so that the content is identified as well. So we are really doing something that helps pass along meaning as well. So I'm going to go ahead and highlight the text Thomas Wolfe plus the in dash here, and I'm going to wrap that in the span tag. One of the easiest ways to do that is to do a Command+T or Ctrl+T keyboard shortcut.
This is going to open up our Quick Tag Editor. When you have text highlighted, it's going to prompt you to wrap the selected text for the tag, and that's what we need to do here. So I'm going to type in . That class doesn't exist yet, so I wasn't able to grab it from my pull-down menu. So I'm going to hit Return, and visually nothing really happens, but we can see down here in our tag selector that we have added that. Perfect! So now we need to go ahead and create that as a CSS rule. So I'm going to go over to my CSS Styles panel, and you will notice I'm still focused on that blockquote style.
That's going to help me position my new style in the right place. I'm going to choose New CSS Rule, and here we are going to do compound selector. It's going to be a little less specific than this. So I'll hit Less Specific a few times. I get blockquote .quote. That's what I want, but I want to make this element specific. So I'm going to place my cursor directly in front of the period there, and type in span. Now, if you have never done an element- specific class selector before, make sure there is no spaces here. Notice that it just says span.quote.
So that means any span tag with the class quote applied to it inside of a blockquote. So still fairly specific. I am going to go ahead and click OK, and we are going to change a few things here. The first thing I'm going to change is how it's positioned. Span tags are by nature inline tags, but if I choose the Block category, I could make it display like a block level element. That's going to place it on its own line, and it's going to ensure that it's always at the bottom of our quote. Now, the next thing I'm going to do is take Text-align and set that to the right. That's going to move the name of the person who is giving the quote all the way to the right edge, which is actually fairly common in lot of quotes.
Next, let's go ahead and set some Type properties. What we are going to do here is change the font-weight to bold. That will make the name standout a little bit more. We are going to give it a line-height of 1.2. Now, we don't want to use pixels here, we are going to use multiples, and that will be basically 1.2 times the font size of the text. So it's going to give us a little bit of extra padding and extra space there. Speaking of padding, let's do that. Let's go to our Box category, and turn Same for all off for Padding. Let's give it a bottom padding of 2.4em. That's going to give us a lot of space between the text and the background image.
Let's give it a padding top of 0, and then let's give it a padding right of 2em. Again, it's going to give us an offset from the right and bottom, and allows enough space for a background image to show up. Now, speaking of that, that's the only thing we have left to do here. Let's go to our Background category. I'm going to browse for our Background-image. This time I'm looking for the downQuote.gif. So I want to find that. I click OK. Choose Background-repeat, no-repeat, and we do need to position this. So what I'm going to do is for Background-position (X), I'm going to give it a right value, and for Background-position (Y), I'm going to give it a bottom value.
That makes sure that the graphic also lines up with the bottom right hand corner of the element. So I'm going to go ahead and click OK, and there is our quotation mark right there. Now, this is going to move down regardless of how long our quote gets. If I selected a quote, copied it, and doubled it, it wouldn't matter. Quotation mark is going to go right down there with it. So that is really, really cool. I'll go ahead and undo that. Now, if I do a Save All here and preview that in our browser, you can see that it's working exactly the way that we want it to work.
Now, the really good news here is that now just surrounding any type of a name we have in a blockquote with the span tag and assigning it the class of quote is going to take care of all the styling that we need. The additional markup is fairly a minimal and not that difficult to add to the page. You can do a lot of variations on this technique, and add an infinite amount of visual sophistication to your pages with minimal markup. Now, speaking of minimal markup, before we move on to our next exercise, I want to turn our attention to our page background graphic. So I'm going to scroll it up there. You may remember from earlier that what we have is the HTML tag has one seamless style background on it, sort of this concrete pattern, and then the body tag itself has this background graphic, this long skyline sidebar.
Now, the top skyline image is a transparent PNG file. It has a sort of glow on it. Right now it's blending in with the background, and although that creates a really cool effect, this would have been just as easy to replicate by creating just a really long background graphic. So why go to the trouble of using that alpha transparency? Good question. Let's go back into our CSS and make a really quick modification to it and show you what a cool technique you can do by combining background graphics together. Okay. I'm going to back into my file.
I'm going to find the body selector. I'm just going to close my Files panel so I have more access to these properties, and I'm going to add a property. I'm going to add the background-attachment property. Now, this is one that might have been easier to grab with a pull-down menu. Let's check out some of the values for this. We have fixed, scroll, and inherit, so really two values. Now, basically, background-attachment doesn't have anything to do with the element itself and how the background positions itself relative to the element. What background-attachment allows you to do is set how the background graphic is positioned relative to the viewport.
So it can remain fixed to the viewport or it can scroll right along with the viewport. Now, scroll is the default value, so I'm going to choose fixed. When I do a Save All, and preview that in my browser, notice that now when I scroll, I get a very different result. That skyline stays in place. I can literally see the transparency on the glow as I'm scrolling through my page. So now we have a complex set of background graphics that completes the styling of our blockquotes. Now, I should point out that this background-attachment fixed property doesn't work properly in Internet Explorer.
Not only that, but earlier versions of Internet Explorer don't support alpha transparency on PNG files either, so that's sort of a double whammy for what we are doing here. That's okay though, because later on in the deployment chapter I'm going to show you how to filter out this code so that Internet Explorer has a very different result, without any errors or problems. So we have got a complex set of background graphics that complete the styling of our blockquotes, and we have modified our page background images to take full advantage of our header's transparent nature. Once you have the basics of background images down, allow yourself to experiment and explore with how you are using them.
You will most likely find that your creativity and design sensibilities will lead you to use them in totally unexpected and very effective ways.
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.