# Newbie web design/ CSS question.

**URL:** <https://boards.straightdope.com/t/newbie-web-design-css-question/433715>\
**Category:** Factual Questions\
**Created:** [January 16, 2008, 5:40am UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715 "2008-01-16T05:40:58Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![rainwalker78](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rainwalker78](https://boards.straightdope.com/u/rainwalker78)\
**Post date:** [January 16, 2008, 5:40am UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715/1 "2008-01-16T05:40:58Z")

</div>

Here is my [web page](http://seansdigs.com/) , and here is the [style sheet](http://www.seansdigs.com/seansdigscss.css) .

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?

---

<div class="post-metadata">

**Author:** ![Rysto](https://avatars.discourse-cdn.com/v4/letter/r/ecccb3/32.png) [@Rysto](https://boards.straightdope.com/u/Rysto)\
**Post date:** [January 16, 2008, 5:44am UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715/2 "2008-01-16T05:44:32Z")

</div>

[Here’s a nitfy example showing how to do this with CSS.](http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color) You can even mess around with the HTML they display there so you can experiment.

---

<div class="post-metadata">

**Author:** ![rainwalker78](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rainwalker78](https://boards.straightdope.com/u/rainwalker78)\
**Post date:** [January 16, 2008, 5:59am UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715/3 "2008-01-16T05:59:09Z")

</div>

[QUOTE=Rysto]  
[Here’s a nitfy example showing how to do this with CSS.](http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color) You can even mess around with the HTML they display there so you can experiment.  
[/QUOTE]

Thanks for the link. I think that the body tag(not tag, but I can’t remember what it is called right now) in the example is what I was looking for.

---

<div class="post-metadata">

**Author:** ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)\
**Post date:** [January 16, 2008, 5:22pm UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715/4 "2008-01-16T17:22:48Z")

</div>

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](http://www.maxdesign.com.au/presentation/page_layouts/) 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.

---

<div class="post-metadata">

**Author:** ![rainwalker78](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rainwalker78](https://boards.straightdope.com/u/rainwalker78)\
**Post date:** [January 16, 2008, 6:24pm UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715/5 "2008-01-16T18:24:53Z")

</div>

[QUOTE=Duckster]  
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](http://www.maxdesign.com.au/presentation/page_layouts/) 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.  
[/QUOTE]

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.

---

<div class="post-metadata">

**Author:** ![Duckster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/duckster/32/1244_2.png) [@Duckster](https://boards.straightdope.com/u/Duckster)\
**Post date:** [January 17, 2008, 4:12am UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715/6 "2008-01-17T04:12:51Z")

</div>

[QUOTE=rainwalker78]  
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.  
[/quote]  
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:

```auto

<!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:

```auto

<!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>
<link href="/path/to/css/css-code.css" rel="stylesheet" media="screen" type="text/css" />
</head>

<body>

<div id="container">

<!--#include virtual="/path/to/header.shtml" -->
<!--#include virtual="/path/to/content.shtml" -->
<!--#include virtual="/path/to/footer.shtml" -->

</div>
</body>
</html>

```

The SSI only contains this code:

```auto

<div id="header">
<h1>Header</h1>
</div>

```

The SSI only contains this code:

```auto

<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:

```auto

<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.

---

<div class="post-metadata">

**Author:** ![mhendo](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/mhendo/32/3159_2.png) [@mhendo](https://boards.straightdope.com/u/mhendo)\
**Post date:** [January 17, 2008, 5:03am UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715/7 "2008-01-17T05:03:51Z")

</div>

Here’s a few of the sites i used when i was first trying to get a handle on CSS.

[WestCiv](http://www.westciv.com/style_master/academy/css_tutorial/introduction/index.html)  
[CSS Edge](http://meyerweb.com/eric/css/edge/index.html)  
[BrainJar](http://www.brainjar.com/)  
[Position is Everything](http://www.positioniseverything.net/index.php)  
[CSS Vault](http://cssvault.com/resources/)  
[HTML Dog](http://www.htmldog.com/)

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.

---

<div class="post-metadata">

**Author:** ![rainwalker78](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rainwalker78](https://boards.straightdope.com/u/rainwalker78)\
**Post date:** [January 17, 2008, 4:30pm UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715/8 "2008-01-17T16:30:37Z")

</div>

[QUOTE=Duckster]  
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.  
[/QUOTE]

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.

[QUOTE=Duckster]  
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.  
[/QUOTE]

I will do my homework as soon as I get home.

[QUOTE=mhendo]  
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.  
[/QUOTE]

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.

Thanks to both of you for all your help!

---

<div class="post-metadata">

**Author:** ![toadspittle](https://avatars.discourse-cdn.com/v4/letter/t/c0e974/32.png) [@toadspittle](https://boards.straightdope.com/u/toadspittle)\
**Post date:** [January 17, 2008, 4:37pm UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715/9 "2008-01-17T16:37:05Z")

</div>

[QUOTE=Duckster]

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.  
[/QUOTE]

Those toolbars ARE awesome, by the way. Definitely install them.

---

<div class="post-metadata">

**Author:** ![Balthisar](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/balthisar/32/2825_2.png) [@Balthisar](https://boards.straightdope.com/u/Balthisar)\
**Post date:** [January 17, 2008, 5:39pm UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715/10 "2008-01-17T17:39:01Z")

</div>

Don’t forget to install Firebug, too!

---

<div class="post-metadata">

**Author:** ![beanpod](https://avatars.discourse-cdn.com/v4/letter/b/a9adbd/32.png) [@beanpod](https://boards.straightdope.com/u/beanpod)\
**Post date:** [January 17, 2008, 8:31pm UTC](https://boards.straightdope.com/t/newbie-web-design-css-question/433715/11 "2008-01-17T20:31:02Z")

</div>

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](http://www.amazon.com/CSS-Pocket-Reference-Visual-Presentation/dp/0596515057/ref=pd_bbs_sr_1?ie=UTF8&s=books&qid=1200601419&sr=8-1) 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](http://www.visibone.com/) browser book, which I use all the time.

As far as using CSS for standard layouts, this [CSS Cookbook](http://www.amazon.com/CSS-Cookbook-2nd-Christopher-Schmitt/dp/0596527411/ref=pd_bbs_sr_1?ie=UTF8&s=books&qid=1200601658&sr=1-1) 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.)