Archive for April, 2008
Chapter II (Part 1): Now in colour
Saturday, April 26th, 2008
Chapter I is here.
Last time, we made the most bare bones site we could without using tables. In order to accomplish this, we used CSS to style our division tags to a 3-row page. But we didn’t do much after that.
If you look at the site we make, you’ll notice that the columns are fairly short, and if you have Firefox Web Developer plug-in, you can see how small the block elements are. Well, we don’t want that. We want spanning columns, banners on the top, and a small footer with some decoration and small font. So, we’re going to make that happen.
(NOTE: While you can probably tell from my site that I do have a sense of design, my work day is mostly writing code and reading up on Frameworks and programming languages to build web applications. I’m sure that sounds as exciting as an episode of Cops , but I’m not going to really mess with a sleek and clean design on these pages. What we’re going to produce is something like what’s below:)
It’s time to jump to the <style> tag in our code. Cut the code in between the tags, create a new document in a text editor, paste the code, and save it to wherever your test page is and name it style.css. Now go back to your HTML code and remove the <style> tags and replace them with this:
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
This will externally call a CSS file. Alternately, you could keep the style tags and import CSS (which I won’t get into the specifics on here), but I don’t prefer that method. You’ll see why in later chapters.
So why did we create a link (not anchor, which is for hyperlinks) reference instead of adding to the style in the header? Once you become more familiar with CSS and file size reduction, you’ll see why external linking is better than embedded CSS. Of the four attributes I’ve put on the tag, rel , href , and type are the most important; the latter two tell respectively the file name and type. The media attribute will be explained later.
If you check your site after this, you’ll notice that it still looks the same as it did before. Before we can close the HTML file and head straight to our CSS, we need to add one line of code to our HTML, our Doctype :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Now, we can save and close this file. I will explain the importance of this at the end of this document and a later section on validation and browser problems.
Back at our CSS file, we are going to start adding some style to our background and page. Let’s start with this:
/* style.css */
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* setting the fonts we'll use */
margin:10px auto; /* in this example, there are only 2; 10px applies to the top & bottom, auto applies to the sides */
background-color:#eee; /* a greyish colour. in a 6-digit hex value, if the following value is the same as the preceding, only 3 are necessary (e.g. #112233 can be #123) */
}
What have we done here?
- We set a family of fonts (if a browser lacks the first/preceding font, it will skip to the next until it finds one it can apply; good for people like me who are typing/reading this site in GNOME/Linux). I chose Trebuchet as the primary font because that’s apparently what’s “in” these days…
- Added a margin to the body (so that any tags we add within <body> will start 10 pixels from the top). To keep it short, I only present two values:
10pxandauto. Browsers will process this rule as: margin (applies to all four sides): [vertical axis—i.e. top/bottom] [horizontal axis—i.e. left/right]. There are three other ways to do this:margin: 10px;(applies a 10-pixel margin to all sides)margin: 10px auto 0;(applies a 10-pixel margin to top, “auto” applies a margin automatically (for the left and right) determined based on the width of the browser window. This effectively center justifies our layout, but can be problematic**. 0 applies no margin to the bottom.)margin: 10px auto 0 auto;(does the same as above, but the order of values is applied as follows: top right bottom left. This is across the board for any other CSS attributes, such aspaddingandborder.)
- Made the background colour a greyish colour. We could’ve done this as:
background-color: #eeeeee;as well, but to save time and space, I use#eee.
Add a few paragraphs of text to the right column. When you’re done, you’ll see this:
But why is our footer to the left now? Why is the design not center justified? Well, because our left and right columns use the float attribute, it creates some peculiarities for us, but, as they say with computers, it did exactly what we told it to. The right column has a higher height than the left (because of the text), and when your footer is rendered, because your columns are “floating,” the footer will fill whichever spot it can to go where it wants to go (which is below the shortest of the floated divs). This is because the footer has not cleared either side. So, how would you want the footer to jump beneath the right column? The clear attribute. Let’s add it to the footer in style.css:
#footer {
clear:both;
}
clear has four properties: left , right , both , and none . In this example, because the right-floated element gave us trouble, we only need to clear the element to the right, but since we’ll be adding styles soon, we cleared both floated elements. Because the left-floated element did not give us the problem, the left attribute would not change anything. none , of course, would do nothing.
Now we want to make our page look like something people will want to read, so let’s do that. First, let’s put that “wrapper” div we had to some use:
#wrapper {
width:900px; /* a variety of units are possible here */
margin:0 auto;
background-color:#fff;
border:solid 1px #333;
}
Also, we can change our margin in the body to margin:10px 0; . In this example, we won’t have to worry about the “problematic” issues that would arise thanks to our wrapper div. What we have now done is created a 900-pixel wrapper with a dark grey border, and a white background. Anything held inside the wrapper that does not have a background colour will benefit from the wrapper already having one. Now, let’s move on to our header:
#header {
height:50px;
padding:20px 0;
font-size:175%;
background-color:#000;
color:#fff;
text-align:center;
}
These attributes are mostly self-explanatory. However, two things worth mentioning: color always applies to text. There is no other way to change a text’s colour in CSS. Hex values are also used here. For font-size, you can use these properties: px, pt, em, %, and a few others. Many sites use em, I used to use pt, and occasionally I’ll see px. However, for accessibility purposes, using a percentage works best. You can find an reference for the sizes of percentages here . Additionally, any text or image you insert into the header will be center-justified unless you make a specific rule for specific tags (using IDs or classes) aligning them elsewhere.
Let’s end this part now, and next, we’ll change our left and right columns and finish up our site. ‘Til next time!
Tags: css, css layout, div, web production, web standards, xhtml
Posted in Production Handbook, Tutorials | 1 Comment »
