Start learning with our library of video tutorials taught by experts. Get started

CSS: Page Layouts

Using borders to enhance design


From:

CSS: Page Layouts

with James Williamson

Video: Using borders to enhance design

One of the things that I've always found interesting about web design is that even though we are all given the exact same set of tools and the same set of properties that we can control, all of that, we all still find ways to create such amazingly different content from one another. It's really a testament to everybody's creativity and originality as they are designing their sites. Now in this movie we are going to experiment with some creative ways to use the border property in the hopes that it will inspire you to start thinking about new and creative ways that you can use in CSS.
Expand all | Collapse all
  1. 4m 20s
    1. Welcome
      54s
    2. How to use the exercise files
      3m 26s
  2. 1h 39m
    1. Box model review
      8m 47s
    2. Calculating element dimensions
      11m 11s
    3. Understanding margin collapse
      7m 59s
    4. Calculating em values
      7m 41s
    5. Calculating percentage values
      7m 51s
    6. Normal document flow
      13m 3s
    7. Controlling element display
      8m 53s
    8. Using CSS Resets
      7m 11s
    9. Fixed, fluid, and responsive layouts
      9m 9s
    10. CSS debugging tools
      6m 46s
    11. Using the Firebug Inspector and the WebKit Web Inspector
      11m 5s
  3. 53m 15s
    1. Page design workflow
      3m 6s
    2. Page design tools
      4m 56s
    3. Determining page structure
      7m 18s
    4. Creating image assets
      8m 58s
    5. Creating initial page structure
      7m 3s
    6. Adding meaning with classes and IDs
      5m 23s
    7. Structuring content with HTML5
      6m 6s
    8. Building internal structure
      10m 25s
  4. 1h 36m
    1. Floating elements
      7m 50s
    2. Clearing floats
      7m 28s
    3. Containing floats
      7m 50s
    4. Clearfix technique
      10m 38s
    5. Floating inline elements
      14m 34s
    6. Two-column floated layouts
      8m 17s
    7. Three-column floated layouts
      11m 30s
    8. Column height considerations
      7m 3s
    9. Creating equal-height columns
      10m 42s
    10. Floats: Lab
      5m 25s
    11. Floats: Solution
      5m 21s
  5. 51m 42s
    1. Relative positioning
      7m 59s
    2. Absolute positioning
      8m 59s
    3. Fixed positioning
      4m 23s
    4. Controlling stacking order
      8m 31s
    5. Clipping content
      8m 21s
    6. Controlling content overflow
      5m 38s
    7. Positioning elements: Lab
      3m 59s
    8. Positioning elements: Solution
      3m 52s
  6. 48m 46s
    1. Design considerations for fixed layouts
      3m 28s
    2. Establishing the layout grid
      7m 57s
    3. Defining column spacing
      9m 30s
    4. Applying the grid through CSS
      8m 56s
    5. Creating grid-based assets
      8m 26s
    6. Grid design resources
      6m 22s
    7. Building fixed layouts: Lab
      4m 7s
  7. 44m 35s
    1. Designing for flexible layouts
      2m 30s
    2. Calculating percentage values
      8m 45s
    3. Setting flexible width values
      6m 6s
    4. Making images flexible
      8m 10s
    5. Setting minimum and maximum widths
      7m 24s
    6. Building flexible layouts: Lab
      4m 53s
    7. Building flexible layouts: Solution
      6m 47s
  8. 49m 36s
    1. Responsive layout overview
      3m 49s
    2. Using media queries
      7m 16s
    3. Organizing styles
      8m 39s
    4. Making content responsive
      8m 33s
    5. Mobile design considerations
      7m 32s
    6. Building responsive layouts: Lab
      4m 23s
    7. Building responsive layouts: Solution
      9m 24s
  9. 1h 22m
    1. Creating multi-column text
      6m 36s
    2. Using borders to enhance design
      13m 59s
    3. Rounding corners
      6m 56s
    4. Adding drop shadows
      10m 35s
    5. Working with opacity
      6m 8s
    6. Utilizing the background property
      15m 5s
    7. Working with CSS sprites
      7m 58s
    8. Enhancing page design: Lab
      6m 22s
    9. Enhancing page design: Solution
      8m 38s
  10. 6m 25s
    1. Additional resources
      6m 25s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS: Page Layouts
