Making a template, Part 2

So far we’ve created an XHTML (html) template file through which we will show all of our content on the new website. And we have made a basic CSS (Cascading Style Sheet) file which will contain the styling attributes that will control the visual appearance of the website.

Let’s leave the template file aside for now and add some attributes to the CSS selectors (we created in the CSS file earlier) in order to make the layout visible. We started out with the intention of making a two column, 800px-wide layout with a header and footer, so lets do that and – at the same time – add the attributes to the basic selectors we added in step 1.

Notes:
– An id is always marked with a # in the CSS document (eg #container).
– A class is always marked with a dot . (eg .classname).
– The overall (total) width is influenced by several attributes such as border, padding and margin, on each and every single selector.
– Use the same unit for sizes throughout the CSS (either em OR px, not both). Using px on width and border-size ensures their width settings will remain fixed.

Step 2 – Applying the basics

1. The Star declaration is used to ‘zero-out’ the margin and padding by default. The ensures consistency in the major browsers. IE and Firefox, for instance, do not always treat margin and padding the same way, so we need to specify the settings we want to start with regardless of what browser the viewer uses.

* { margin: 0; padding: 0; }

2. The body declaration contains the general settings meant to be inherited by (applied to) nearly every element in the template. If we need to apply different styling to specific elements, we can do that later on. Here we general styling such as: font-color, font-family, font-size, and (of course) other settings that would apply only to the template’s body section… like those affecting the web-page background (background-color, image and so on). Using text-align here also ensures all text elements in the template will be left-justified (ragged on the right).

body {
color: #333;
font-family: Arial, Verdana, Sans-Serif;
font-size: 0.7em;
margin: 0;
background-color: #fff;
text-align: left;
}

3. #container is important because it controls the overall width of the complete web page. So we give the container the width attribute and set it to 800px. We also add the margin attribute (read from left: top | right | bottom | left). We use auto on left and right side here to make sure it stays in the middle of the browser’s viewport. We’ve added 1em to the top margin to move the top of the template down just a bit.

#container {
width: 800px;
margin: 1em auto 0 auto;
padding: 0px;
background: #fff;
}

4. Heading tags used in our template and content may require specific styling, such as padding, margin, or anything else that we want applied to these headings. For example, we’ll apply the following to all headings:

h1, h2, h3, h4, h5, h6 { padding: .3em 0 .3em .5em; margin: 0; }

We will then apply size-specific settings to three heading types. H1 starts off as the largest with each other becoming progressively smaller in size.

h1 { font-size: bold 1.9em; }
h2 { font-size: bold 1.2em; }
h3 { font-size: bold 1em; }

5. The parapgraph tag can be applied to any content when entering it in through the new content admin panels and it is applied to much of the content generated by the functions in snews.php. Styling is applied to the p-tag with the following selector. Again, we’ve already set the font-family, font-size and text color in the body tag and – as we do not want the paragraph tag to differ in anyway, we do not need to add settings for that here. We just add some padding and margin to maintain some whitespace.

p { padding: .5em; margin: 1em; }

6. The link tags – again, the font characteristics are already set but… what about color? Link colors should differ from the general text color so they are easier to spot on a page. We can give them a different color and have them underlined. We can also make a link change color when hovered over and when it is the page it links to (the current page, or even a current category) is being viewed. We’ll change the color for each of these states in the following examples, and all links will be underlined as well:

