Manual CSS – Paso 8 > Aplicando estilo en los contenedores

Publicado por Fernando Tellado el 27 Ene, 2008

Índice de contenidos

1 IDs y Clases
2 Aplicando estilo al entorno

Si tienes los contenedores en la posición correcta y el contenido se está comportando aceptablemente, puedes empezar a aplicar estilo al contenido de los contenedores.

IDs y Clases

Utiliza cuantos menos IDs y clases como sea posible. Deberías ser capaz de aplicar estilo a casi cualquier elemento dentro de un contenedor utilizando selectores descendentes. Por ejemplo:

#header {} /* styles the container */
#header h1 {} /* styles any <h1> in the container */
#header p {} /* styles any <p> in the container */
#header ul {} /* styles any <ul> in the container */
#header ul li {} /* styles any <li> in the container */
#header a {} /* styles any <a> in the container */
#header li a:link {} /* styles any <a> within an <li> in the container */

Aplicando estilo al entorno

También es buena idea agrupar juntas estas reglas en tus hojas de estilo, de modo que puedas trabajar en un contenedor y todos los estilos relacionados sin tener que buscarlos. Mark Newhouse se refiere a esto como un Estilo del Entorno. Estos grupos de letras también puede ser “comentados” ((Comentar un código es aplicar claves especiales que evitan que se ejecuten)) para hacer que te sea mas fácil trabajar con ellos en el futuro.

A cada sección de la página se le puede ahora aplicar estilo individualmente, y como ya has establecido los métodos de colocación puedes trabajar con seguridad en los pequeños detalles.

Aplicando estilo al cuerpo y elementos generales
Aplicando estilo al contenedor
Aplicando estilo a la cabecera
Aplicando estilo al mainnav
Aplicando estilo al menú
Aplicando estilo a los contenidos
Aplicando estilo al contenedor de entrada del blog
Aplicando estilo a los enlaces del blog
Aplicando estilo al footer
Aplicando estilo al menú de salida
Resultados en Browser Cam (necesitas crear antes un proyecto)

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.