8h 57m Beginner Feb 07, 2012

Viewers: in countries Watching now:

CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.

Topics include:
  • Reviewing the box model
  • Calculating em and percentage values
  • Controlling how elements display
  • Creating fixed, fluid, and responsive layouts
  • Structuring content with HTML5
  • Floating elements
  • Using relative, absolute, or fixed positioning
  • Defining column spacing
  • Creating grid-based assets and layouts
  • Considering mobile-design-specific issues
  • Working with multi-column text
  • Enhancing page design CSS Sprites
Subjects:
Web Web Design
Software:
CSS
Author:
James Williamson

Using borders to enhance design

One of the things that I've always found interesting about web design is that even though we are all given the exact same set of tools and the same set of properties that we can control, all of that, we all still find ways to create such amazingly different content from one another. It's really a testament to everybody's creativity and originality as they are designing their sites. Now in this movie we are going to experiment with some creative ways to use the border property in the hopes that it will inspire you to start thinking about new and creative ways that you can use in CSS.

So I have the borders.htm file open from the 08_02, and I want to preview the finished file for you first so you know what it is that we are going to be creating. So the first thing that we are going to do is we are going to create a rule between two columns that acts as sort of a space divider between them. You don't always want to use background colors for columns, but sometimes it's very helpful to let the reader know that their content is separate and distinct from each other. You can use a border to do that by creating a column rule. And we are going to talk about some of the different things that you need to think about if you're going to plan and style a column rule on multicolumn layouts.

The next thing we are going to do is we are going to create some styled inset borders. You can see here we have this menu, and it gives a nice little beveled look for those elements within that background, so I kind of like that. And then the last one that we are going to do is this nice shadowbox effect that we are able to do by just using a single element and some border properties. Okay, so I am going to go back into my CSS, and we are going to work on those one at a time. If I take a look at the structure of the page, we are going to focus on the columns for first, so forgive me for scrolling really fast there.

Notice that we have a section down here with the classic of columnRule, and then we have our col1, and we have our col2. So I am going to go up into my styles, and I can see that I've got different sections here. So the inset borders styles has a section. The column rule styles has a section, and a lot of the formatting is kind of already in place for us. In the column rule styles you will notice we have a two-column layout there. We have the first column floated to the left, second column floated to the right. Now look at the spacing and the width of these. So the left column, 460 pixels wide. We have 20 pixels on either side, so that gives us a total width of 500 pixels. And then the right column is 260 pixels wide, again with 20 pixels' worth of padding on both sides.

So there we are getting a total width of 300 pixels. So when you think about something like this, in terms of like putting a border that's just going to show up kind of right in the middle of both of them, at first glance it sounds really simple. You're like, well, you just put a border on one of the edges. The problem there is the spacing. In terms of getting it into the middle of the two of them, it can be kind of tricky. So what I am going to do here is I am going to take col1 and I'm going to change its padding-right from 20 pixels to 19 pixels, because we don't want our 1-pixel border to break the layout. And you kind of have to decide which side you want that to be on.

Now when you're dealing with columns that are on the left-hand side, you typically have some type of rag over there. Now I have the text-align set to justify, but if you had left-aligned, for example, you would have a ragged text on the left-hand side. And because of that, the spacing always looks a little greater on that side than the side that has the text that is aligned next to it. So if you're going to take space away from one side versus the other, that really ought to be the side that you try to focus on. Now the next thing I am going to do is go down to the line right after that and I am just going to ahead and add a border to the right, 1 pixel solid, and we will just do $ccc for color, which is a light gray.

