patternhtmlModerate

Personal website, done after one week of learning HTML and CSS

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

afterwebsitecsslearningoneweekdoneandhtmlpersonal

Problem

I've just started learning CSS/HTML a week ago and I made a quick site today. It looks pretty good, but I think that I reused/wrote some really messy CSS. This is because I haven't used the float property in CSS too well, so I keep using position:relative and top to offset the float.

`/ General Elements /
body {
background: #53777a;
font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}

h1 {
font-size: 28pt;
}

h2 {}

p {}

a:link {
color: black;
text-decoration: none;
}

a:visited {
color: purple;
text-decoration: none;
}
a:hover {
color: green;
text-decoration: underline;
}
a:active {
color:yellow;
text-decoration: none;
}

/ Curvy Shapes /
#wrapper, #footer {
-moz-border-radius-bottomright: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
-moz-border-radius-bottomleft: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}

#links {
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}

#header {
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}

/ Structure /
#wrapper {
width: 900px;
margin: 0 auto;
margin-top: 30px;
overflow: auto;
background: #E0E4CC;
padding: 20px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
-moz-border-radius-bottomleft: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
}

#header {

Solution

A few quick comments looking through the source:

You did very well in structuring things semantically. I only see a few

or `` tags. That said, you probably want to include more semantic markup for some things, e.g.,


    Introduction
    Thursday, January 27, 2011

If I were to rework it, I would do:


 Introduction
 Thursday, blah blah

Then your CSS will style those elements:

div#post h1 { ... }
div#post h2 { ... }

For your images, unless you need a javascript id selector, I'd probably make them a class, rather than unique ID's. It looks like your images will all be styled similarly, so why not group them using a class? Or just override the CSS defaults for the image tag.

Finally, you should probably use a CSS reset. Browsers all use different defaults, so the only sensible thing is to use a reset so that all styling attributes start out the same across all browsers. Eric Meyer is the CSS guru, he has his reset at http://meyerweb.com/eric/tools/css/reset/ (along with more explanation about why to use it).

Code Snippets

<div id="post">
    <b>Introduction</b><br />
    <i>Thursday, January 27, 2011</i>
</div>
<br />
<div id="content">

<div id="post">
 <h1>Introduction</h1>
 <h2>Thursday, blah blah</h2>
</div>
<div id="content">

div#post h1 { ... }
div#post h2 { ... }

Context

StackExchange Code Review Q#296, answer score: 17

Revisions (0)

No revisions yet.