In my first tutorial, I covered the basics of building your first web page. However, at the end of that article, the result was bland and plain looking.
In this tutorial, we will go over the basics of style, expanding on the code we wrote originally. Feel free to download the source files to follow along as we go.
We will be spending most of our time writing CSS code. CSS is the language that describes the presentation of a document written in HTML.
For starters, we need to create our external style sheet file. Create a file called style.css in the same directory as your HTML document. An easy way to do this is to create a new TXT file and change the name/extension. Note that your operating system may warn you about changing file extensions, but this is ok.
This file is where we will put all of our CSS code, so we will be working primarily from this file. We will also be making a few minor changes to the HTML code to simplify things in the CSS.
Here is what I plan to cover in this post:
Step 1: CSS Reset
The first thing we will want to do in our new file is to reset any browser inconsistencies. This allows you to create a style that will look mostly the same across the multitude of browser and operating systems out there.
Rather than try to come up with a "default" style for each independent element, we will be using Eric Meyer’s reset style, which looks like this:
<table>
</table>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
You can either create a seperate "reset.css" file for this code (the optimal solution), or you can do as we will for this tutorial, which is to paste this code directly into the top of our main CSS file.
In the next step, we will start defining the default styles for our web page.
Step 2: Default Styles
What do I mean by "default styles"? Simply, the default styles for the web page are the basics such as background and text colors, font family and size, and link colors. You should pick color sets that are complementary, and if your design eye is legally blind (as mine is), do not fret! There are many handy resources to help you with your color choices. Here are a few that I have used in the past:
- ColorCombos.com has a large variety of pre-defined color combinations
- Color Mixers lets you define your primary color with an intuitive slider interface
- EasyRGB. Though it isn’t quite as "easy" to use as the options above, this tool can come in handy if you have a primary color that you are required to base your theme around.
- Instant Color Schemes. This site is very handy if you have an idea for a theme, but no set colors. You enter your search terms (such as "blue sky" or "southwest"), and the tool grabs prominent colors from a related image search on Yahoo Images.
For this sample page, I will be using the Color Mixers tool with the following RGB values: 50, 50, 175. I am a fan of blues and grays, so that will be my preferred route. Your colors may vary, but I will try to describe the general ideas as I go.
Main Background and Text Colors
For the primary background, I will use a light gray color (#8 on the CM pallette, if you are using the same scheme as me). For my text, I will be changing the black to a very dark gray to soften it a bit.
Here is the basic body styles I will be using:
body {
background-color: #b0b0b0; /* Background color for the page */
color: #222222; /* Text color. This is near-black, but slightly softer than full black text */
}
Font Family & Size
When choosing a font to use on your website, you should try to specify a font that most users are likely to have installed on their computers. If they don’t, you should provide appropriate fallback fonts (called a font stack) so that your design doesn’t break entirely if alternate fonts are used.
Here is a good article on font stacks, from which I chose the Cambria…serif stack, which you can see below.
body {
background-color: #b0b0b0; /* Background color for the page */
color: #222222; /* Text color. This is near-black, but slightly softer than full black text */
font-family: Cambria, Georgia, Times, "Times New Roman", serif;
font-size: 12pt;
}
You may notice that I have specified a point size for the font as well. By specifying 12pt font in the body declaration, we can use ems or percent for our unit of measure for everything else. Ems and percent are functionally equivalent and can be used interchangeably. For example, 1em is like saying 100%, so if something is 1em tall, it is “1 12pt line tall”. 1.2em is equivalent to 120%, or “1.2 12pt lines”.
Links
Last but not least, we need to provide basic styles for our links. Go back to your color pallette and choose a color that contrasts with both your background as well as your main text color. Then select a second, similar color for the active state of the link. You may choose additional colors for visited links and "focused" links (i.e. links highlighted by the keyboard but not hovered over by a mouse), but I will be styling those differently.
Here is the style I will be using for the CSS file for the demo page:
a:link {
border-bottom: 1px #3232af dashed;
color: #3232af;
text-decoration: none;
}
a:active, a:hover,
a:visited:active, a:visited:hover { /* The link style while being hovered over or clicked */
border: 0; /* Remove the dotted underline when hovered over */
color: #4949fc;
text-decoration: none; /* For visited links, remove the strike through */
}
a:visited {
color: #3232af;
text-decoration: line-through; /* Put a line through visited links */
}
I did a couple things besides just changing the color of links in various states. For example, I set the links to have a dotted bottom border instead of an underline, and I gave visited links a strike-through to help the user quickly identify links they have already clicked on. In addition, I made sure that active and hovered links behaved the same whether they were visited or not. These things help keep your styles consistent. Remember, it’s the little things. :-D
Other Styles
Lastly, we will specify the default styles for headings, paragraphs and lists, and a bit of simple margins / padding around elements. While there can be an infinite number of ways to style these, we will stick with some fairly basic styling for this tutorial.
Here is all of the CSS code added during this step of the tutorial.
body {
background-color: #b0b0b0; /* Background color for the page */
color: #222222; /* Text color. This is near-black, but slightly softer than full black text */
font-family: Cambria, Georgia, Times, "Times New Roman", serif;
font-size: 12pt;
padding: 15px;
}
a:link {
border-bottom: 1px #3232af dashed;
color: #3232af;
text-decoration: none;
}
a:active, a:hover,
a:visited:active, a:visited:hover { /* The link style while being hovered over or clicked */
border: 0; /* Remove the dotted underline when hovered over */
color: #4949fc;
text-decoration: none; /* For visited links, remove the strike through */
}
a:visited {
color: #3232af;
text-decoration: line-through; /* Put a line through visited links */
}
a img {border: 0;}
ul, ol {margin: 1em 0;}
ul {list-style: disc;}
ol {list-style: decimal;}
li {margin-left: 2em;}
h1 {font-size: 200%;}
h2 {font-size: 175%;}
h3 {font-size: 150%;}
p {
margin: 1em 0;
text-indent: 2em;
}
See what the page now looks like in a separate window.
Continue on to the next step to see how you will be breaking up the page into manageable chunks for positioning in Step 4.
Step 3: Breaking Up the Page
In this step, we will go back to the HTML file for a moment. We want to break up the page into pieces that we will position via CSS in the next step. To do this, we need to identify the major parts of the site. In the case of my sample page, we have a main heading with welcome message, an “About Me” section, general content, and a couple generic lists. Here is how I will be breaking up that content:
In this image, you can see that I have one wrapping container to hold my entire site. There are additional boxes for the header content, the “about me”, and the main content of the site. This last container has two smaller boxes inside it containing the lists.
For these containers, we will use the <div> tag, which is used to “div”ide the page into chunks (appropriate, no?). Here is what the HTML code for the page looks like with these tags added. Note that I am also giving the pices id attributes to make it easier to style and position them.
Finally, I am adding a footer to contain things like copyright information. This will also help with positioning elements within the container.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="Bill Parrott" />
<meta name="copyright" content="Copyright 2009 Bill Parrott" />
<meta name="robots" content="index,follow" />
<meta name="description" content="This is a sample web page built for the tutorial: 'How to Really Build a Web Page', found at http://chimericdream.com/2009/11/04/how-to-really-build-a-web-page/" />
<meta name="keywords" content="tutorial, web page tutorial, sample web page, web page template, xhtml, xhtml strict" />
<link href="style-04.css" rel="stylesheet" />
</head>
<body>
<div id="wrap">
<div id="header">
<h1>My First Web Page</h1>
<p>Welcome! This is the first web page created with real (fake) content.</p>
</div>
<div id="about">
<h2>About Me</h2>
<p>I make websites, and I hate writing bios. ;-) <a href="http://chimericdream.com/" title="Go to my home page">Here is a link to my website.</a></p>
</div>
<div id="content">
<p>Here is a <a href="http://sa.feurl.com/Q">computer icon</a> that I randomly found in a Google search. Looks fancy, huh?</p>
<p><img src="computer-icon.png" alt="Computer icon" /></p>
<div class="box" id="interests">
<h3>My Interests</h3>
<ul>
<li>Web Design</li>
<li>Swing Dancing</li>
<li>Video Games</li>
<li>RPGs</li>
</ul>
</div>
<div class="box" id="priorities">
<h3>My Priorities</h3>
<ol>
<li>Family</li>
<li>Career</li>
<li>School</li>
<li>Hobbies (dancing, computers, gaming)</li>
</ol>
</div>
<br class="clear" />
</div>
<div id="footer">
<p id="copyright">© 2010 Bill Parrott</p>
</div>
</div>
</body>
</html>
Nothing has changed (yet) with how the page looks in the browser, but in the next step, we will shape the page by defining the positions of the page chunks.
Step 4: Positioning
Now that we have broken up the code into managable chunks, it’s time to place them on the page. First, let’s give the overall layout a width of 900px and center it on the page. While we are at it, let’s add a border around the whole site.
#wrap {
border: 4px solid #eee;
margin: 0 auto;
width: 900px;
}
For the border, I chose a light gray that fits well with my other colors. If you used a different color scheme for your site, choose an appropriate color for the border.
Next, let’s center the text in the header and give it a bit of color to distinguish it from the rest of the site. While we’re at it, we will give it some height, a bottom border (that matches the site border), and a bit of padding.
Note that the header has a width of 880px instead of the 900px that the site has. A container’s dimensions is made up of its specified width and height; its margin; its padding; and any borders it has. Therefore, the header would actually be 920px wide if we gave it a width of 900px and padding of 10px. To get a total width of 900px, we make the content area 880px wide, and the 10px padding on either side takes care of the rest.
#header {
background-color: #444;
border-bottom: 4px solid #eee;
color: #eee; /* Since we changed the background color, we need the text to be brighter to stand out */
height: 100px;
padding: 10px;
text-align: center;
width: 880px; /* This plus the 10px padding on either side makes a full 900px */
}
Next, let’s position the "About Me" on the right of the page. We will be using the float property of CSS, which, appropriately enough, "floats" an element to one side, wrapping the rest of the content around it. However, we will be giving the main content area a smaller width. This will make the site look like it is divided into two columns.
Just like before, notice the width and padding. The 180px width + 10px (x2) padding gives this section a total width of 200px.
#about {
float: right;
padding: 10px;
width: 180px;
}
Next, let’s position the main content area. It will be positioned to the left by default, so we just need to give it a width and a right border. The right border is what will give us the illusion of two individual columns. Inside the content area, we have two smaller boxes, each with a class of "box". Let’s give those a width of 50% each and float them left.
#content {
border-right: 4px solid #eee;
padding: 10px;
width: 680px;
}
.box {
float: left;
width: 50%;
}
Finally, we need to position the footer. Because we have floated elements in the content, we need to tell the footer to clear any floats that might be hanging around. This is necessary because floats are removed from the general context and flow of the website. If we don’t clear them, they could cause potential problems for the layout.
As a side note, for this same reason, we need a general "clear" class. Just as the footer serves as a universal clearer for the main site layout, any subsections of the site which contain floated elements will need a clearing element at the end. We will add a <br /> tag just inside the end of the content div and give it a class of clear. This will clear any lingering floats within the content area itself.
Here is the footer CSS:
#footer {
border-top: 4px solid #eee;
clear: both;
text-align: center;
}
And here is what the last few lines of HTML should look like with the <br /> tag in place:
</div>
<br class="clear" />
</div>
<div id="footer">
<p id="copyright">© 2010 Bill Parrott</p>
</div>
</div>
</body>
</html>
And that’s it! Take a look at the final result in a new window.
Summary
In the first tutorial, we built a basic web page, but the end result was plain and boring. In this tutorial, we covered the basics of styling links, background colors, and positioning. Hopefully you now have a good foundation for how to build and style a website.
Feel free to download the source files for this tutorial, the last tutorial, or both tutorials combined.
Your Turn
Let’s see your results. Drop a link to your examples in the comments below.
Future Articles
If you have any ideas for a future article in web design, let me know!