I am going to save that, and now I am going to preview this one in our browser, and you can see there is our column rule. Now one more thing that you need to consider here-- I want to mention this before we move on-- is that you also need to consider which column is going to be the tallest column. You don't want to do this in the shortest column. Or if you do, you need to be aware of the fact, for example, that had we done this on the right-hand column that the border would only be as tall as the column itself, so it would end about right here. So if you're going for that effect, that's fine. Just keep that in mind when you're planning out which side to place that type of a column rule on.

All right, so we are going to move on down to our next section, and we are going to create these inset rules right there in our menu. So I am going to go back to my code. I am going to go down to our inset border styles. Now there is a lot of styling going on here, but really all this is is an unordered list, and in the unordered list we've set a specific width. We've stripped all the padding out. We've thrown a padding-right of 20 pixels, and it's just so that the text won't be right up against the edge of the menu. And then we are telling it a list-style of none. And then we have some styling placed on our links and the hover. So simple for the most part.

Now right here in the inset ul li selector, that's targeting any list item inside the unordered list which is inside the inset area, here is where we are going to write our styles. So what I am going to do here is I am going to do a border-top. The top order for this is going to be 1 pixel solid, and then for color I am going to do rgb(20,20, 20). So it's a fairly dark color, very neutral, almost black. I am going to go down to the next line and I am going to do border-bottom, and for the border-bottom here we are going to do 1 pixel solid. And for the rgb value here I am going to use (55,55,55).

Now the trick to this technique is there are no margins between our list items, so they are budding right up against each other. So essentially what this is going to do is it's going to put a solid dark line at the top of the list items, which is going to be sitting right underneath, because of the border- bottom, that 1-pixel lighter line. So those two lines are going to be nestled right up against each other. Now you will also notice that I've got some styles here already where the first child, which is the first item I see, no border on the top, and then the last child which is the last item in the list, no border on the bottom.

And that's going to keep a lone border from appearing up top and a lone border appearing at bottom, which would sort of ruin the illusion. Now the other thing that I want to point out here is that color is really, really important. You will notice, for example, that the background of the inset area is a neutral gray, and at (35,35,35), that's a fairly dark neutral gray. But take a look at these offset colors. So the darker line is the darkest of all of the colors, but not by much. The lighter line is the lightest of all the colors, but not by much. When you start getting large swings and lightness values and in hue, then the illusion of that inset just falls apart.

So when you're reproducing this on your own, if you are going to try to make it something other than monochromatic, just keep the hues in a similar fashion and keep the brightness values very close to each other as well. Now I want to do one more little thing here. In the inset ul, I am going to do a border-right here of 1 pixel solid, and I am going to do the same color as the lighter line, (55,55,55). And when I save that, go back into my browser, and refresh, you can see it gives me this little separator over here on this side, and then I have those two lines stacked right one on top of each other.

So we're going to tackle our last element, which is a shadow box effect, and you can see the default styling for this element is just to have this sort of desaturated maroon background. I am going to go back into my code. I am going to scroll down into the shadow box styles. These styles are going to be a little bit more complex. So I am going to go through what's happening here kind of in a step-by-step fashion. First off, the box itself has a position of relative. Now it's going to be important in just a moment, and it has a z-index of 1. Now relative elements, remember, they are still in normal document flow, so z-index really isn't going to do a lot to them.

However, because they have positioning, by placing a z-index on this, we have what is known as a new stacking context. If you remember from earlier in the title when we talked about z-indexes, that sort of index of items stacking one on top of each other starts with a new stacking context. So now anything that we stack on top of each other or behind each other stacks within this group, rather than, say, to the body tag or the html tag. So that's the importance of that. Okay, so we have quite a few styles to write here in this box after, so let's go ahead and get started on this.

Now this is generated content. And if you're wondering about the structure of this--let me scroll down-- we have a section right here with the class of box applied to it. So if you're wondering who we are styling, it's not a paragraph. It's not a heading. It's a section. So this generated content basically says that after all of the other content within the tag, I want you to make some new content. And the content property allows us to say what this is. It could be some text. It could be anything we wanted it to be. At this point I am just going to do empty quotation marks, because I don't really want any physical content. I just want an element to style.

