razorBlog
Web Design Drives Me Nuts
Slow Down There
Next we need to add a reference to a Cascading Style Sheet file (CSS file), this will be the place where we will alter our pre-defined tags style and also define our personal tags. The style sheet basically holds a list of all the tags we use in our XHTML/HTML file, and tells the tags how to behave, this can be anything from font style and size through to layout of the tags, where to place it on the web page, which in turn lays out your web page. Think of it like this, your web page is like a desk and each tag is like a sheet of paper. By telling the tags how they look, act, and where they should be we can move around the bits of paper, change their style and type, put smaller bits of paper onto bigger bits and display the information such that it is readable and flows in a sensible manner.
One of the benefits is when using style sheets, you can change the whole web site look and feel with one file, this is one reason why we use templates a lot, to get consistency from page to page. Another benefit is that we can craft one style sheet for the web, one for mobile devices and one for printing. In basic terms it is better to have one style adapt to all areas but this is past the scope of this book.
So lets create our CSS file and link it to the html file, this way when the html home page is loaded up in a browser, it will load the CSS file and apply the style to the marked up html file just as it is intended to be (Hyper Text Markup Language).
Go to your favourite file browser and browse to your websites/templates folder were your html files are, create a directory called style. Open your raw text editor and save as main_layout.css inside the new style folder, again don’t save this as a text file and don’t forget to save it as all files and not text document if using notepad for windows.
Now open up your xhtml.htm file in your raw text editor, and we need to add the link tag to the CSS file in order to connect it to the CSS file that contains the style to the page.
<link rel="stylesheet" type="text/css" href="style/main_layout.css" title="main layout" />
Remember where this needs to go, well it is html code, it is information about the web page and it is not content, so it needs to go into the header part.
Ensure when putting in link files, that the path to the file is written correctly, imagine it like this, the XHTML file is trying to access another file (the CSS file), so you need to work out the path correctly. The path is relative from the XHTML file, meaning it is referenced from the file that is trying to link to the CSS file. If your CSS and XHTML files are in the same folder, then you simply put in the CSS file name as the href, if it is in a sub folder, then this needs adding like our example in the style folder.
You should now end up with the following in your html file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Page Title Please Change</title>
<link rel="stylesheet" type="text/css" href="style/main_layout.css" title="main layout" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="put, lots, of, words, describing, your, web, page, here," />
<meta name="description" content="This is a nice description of your site" />
</head>
<body>
</body>
</html>
Like I said earlier, everything has it’s place, as a rule my order of header items is title, link, metadata, script. We are not going to use script in this guide so we do not need to add this in.
Save the file again, and you now have a second XHTML template file with title and metadata that will need changing to reflect the web page you are creating and a link through to the style sheet which is always called main_layout.css and is always stored in a style directory inside the main directory.
There is no real need to create a CSS template, as there is only one file for all your pages, every page relates to this one file, and the style is written as we write the XHTML.
When you get more proficient it is possible to write a whole XHTML website without the CSS, then write the CSS afterwards, but this takes skill, as it is hard to envisage how the site will structure itself, is hard to determine what tags are needed where and also if your data breaks your layout. So for ease I recommend writing the CSS as you go along.
Now we have a basic raw XHTML template and one with the added extras, we are going to write our home page. From this we will then use the home page as a template for the whole site copying structured consistent code to every page. This approach will seriously cut down on the amount of coding errors that creep in if each page is hand coded.