OSNews

	<a href="http://www.somepage.com">text about somepage</a>

Again, the only thing that is actually displayed in the browser is what stands between the tags. In the opening tag, you tell the browser where the link actually goes to. Quite simple, isn't it? You will need "a" tags to "weave" your websites together: linking to another document in the same folder would work this way:

	<a href="dog.html">View more information about my dog</a>

That doesn't restrain to websites, you can also create simple mailto-links, by using

	<a href="mailto:someone@somewhere.com">mail me!</a>

Be careful, these links only work if your viewer has a mailprogram that the browser can call! Now the only thing that's left is "img" (obviously for "image"): we have already learned that HTML is a markup language. So, we can't simply put a picture into our HTML-file. We'll have to put the picture somewhere and tell the file where it is. The according syntax would be:

	<img src="dog.jpg" alt="my dog!" />

Explanation: "src" ("source") tells the browser where the picture is, the information in "alt" is displayed when the picture can't be accessed, or by text-only browsers. One word about the trailing slash: XHTML 1.1 requires you to close ALL tags, even those that are standalone-tags like "img". So, you'll have to write <img src="blah.gif" alt="blah"></img>, but you can do this a bit shorter by using the above syntax - space and slash. The only other item of our list that needs this special syntax is "br", which should always be written <br />.

So, now, we know the basic ingredients of a HTML file. I encourage you to view the source code of my website, it will be much clearer now. I used "dl" and "dt" ("definition list" and "definition title") instead of "ul", but that's a matter of choice. I added a comment into the body so I don't forget how things work. It's generally a good idea to use comments. They are added within the "body"-section by using <!--comment-->. Pretty arcane, eh? Well, once you've remembered that, it's easy. The browser will ignore everything between the opening <!-- and the closing --> when rendering the page. On another note, as you can see in the end of my code, it's easily possible to use images as links. The syntax should be logical to you (if this was a good article until now):

	<a href="http://somewhere.com"><img src="picture.png" alt="picture" /></a>

Now, you have a basic introduction into HTML, but, as a matter of fact, we haven't done any actual designing yet. Let's get it on! First, we go back to the "head" of our file. I have talked about the "link"-tag, that goes to a stylesheet.

	<link rel="stylesheet" type="text/css" href="link/to/your/stylesheet.css" />

Now it should be a little clearer what it actually does: it's a standalone-tag, so it needs the special closing that "br" and "img" have. The "href"-part should also be clear now, it works just as in a normal "a"-tag. So, we have to put our stylesheet exactly where this reference tells our HTML-file where to expect it. We also define a type "text/css" (this is just standard).

The big advantage of a stylesheet is that we have a central place to control the design of our website. Your website can be composed of thousands of HTML-files, as long as each of them has this link-tag in the head, you control their design from within a single file. HTML is only here to structure the information. Thus, HTML mostly consists of tags for headings, paragraphs, lists, tables, divisions. The clearer the structure of your document is, the better. Stylesheets on the other hand are there to design all these elements. Now, we'll have a short look how stylesheets are constructed. Stay with me, it's a lot easier than you might guess!

	/* Stylesheet for my new Website */
	body {margin:0; font-family:serif; background-color:red;}
	h1 {font-size:24px; text-align:center;}
	a {text-decoration:none;}
	#header {position:absolute; left:20px; top:20px; width:300px; height:50px; 
		border:3px solid black;}

