Personal home page for a court interpreter

Could someone please review my code? It seems too convoluted. I am just starting to learn to go from blog to hosting.

`

*/
/ Use this with templates/template-twocol.html /
body {
background:#3e006a;
margin:0;
color:#80ff00;
font:x-small Georgia Serif;
font-size/ /:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:#9fff3f;
text-decoration:none;
font-size/ /:/**/small;
font-size: /**/small;
}
a:visited {
color:#9fff3f;
text-decoration:none;
font-size/ /:/**/small;
font-size: /**/small;
}
a:hover {
color:#80FF00;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width: 850px; align: center; border: 1px solid #c1a1ff; margin-left: 45px; margin-right: 0px; margin-top: 10px; margin-bottom: 10px
border:1px solid #80FF00;
align: center
}
#header-inner {
background-position: center;
margin-left: 0px;
margin-right: 0;
}
#header {
margin: 5px;
border: 1px solid #80FF00;
text-align: center;
color:#80FF00;
}
#header h1 {
margin:5px 5px 0;
padding:0px 0px
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal normal 220% Verdana, sans-serif;
}
#header a {
color:#80FF00;
text-decoration:none;
}
#header a:hover {
color:#80FF00;
}
#header .description {
margin:0 5px 5px;
padding:0 0px 0px;
max-width:870px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 78% Verdana, sans-serif;
color: #ca80ff;
}
#header img {
margin-left: auto;
margin-right: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1000px;
margin:0 auto;
padding:1px;
text-align:LEFT;
font: normal normal 99% Verdana, sans-serif;
}
#main-wrapper {
width: 950x;
align: left;
word-wrap: break-word; / fix for long text breaking sidebar float in IE /
overflow:
}
#sidebar-wrapper {
width: 0px;
float: RIGHT;
word-wrap: break-word; / fix for long text breaking sidebar float in IE /
overflow: hidden;

It's a start, but there are a number of things that could be improved:

• Your CSS and JavaScript should almost always be in separate files.

• Most of your CSS looks okay, but you might find it easier to read if you indented the properties.

• The comments between CSS properties like font-size/ /:/**/small; aren't necessary.

• Your CSS font declaration, font: ; is incorrect. You should be using color:#E1C4FF; font-size:14px; (or whatever size you need).

• You really don't need most of those meta tags.

• Using inline CSS like   is almost always discouraged.

• Likewise, you shouldn't need all of those paragraph tags to create a break in your layout. Just set the margin or padding of whatever element you need.

• I've never seen anything like the commented out variable definitions before, but they aren't necessary. Also, explaining that bordercolor means border color is a little redundant.

• You have multiple script tags throughout the header. If you're going to have inline JavaScript, try limiting it to a single tag.

• I'm not sure why you have another body tag in the middle of your HTML, but you only need one. You can also get rid of the font tags and just apply a CSS class if it needs to be different.

• There is a lot of extra markup throughout, including a lot of empty tags. I haven't loaded this in a browser, but I suspect that you could do with a lot less and still get the same effect.

It's great that you're coming here looking to learn. Code like this will only start you on the wrong path and it will be difficult to maintain in the long run, but kudos for seeking improvement. I honestly think you would benefit from relearning the basics of HTML and CSS to start and then eventually adding some JavaScript. Specifically, look for some articles on CSS layouts and best-practices. Good luck!

StackExchange Code Review Q#5105, answer score: 7