3 Simple Ways to
Share What You Make

With Instructables you can share what you make with the world — and tap into an ever-growing community of creative experts.

PhotosPhotos

Share one or more photos of a project, recipe, or whatever you've made, quickly and easily.

Get Started

Learn more & Get Tips

Step by StepStep-By-Step

Share your step-by-step photos with text instructions of what you made so others can do it too!

Get Started

Learn more & Get Tips

VideoVideo

Share your how-to video. You'll need your embed code from a video site such as YouTube.

Get Started

Learn more & Get Tips

Print PDF

Favorite

Build a professional website: Part 3 CSS

Build a professional website: Part 3 CSS

CSS ( Cascading Style Sheets) are like the bread in a PB&J sandwich. Sure, tables are okay but the code is much cleaner and efficient with CSS.

CSS is a simple method of adding style (eg fonts, colors, spacing) to Web documents.
CSS allows you to make changes to several pages by only changing one style sheet.
With CSS you can build multiple different web sites using the same style sheet.

In the 3rd part of our building a professional website, we will see how to use CSS to hold text and objects together in a tidy little container.

Now it get's really fun! You are about to build a professional grade web site! You can use this template to build endless web sites by only changing a few pictures!

Table of Contents:

Basic HTML code cheat sheet
Build a professional website: Part 1
Build a professional website: Part 2
Build a professional website: Part 3 CSS

Remove these ads by Signing Up

Step 1Let's build a CSS Web Page!

$Let\$

(preview your page)

Start by pasting this code into my Live Page Builder or Notepad:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>My First CSS Page!</TITLE>
<link rel="StyleSheet" type="text/css" href="stylecss.css" media="screen">
</HEAD>
<BODY>
<DIV id=header>
<div class="title">
<a href="http://htmlinc.com" >Your Title</a>
</div>
</DIV>
<DIV id=container>
<DIV id=content>
<DIV class="paragraph">
<DIV align="center">
<a href="http://htmlinc.com/index.php">Home </a>|
<a href="http://htmlinc.com/services.php"> Service </a>|
<a href="http://htmlinc.com/aboutus.php"> About </a>|
<a href="http://htmlinc.com/contactus.php"> Contact</a> |
<a href="http://htmlinc.com/sitemap.php"> Sitemap</a>
<H4 style="text-align:center">Page Title</H4>
</div>
<DIV>
Your Body Content - goes here. This page is held together with CSS. The more text you put here the more your page will grow along with the text.<BR>
You can use this template to form several different websites by changing only three pictures:<BR><BR>
<img src="images/bullet.jpg" alt="Bullet" style="padding:10px 10px 0px 10px"> header.jpg<BR>
<img src="images/bullet.jpg" alt="Bullet" style="padding:10px 10px 0px 10px"> body.jpg<BR>
<img src="images/bullet.jpg" alt="Bullet" style="padding:10px 10px 0px 10px"> footer.jpg<BR><BR>
We will use this template for all future lessons.
</DIV>
</DIV>
</DIV>
<DIV id=navlist>
<DIV id=nav-1>
<H3>Your Menu</H3>
<UL>
<LI><A href="http://htmlinc.com/web101.php">Web 101</A></LI>
<LI><a href="http://htmlinc.com/code.php">HTML Code</a></LI>
<LI><a href="http://htmlinc.com/htmlcolorcodes.php">Color Codes</a></LI>
<LI><a href="http://htmlinc.com/css.php">CSS</a></LI>
</UL>
</DIV>
</DIV>
</DIV>
<DIV id=footer>
</DIV>
</BODY>
</HTML>

I hope you are but if not get into the habit of saving your work religiously!

Create a folder on your desktop and call it CSS (or anything you want)
Now download these IMAGES to the folder named CSS
Go to the folder and double click the self extracting file named imagescss.exe, this will extract the

pictures to a folder named images and the CSS sheet

Now select all (ctrl+a) the code from the page builder > Copy (ctrl+c) and paste (ctrl+v) into notepad ( PC | Start > Programs > Accessories > NotePad )
After you have made changes such as title, menu names and links save as index.html inside of the folder CSS

« Previous Step

Download PDFView All Steps

Next Step »

5 comments

Feb 19, 2009. 6:28 AM

iPodGuy says:

Is there a way I can use CSS to add a title logo and navigation bar to the top of a web site? I can code it in HTML, but then I have to do it hundreds of times (and forget it if I have to make one change). Like, can I make one CSS file and use a line of code in all new and existing html pages to make the logo and links show up? This has me stumped, because anytime I decide to make changes, I have to re-code, copy & paste to every single page.

Aug 27, 2011. 8:27 AMgnoseon says:

You could create dynamic pages through PHP. That way, it would only really be one page, but it dynamically updates the content of the other pages. For example: The main page would be called index.php, but the about me page would be called index.php?p=aboutme. See this tutorial about how to make this work here.

Feb 26, 2009. 8:22 PMhtmlinc (author) says:

Hello iPodGuy! If I understand you correctly, you may need to use a little php to make it that simple since you want to include navigation. Me personally, I use Dreamweaver and build a template and then anytime I make a new page (using the template) or change a page the header and navigation is always the same and I don't have to touch again. I haven't really thought of this since I have been using Dreamweaver for so long. If someone else has an idea, please contribute. If not, I will make a little php script and see how that works.