I would very much appreciate seeing an example of a website that uses CSS, follows current design standards, and uses a simple format as follows:

A graphic at the top of the page (preferable left side, maybe around 120x120 pixels). - each page on the site would have this graphic, the name of the site, and the links...

A graphic or photo part way down the page (preferably on the right side, maybe around 280x280 pixels)

I am guessing this would all be done in a table.

I can then use this to understand the correct format and design of a webpage.

My attempts at web pages to dates in many cases look good in my browser, but many comments in these forums indicate I have been using bad practices such a using BLOCKQUOTES, and not utilizing enough CSS to avoid copying a lot of the same html on every page.

Although I have read all the referenced tutorials and articles referenced by those who have helped me in this forum, it would really be most helpful to see an example or two...

Have you looked at examples of CSS layout like these?
http://www.glish.com/css/
http://blog.html.it/layoutgala/
http://www.maxdesign.com.au/articles/css-layouts/
http://webhost.bridgew.edu/etribou/layouts/skidoo/
http://bluerobot.com/web/layouts/

It wouldn't involve tables. The best you can do, IMO, is to make a page just for practice, one that has nothing to do with your current site. Make it with HTML alone and don't have a picture in your head of what it should look like. Write about anything. Use HTML Strict. Use as many structural elements as you can fit in, headings, paragraphs, lists... and blockquotes - if you quote.

Don't be bothered with how everything looks, that the headings are too large, that it's boring with each section under the previous one and that you can't get your image to the right of the text. Just do it and explore what HTML elements are for.

Then you make it look nice with CSS.

The key is to be clear in one's mind about what is HTML structure and what is fluff, styling, design, good looks. They are, in a way, independent. Even if the structure, some kind of structure, is needed as a skeleton to apply the looks to, you can create a wiz-bang page built on nothing but DIV and SPAN and that's no good.

Get the HTML down pat and never abuse it and you are 90% there. I think it's the quickest way to get a grip on things.

serebii.net

Darin's example pages led me to this example, very good for my needs...

Webpage

Since font statements are not used, how can fonts be defined? I would like to use the equivalent of this statement:
<font color="#000000" size="4" face="Arial, Helvetica, sans-serif"> to define that I want Arial else Helvetica else sans serif.

Fonts can be specified with CSS:
http://htmlhelp.com/reference/css/font/

In Darin's example, this is how to use css to define font:

{ font-family: "New Century Schoolbook", Times, serif }

instead of this:

<p><font color="#000000" size="4" face="Arial, Helvetica, sans-serif"> ...

if I want arial, helvetica, sans-serif how do I handle the quotation marks, because in Darin's example only the first (prefered) font choice has the quotations....why is that?

Also, I am used to putting the html font statement within each <p>... </p>, statement. With this css code, do I just put it in one location and it will apply to all p paragraphs?

Read the text.
"Any font name containing whitespace must be quoted, with either single or double quotes."

What's implied is that font family names that don't have spaces in them don't need to be quoted. Also, single quotes are preferred. But I think the reason for that was IE5 Mac, so maybe it doesn't matter anymore.

"Any font name containing whitespace must be quoted, with either single or double quotes."

What's implied is that font family names that don't have spaces in them don't need to be quoted. Also, single quotes are preferred. But I think the reason for that was IE5 Mac, so maybe it doesn't matter anymore.
[/quote]

OK, easily understood.


Where does the css code below go, do I just put it in one location and it will apply to all p paragraphs?

{ font-family: "New Century Schoolbook", Times, serif }

See Linking Style Sheets to HTML (which is part of our CSS reference).

Thanks Darin that tutorial gave me what I needed. Now I have an external css style defining all the fonts.

The original 2 column template that I am using has this css style statement:

<style type="text/css" media="screen, print, projection">

and I wanted to replace it with the new reference to the external stylesheet as follows:

<link rel="stylesheet" href="patzstyle.css" type="text/css">

but I find I need both lines of code, the new one above and the old, if I eliminate the old the page has many errors.

What is the purpose of the old code: <style type="text/css" media="screen, print, projection"> and why cant I remove it?

Here is the new web page: My Webpage


and the external stylesheet is as follows:

