Current Free Course: HTML and XHTML for CSS

This is the free online version of Westciv's self paced course CSS Level 1. You can follow this course by coming back to the site every week: you can even get a reminder when we publish the new section every week. Go here for more info on how the free course system works.

If you can't make it back every week, or you just want to move ahead at your own pace, all Westciv courses are also available for purchase at very reasonable rates.

Week 8

On this page you'll find week 8.

Working with whitespace in page layouts
The margin property
Using margins to postion content
Centering text: the text-align property
Centering an element
The width property
The border property

If you haven't done so already, download the course materials.

Page layout

Introduction

So far, when looking at CSS properties, we've been looking at typographical and background properties, more or less. Now it's time to take a look at page layout.

Here we are going to talk about a number of commonly used aspects of layout, particularly margins and indentation. We'll also look at borders.

Whitespace

Well designed publications look professional and are easy to read for a number of reasons. One of them is their use of whitespace (or neutral space). This breaks up the information on a page for legibility. Good use of neutral space (typically margins, the space between paragraphs and headings, as well as the use of indenting) makes information more readable. It draws the user's eye toward the most significant information (headings), and to logically related "chunks".

In this lesson we are going to develop statements that apply these layout aspects to our pages.

Margins

Style sheets let us set a margin on any element. This margin is the space between the edge of an element and the edge of the element which adjoins it. Margins can be applied to each edge individually, or to every edge at once.

You specify margins using the margin property. This property can take either a length value with a unit (such as pixels or ems), or a percentage. By specifying margins and other page layout properties using percentages, you can design pages whose proportions remain the same, regardless of the size of window they are rendered in. This helps to give a "fluid" feel to a page. We'll return to this issue in some detail in our real world section of the course.

But what will the margin be a percentage of? Good question. The margin is a percentage of the width of the element's parent element. Note that this is true, even where it is the top or bottom margin which is being set.

When applying a margin to an individual side of an element we use one of these properties

margin-top
margin-left
margin-bottom
margin-right

Using the margin property for positioning

Exercise 28a

Just before, in our recipe, we identified several classes of information and created class selectors for them in the style sheet. Now, for each of those elements we want to use left and right margins to create a readable, visually pleasing page layout. The first thing you might want to do is give each of these elements a background-color - that way you'll be able to see exactly where they are on the page. For the sake of simplicity, let's make them all the same color for now: I'm going to use one of the colors in that banner at the top of the page: #09c.

Now we're going to add some different values for the properties margin-left and margin-right to these statements. This will control the left and right space between each of the <div>s and their parent elements. Actually, they all have the same parent element don't they? If you look you'll see that <div class="description">, <div class="ingredients"> and <div class="method"> are all contained by the <body> element.

So effectively, you will be creating space between the edge of the element and the edge of the page.

Exercise 28b

How much space do we want to create on each side? Where do we want to position each of the elements? Let's do things one step at a time and work with .description and .method first of all. See if you can do the following.

Make the left edge of the description 5% from the left edge of the page, and then make its right edge 70% from the right edge of the page.
Make both the right and left edges of the method 25% from their respective page edges.

Let's take a look at how the style sheet should look if you want to do exactly this. Once you've got the hang of it, feel free to play around with some different values.

.description {

margin-left: 5%;

margin-right: 70%;

background-color: #09c;

}

.ingredients {

background-color: #09c;

}

.method {

margin-left: 25%;

margin-right: 25%;

background-color: #09c;

}

And in the browser, it should look something like this. Don't worry about what the list of ingredients looks like at the moment - we're going to fix that up later using a variation on this technique.

Snapshot 19: Recipes page with margins on the description and method

If it doesn't seem to be working, check all these things.

See that recipes/masaman_prawn.html is linked correctly to the style sheet recipes.css in the style_sheets directory.
Check that you have in fact been working on the style sheet recipes.css which is saved in the style_sheets directory.
Check that both the style sheet and the HTML document have been saved.
Check that recipes/masaman_prawn.html has been marked up correctly with <div>s of exactly the right class name.
Check that you've used these exact same class names in your style sheet - spelling!

You should be confident with the basics of using margins for positioning now. Time to take it to the next level.

Westciv Self Paced Courses

Learning web development using HTML 4, XHTML and CSS is easy and flexible with our hands on, self paced courses.

I went from complete novice to writing and putting up my own site in less than a week.

Martin Prior, Iman Foundation

Course details :: Buy this course

Centering

Centering is a subject which can cause difficulty for web developers new to style sheets. This is because there are two different kinds of centering, and it is important to distinguish between them. Sometimes, we want to center the contents of an element. Most commonly, this involves centering text. But to center an element itself, we need to do something entirely different.

Let's look at each in turn.

Centering text

This is pretty easy stuff. We'll start by centering the text in the description for the recipe. To center the contents of an element, we use the text-align property. This can take the values left, right, center and justify.

Exercise 29

Let's center the contents of our description. It shouldn't be too hard working out how to do this.

All we need to do is to add a text-align property to the statement. Here is what the relevant parts of our style sheet should look like now.

.description {

margin-left: 5%;

margin-right: 70%;

background-color: #0099cc;

text-align: center;

}

Let's check our page in a browser to see it's working OK.

Snapshot 20: Recipes page with centered description text

Centering an element

Now we are going to fix that list of ingredients. Before we center it on the page, for the technique I want to show you to work, we'll need to use a new property to give the element a width. Can you guess what the name of this property might be?

Exercise 30

