If you view the source of the web page, you can see that my maroon background color is set in the actual html for the web page.
My question is: Can I control this via CSS? I basically want everything that is not in a div block in the style sheet to be a certain color. Do I need to add another div underneath the rest? If so, how do I do that? Or is there some way to make a default color for the style sheet? What do I need to do in my CSS document to control this?
You need to get back to basics. Your web page code is poorly formed. You have tags in the incorrect places, and repeated as well. Until you correct the foundation code for your web page, applying the CSS is a moot point.
You may want to look at these basic CSS page designs in order to understand not just some simple CSS, but simple HTML foundation code as well.
I suggest you use Firefox and install the Web Developer and HTML Validator add-on toolbars. Both will assist you in locating coding errors and creating standards-compliant code.
Thanks for the input. Firefox is my browser, and I will definitely add those plug-ins.
I have no doubt that I am doing some things incorrectly since I have been doing this for less than a month. The whole point of this, for me, was to learn these things. However, If you are looking at the repeating html and body tags in my masthead and navigation divs, I think that is happening because I am using the include statement (<!–#include file =“randomfile.aspx”–>) for the navigation and header. There may be a better way to do this. If there is, eventually I will find it.
I looked at the css page designs you linked to, and I added that link to my library of reference material, but the CSS and web page I created is still 90% a template from microsoft expression web, very similar to the designs you sent me to. I have actually changed very little, besides pasting in some content and playing with the style sheet to see what happens.
Thanks again for you advice and link. Any links to good places to go to learn this stuff is appreciated.
A server side include is only a chunk of code. You don’t create teeny tiny web pages and put them all together to create one big web page. OK, I know I lost you. Allow me to illustrate. We take all of this code for a simple web page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 46em;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#header {
background: #DDDDDD;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0;
padding: 10px 0;
}
#mainContent {
padding: 0 20px;
background: #FFFFFF;
}
#footer {
padding: 0 10px;
background:#DDDDDD;
}
#footer p {
margin: 0;
padding: 10px 0;
}
-->
</style></head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
… and plop it into a blank web page. Post to your web site. It’s a simple design, all CSS, with a single centered column. Now if you want to build this same page with server side includes SSIs, here is just one way to break up the code:
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
The SSI only contains this code:
<div id="footer">
<p>Footer</p>
</div>
Notice how the CSS is referenced, and that I didn’t explain it. Your homework assignment is to figure that out on your own. Also, the SSI coding I used is for an Apache web server. If your site is on a Windows web server (IIS), the specific code will be different, but the concept remains (almost) the same.
The great thing about some of these sites is that they not only give general instructions, but will also show you how to fix particular problems that you will encounter when laying out a page using CSS. Some of these problems arise because some browsers implement CSS better than others, and some problems are due to certain limitations in CSS itself.
While laying out a page using CSS is preferable (for a variety of reasons) to using tables, i can quite easily understand why so many web designers—even some professionals setting up commercial sites—continue to use tables. Sometimes, especially if you’re new to CSS, you can take hours trying to work out a layout in CSS, when doing virtually exactly the same thing in a table would have taken 15 minutes.
Try equal-height columns, for example. So easy in tables, yet requiring a whole bunch of finicky shit in CSS. And even then, the ways that people get around this problem vary considerably. Some folks “cheat” and use a repeating background image; others ensure equal columns using a Javascript workaround; while others stick to straight CSS and mess around with a whole lot of floats, padding, margins, clear, and other stuff to get the page looking right. Yet doing the same thing using tables takes about 5 minutes.
I love CSS, and i use it whenever i can, but it can be a pain in the ass sometimes. The great thing about it, though, is that once you have it set up, you can easily make changes to your site’s look without changing a whole bunch of individual pages.
Actually, I don’t think you lost me here. The way it was originally explained to me (or the way I originally misunderstood it) was that the included files WERE supposed to be complete web pages. If I am correctly understanding you now, that was incorrect. Anything included just needs the relevant code, not the complete page.
I will do my homework as soon as I get home.
I work with a couple of web guys. They keep asking me why I am screwing around with this CSS stuf - “Dude, you can do that quicker with tables.” Like my original question. I know it was pretty simple, but I new how to add a background color to a page in the html, but adding it to the CSS took me forever.
Darn it, late to the party, I see. Well, I can recommend some sources to help bring you up to speed. The W3C Schools (the website in the link Rysto mentioned) have all kinds of tutorials and explanations that are helpful when learning about web design. If you look for books, I’d recommend this one for CSS. It’s cheap and is a good reference for when you have a handle on things. When I was a beginner, some things were over my head, but it helped, and now, a few years later, I still use it. I also like the Visibone browser book, which I use all the time.
As far as using CSS for standard layouts, this CSS Cookbook was a great help when I was starting out. If you tend to like to pick apart ready-made systems and then configure them to your own needs, it might work for you, too. It will show you how to create layouts without tables, and it’s also what helped me eventually understand floating. (Floating isn’t as scary as it looks, I promise.)