Difficulty:Tricky in places
Version:Expression Engine 1.0: 20040424
Buy My Book!
Update July 2008: If you like these tutorials and would like to read more like these, except updated for ExpressionEngine 1.6 and with tons more information, tips, tricks and recommendations, check out my new book, Building Websites with ExpressionEngine 1.6. Available either directly from Packtpub.com or from your local online bookstore (such as Amazon), this book uses the same clear, step-by-step approach found in these tutorials and walks you from the basics of installing ExpressionEngine to everything you need to know to have an ExpressionEngine website you can be proud of. (No prior knowledge of ExpressionEngine assumed).
This tutorial is going to show you how to improve your own personal webpage using basic , developing your knowledge of templates as we go on. If you’ve followed tutorial 1, you’ll have a plain HTML page with some text. The bits of text should all be logically identified using <div> tags - this tutorial depends upon that. Now, I’m going to show you how to make your boring old HTML page look good.
Background Information
Once upon a time, a HTML page used to contain everything in one place. Each HTML file not only contained the text you wanted to display, but lots of information about how you wanted the text to look. When you only have one or two pages, this isn't a problem. But imagine if you have 50 pages that all look the same. Now, imagine you want to change the colour of your heading. Yes, that's right. You'd have to change it in 50 different places.
To combat this, was invented. A CSS file contains all the information needed to make your page look pretty. And, if you have 50 pages that are all similiar, you can use the same CSS file throughout. Right now, we're going to write a CSS file for our HTML page. However, to demonstrate the versatility of CSS, I'm going to write 3 CSS files, showing you how the same page can look completely different.
When writing in CSS, it's important to note that different browsers and different operating systems can make the same page look completely different. If you use Safari on the Mac to design your page, you may be shocked to find that Internet Explorer for Windows completely ruins your page. As you write, you may want to use a resource like Browser Photo to view what your website looks like in a variety of alternative browsers.
Finally, I can only show you how to write CSS for a basic site in Expression Engine. There are lots of sites with far more information about CSS than I could possibly teach you. To appreciate the full power of CSS, the CSS Zen Garden uses 1 HTML file and displays it in an astounding variety of ways. CSS Layout Techniques offers a selection of excellent CSS examples, as well as lots of other resources for the CSS newcomer.
Instructions
- Step 1: First, we need to choose where we want our CSS file to live. Since your HTML and your CSS are so closely related, it makes sense to put your CSS next to your HTML. So, go back to your page, scroll down to the template group, and hit "Add a New Template".
Think of a template group as a home where your HTML and your CSS can live together in perfect harmony...
- Step 2: Now, you'll want to call your template name something meaningful. Since it's probably going to be the only template for css in the template group, I've decided to call mine "css". Leave all the other options on their defaults as shown below, and hit submit.
- Step 3: Now we have a CSS template, we must be sure to tell the HTML file about it. Edit your index template...
Many people have found this step to be quite a headache. If you're stuck, check out the comments (link at the bottom of the page) for some suggestions that may help. For example, you may need to set the 'type of template' option as CSS in step 2...
- Step 4: Write these commands between the <head> and </head> tags to tell your HTML file where the CSS page is. Where I write 'site/css' in each line, you'll need to replace 'site' with the name of the template group where the CSS file can be found, and you'll need to replace 'css' with the name of your css template. If you don't do this, then the HTML file won't look any different for most of this tutorial. The 'text/css' line should be left as-is, since it tells your HTML file that we're linking to a CSS file written in plain text.
Remember that code in green is used to indicate code that already exists. You can also roll over the new code for additional explanations...
<title>Toast!</title>
</head>
- Step 5: Now before you hit "update" you should make sure that the "Save Revision" check box is ticked. Then, hit "Update" and, at the top of the screen you should see the words "Template Updated" in green at the top of the screen. Your work here is now done, so go back to the Templates window by clicking on the word "Templates" at the top of the screen.
Try to make sure you always save revisions of your templates. That way, if you do something really terrible (and lets face it, we all do), you can just replace it with an earlier revision...
- Step 6: If you look at your index page now (www.yourdomain.com/index.php/site/) you shouldn't notice any changes. See my results and compare them with your page. That's because, although we've given our HTML file some CSS clothes to wear our CSS file is empty. Edit the CSS file and lets fix that pronto...
- Step 7: As a brief reminder, lets identify what the HTML file is made up of. The diagram below shows my HTML file with the various sections coloured: red is my <div id="header">, green is my <div id="content"> and yellow is my <div id="footer">. We also have a fourth zone, which I called outer. We can ignore this for now.
- There are also 3 HTML tags that can also be styled. We have the <p> tag, surrounding each paragraph of text. Then we have two heading tags, <h1> and <h2>. Finally, the <body> tag can also be styled.
- Step 8: Lets start by choosing the fonts of our text. In your blank CSS template, write the following.
Not seeing any changes at all? Then your HTML file may not know where your CSS file is. Return to step 4, and be sure to specify the exact template group and template name for your CSS template.
- Hit update, and if you look at your site (mine is here) you'll see an instant improvement to the headings. You may have noticed that we've listed more than one font. With all this choice, how does a browser know what to do? The answer is simple. The browser will choose the first font in the list. If it recognises the font, it will use it. If it doesn't, it will try the next font. Remember that not all computers will have the same fonts as you do. That's why its best to stick with just a few common fonts, such as Arial, Comic Sans MS, Helvetica, Times New Roman or Verdana.
- The "sans-serif" or "serif" at the end of my lists refers to a class of fonts. When someone doesn't have any of the fonts you've listed, the computer will choose a serif (or sans-serif) font that it does have.
Woah! What are these '#' symbols? Briefly, it applies to any part of your HTML that has the 'id' attribute. So you might have #goat { text-align: center; }, and any element that has an 'id=goat' attribute would be centered. For a more complete explanation of CSS structure and rules, visit www.htmlhelp.com.
- Step 9: Personally, I don't like the way the main text looks right now. You can barely tell my footer apart right now, so lets change that. Since all our text is wrapped in <p> tags, you might think that you just write a font and a size for the <p> tag. However, if we do that, it would affect all our paragraph text in the same way. Since we want our footer to look different, we're going to have to style the "footer" class, and the "content" class.
- Hit update, and if you look at your site (mine is here) you'll see more improvements to the text. Now it's easy to tell which bit is the footer.
Remember you don't have to replicate my site exactly. Perhaps Verdana isn't your favourite font, or you like your text just a little bit bigger? Go ahead! Be different!
- Step 10: Things start to get interesting from here on in. Right now, our toast website has everything aligned to the left hand side. What I'd like to do is start moving things around the page. There are many different places where I can move things, so I'm just going to show you three variations. Try just one, or try them all. First, lets add some margins. Start at the top of your file...
h1
{
font-family: Arial, Helvetica, sans-serif;
font-size: 125%;
}
h2
{
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
font-weight: bold;
}
#content
{
font-family: Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 80%;
}
#footer
{
font-family: "Verdana","Arial","Helvetica",sans-serif;
font-size: 65%;
}
Notice how I've tried to order my CSS file. At the top are the HTML tags, followed by my own <div> tags. The tags themselves are ordered in the order they appear on the page. This is to make it easier as the CSS file grows...
- Hit update, and look at your site (mine is here). You may not notice much of a change - things have moved to the right a little, and down a little, and some of the spacing between the text has changed. With a simple site like my toast site, these differences are of little significance. But, if you're trying to place things in a certain place, it can take quite some fiddling, especially since everything affects everything else. One persons top-margin runs into another persons bottom-margin.
Follow either path a, b or c but if you mix them up, you may get different results to me...
- Step 11: Lets face it, the website still looks boring and that's because we haven't included any images. So, I visited istockphoto.com and downloaded a picture of some toast. I find istockphoto.com provides excellent photos for every occasion at very competitive prices. However, you may have your own picture handy, or if you don't then you could also look for some free ones in a search engine. However, be sure that you have permission to use the photo from the copyright holder. If you want to use the toast photo, please download your icensed copy rather than using mine.
- To show you the variety of options available to you, I've decided to show you 3 different paths you can take right now, imaginatively called path A, B and C.
- Step 11a: In this path, I have decided to incorporate my slice of toast as the centre-piece of my website. I do this by using the background tag.
body
{
margin-left: 5%;
margin-right: 5%;
}
- Step 11b: In this path, I have decided to keep things simple. I'm going to replace my heading with a logo and separate the footer with a horizontal line. Right now, lets load an image into the heading. You probably want to use your own company logo rather than just using mine. Still in the CSS file...
#header
{
padding: 0;
margin: 0;
text-align: left;
}
- Step 11c: In this path, we're keeping things simple too. When starting out, simplicity is often the best approach to take. Anyway, I'm going to replace my heading with a logo and separate the footer with a horizontal line just like in path b. However, I'm going to use a different logo, and keep it to the left. I'm also going to indent the content and the footer in preparation for a left-hand menu (in a later tutorial). Right now, lets load an image into the heading. You probably want to use your own company logo rather than just using mine.
#header
{
padding: 0;
margin: 0;
text-align: left;
}
- Step 12a: If you look at my site now, you'll probably notice that my black text is partially obscured by the dark slice of toast. What we now want to do is add a white background to the affected #content zone. While we're about it, I'm going to make sure the #footer background is transparent. You'll see why soon. By now, you should have a good idea about how to do all this, but don't worry, I'll tell you if you don't.
#content
{
font-family: "Verdana", "Trebuchet MS","Arial","Helvetica",sans-serif;
font-size: 80%;
padding: 5px 5px 5px 5px;
}
In paths 12b and 12c, we hide the h1 text. However, this means that any text you write in <h1> tags will be hidden. This is okay though because you're not supposed to use two of the same heading in the same page. Instead, you should style another heading (in this case <h2> to look like a <h1> heading...
- Step 12b and 12c: If you look at my path b site and my path c site, you'll notice that although the logo displays correctly, it overlaps the original heading. Therefore, we need to get rid of the heading. Wait! Before you head into that HTML file, think about what people will see if they have images turned off (perhaps they're browsing from a mobile phone). They won't know what page they're on. So, instead, what we do is is hide the heading. That way, visitors using devices that can't display CSS will see the text and everyone else will see the image.
h1
{
font-family: Arial, Helvetica, sans-serif;
font-size: 125%;
margin-top: 25px;
margin-bottom: 25px;
}
At this stage you will find the instructions aren't applicable to your exact site. You will need to experiment with the tags I have told you to get the effect you want...
- Step 13a: If you look at my site now, you'll see there are still problems. My text just sprawls across the page, slicing my toast in a very unattractive manner. So, what we're going to do now is just play around with margins and paddings to get my text to sit on the toast.
#content
{
font-family: "Verdana", "Trebuchet MS","Arial","Helvetica",sans-serif;
font-size: 80%;
padding: 5px 5px 5px 5px;
background-color: #fff;
}
- Step 13b and 13c: Have a look at my my path b site and my path c site. In path b, we're almost done. In both paths, we just need to put that separation line above the footer.
#footer
{
font-family: "Verdana","Arial","Helvetica",sans-serif;
font-size: 65%;
}
- Step 14a: If you look at my site now, you'll see that the content is in the toast! However, the footer is still obscured by the toast. If you remember from step 11a, the background image is fixed to the top of the browser. This means that we can specify exactly how far the footer should be from the top of the browser to appear below the bottom of the toast. Lets do that now.
#footer
{
font-family: "Verdana","Arial","Helvetica",sans-serif;
font-size: 65%;
background-color: transparent;
text-align: left;
}
- Step 14b: That's it. We're done. Check out my path b site to see where we've got to. We've completely changed the look and feel of our page without altering the underlying HTML. Check out paths A and C just in case you want to incorporate anything from there and don't forget the summary at the bottom.
- Step 14c: We're not quite done. Check out my path c site to see where we've got to. We've just got to indent the content and the footer to make room for a potential left menu (in a future tutorial). So, back in the css file.
#content
{
font-family: Verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 80%;
padding: 5px 5px 5px 5px;
}
#footer
{
font-family: "Verdana","Arial","Helvetica",sans-serif;
font-size: 65%;
text-align: center;
border-top: 1px solid #999;
}
- Step 15a: If you look at my site now, you'll see that the footer is under the toast. We're almost done, but as a final touch lets give our subheading some style by adding a border.
h2
{
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
font-weight: bold;
}
- That's it. We're done. Check out my site to see where we've got to. We've completely changed the look and feel of our page without altering the underlying HTML. Compare this picture of the different zones (header, content, footer) with the image at the start of the tutorial. My summary has a few suggestions for further reading too.
- Step 15c: That's it. We're done with this path too. Check out my path c site to see where we've got to. We've completely changed the look and feel of our page without altering the underlying HTML. Check out paths A and B just in case you want to incorporate anything from there.
Summary
There are lots of resources out there to help you as you begin your journey with CSS. A good start is www.pmachine.com which has lots of links to CSS templates you can adapt as your own. You can find some example templates at pmtemplate.kartar.net. Finally, if you stuck, www.pmachine.com also hosts a design forum where you can post your questions and queries.
In our next tutorial, we’ll write a second page using the same CSS file and link to it.
Got something to add? Add your comment to the 13 already made
Written by Leonard on Tuesday 4th May 2004
