Para clarificar los conceptos, acá les dejo una breve reseña de lo escencial que hay que tener en mente a la hora de desarrollar un sitio utilizando (X)HTML y CSS: cual es la función de cada uno de los elementos y que cosas hay que tener en consideración a la hora de armar el código y definir estilos, id's y clases.

HTML

El objetivo de un archivo HTML es contener solamente la información semántica, especificando el tipo de contenidos entre etiquetas. Su función es ver los objetos de manera estructurada, pero sin definir sus propiedades. Se ve que hay un párrafo, pero no se sabe sus características.

En estricto rigor, un texto que corresponda a un párrafo, debería ir entre las etiquetas P (paragraph); un texto destacado, debería ir entre EM (emphasis), etc. Lo ideal es que al ver el código fuente, no se vean las características o propiedades de los objetos, sino que sólo el contenido de manera estructurada.

El archivo CSS es el que define la apariencia de la página, especificando los estilos de cada uno de los componentes de la estructura HTML. Por ejemplo, es el que define de qué color van a ser los párrafos, cuanto ancho tendrá una columna, etc.

La utilización de ambos documentos en conjunto, generan una página Web completa que es vista correctamente en cualquier navegador.
El objetivo que debemos tener como empresa al realizar cualquier sitio es velar por mantener estos conceptos, evitando definir estilos y propiedades directamente en el código HTML, lo cual nos ayudará a todos a una comprensión mucho más fácil de los documentos.

CSS

La función del documento CSS es contener todas las propiedades de cada elemento HTML. Por esto, hay que tener en mente nunca escribir las especificaciones de estilo directamente en el código, sino que crear CLASES o ID’s.

Para aclarar los términos, el código HTML es un lenguaje compuesto por  etiquetas, las cuales definen el tipo de objeto que encierran. Por ejemplo:

<p>párrafo</p>
<div>división</div>
<em>enfatizado</em>

Estas etiquetas son llamadas en CSS directamente por su nombre:

p{
    acá van las propiedades para todos los elementos p de la página…
}
body{
    acá van las propiedades del body…
}

Cada elemento (definido a través de las etiquetas), puede tener un ID, que sirva para identificarlo del resto de los elementos y para llamarlo vía javascript. Este ID debe ser único en toda la página, y generalmente se le asigna ID a los objetos importantes y únicos, como al footer, al cuerpo, o la cabecera. Por CSS, los elementos que poseen ID, deben ser llamados anteponiéndole el signo #:

#cuerpo{
    acá van las propiedades del elemento "cuerpo"…
}

Adicionalmente, e independiente de si posee ID o no, cada elemento puede tener una o más clases (class) separadas por espacios. Las clases definen un tipo de objeto, por lo que pueden ser aplicadas a cualquier elemento de la página. Para definir propiedades de una clase en CSS, se antepone un punto:

.elemento_de_menu{
    acá van las propiedades para los elementos que sean
    de clase "elemento_de_menu"
}

Las definiciones de CSS funcionan por jerarquía, por lo que si un elemento tiene un ID aplicado (para este ejemplo, será el id "btn_finalizar"), se accede al elemento de la siguiente manera:

p#btn_finalizar{
    acá van las propiedades del elemento p que tiene el id "btn_finalizar"
}

Si el elemento p, con el id "btn_finalizar" se encuentra dentro de un div, se accede a él anteponiendo |div + espacio|, de la siguiente manera:

div p#btn_finalizar{
acá van las propiedades del elemento p que tiene el id "btn_finalizar"
}

En este caso, la separación a través de un espacio define que el objeto se encuentra “dentro”. Si no se utiliza un espacio, significa que es el mismo elemento el que posee el ID. Para el caso de las clases, la jerarquía se utiliza define de la misma manera.

En el caso de las clases, es posible utilizar varias clases en un mismo elemento, separándolas con espacios. Por ejemplo:

<p class="elemento_de_menu destacado">

Para definir los términos que se utilizarán, los componentes de una definición de CSS son:

body{
    width: 600px;
}

Selector: body
Propiedad: width
Valor: 600
Unidad: px

Definición de nombres de IDs y clases

Por definición, las clases definen un tipo de objeto, por lo que se debe considerar no darles nombres de propiedades, como "texto_rojo", sino que intentar utilizar "alerta", o "texto_destacado". De esta manera, los nombres de estas clases serán claros y podrán ser utilizados en más de un tipo de elemento.

Para las clases y IDs, es muy importante evitar el uso de números en los nombres, como "tabla2", "banner1", etc., pues si dentro de un código hay 12 DIVs, no es posible distinguir con un número de cual estamos hablando.

Como recomendación (para unificar la forma de trabajo), los nombres de las clases se deberían ser creados utilizando guión bajo para separar las palabras: nombre_de_la_clase.

Para mantener una lógica de creación de nombres, todas las clases y IDs deberían ser creadas en un mismo idioma. Esto tiene como fin evitar tener nombres como "texto_bold" y "text_negrita". De esta manera, todos los desarrolladores podrán intuir como se llaman las clases.