Poor structure of my CSS file...

**Wizardx8** · Sep 1, 2002 18:16

Hi guys, well I finally got my personal site finished, and am going over everything with a fine tooth comb before launching it, and the more I look at my css file, the more I do not like it...

The problem is that it is simply messy, and I am not sure what to do to make it "neater"... So can anyone offer any suggestions please? Here it is...

Code:

/* The body tag defines the rules for the entire page. */

body {
	margin:0px;
	padding:0px;
	font-family:verdana, arial, helvetica, sans-serif;
	color:#333;
	background-color:white;
	}

/* The Header section is the top bar, using a few hacks to get things to display properly in multiple browsers. */

#Header {
	margin:50px 0px 30px 0px;
	padding:25px 20px 15px 20px;
	height:56px; /* 14px (Correct Height) + 40px (Padding) + 2px (Borders) = 56px */
	border-style:solid;
	border-color:black;
	border-width:1px 0px;
	line-height:0px;
	background-color:#eee;
	color:#000;
	font-size:36px;
	text-align:left;
	font-family:verdana, arial, helvetica, sans-serif;

	/* Tantek Celic's IE5 hack, see http://glish.com/css/hacks.asp for details. */

	voice-family: "\"}\"";
	voice-family:inherit;
	height:14px;
	}

	/* The "Be nice to Opera 5" hack that must accompany Tantek Celic's IE5 hack above. */

body>#Header {
	height:14px;
	}

/* My logo image. */

#Image {
	position:absolute;
	top:12px;
	right:20px;
	}

/* The content id defines the section of the page where the content will be positioned, this section is fluid and will resize with the browser appropriately.*/

#Content {
	margin:0px 50px 50px 170px;
	padding:10px;
	}

/* The menu id is for the left hand navigation box. */

#Menu {
	position:absolute;
	top:150px;
	left:20px;
	width:142px;
	padding:10px;
	background-color:#eee;
	color:#000;
	border:1px solid #000;
	line-height:17px;

	/* Again, IE5 hack. */
	
	voice-family: "\"}\"";
	voice-family:inherit;
	width:120px;
	}

	/* Again, "Be nice to Opera 5". */

body>#Menu {
	width:120px;
	}

/* The copyright section defines the positioning and formatting for the small copyright text on each page. */

#Copyright {
	clear:both;
	padding:20px 0px 0px 0px;
	text-align:center;
	font-size:11px;
	background-color:transparent;
	color:#999;
	}

#CopyrightText {
	position:relative;
	left:-1.5em;
	}

/* The h1 tag is used for the sub headings on each page. */

h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:28px;
	line-height:28px;
	font-weight:normal;
	color:#c00;
	background-color:transparent;
	font-family:verdana, arial, helvetica, sans-serif;
	}

/* The p(aragraph) tag defines all content text. */

p {
	font:11px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 16px 0px;
	padding-top:20px;
	}

#Content>p {
	margin:0px;
	}

/* Formatting for all list items. */

li {
	font:11px verdana, arial, helvetica, sans-serif;
	}

/* Formatting for all links. */

a {
	font-family:Verdana, Helvetica, arial, sans-serif;
	font-size:11px;
	margin-bottom:5px;
	}

a:link {
	text-decoration:none;
	background-color:transparent;
	color:#000;
	}

a:visited {
	text-decoration:none;
	background-color:transparent;
	color:#000;
	}

a:hover {
	text-decoration:underline;
	background-color:transparent;
	color:#c00;
	}

a:active {
	text-decoration:underline;
	background-color:transparent;
	color:#c00;
	}

a.ContentLink:link {
	border-bottom:1px dotted;
	background-color:transparent;
	color:#000;
	}

a.ContentLink:visited {
	text-decoration:none;
	background-color:transparent;
	color:#000;
	}

a.ContentLink:hover {
	text-decoration:none;
	background-color:transparent;
	color:#c00;
	}

a.ContentLink:active {
	text-decoration:none;
	background-color:transparent;
	color:#c00;
	}

.SubPageLink {
	font-size:12px;
	}

.IndentedLink {
	position:relative;
	left:1.5em;
	}

a.SelectedLink {
	font-family:Verdana, Helvetica, arial, sans-serif;
	font-size:11px;
	margin-bottom:5px;
	text-decoration:underline;
	background-color:transparent;
	color:#c00;
	}

span.SelectedLink {
	font-family:Verdana, Helvetica, arial, sans-serif;
	font-size:11px;
	margin-bottom:5px;
	text-decoration:underline;
	background-color:transparent;
	color:#c00;
	}

.SelectedIndentedLink {
	position:relative;
	left:1.5em;
	font-family:Verdana, Helvetica, arial, sans-serif;
	font-size:11px;
	margin-bottom:5px;
	text-decoration:underline;
	background-color:transparent;
	color:#c00;
	}

/* Formatting for images in portfolio section. */

.LinkImage {
	border:0px solid #000;
	}

/* Formatting for text in portfolio section. */

#PortfolioContent {
	text-align:center;
	}

Now I am only new to CSS, and this is my first real go at doing a full CSS driven site, and whilst the code all works, it is simply ugly, as I had only ever planned on it being a temporary thing, and then added to it, and it grew into this...

So... can anyone please help?