In any task or project, planning smoothe things out. Same with little chunks of it – the CSS, you have to be really careful structuring your CSS from zero up.

If you’re lucky, you received a JPEG image or screenshot of what the final design looks like and that you are at a good start, if not, all I can say is “good luck”, LOL! With or without reference, this is how I’d go.

Consider first how you want to look a normal HTML element or based from screenshot design, create a set of CSS attributes for them (p { color: #333; }) . Later if you realize you want a group of HTML elements to look slightly different from others, create a class for them (.lighter { color: #666;} or p.lighter { color: #666;}). Now the ID, which many often replace the purpose with that of the class. Don’t know why, probably because the dot (.) looks tidier than the hash (#) sign? Or easier to type it on keyboard without the shift key? Whatever reason, it is so much NOT right, NOT recommended (well of course your page passed W3C CSS validation test), and if you do this, it just shows you just want this task or project pushed out of the door.

The ID, same in the sense of programming, must be unique, like the #footer and the #header, which should only appear once in an HTML page. If you’re not sure the ID appeared only once, submit it to W3C CSS validation service. It is also a common practice in web development, when displaying a data table, the rows are associated with the database ID during iteration (<tr id="row_25"><td>...). You can also manipulate the look of a specific row given the ID like #row_25 { background-color: yellow; } for purposes of highlighting.

Often, good css structure start with this.

* {
  padding: 0;
  margin: 0;
}

This code is known as “reset”, some “global selector”, which sets visible elements gets zero padding and margin, thus making your design to be 90% constant appearance on majority of browsers. What happened to the 10% ? These are the elements that inherit system behaviour, like form inputs, viewable window size and scrollbars, system colors, etc. I’m afraid, you really have to deal with those little bits of pieces or I maybe wrong. Somebody may have found a way to normalize these elements.