Let's clear all this up: first of all, comments in stylesheets are added by /* and */. That's different to HTML-files. Sucks, eh? Well, unfortunately, there's nothing I can do about it... The basic syntax of a CSS-entry is item {attibute; attribute;}. In the first row, for example, we tell our browser that it should use serif-fonts for the whole "body", that our HTML-file has a red background and that it has no margins (you will want to set that to 0 to be sure that your website starts in the upper left corner, most browsers will set a margin of 10 pixels by default if you don't set it explicitely). The next row defines some styles for our "h1"-headings: the font-size should be 24 pixels and the text should be centered. Then we have a very popular definition for hyperlinks: "text-decoration:none" is used to get rid of the underlines of links. Starting to get it? Well, the last one is a little different: remember the "id=header" we used for our first div? Well, with the # in front, we now refer to exactly that division: we tell it something about its positioning, its width and height. I don't want to go into detail too much because I don't want to overwhelm you with CSS commands. There are not too many of them, but you'll have a far easier time with a good book about CSS on your desk (preferably one you even have read once). Trust me, as soon as you have grasped the idea of CSS (which you probably have right now, because, refreshingly, there really is not much more to it than what I have told you), it's easy to read through a small book and get to know all the commands. Again, there are only a few really important ones: margin (distance from an items border to the next item) and padding (distance of the item towards its own border), border (self-explanatory, I guess...), position, top, left, width, height (to put an item somewhere on the page), font, font-weight, font-size, font-family (for assigning special font properties), color, background, text-align are basic examples.

A word on the "cascading" part of the name: it is, for example, sufficient to tell your CSS something like: body {font-family:verdana;}. Your browser will assign the verdana font family for every item on the page, you don't have to repeat this for "h1", "p", "a" or whatever. If you, however, decide that you want arial for your hyperlinks, you just add a {font-family:arial;} to your stylesheet. Your page will now still be all verdana, with the exception af the hyperlinks, which will be in arial.

In the end of this article I want to illustrate what is possible with stylesheets on the basis of an example that I used for my website. Let's look at the code first. In the HTML-file, we merely have:

	
	<div id="header"><h1>/home/chris</h1></div>

In the Stylesheet, we have:

	#header {position:fixed; top:0px; left:0px; height:136px; width:100%; 
		background:url("background.jpg") no-repeat; 
		border-bottom:4px solid #a00;}
	h1 	{font:italic bold 32px serif; text-align:right; 
		margin:10px 10px 0 0; color:#a00;}

Explanation: while I only use two tags in my HTML, a "div" and a "h1", I use the stylesheet extensively to design the header and the heading: first, I assign a position to my header, a height of 136 pixels and a width of 100% (yes, percentages are possible). Also, I define that the header-div should use a jpg as background. "no-repeat" means that this jpg should be displayed just once (you can also use a small picture and repeat that over and over again to get some kind of a muster). Finally, I define a border on the bottom of the div with 4 pixels, solid (versus dotted, dashed and a few other possibilities) and this border should be some kind of red. Then I define for my heading, that it should have an italic, bold, 32 pixels big serif-font. It is text-aligned on the right side, but with a margin of 10 pixels to the top and the right (and zero pixels to the bottom and left, this works clockwise), so that it doesn't "glue" to the upper, right corner of the browser-window. The heading gets the same color as the border of the div, a00. So, with some heavy stylesheet use, I was able to completely seperate design and content. If i want to redesign my website today, I do not have to touch any file except for the stylesheet!

Almost done, there are just a few more things that I want to mention at the end of this article. You can use more than one stylesheet at the same time. You can, for example, use a second stylesheet to control the print layout of your site. Just add this to your header:

	<link rel="stylesheet" title="standard" media="screen" href="screen.css" type="text/css" />
	<link rel="stylesheet" title="print" media="print" href="print.css" type="text/css" />

We just added a "media"-attribute. A browser uses the first stylesheet to display the site on the computer monitor and the second stylesheet on the printer. Both styles may look completely different and can exist completely independently from each other. You can even add special divs (or any other items for that matter) that get the attribute display:none;, so they don't get displayed either on the screen or on the printer. The possibilities are endless. A final tip for all webdesigners out there: test your code constantly. Often, when I do something difficult, I just add one attribute at a time and immediately look what changes on screen occur before I change/add another attribute. Probably the biggest advantage over designing with a WYSIWYG-tool is that you retain complete control over the design and creation process. Arcane errors that are difficult to debug almost never happen.

So, that's it for now. Some more eyecandy can be found at csszengarden.com, another interesting site with great articles is alistapart.com. I really hope that some of you could put this to good use. Thanks for your attention!

About the author:
Christian Paratschek is 28 years old and lives in Vienna/Austria/Europe. If you liked this article, go check out the other stuff he wrote here ... but if you've made it this far, you probably already have visited this site anyway :-)