So I am going to do empty quotation marks after content. Then I am going to do position, and I am going to do a position of absolute. Now remember, we have the box, which is this new element that we are generating. Its parent element is positioned relative. That means that this box is going to be positioned relative to the box container. After that, I am going to do a z-index value, and the z-index value I am going to do is -1. Now again, if you remember from our z- index movie, what this is going to do is this is going to paint the background of this underneath the content of the box, and the content of the box is the text that's inside of that.

It doesn't paint it underneath the background of the stacking context. So if you can think in layers for just a moment, the first thing that we are going to paint is the background of the box itself. The second thing that we are going to paint is the background of this new generated element that we are making right now. And then the third thing that's going to paint on top of it is the text inside of the box. And again, that's -1 z, and the x value is doing that for us. The next thing I am going to do is a left offset of 10. Then I'm going to do a top offset of 10--and that should be pixels.

Then I am going to do a bottom offset of 10 pixels, and then I'm going to do a right offset of 10 pixels. Okay, so what am I doing here? Well, I don't know the width and I don't know the height of the box. Okay, I do know the width, but I don't know the height. In situations where you're not really sure what that's going to be or the box might grow, for example, because content gets placed inside of it, when you're generating something and you're trying to make it 10 pixels smaller than its parent element, this is a great way to do it. So since it's an absolute-positioned element, we can say, hey, I want your left side to be 10 pixels over from the left side of the parent.

I want the top to be 10 pixels down. I want the bottom to be 10 pixels up, and I want the right to be 10 pixels over. So essentially it's allowing us to create a box that is 10 pixels smaller than the parent box, and centered inside of it. So we are building a frame basically. And the next thing I am going to do is I'm going to do a background color, so let's do background. And I am going to give it a background of rgb(39,34,34). And we have one more step to do, but before we do that step, I am going to save this and I want to preview it in the browser so you can see what it is that we are actually doing.

So you could see we are generating a new element. The new element is 10 pixels shorter on each side than the parent. And the other thing that it's doing for us is it's making sure that this background is painted behind the textual content, and that's the -1 z-index that's doing it for us. Okay so now we want to apply a slight bevel to this inner element, and the easiest way to do that is just use borders. So I am going to go in on my borders here, and we are just going to do borders in all different directions, because I want the offsets to be a little different.

So I am going to do border-top, and the value there is going to be 1 pixel solid, rgb, and the rgb value for this is going to be (32,27,27). And if you're paying attention to the background colors for our two elements here, you're going to see that they're very close in hue and they're very close in brightness value. So again we are carrying over the example of our last lesson, which is, if you're going to create bevels or those type of thing, you want to keep them very close in hue and you want to keep them very close in brightness value.

Next I am going to do border-left 1, pixel there. We will do solid rgb. And the value for the border-left will be (32,27,27). So the same color on the border there for the top and the left. That means that the bottom and the right are going to get a lighter value. So we are going go border-bottom, 1 pixel, solid. Again we are going to do rgb. And if you're smarter than me, you can copy and paste these values and just change the border.

So the rgb value for border-bottom is going to be (82,72,81). And I am going to take my own advice and I am going to copy this and I am going to paste it. And I am going to change border-bottom to border-right. So I am going to save that, go back into my browser and refresh, and there is our nice little 1-pixel all the way around, giving us that nice little beveled look. Again, it's the closeness of the hue and the closeness of the brightness setting that's really making the bevel look convincing. If we were too far off in hue, we were too far off in brightness values that wouldn't work at all.

So there is our shadow box. I think it's a really cool way of creating a really complicated effect with just a single element. Now one of the great things about really understanding how CSS properties work is that it gives you the ability to think about how you might use it in really creative ways, and maybe even combine it with other properties to achieve really unexpected results. So as you begin to create your layouts, really take some time, experiment. Think about how you can use things like borders, as we did in this lesson, to create your own stunning visual effects.

There are currently no FAQs about CSS: Page Layouts.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Page Layouts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked