Writing your own Web Page, Style Sheet Tutorial

A Free Crash Course in Web Design using Web Standards

by Phil Markey

Welcome back to my Free Web design tutorial using Web standards & Style Sheets

So far in lesson one we started from scratch building the basics of a Web page. Then in lesson two we completed a basic document. I then introduced you to the power of Style Sheets in lesson three. Lesson four was intense block-level layout code. We're now going to look deeper into style sheets.

How are you getting on with the course so far? We still have quite a lot to learn and I'm estimating that we're not even halfway through it all yet.

No obligation!
Via Paypal

Right at the start of lesson one I mentioned that there would be a Paypal donations button to come on a later page for those people who felt that the course was a good one and would like to make a small donation. Well, I'm putting it here on this page. You're under no obligation to do so! Only if you really want to! But it certainly would help me towards by bandwidth costs, and I would be most grateful if you did.

Lesson 5

Well, actually before we can look more at style sheets we need to look at the hypertext link object and make our navigational menu. A hypertext link is coded like this:

Pretty simple really! <a href=" your hyperlink URL (no spaces) "> your word or words that become the link text </a>

A URL means Uniform Resource Locator, a long name for a link. If you're linking to an off-site (off your Web site) resource then you need to write the complete URL in the link including the http://. If you're linking to on-site pages then you can use the full URL or you can use a relative URL where you only name the page you're linking to relative to where you are now. I.e. <a href="somepage.html">link text</a> without including the http:// or the domain name. I'm linking to pages in this tutorial in that same manner. This method works fine when all your pages are located within the same folder. This can become difficult when you're linking to pages that are not contained within that same folder. If the page you want to link to is in a folder which is inside the folder you're in now then you would have to include that folder in the link. For example: <a href="foldername/somepage.html">link text</a>. If the page you're linking to is inside a folder that is just outside of the folder you're currently in then you link to that like this: <a href="../somepage.html">link text</a>. It can become frustrating when you get this wrong and it might be easier for you to always include the full URL for your on-site links.

You can make a link for someone to send you e-mail like this:

This type of link when clicked will invoke the default e-mail application to open on the user's computer and insert your e-mail address in the send-to bar so the user can send e-mail to you.

TIP - Be warned! If your e-mail address is found on your Web site then there are unscrupulous people out there sending out Web spiders to collect e-mail addresses from sites where they then sell them on to spam mailers. Sooner or later you will start receiving junk mail in your mailbox.

Let's get on and build our menu.

As you can see we've used an unordered list and in it we've listed all our links. I've given my list a heading called "Menu", and I've placed all this in a DIV which has an ID allocated to it called menu. We'll discuss IDs in just a minute. We've placed this on our page just before the second paragraph. That's all simple enough! Let's look at the style sheet:

Well the heading in the menu was a small H5 tag. We've removed all the white space from all around it so that it sits close to everything else. Next we have #menu. The # is how we reference an ID. There can be only one ID with the same name in the whole document. Therefore, you only allocate IDs to important things that don't get repeated. Use the CLASS tag for things that get repeated not an ID tag. We only have one menu and nothing else is called menu so we give it an ID.
In the menu DIV we've done an odd thing with the margin. Remember, the margin is the white space surrounding something. Like in the H5 above we've removed all white space, but for the menu DIV we have margin: 0 10px 0 0; this says top = 0, right = 10px, bottom = 0, and left = 0. it's just another way of doing it where it gives us more control. Then we've added padding: 5px;. Padding is the white space inside something. Just like the margin on the outside. And therefore, we can also do the four sides' extra control just like we did with the margin if we want to. We've done a similar thing with the border i.e. border: 1px solid rgb(0,84,0);. This is border: thickness style colour. The middle one style can be none, solid, dashed, dotted, double, groove, inset, outset, & ridge.

Now you know an Unordered List has bullets and a text-indent by default, well we've removed all that. No bullets list-style-type: none;, and for the text-indent we've gone minus 40 pixels to shift it back over to the left. Why do we create lists and headings and then forcibly remove all their characteristics? Why don't we just make normal text styled the way we want it? What you have to understand is that you don't know what crappy browsers people are using to view your site. Their browser might not be able to read styles and would therefore display your page in its ugly plain html. You have to be able to display your content in a properly laid out way for older browsers to read.