a { color: #993300; }
a:active { color: #999999; }
a:hover { color: #121712; }
a.current { font-weight: bold; }
a, a:active, a:hover, a.current { text-decoration: underline; }

7. The img tag wraps every image used site-wide. The img selector is used to remove borders that Internet Explorer adds by default to any image:

img { border: none; }

8. Layout Selectors During Step 1 we created the following selectors and now it’s time to declare some styling with them:

#header {}
#content {}
#leftcol {}
#footer {}

We’ll add more to these selectors than we’ve added to the previous ones… one at a time. Let’s begin with #header. The header will display full-width across the top of the template layout, so it needs to be (including all margins, paddings and borders) 800px wide… right ? And… if we add a 1px border to wrap the header in, the left and right sides will be a total of 2px thus making the width setting to be: 800px – 2px = 798px. We’ll then separate this from the following by adding a border of horrible color (just for visibility purposes). We’ll be using the float attribute on some of the divs here so… if you’re wondering what float does check out this Float Tutorial.

Note:
– Normally we use hex-codes for colors but, for simple border illustrations here we’ll use plain text words for colors. Most good image editors will display the hex color codes in the color picker.

#header { width: 100%; border: 1px solid red; }

Next, we’ll deal with leftcol. Within the template code, this one will have to be placed alongside with the content (as in two columns) and, therefore, it will bea floated division. We’ll make it roughly a third of the total width (300px) and surrounded by a border which makes… Yes, 298px plus the border equals 300px.

#leftcol { float: left; width: 248px; border: 1px solid green; }

The content is the next div to be positioned, and similary to the leftcol division we’ll have to make this floated as well… so they will be positioned beside each other.

#content { float: left; width: 548px; border: 1px solid blue; }

The footer is the last div left. This one is supposed to appear beneath the two columns, and across the layout. We add a border to this asw ell, making the width setting a little less than 800px to compensate for the two 1px borders (left and right). And, in order to escape the float coding, we add a clear attribute to make sure the footer appears beneath the two columns.

#footer { clear: both; width: 798px; border: 1px solid purple; }

There. We now have a simple yet plain looking two column layout with a header and a footer. In order to jazz it up a little, we might add some margins to the last divs (bolded in the following). In the #header we add a bottom-margin in order to move all things benea that down a bit. In the #leftcol and the #content we add both bottom and right margin in order to move down #footer and separate the two columns a bit. Also note that, when doing this, we add to the total width of it all, so we need to reduce the width of the two columns (bolded). We now have a complete CSS file that looks like this:

* { margin: 0; padding: 0; }
body { color: #333333; font-family: Arial, Verdana, Sans-Serif; font-size: 0.7em; margin: 0; background-color: #efe; }
#container{ width: 800px; margin: 1em auto 0 auto; padding: 0px; background: #fff; }
h1, h2, h3, h4, h5, h6 { padding:.3em 0 .3em .5em; margin:0; }
h1 { font-size: bold 1.9em; }
h2 { font-size: bold 1.2em; }
h3 { font-size: bold 1em; }
p {padding:.5em;margin:1em;}
a { color: #993300; }
a:active { color: #999999; }
a:hover { color: #121712; }
a.current { font-weight: bold; }
a, a:active, a:hover, a.current { text-decoration: underline; }
img { border:none; }
#header { width: 798px; border: 1px solid red; margin:0 0 0.5em 0;}
#leftcol { float:left; width: 245px; border: 1px solid green; margin: 0 0.5em 0.5em 0; }
#content { float: left; width: 545px; border: 1px solid blue; margin:0 0 0.5em 0; }
#footer { clear: both; width: 798px; border: 1px solid purple; height: 40px; }

If you now try this layout in your browser, it will be quite empty and not showing much other than the two column layout on a pale-blue background, much like this one. So now we need to add the functions from sNews that we want to display. Which is covered here.

As noted at the outset, this tutorial provides a simple example of how we go about making a pure, CSS-based template. The rest – the ideas and design of the layout – is left up to your imagination and how you make use of your new-found website design skills. You can fuel your imagination by searching the web for inspiring CSS-based tutorials and examples and by trying out the ideas you come across. Just keep on working the design to come up with the layout you’re satisfied with.

Remember… nothing comes for free in this world (except sNews) so you’ll have to practice the Three Ps – Practice, Practice and Practice to reach your goals. And, if you get stuck and you don’t know what’s happening, you can always visit the forum and ask for help in the CSS boards.

Have fun – Patric & Keyrocks.
(Last update: Nov.18.08)

20.08.2007. 11:22