Ahora que has aprendido los conceptos clave de CSS, vamos a combinar todo lo que has aprendido para crear una página web básica con HTML y CSS. Este capítulo te enseñará cómo aplicar todo lo aprendido para darle estilo a un sitio web, incluyendo colores, fuentes, márgenes, y más.

Estructura básica de un sitio web

El primer paso es crear la estructura HTML básica. Usaremos un encabezado, una sección principal de contenido y un pie de página.

html

Agregando estilo con CSS

Ahora que tenemos la estructura HTML, podemos aplicar estilos con CSS. A continuación se muestra el archivo styles.css para mejorar la apariencia de la página web.

css

Explicación de los estilos

• Cuerpo del documento (body): Se ha configurado una fuente general para toda la página, y se ha aplicado un margen y relleno de 0 para evitar espacios indeseados.
• Encabezado (header): El encabezado tiene un fondo oscuro con texto blanco y está centrado horizontalmente.
• Navegación (nav ul li): Los enlaces de navegación están en línea y separados por un margen.
• Contenido (main y section): Cada sección tiene un margen para separar el contenido.
• Pie de página (footer): El pie de página tiene el mismo estilo que el encabezado, pero con un tamaño de texto más pequeño.

Agregando colores y fuentes

Si deseas personalizar aún más tu sitio web, puedes experimentar con diferentes colores y fuentes. Aquí tienes un ejemplo con nuevos estilos para cambiar los colores y usar fuentes de Google.

html

css

Diseño responsivo básico

Para que la página se vea bien en diferentes dispositivos, puedes hacer que el diseño sea responsivo utilizando media queries.

css

Este es un Ejemplo de sitio web visto en un dispositivo móvil

Conclusión

En este capítulo, hemos combinado todo lo que has aprendido para crear un sitio web básico con HTML y CSS. Has visto cómo usar CSS para dar estilo a una página web y cómo mejorar su diseño para que sea visualmente atractivo y funcional. En el siguiente capítulo, repasaremos cómo depurar y optimizar tu código CSS para asegurar que tu sitio web funcione de manera eficiente.