Then we have the LINK styles. A hyperlink can be seen in 4 ways at different times normal, hover, active, & visited. You know after you've clicked on a link it becomes a different colour to tell us we've already been there. Well, they change while we hover our mouse over them and while clicking on them too. Here we've said that a normal link and a visited link display the same colour and with no underline. Then we've said that when we hover over it with our mouse, suddenly the underline returns to confirm that it is a link and not just coloured text.
Now you've got to be careful with link styles because people usually like different styles of links on the same page and if you just used the one generic style then all your links would look the same. Therefore, here we're saying that only the links in the menu are styled like this. Other links elsewhere on the page would look different. We do this by accessing the Document Object Model (DOM). The DOM suggests that everything on the page is contained inside something else and all you have to do is know that hierarchy to be able to identify a particular thing in the document. So what we've done to access only the menu links and no others is to say links in a list or a LI containing a A. All you do to recreate the hierarchy is to start with the higher hierarchy in this case the <li> tag then a space and the thing you want that's contained inside, the <a href tag.
We've put both the normal link and the visited link in the same style by separating them with a comma. This is just to save writing 2 lots of code. The hover link has it's own style because that is different.

Now you've made your page and made the style to go with it. Before we go on, I've made a few little changes to the page template. I've added a DIV called body at the top level just inside the BODY tags like this:

This is an extra container that we can add some extra style to. Our style is like this:

I've also removed the style from our picture and moved it to the style sheet. This is optional, it makes no difference if you do this or not, it will look the same either way.

And added it to the style sheet.

I've also added a copyright to the bottom of the page.

And made the style sheet.

Here is the whole style sheet that we've made so far style1.css:

Now lets look at what we've done!
We're going to load a page in a separate browser window by right-clicking on the link and choose "Open in a new window". When you're done just close that window to come back to the lesson. The page is one that I've made using this style and layout. The text that I've written for my article is about the cold-hardiness of palm trees, called "Growing Palm Trees in the UK". You're not there to read the article, you're there to look at the style and layout that we've just made.

Before you go and look at that I must tell you that on first opening, the page has no style whatsoever. You can see how the basic layout will be in an older browser window. At the top of the page I have added a few links - No Style, Our Style and Yahoo Style. Our Style is the basic style that we've built in this tutorial, clicking on that link will inject that style into the page. No Style will switch all styles off again. Then I've made another style sheet using the style that Yahoo uses in their info pages. All we're doing is injecting different styles into our document. It's not 3 separate documents it's exactly the same one called "uk-palmtree-hardiness.html". You'll see just how dramatic the style differences are. Right-click here to load my article in a new window You should really have a screen resolution of 1024 × 768 to see the Yahoo style correctly.

Now you've been and seen that, you're bound to have a load of questions! The first question, I'm sure is - How did I get the menu out and up to the left with the Yahoo style? Well, the menu is still there in the second paragraph down. But because we put it in a DIV tag and gave it an ID we have complete control over it. I just changed the style to say:

The position style can be absolute, relative, & static. Relative can be considered normal because it places it in-line wherever you put it on the page. To move it then I would have had to use something like top: -200; & left: -200 to move it up and left, but that would have left a gaping hole after the first paragraph where it was positioned in-line. Static would have fixed it in that place but it would float and wouldn't scroll with all the other things on the page. Static is difficult to control and of-course it doesn't work with the Microsoft Internet Explorer browser. So position: absolute; was the best choice to use. With absolute it floats on the page like it is not part of the rest of the page. The rest of the page acts like it has been removed. I can then position the menu on the page so many pixels to the right of the top left corner and so many pixels down from the top left corner. The only problem with this is if you're not using a screen resolution of 1024 × 768 for your computer's monitor screen size then it will be positioned wrong. You would have to do an awful lot of javascript coding to detect that and correct it. Therefore, the position style can be difficult to use, and you'd be better off making a different layout with more DIVs to control the Yahoo style layout.

Well, you now have the basic understanding and ability to build reasonable Web pages for the Internet. The style of page that we've been building is what we call a white paper or article, it's what most pages are written as. Of-course there are other styles for other functions. But I'm sure you have the ability to design those! The next lesson is an important one, how to write quality copy. You'll be surprised at the things you're doing wrong in your writing, and some of the things to really make your articles interesting so that your readers will keep coming back for more.

Go to Lesson Six

All the best,

Phil Markey
Retired Professional Web Developer