Build a Professional Website: Part 3 CSS




Introduction: Build a Professional Website: Part 3 CSS

About: I am just like you except different... =)
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

Step 1: Let's Build a CSS Web Page!

(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" "">
<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">
<DIV id=header>
<div class="title">
<a href="" >Your Title</a>
<DIV id=container>
<DIV id=content>
<DIV class="paragraph">
<DIV align="center">
<a href="">Home </a>|
<a href=""> Service </a>|
<a href=""> About </a>|
<a href=""> Contact</a> |
<a href=""> Sitemap</a>
<H4 style="text-align:center">Page Title</H4>
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 id=navlist>
<DIV id=nav-1>
<H3>Your Menu</H3>
<LI><A href="">Web 101</A></LI>
<LI><a href="">HTML Code</a></LI>
<LI><a href="">Color Codes</a></LI>
<LI><a href="">CSS</a></LI>
<DIV id=footer>

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

Step 2: The CSS Code

Staying with the flow of this multi-part instructable. I gave you the end result first! That way those of you who just wanted the template can stop there and those who wish to learn a little can keep going.

Ok, let's take a look at the CSS you saved to your hard drive named stylecss.css:

/* CSS Document */
body {
background-color: #c0c0c0;
padding-left:80px; font-size:24px; padding-top:25px
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
ul {
margin: 0;
padding: 0 0 10px 0;
list-style: none;
line-height: 1.2em;
li {
padding-bottom: 7px;
a:link {
color: #333333;
text-decoration: none;font-weight:bold
a:visited {
text-decoration: none;
color: #333333;font-weight:bold
a:hover {
text-decoration: none;
color: #990000;font-weight:bold
a:active {
text-decoration: none;
color: #993300;font-weight:bold
#header {
width: 755px;
height: 71px;
background: #D8DDE1 url("images/header.jpg") no-repeat;
margin: 0px auto;
#container {
position: relative;
width: 755px;
background: #D8DDE1 url("images/body.jpg") repeat-y;
margin: 0 auto;
text-align: left;
min-height: 400px; /*ADDED FOR IE8*/
#content {
line-height: 1.6em;
float: right;
width: 550px;
padding: 0px 0px;
div.paragraph {
margin: 10px 35px 50px 0px;
padding: 0;
#navlist {
font-size: 0.85em;
float: left;
width: 160px;
padding-left: 30px;
#navlist ul {
margin-right: 10px;
margin-left: 10px;
#navlist ul li {
margin: 2px 0;
#nav-1 ul {
padding-bottom: 20px;
#nav-1 a:link, #nav-topics a:visited {
color: #000000;
#nav-1 h3 {
padding-left: 10px;
#nav-1 li {
color: #AC4444;
background: url("images/nav_bg.gif") repeat-x left bottom;
#nav-1 a:hover, #nav-topics a:active {
color: #6A0909;
#footer {
margin: 0 auto;
width: 755px;
height: 33px;
background: url("images/footer.jpg") no-repeat;

Step 3: CSS Is Made Up of Three Parts:

A selector, property and value.

  • selector {property: value}

The selector is usually the HTML tag you want to define, the property is the attribute you want to change, and every property can take a value. The property and value are separated by a colon, and surrounded by {and}:

  • body {color: #c0c0c0}

If the value has more than one word seperate them with commas.

  • body {color: #c0c0c0}
  • body,td,th {font-family: Verdana, Arial, Helvetica, sans-serif}

If you make more than one property separate them with a semi-colon ";"

  • body,td,th
  • {
* font-family: Verdana, Arial, Helvetica, sans-serif;
  • font-size: 12px;
  • color: #666666;
  • }

Notice how much easier to read it is if you don't put everything on one line! Also, notice how you can group several selectors by a comma "body,td,th"

You make the selector into a class. You can use this to make different sections of your page appear different by specifying the "class" start with a period such as .title

  • .title
    • {
    • padding-left:80px; font-size:24px; padding-top:25px
    • }

On your html page place the class like this <H4 class="title">stuff</H4>

Keep your CSS clean and organized by placing comments that are not seen by anyone but you to divide different sections of your style sheet.

/* This is a comment */

FANTASTIC JOB! Use the sheet you downloaded and really tear it apart. Try different things and watch what happens to your html page. I know this is not an in depth course on HTML and CSS but then again it was meant to be a "To the point" instructable on building a professional website. I will be happy to be more elaborate if I get enough requests or answer questions. Look for the samples I will be making. Chances are I will be re-creating something of use to you.

Be the First to Share


    • Anything Goes Contest

      Anything Goes Contest



    3 years ago

    Really simple,clean tips and codes for beginners! Thank you instructables!


    Reply 3 years ago

    Oh wow, I forgot about this and just got the email. I did this so long ago. Thank so much!


    8 years ago on Step 3

    Thank your effort was fantastic but needs to work in a video to explain my work to be the best and most wonderful greetings and thanks Please reply fast


    13 years ago on Introduction

    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.


    Reply 11 years ago on Introduction

    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.


    Reply 13 years ago on Introduction

    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.