Introduction / About Stylesheets
Having problems building your new blog or band website? I'm here to help. You don't need those tables, bro. You don't need those Dreamweaver rollovers, sis. You don't even need Rupert Murdoch's (the sketchy dude who owns Fox News) MYSPACE.COM. What you need is a heavy dose of STYLE. STYLE SHEETS, that is.
A stylesheet, put simply, is a set of rules and definitions that control the appearance of a document. They determine which fonts are used, which colors, column widths, object placement, etc. Stylesheets have been used for decades in the print world, but only started becoming useful on the web in the late 90s.
A "Cascading Stylesheet," or CSS for short, is a stylesheet for the web. A CSS file controls the fonts, colors, layout, and other aspects of the HTML file that links to it. This enables sitewide control of presentation and design in just one file. For example, if 20 different HTML pages link to the same CSS file and you want to change the color on your links sitewide, you only have to change the definition in the stylesheet and it will change the color on all of the pages. By comparison, if you use the now-obsolete font tag to control the color of your fonts, you have to change every instance on every page, which is a time consuming and redundant task.
With stylesheets, we no longer have to rely on things like tables and font tags for layout and presentation. One CSS file does all the hard work for us.
The awesome thing about building a website in HTML and CSS is that you don't necessarily need a fancy program like Photoshop or Dreamweaver to do it. Those tools can definitely be helpful in the right context, but since web pages are basically defined by text, you can write them with pure text in a text editor. Neat! Free!
Before you delve into this tutorial, you should know that it is long and a bit involved. It's not difficult, per se, but it will take some time to get through if you are new to CSS and/or HTML. If you want to skip everything and just download a ZIP file containing the final HTML and CSS files for the tutorial, you can grab it here. Thanks!
Getting Started in HTML
Okay, let's get started. Open up a simple text editing program like Textedit if you are on a Mac or Notepad if you are using Windows. DO NOT USE WORD OR WORDPERFECT. They will mess with your code big time and screw up everything. By the way, there is a free program called Textwrangler if you are on a Mac that is better than Textedit. Anyway, once you have a new document open in your text editor, copy and paste the following code into your document:
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />
<title>TITLE GOES HERE</title>
</head>
<body>
</body>
</html>
Save your text file as "index.html". This will be your HTML page. Let's break the code down a little bit so we can understand what each part does:
This is the doctype declaration. Basically it tells the browser what kind of code the page will be using. For this example, we'll be using XHTML 1.0 Transitional. This is so that the browser can display your page to the XHTML standards set by the W3C (World Wide Web Consortium). Many websites don't include this, but that's because the designers or developers don't care about standards or accessibility. We don't want to go down that path, because we care about our users. So best to include a doctype. There are different types of doctypes, but we don't have time to go over them here, so please read Jeffery Zeldman's article Fix Your Site With The Right DOCTYPE! for more. This section also includes the initial HTML tag, which tells the browser that it is the beginning of an HTML document.
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />
<title>TITLE GOES HERE</title>
</head>
This is the HEAD section of the html document. Often included within the head are things like meta tags (which are keywords, author information, copyright stuff, description of the site's content, etc), links to javascript files, links to stylesheets, and the title of your web page. For the sake of simplicity, here we are only including the link to the stylesheet, which we will create in the next step, and the TITLE of the page, which is the text which appears on the top of your browser window as the name of the page. You can change the TITLE GOES HERE text to anything you wish.
</body>
</html>
In between the opening body tag (<body>) and the closing body tag (</body>) is where the tofu and potatoes of your website sits. The stuff in here is the content that people actually see when they visit your site in a browser window. Try saving your html file and opening it in a web browser such as Firefox or Safari. You won't see anything. That's because there's nothing in the BODY of your document. We're going to fix that right now and give the page some content to work with.
Since I have limited time for this tutorial, we're going to make a really simple 3 page center-aligned website with a header, a navigation bar, a content area, and a footer. We define the different areas of the website with divs, and then control the appearance and layout of the divs with the stylesheet. The HTML code with divs added looks like this, so once again you can copy and paste:
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />
<title>TITLE GOES HERE</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
As you can see, right now the divs are empty, but they lend a nice clean structure to the site. All of the divs are contained within a master "container" div so that we can manipulate the container div separate from the ones inside it. Let's add some content inside the divs:
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />
<title>TITLE GOES HERE</title>
</head>
<body>
<div id="container">
<div id="header"> <h1>MY FIRST WEBSITE!</h1> </div>
<div id="navigation"> <a href="news.html">NEWS</a> <a href="about.html">ABOUT</a> <a href="index.html">HOME>/a> </div>
<div id="content"> <p>COOL! Welcome to my new home page, homeslice!</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec adipiscing varius justo. Proin diam mi, pellentesque non, tempor eu, eleifend id, sapien. Integer dignissim. Vivamus pede. Sed quis nibh sed leo tincidunt rutrum. Fusce imperdiet, risus ut rhoncus blandit, eros augue iaculis justo, id euismod nulla eros in urna. Donec faucibus nonummy nisl. Maecenas vulputate. Mauris sit amet magna vel elit tempor dignissim. Praesent lectus mi, mattis blandit, auctor id, convallis quis, ligula. Aliquam molestie sem at tortor. Vestibulum nunc. Integer volutpat nibh ut orci.</p>
<p>Sed iaculis ultrices purus. Phasellus viverra, purus a consectetuer commodo, elit neque vehicula sem, ut pellentesque diam odio ut nisl. Quisque placerat lorem sit amet elit. Proin elementum viverra est. Sed lobortis mauris a leo. Vestibulum convallis lectus vel massa. Suspendisse pharetra dapibus magna. Sed at est vel est rutrum vehicula. Nunc eros. Vestibulum ac erat ac justo facilisis semper. </div></p>
<div id="footer"> <p>All of this stuff is copyright nobody 2006</p> </div>
</div>
</body>
</html>
Copy and paste all of this into your text file and save it. Open the html file in a web browser or open my example page (opens in a new window). Looks pretty basic, right? No style or anything, just text on a page.
Styling Your HTML With CSS
This is where stylesheets come in. Open a new document in your text editor and save it as "stylesheet.css". Make sure that it's in the same folder as your index.html file that you've been working on. Then copy and paste the following into your stylesheet file and hit save again:
margin: 0;
padding: 0;
font-family: georgia, times, serif;
background: #333;
}
#container {
width: 600px;
text-align: center;
margin: 80px auto 80px auto;
background: #fff;
border: 10px solid #ADFE00;
}
#header {
width: 600px;
background: #E8FFC5;
padding: 22px 0 15px 0;
border-bottom: 2px dotted #ccc;
}
#navigation {
border-bottom: 2px dotted #ccc;
}
#content {
width: 550px;
padding: 0 25px 0 25px;
text-align: left;
}
#footer {
border-top: 2px dotted #ccc;
}
p {
font-size: 12px;
line-height: 20px;
}
h1 {
font-family: helvetica, arial, verdana, sans-serif;
color: #333;
margin: 0;
padding: 0;
font-size: 40px;
letter-spacing: -2px;
}
Now open up your index.html file again, which links to this .css file. Voila! Your content has been partially styled by the stylesheet. You can also open my demo page (in a new browser window) to see what the content looks like with the styles applied. Let's go through the stylesheet to see how it styles the different divs.
margin: 0;
padding: 0;
font-family: georgia, times, serif;
background: #333;
}
This styles the body of the page itself. It sets a margin and padding of 0 (I'll explain margin and padding in a bit), sets the font-family of Georgia for the page, and a dark grey background color, #333. There are only a few fonts that you can safely use across the web, due to different fonts being installed on different machines. These usually include Verdana, Arial, and Helvetica in the sans-serif family; Georgia, Times, and Times New Roman in the serif family; and Courier in the monospace family. Courier is what I'm using to display the code in the grey boxes in this tutorial. There are ways to embed other fonts in images and flash files, but those are beyond the scope of this tutorial for now.
width: 600px;
text-align: center;
margin: 80px auto 0 auto;
background: #fff;
border: 10px solid #ADFE00;
}
This styles the container div. I gave it a somewhat narrow overall width of 600 pixels, because some people still use screen resolutions of 800x600 pixels. It's text-aligned center (which is a workaround to make it centered in Internet Explorer) and a margin of 80px auto 0 auto. This makes it 80px from the top of the browser window, 0 pixels from the bottom, and automatic margins on the left and right, which is the proper way to center an item with stylesheets. Unfortunately, Internet Explorer doesn't implement this correctly, hence the text-align: center property. It has a background of #fff (which is white) and a 10 pixel wide neon green border all the way around.
width: 600px;
background: #E8FFC5;
padding: 22px 0 15px 0;
border-bottom: 2px dotted #ccc;
}
Can you see a pattern starting to emerge? I set the width of the header div to 600 pixels, the background to a light green, 22 pixels of padding on the top and 15 on the bottom, to keep the header text centered. There's also a dotted 2 pixel grey line along the bottom.
border-bottom: 2px dotted #ccc;
padding: 15px 0 15px 0;
}}
Pretty self-explanatory style. Applies a grey border to the bottom of the navigation div and adds some padding for the menu.
width: 550px;
padding: 0 25px 0 25px;
text-align: left;
}
I wanted the text to be aligned left in the content box so I gave it a style of text-align: left. Also, there is 25 pixels of padding on the left and 25 pixels of padding on the right, so rather than making it 600 pixels wide, I made it 550 pixels wide, because it adds the padding to the width of the element. 550+25+25=600 total. Internet Explorer 5 has problems with this and there's fixes for it, but eff that browser for now.
border-top: 2px dotted #ccc;
}
Gave the footer div that dotted grey border on top.
font-size: 12px;
line-height: 20px;
}
h1 {
font-family: helvetica, arial, verdana, sans-serif;
color: #333;
margin: 0;
padding: 0;
font-size: 40px;
letter-spacing: -2px;
}
I want my paragraph type to be 12 pixels high and have a line-height (the distance between lines) of 20 pixels. I also tell my h1 tag to be Helvetica instead of Georgia, and to be 40 pixels high and have a negative letter spacing so that the letters are a bit smooshed together.
So we've gone from a raw html file to one that's got some basic visual styles applied to it with a stylesheet. Doesn't look terrible. Not very exciting, but it's functional. However, that navigation menu looks a bit boring, don't you think? Basic HTML links in blue and nothing else? Luckily, stylesheets can come to the rescue in this case as well. You can stylize lists of links in order to create rollover effects on your menu. And how better to do this than the LIST-O-MATIC?
Making a CSS Based Navigation Bar
The List-O-Matic is a useful tool that will automatically turn a list of links into a navigation bar for you. So I went and plugged in the 3 links that we want in our menu, and picked the style that I want, and it magically generated both the css and the html for the menu. Copy and paste the html into your code, so instead of this:
You have this:
<ul id="navlist">
<li><a href="news.html" title="News">News</a></li>
<li><a href="about.html" title="About">About</a></li>
<li><a href="index.html" title="Home">Home</a></li> </ul>
</div>
Then copy the css code generated by List-O-Matic into your stylesheet:
margin: 0;
padding: 0;
white-space: nowrap;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited {
color: #fff;
background-color: #333;
border: 1px solid #ADFE00;
text-decoration: none;
}
#navlist a:hover {
color: #fff;
background-color: #999;
text-decoration: none;
}
Now save your css and html files with the new code inserted. Check it out in a browser or check out my test page. Boom! Rollover menus without images.
Finishing Up
So we've got the basic html page with stylized divs and a rollover menu. Now you just have to make the news.html page and the about.html page. This is as easy as resaving your index.html page as "news.html" and "about.html" and replacing the content in the pages with more section specific content. Check out the final product here.
If you would like to download a ZIP file containing all 3 html files and the css file, click here. It's a good way to get into the files and start experimenting with html and stylesheets.
Obviously this isn't meant to be a comprehensive guide to building a web page. In fact, it barely scratches the surface of what's possible with CSS. But if you keep plugging away at some of these techniques and utilize some of the resources listed at the top of the sidebar, you'll be well on your way to building websites with CSS. THE SELF PUBLISHING REVOLUTION HAS BEGUN!