Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

westciv downloadable courses

css level 1 sample section

border and background

In this section we get some practice working with class selectors, as well as learn how to use the border and background properties of CSS.

Color printing is expensive. Color on the web is cheap. Color can be very useful for adding to the readability of pages. We've already used color with links and headings to distinguish them. We can use color in similar ways to differentiate different pieces of information on a page.

Exercise 33

You've already given a background-color and 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 15: hexadecimal colors in the banner

figure 15: hexadecimal colors in the banner

If you'd like to choose from a wider range, here is our color chart with the full websafe color palette.

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 separately, or to one or more sides, but for now we will just add a border around the whole element.

When applying a border, we can provide 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

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

Exercise 34

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 {margin-left: 30%;

margin-right: 30%;

background-color: #0099cc;

border-style: solid

}

.method {margin-left: auto;

margin-right: auto;

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 24: 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.

Exercise 35

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 {margin-left: 30%;

margin-right: 30%;

background-color: #0099cc;

border-style: solid;

border-color: #ff9900

}

.method {margin-left: auto;

margin-right: auto;

background-color: #0099cc;

border-style: solid;

border-color: #ff9900

}

And in the browser, it should look something like this

Snapshot 25: 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 36

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 {margin-left: 30%;

margin-right: 30%;

background-color: #0099cc;

border-style: solid;

border-color: #ff9900;

border-width: thin

}

.method {margin-left: auto;

margin-right: auto;

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 26: Recipe page with thin 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 the 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".