Bill Oertel wrote:
Hey Scott -- You hit it on the nose.
"You can create one document that includes both sets of code or create two pages, one with the HTML and the other with the CSS."
That's what I need to know how to do -- Yeah, I'm brain dead and it's probably
something simple and right in front of me and I keep missing it.
In the simplest terms, what you do is create one page and call it index.html and then create another page and call it style.css Now in each file place the proper HTML and CSS coding.
HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>What's a Website Project - CoffeeCup HTML Editor</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css"/>
</head>
<body>
</body>
</html>
CSS file:
@import "reset.css";
body { font-family:georgia,times,serif; font-size:16px; line-height:1.25em; color:#222; }
h2, h3 { font-family:tahoma,arial,sans-serif; }
h1 { display:block; margin-bottom:20px; height:90px; background:#f60 url('../images/heading.png') 10px 5px no-repeat; text-indent:-9999px; border-bottom:3px solid #333; }
h2 { display:block; margin:2em 20px 10px; padding:20px 0 10px; font-weight:bold; font-size:24px; color:#060; border-bottom:2px solid #ccc; }
p { margin:0 40px 2em; }
strong { font-weight:bold; }
em { font-style:italic; }
img { display:block; margin:20px 0;}
a { color:#060; }
a:hover { color:#900; }
ul { list-style:square !important; }
ol,ul { margin:20px 40px; padding:0; }
ol>li { margin:0 20px 2em 0px; padding-left:80px; min-height:50px; }
#toc li { margin-left:20px; line-height:2em; }
#toc a { font-weight:bold; }
li.one { background:transparent url('../images/number_01.png') 0 0 no-repeat; }
li.two { background:transparent url('../images/number_02.png') 0 0 no-repeat; }
li.three { background:transparent url('../images/number_03.png') 0 0 no-repeat; }
li.four { background:transparent url('../images/number_04.png') 0 0 no-repeat; }
li.five { background:transparent url('../images/number_05.png') 0 0 no-repeat; }
li.six { background:transparent url('../images/number_06.png') 0 0 no-repeat; }
li.seven { background:transparent url('../images/number_07.png') 0 0 no-repeat; }
li.eight { background:transparent url('../images/number_08.png') 0 0 no-repeat; }
li.nine { background:transparent url('../images/number_09.png') 0 0 no-repeat; }
.sub li { padding-left:50px; }
.sub li.one { background:transparent url('../images/number_sub_01.png') 0 0 no-repeat; }
.sub li.two { background:transparent url('../images/number_sub_02.png') 0 0 no-repeat; }
.sub li.three { background:transparent url('../images/number_sub_03.png') 0 0 no-repeat; }
.sub li.four { background:transparent url('../images/number_sub_04.png') 0 0 no-repeat; }
.sub li.five { background:transparent url('../images/number_sub_05.png') 0 0 no-repeat; }
.sub li.six { background:transparent url('../images/number_sub_06.png') 0 0 no-repeat; }
.toplink { display:block; width:120px; height:26px; margin-left:40px; background:transparent url('../images/toplink.png') 0 0 ; text-indent:-9999px; }
.toplink:hover { background-position:0 -26px; }
#footer { margin:2em 0 0; padding:20px 20px 40px; color:#fff; background-color:#f60; border-top:2px solid #333; }
#footer p { margin:0; padding:0; }
#footer a { color:#ffc; }
#footer a:hover { color:#fff; }
#copyright { font-size:12px; }
