Estilos y estructura

A pesar de que cada navegador garantiza estilos por defecto para cada uno de los elementos HTML, estos estilos no necesariamente satisfacen los requerimientos de cada diseñador. Normalmente se encuentran muy distanciados de lo que queremos para nuestros sitios webs. Diseñadores y desarrolladores a menudo deben aplicar sus propios estilos para obtener la organización y el efecto visual que realmente desean.

IMPORTANTE: En esta parte del capítulo vamos a revisar estilos CSS y explicar algunas técnicas básicas para definir la estructura de un documento. Si usted ya se encuentra familiarizado con estos conceptos, siéntase libre de obviar las partes que ya conoce.

Elementos block

Con respecto a la estructura, básicamente cada navegador ordena los elementos por defecto de acuerdo a su tipo: block (bloque) o inline (en línea). Esta clasificación está asociada con la forma en que los elementos son mostrados en pantalla.

Elementos block son posicionados uno sobre otro hacia abajo en la página.

Elementos inline son posicionados lado a lado, uno al lado del otro en la misma línea, sin ningún salto de línea a menos que ya no haya más espacio horizontal para ubicarlos.

Casi todos los elementos estructurales en nuestros documentos serán tratados por los navegadores como elementos block por defecto. Esto significa que cada elemento HTML que representa una parte de la organización visual (por ejemplo, <section>, <nav>, <header>, <footer>, <div>) será posicionado debajo del anterior.

En el Capítulo 1 creamos un documento HTML con la intención de reproducir un sitio web tradicional. El diseño incluyó barras horizontales y dos columnas en el medio. Debido a la forma en que los navegadores muestran estos elementos por defecto, el resultado en la pantalla está muy lejos de nuestras expectativas. Tan pronto como el archivo HTML con el código del Listado 1-18, Capítulo 1, es abierto en el navegador, la posición errónea en la pantalla de las dos columnas definidas por los elementos <section> y <aside> es claramente visible. Una columna está debajo de la otra en lugar de estar a su lado, como correspondería. Cada bloque (block) es mostrado por defecto tan ancho como sea posible, tan alto como la información que contiene y uno sobre otro, como se muestra en la Figura 2-1.

Figura 2-1. Representación visual de una página web mostrada con estilos por defecto.

Modelos de caja

Para aprender cómo podemos crear nuestra propia organización de los elementos en pantalla, debemos primero entender cómo los navegadores procesan el código HTML. Los navegadores consideran cada elemento HTML como una caja. Una página web es en realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son establecidas por estilos provistos por los navegadores o por los diseñadores usando CSS.

CSS tiene un set predeterminado de propiedades destinados a sobrescribir los estilos provistos por navegadores y obtener la organización deseada. Estas propiedades no son específicas, tienen que ser combinadas para formar reglas que luego serán usadas para agrupar cajas y obtener la correcta disposición en pantalla. La combinación de estas reglas  es normalmente llamada modelo o sistema de disposición. Todas estas reglas aplicadas juntas constituyen lo que se llama un modelo de caja.

Existe solo un modelo de caja que es considerado estándar estos días, y muchos otros que aún se encuentran en estado experimental. El modelo válido y ampliamente adoptado es el llamado Modelo de Caja Tradicional, el cual ha sido usado desde la primera versión de CSS.

Aunque este modelo ha probado ser efectivo, algunos modelos experimentales intentan superar sus deficiencias, pero la falta de consenso sobre el reemplazo más adecuado aún mantiene a este viejo modelo en vigencia y la mayoría de los sitios webs programados en HTML5 lo continúan utilizando.

Vea nuestro curso de HTML

Elementos clave en los estilos:

1. Colores:
   • Usando la propiedad color para el texto y background-color para el fondo.
   • Ejemplo:
     css

     Copiar código

     body {
background-color: #ffffff;
color: #333333;
}

2. Fuentes:
   • font-family define la tipografía, font-size el tamaño del texto, y font-weight el grosor.
   • Ejemplo:
     css

     Copiar código

     h1 {
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: bold;
}

3. Espaciado:
   • margin controla el espacio exterior de un elemento y padding el espacio interior.
   • Ejemplo:
     css

     Copiar código

     p {
margin: 20px;
padding: 10px;
}

4. Alineación:
   • text-align para alinear texto y float o flex para alinear elementos.
   • Ejemplo:
     css

     Copiar código

     .contenedor {
text-align: center;
display: flex;
justify-content: space-around;
}

5. Diseño Responsivo:
   • Uso de media queries para aplicar diferentes estilos según el tamaño de la pantalla.
   • Ejemplo:
     css

     Copiar código

     @media (max-width: 600px) {
body {
font-size: 14px;
}
}


Relación entre Estilos y Estructura

• Estructura (HTML): Define la disposición y jerarquía del contenido, asegurando que la página tenga una organización clara y accesible.
• Estilos (CSS): Mejoran la presentación visual de esa estructura, haciendo que la página sea más atractiva y fácil de usar.