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 9
On this page you'll find week 9.
- The padding property
- Indenting and outdenting
- Combining class with links
If you haven't done so already, download the course materials.
The padding property
Take a look at the two headings for Ingredients and Method - do they look a little odd in any way? I don't know about you, but I think it would look a bit better if the text wasn't sitting flush against the edges of the box, but rather started some distance in.
figure 17: margin and padding
We're going to fix this up using the padding property, which works very similarly to the margin property. While the margin is the distance between the element and any adjacent elements, the padding is the distance between the content of the element and its own edge. And just as you can with margins, you can apply padding to the all edges of an element, or to each edge individually.
padding - to apply the same padding to every edgepadding-toppadding-leftpadding-bottompadding-right
As with the other page layout properties we've seen and will see, and indeed like most CSS properties, padding takes a range of possible types of value.
Exercise 36
So let's put a left padding of say 15px on the Ingredients and the Method.
Finished? Here's what the style sheet should look like.
.ingredients {
...
padding-left: 15px;
}
.method {
...
padding-left: 15px;
}
And in the browser
Snapshot 26: Recipes page with padding on the ingredients and method blocks
We've covered quite a few page layout properties in this section, and adding these to the text and background properties we've previously studied makes for an already significant number of tools at our disposal. Now though, for the last page layout property we're going to cover we'll go back to our main style sheet spice_style.css.
Indenting and outdenting
The headings
It's a common typographical effect to emphasize headings by the use of outdenting, so that they "hang" outside the main body of text. Let's take a look at how to do this now.
Margins can take negative as well as positive values. Using a negative margin value, we can outdent an element. As we will see in a moment, however with our design, that's not actually necessary.
The text
In a well designed publication, the first line of a paragraph may be indented, while subsequent lines in the paragraph are flush left with the margin. This emphasizes the beginning of a logical chunk of information. Let's go back to our main style sheet, spice_style.css and do this so it affects every page in our site.
Exercise 37
First let's give our paragraphs a margin-left of 5%. Then, by virtue of the fact that our headings haven't got a margin, they will be "outdented" relative to the paragraphs by 5%. So, as promised, in this instance, we don't need to outdent (and if we did try it with our headings, the left edge of the headings would end up left of the edge of the window, and so be invisible.)
This first step is very straightforward, we simply apply a left margin like this to paragraphs. I'm sure you won't need any help to work out what the selector is for paragraphs.
p {
margin-left: 5%;
}
When we set a margin on an element, it applies to all of the contents of that element. We can however, also use the text-indent property. Text indentation applies only to the first line of an element. Subsequent lines of text are not indented. We can use percentages with the text-indent property to the same effect as with margins.
Exercise 38
Let's give the paragraphs on our pages a small text-indent, perhaps 2%.
That shouldn't have been too difficult - here is my modified paragraph statement.
p {
margin-left: 5%;
text-indent: 2%;
}
The first line of all our paragraphs will be indented by 7% (margin plus text indent) whole subsequent lines in a paragraph will be indented only 5% (margin only).
Let's save our style sheet, then see what happens in the browser.
Snapshot 27: Front page with text indent and margin on paragraphs
The page looks a lot better, but one thing you might notice that looks a bit strange is the <blockquote> element in the middle of the page. It's being drawn with a margin defined by the browser itself, which obviously isn't the same as the margin we have set for paragraphs. Let's do something about this by defining our own margin for <blockquote>s. At the same time we can give it a background-color and border, to make it stand out a little more.
Exercise 39
Create a type selector to select <blockquote>s. Give it a margin-left of 7%, so it will line up with the first line of the other paragraphs. Drawing on what you learned in the previous exercises give it a background-color and a border as well.
My example looks like this. I've chosen a quite pale background-color, and a border of 1px. Small pixel values tend to work better for borders on small blocks of text like this.
blockquote {
margin-left: 7%;
background-color: #ffff99;
border-style: solid;
border-color: black;
border-width: 1px;
}
Fantastic product, I've gone from knowing nothing about web-design, to creating compliant XHTML and CSS.
And in the browser, you'll see that blockquote looks a lot better, though in your own time, you might want to put a bit of padding on it as well.
Snapshot 28: Front page with styled blockquotes
That's the end of our section on introductory CSS page layout. If you play around with them a bit you'll see that the margin, padding, width and border properties are simple to use, reliable, and very effective when used with just a little imagination.
Links with class
Different types of links
One of the last major practical aspects of CSS we'll learn about, before we turn our attention to some real world design and compatibility complications and techniques, is how to give different appearance to different kinds of link.
For example, often a page will contain links to other pages at the same site as well as links to other sites or "offsite" links. You might want to make these links look different from one another.
We can think of these as different classes of link. Sounding familiar? By combining class selectors and link selectors, we can create different appearances for different kinds of link. As with all our other styles, the aim of this is to make our pages more usable, not simply "more attractive".
Combining link and class selectors
Exercise 40
Let's firstly go back to our HTML, because we'll have to give some link elements a class attribute.
On the front page of our site (index.html inside the directory called spice_emporium_site) we have an offsite link to Amazon.com. Our first step is to add the appropriate class attribute to this link. I think the obvious thing to do is to give it a class of "offsite".
Just add it in after the href attribute.
<p>However, <em>The Spice Emporium</em> is more than just an online catalogue. At the site you can also find extensive information about the spices we sell, as well as recipes from around the world that put those flavors to work. You can even buy a recipe book, thanks to our partnership with <a href="http://www.amazon.com/index.html" class="offsite">Amazon.com</a>. But first, here's a little bit about us.</p>
Close and save this page. Now all we have to do is a bit of work in the style sheet to make this link look different to the onsite links. Remember too, you'll have to create a selector for each of the different link states.
Exercise 41
Let's do each in turn. We saw that classes can apply to any element, not just <div>s and <span>s. What is the selector for a paragraph of class offsite?
You should remember that it is p.offsite.
Making selectors for links of class "offsite" in the four different states is basically the same. We just add the class before the pseudo class. The pseudo class is the :visited, :hover (and so on) bit.
figure 18: class plus link selectors
It's quite straightforward. Normally, we add :link to select a link in the link state, :visited to select a link in the visited state and so on. Now, we just add :link etc. to the whole link plus class selector. In effect, we'll be selecting a.offsite in the various states.
Let's make four new statements for links of class "offsite" in each of the four link states. For now, we'll give them empty declarations (no properties.)
OK, this should be getting familiar. You should have something a lot like this.
a.offsite:link {
}
a.offsite:visited {
}
a.offsite:hover {
}
a.offsite:active {
}
Exercise 42
Now all we need to do is to add properties to distinguish between these offsite links and the regular links in your site. Here, you get to use the full palette of properties we've covered so far, so it's your chance to be creative.
Let's get to work! Here's what my code looks like
a.offsite:link {
background-color: black;
color: white;
}
a.offsite:visited {
background-color: black;
color: white;
}
a.offsite:hover {
background-color: #0099cc;
color: white;
}
a.offsite:active {
background-color: #0099cc;
color: black;
}
And here's how it looks now in the browser
Snapshot 29: Front page with offsite links
The link to Amazon.com now looks quite different to the rest of the links on the page.
Practice
There are a couple of other pages on the site with this kind of offsite link, but they won't show up like this until you give them a class of "offsite". You might like to do that now
- link to Amazon.com on the
books/index.html - external links on the
recipes/index.html
Next
In week 10 we'll look at
- Descendant selectors
- The display property
- Browser default values
- Shorthand property values
Don't forget to get an RSS or email reminder.
Got a question about anything you've just read? Check out our forum.