Let's use the width property to give the list of ingredients a fixed width, say 250px. This means that this element will always be 250px wide, no matter how wide the window is.

Did you work out how to do that? It shouldn't have been too hard, and when you're finished the statement should look like this. Remember - no spaces between a value and its unit!

.ingredients {

width: 250px;

background-color: #0099cc;

}

Take a look at the page. If you can, change the width of the window and notice that while the other elements change in size proportional to the width of the page, the list of ingredients always remains exactly the same.

Snapshot 21: Recipes page with width on ingredients block

But we don't want the ingredients sitting there against the left edge of the page, we want it in the center. In the previous section we saw how to use left and right margins to do this, but this time, if you think about it, we can't use a percentage value. What percentage could you possibly use, given that the width of the element is fixed at 250px? No, we'll use the keyword value of auto. This means that the margin will be as wide as it needs to be, after allowing for the 250px for the width of the element. Try it and see what happens.

Exercise 31

Give the .ingredients statement a margin-right and margin-left of auto.

I don't think you would have had any problem with that.

.ingredients {

width: 250px;

margin-left: auto;

margin-right: auto;

background-color: #0099cc;

}

And in the browser, the page will now look like this.

Snapshot 22: Recipes page with the ingredient block centered

Notice again what happens when you resize the page. The ingredients element maintains the same width, only the size of the margins changes. Compare this to what is happening with the method element: because this has a margin set to 25%, then this margin is what remains constant, while the width of the element changes as you change the width of the window. Neither of these is essentially "wrong" or "right". Choosing to use one or the other method will depend on how you want the layout to work.

Add color with the border and background properties

Color can be very useful for adding to the readability of pages. We've already used color with links and headings to make them stand out. We can use color in similar ways with other elements and selectors as well.

Exercise 32

You've already given a background-color to the various blocks of information on the recipes page. But you might like to work on them a bit now and get the color combination right.

You can use whatever colors you like, but it's a good idea not to get carried away with millions of different colors. Instead, use a few colors in different combinations as a motif. The hexadecimal values for the colors in the banner, which might provide a useful basis for a color scheme are illustrated below

figure 16: hexadecimal colors in the banner

If you'd like to choose from a wider range, here is our color chart.

The border property

I started using it as a learning tool, assuming I would go back to editing my CSS in my text editor - but it is just so convenient.

Don Sambrook, Softwork Orange

Windows :: Mac OS X

Download demo :: Buy now - $59.99

Now, wouldn't it be nice to be able to put borders around pieces of information? With CSS we can do this. Borders can be applied to each edge of an element individually, but for now we will just add the same border around the whole element.

When applying a border, we can use three properties. A border-style, a border-width and a border-color. If you give a border-style, you will see a border with default value for the width and color. But this doesn't work with the other 2 properties, i.e., if you just give a border-color you won't see a border at all. At a minimum, a border must have a style set to be visible.

There are several border styles

none
dotted
dashed
solid
double
groove
ridge
inset
outset

To give an element a border style, you just use one of these keywords as the value for the border-style property.

Exercise 33

Let's start by giving our list of ingredients and the method a border style. Choose one of the above, as takes your fancy.

Here is what your statements should look like.

.ingredients {

width: 250px;

margin-left: auto;

margin-right: auto;

background-color: #0099cc;

border-style: solid;

}

.method {

margin-left: 25%;

margin-right: 25%;

background-color: #0099cc;

border-style: solid;

}

I've gone for a very simple border. At the moment, this border will appear with a default width of medium, and a default color the same as the (text) color of the element. Let's take a look in the browser to see what these look like.

Snapshot 23: Recipes page with borders

You can leave it like this if you want, but you can also provide your own values for the width and the color of the border.

Exercise 34

Let's give it a border-color first. This takes a color value, with which we should be getting familiar. Again, you might like to use a color you've already used elsewhere on the page.

Here is the code from the example I've developed.

.ingredients {

width: 250px;

margin-left: auto;

margin-right: auto;

background-color: #0099cc;

border-style: solid;

border-color: ff9900;

}

.method {

margin-left: 25%;

margin-right: 25%;

background-color: #0099cc;

border-style: solid;

border-color: ff9900;

}

And in the browser, it should look something like this

Snapshot 24: Recipes page with colored borders

Lastly, we can play with the border-width. This can be a length (such as ems, or pixels) or one of three keywords, thin, medium and thick. Interestingly, it cannot be a percentage!

Exercise 35

Let's add a border-width, then see what happens in our recipe page in a browser.

I'm partial to width keywords, so here is my example

.ingredients {

width: 250px;

margin-left: auto;

margin-right: auto;

background-color: #0099cc;

border-style: solid;

border-color: ff9900;

border-width: thin;

}

.method {

margin-left: 25%;

margin-right: 25%;

background-color: #0099cc;

border-style: solid;

border-color: ff9900;

border-width: thin;

}

Now, let's save our style sheet and load our recipe page. Here is what yours should look a lot like, though your colors may vary.

Snapshot 25: Recipe page with thin borders

There are actually a number of different border shortcuts you may want to use as you become more proficient with CSS. I've shown you this longhand method here simply because I think it shows most comprehensively what you can do with CSS borders.

Color and borders, when used so that they don't affect the legibility of information, can be a very effective method of drawing attention to the structure and content of a page, and making it much easier to read and use the information on that page. Remember what the recipe was like before you gave it this extra markup - which is easier to use?

Remember, the goal of all our styling is to enhance the readability and usability of our pages, not just to make them "look nice".

In week 9 we'll look at