How to use Cascading Style Sheets for total page design.

Posted on 2006-10-24
Last Modified: 2013-11-19
Hi, Experts.  I am building a new site and need some solid development input.  This site will have one main site and then 10 different "sub sites" that will need to be similar, but not identical.  I have been reading about templates and nested templates in Dreamweaver, then I read about CSS as opposed to templates, and then I also read about SSI in Dreamweaver.  Do I use one of these options or all of them together?  What do most large sites do?  Is there a better way to do this and is one more accepted over the other?  I have always stayed clear of CSS due to the browser incompatabilities, but with the new advanced browsers, I don't believe this is as much an issue.  I am also confused on how CSS "builds" an entire page with all the proper page elements.  I thought CSS was only used for design elements and not for adding objects (like images, navigation bars, etc.) to a page.  Any explanations, directions or references would be appreciated!
Question by:ODATech
  • 2
LVL 10

Expert Comment

ID: 17797120
I can address css a little bit.  There's some workarounds for using images with css such as background-image or using an image as your h1 tag.  I highly recommend taking a look at where there's hundreds of designs with the same content, each with a different css. addresses drop down navigation using style sheets.  Personally, I highly recommend cascading style sheets since the look & feel of your pages is controlled from a single location (or in your case, just a few locations).
LVL 70

Accepted Solution

Jason C. Levine earned 500 total points
ID: 17800545
Hi ODATech,

There are thousands of tutorials on CSS out there, Google for one that you like.   KenAdney has a good point in directing you to csszengarden, which shows how different stylesheets affect the layout of the same content.

Here's an oversimplified version of what is going on in a CSS page:

1) All of your "elements" (headers, footers, navigation, contents, etc) are contained in <div> tags.  Each div receives an identifier: an ID or a CLASS.

2) The overall page either contains a CSS section in the <head> section or a link to an external CSS file.  In the CSS, each id and class receives several properties that determine where they appear when rendered by a browser.  You can define heights, widths, locations (both relative to other divs and absolute), colors, and much much more.  By learning how the different properties interact, you can create pages with columns, floating areas, and all sorts of bells and whistles.

Here's a quick and dirty illustration of how to use divs and CSS to arrange things:

Here is a quickie sample of a centered container div with three centered "content" divs to get you started:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.container {
     width: 700px;
     margin-right: auto;
     margin-left: auto;
.header {
     background-color: #00FF00;
     width: 98%;
     margin-right: auto;
     margin-left: auto;
.content {
     background-color: #0000FF;
     width: 98%;
     margin-right: auto;
     margin-left: auto;
.footer {
     background-color: #FF0000;
     width: 98%;
     margin-right: auto;
     margin-left: auto;

<div class="container">
  <div class="header">
    <p>Content for  class "header" Goes Here</p>
  <div class="content">
    <p>Content for  class "content" Goes Here</p>
  <div class="footer">
    <p>Content for  class "footer" Goes Here</p>

Author Comment

ID: 17810757
Thanks, Jason.  That's exactly what I was looking for.  I had been to zengarden before and although they have a lot of good designs, I can't really use someone else's ideas or styles on my site ... it's a great site though to see how powerful CSS is, but the real nuts and bolts are not there; at least not on my visit.  I may have some other questions for you Jason ... I'll post them on this topic, but I am excited about using the CSS on the site.  I think it will be easier for me to maintain.

I do have one immediate question regarding concept:
1.  I create my css (I think I will use the external file method).
2.  I build my different templates and put the link to the external file in the head?
3.  Will I still implement layers then?  Or are they handled in the div tags of the CSS?
4.  How do I make them editable?  Is that also done in the CSS?

Thanks, Jason!  Again I am totally amazed at this site and how helpful it is to me personally and professionally.  You are all truly experts!

LVL 70

Expert Comment

by:Jason C. Levine
ID: 17814452
>> I'll post them on this topic

Actually, post new questions.  If you post them here, I'll answer but there are so many people here who are so much better with CSS than I am...

>>I do have one immediate question regarding concept:
>>1.  I create my css (I think I will use the external file method).

You should use external files.  Easier.

>> 2.  I build my different templates and put the link to the external file in the head?


>> 3.  Will I still implement layers then?  Or are they handled in the div tags of the CSS?

Not sure where you are going with this.  When you create the template (assuming we are talking DW templates), you set the layout there.  If you want to use layers, you can (I don't recommend using absolutely positioned elements for the most part).  All a CSS layer is is a div with specific properties set.

>> 4.  How do I make them editable?  Is that also done in the CSS?

Once the layout is done, select the layer or region defined by the div and Insert | Template Object | Editable Region.  When you finally save the template file and apply it to new pages, those regions are editable.

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
query of query sort 6 106
AngularJS directive issue 6 72
Problem to file 3 83
Download a website to hdd 2 82
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question