a:link {color:#a52a2a;text-decoration: none}
a:visited {color:#008000;text-decoration: none}
a:hover {color:#dc143c;text-decoration: none}
a:active {color:#a9a9a9;text-decoration: none}

body {
background-color: #ffff99;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}

a { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #000000; text-decoration: underline}

a:hover { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #A52A2A; background-color: #FAEBD7}

h1 { font-family: Arial, Verdana, sans-serif; font-size: 32px; color: #000000 }
h2 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #000000 }

hr{ color:brown; background-color:tan; width:90%; height:2px; }

You broke the embedded style sheet.
http://htmlhelp.com/reference/css/style-html.html#embedding

Thanks Pandy...I see now I can use both the external linked style sheet and the internal one.

Since I will have many pages with the same format, can I merge the internal style sheet into the externally linked one, just copy its contents, then eliminate it?

Absolutely. You not only can, you should. External style sheets are better for several reasons. One reason is that they are cached and only need to be downloaded once if all your pages use the same style sheet. Another is ease of editing.

The demo probably uses an embedded style sheet to make it convenient to save both HTML and CSS.

Embedded style sheets are good when you just want to try something out or want to make a temporary change to an individual page. That's how I use them anyway.

OK Pandy...this is currently the embedded style sheet code...and it works well...
<link rel="stylesheet" href="patzstyle.css" type="text/css">
<style type="text/css" media="screen, print, projection">
body,
html {
margin:0;
padding:0;
color:#000;
background:#ffff99;
}
#wrap {
width:750px;
margin:0 auto;
background:#ffff99;
}
#header {
padding:5px 10px;
background:#ffff99;
}
h1 {
margin:0;
}
#nav {
padding:5px 10px;
background:#ffff99;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#main {
float:left;
width:480px;
padding:10px;
background:#ffff99;
}
h2 {
margin:0 0 1em;
}
#sidebar {
float:right;
width:230px;
padding:10px;
background:#ffff99;
}
#footer {
clear:both;
padding:5px 10px;
background:#ffff99;
}
#footer p {
margin:0;
}
* html #footer {
height:1px;
}
</style>


I will leave only this embedded:<link rel="stylesheet" href="patzstyle.css" type="text/css">

And make the external css file read as follows:


<style type="text/css" media="screen, print, projection">

a:link {color:#a52a2a;text-decoration: none}
a:visited {color:#008000;text-decoration: none}
a:hover {color:#dc143c;text-decoration: none}
a:active {color:#a9a9a9;text-decoration: none}

body {
background-color: #ffff99;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
}

a { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #000000; text-decoration: underline}

a:hover { font-family: Arial, Verdana, sans-serif; font-size: 18px; color: #A52A2A; background-color: #FAEBD7}

h1 { font-family: Arial, Verdana, sans-serif; font-size: 32px; color: #000000 }
h2 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #000000 }

hr{ color:brown; background-color:tan; width:90%; height:2px; }


body,
html {
margin:0;
padding:0;
color:#000;
background:#ffff99;
}
#wrap {
width:750px;
margin:0 auto;
background:#ffff99;
}
#header {
padding:5px 10px;
background:#ffff99;
}
h1 {
margin:0;
}
#nav {
padding:5px 10px;
background:#ffff99;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#main {
float:left;
width:480px;
padding:10px;
background:#ffff99;
}
h2 {
margin:0 0 1em;
}
#sidebar {
float:right;
width:230px;
padding:10px;
background:#ffff99;
}
#footer {
clear:both;
padding:5px 10px;
background:#ffff99;
}
#footer p {
margin:0;
}
* html #footer {
height:1px;
}
</style>


except the part I'm showing in green, well does it belong here in the external file...or do I just delete it? ...and if I delete it, I need to also delete the "</style>" from the last line, right?

Right. You don't need the <style> or </style> tags in an external CSS file. Those are HTML, which doesn't belong in an external CSS file.

And don't forget the closing tag (which isn't green).

what is the closing tag you are referring to, and does it go at the very end of the css file?

No no. I meant you shouldn't forget to remove the closing tag for STYLE, but I see now you already mentioned that yourself.

Works perfectly now...thank you both very much.