Manual CSS - Paso 8 > Aplicando estilo en los contenedores

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”¹ 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)

1. Comentar un código es aplicar claves especiales que evitan que se ejecuten [↩]

También te puede interesar:

• Manual CSS - ¡Terminaste!
• Manual CSS - Paso 9 > Sacando el CSS
• Manual CSS - Paso 7 > Colocando el contenido
• Manual CSS - Paso 6 > Cajas coloreadas
• Manual CSS - Paso 5 > Elije un método de posición para los contenedores

2 comentarios | Escribe un comentario

Escribe un comentario