HTML y CSS: Correcta utilización de código y estilos

0Sebastian Barria • 7th Mar 2010 • CSS, HTML, Web

HTML

Para clarificar los conceptos, 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> y </p> (paragraph); un texto destacado, debería ir entre <em> y </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 se debe perseguir es velar por mantener estos conceptos, evitando definir estilos y propiedades directamente en el código HTML, lo cual ayudará 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>, etc. 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). 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: