Rob,

What I do is start off with a default style sheet. (see attached). In
this starting CSS I break it down into different sections. This helps me
out as like you, if I don't plan ahead, it gets pretty messy and
disorganized very quick. 

If the project is big then I would use a couple of style sheets. One for
the layout/framework of the site and then one for rest of the styles.
(framework.css and common.css). That way if you have a problem with the
layout of the site you can turn off the other style sheet to see what
the problem is. This would be difficult if you had all of your style in
one file.

Is there a correct way to do this, I don't think so. Depending on who
you ask, every one has a different way or organizing their style sheets.

Here are some articles that might help you out.

http://www.andybudd.com/archives/2003/08/how_i_organize_my_stylesheets/
http://www.digital-web.com/articles/architecting_css/
http://www.mezzoblue.com/css/cribsheet/

I hope this helps.

James





-----Original Message-----
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Rob Enslin
Sent: Thursday, November 01, 2007 12:35 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] CSS help

Dear Group,

I'm a relative newby to web design so please excuse me if this
question is simple.

The problem:

I don't have (or know how to have) a structured system of building my
style sheets. I find I keep just adding to the file until problems in
my output display start to develop. They very often become messy and
conflict-ridden. My style sheets end up being very long and don't
cascade well.

The question/advise/thoughts:

Is there a way, a logical procedure or rule which I should adopt to
prevent me from going forwards and backwards and constantly patching
it up?

Any help from an already helpful discussion forum most appreciated.

Thanks, Rob


*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************


*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
/*-----------------------------------------------------------------------------
[client] Screen Stylesheet

version:   1.0
date:      10/12/07
author:    [James Likely]
-----------------------------------------------------------------------------*/

body {
	font-family: verdana, geneva, arial, helvetica, sans-serif;
	font-size: 100%;
	line-height: 1.5em;
	padding: 0;
	margin: 0;
	color: #333;    
	text-align:center;
}

#container {
	width:980px;
	text-align:left;  
	margin-left:auto;
	margin-right:auto;
	background-color: #ffffff;
}

/* Common Content Formatting
-----------------------------------------------------------------------------*/

a {  color:#008eda; outline: none;  text-decoration: none; font-weight: normal;}
a:link {	color:#008eda; }
a:visited { color: #008eda;  }
a:hover, a:focus{ color: #008eda; text-decoration: underline;  }
a:active { color: #008eda; }

h1{
}
    
h2{  
}
    
h3{
}
    
h4{   
}
    
h5 {  
}
    
p {
} 

ul {
}

li {
}

/* Remove padding and margin */
* {
	margin: 0;
	padding: 0;
	border: 0;
}

.clear{
	clear:both;
}

.right{
	float: right;
}

.left {
	float: left;
}

/* Framework
-----------------------------------------------------------------------------*/

/* Header Logos
-----------------------------------------------------------------------------*/

#logo {
	margin: 0 auto;
	padding: 20px 0 0 0;
	text-align: left;
}

#logo span, #logo a {
	display: block;
	width: 220px;
	height: 45px;
	padding: 0;
	border-style: none;
	background: url(/common/images/mc-logo2.gif) no-repeat;
}

#logo a img  {
	display: block;
	width: 0;
	height: 0;
	border: none;
}

/* Navigation
-----------------------------------------------------------------------------*/

/* Footer
-----------------------------------------------------------------------------*/

/* Forms
-----------------------------------------------------------------------------*/ 

/* Tables
-----------------------------------------------------------------------------*/

table {
	border-spacing: 0;
	border-collapse: collapse;
	font-size: 12px;
}

td {
	text-align: left;
	font-weight: normal;
}












Reply via email to