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:

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.

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.

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.

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.