Escritura y Enlace de CSS en Proyectos HTML Básicos

Clase 9 de 27 • Curso de Creación de Páginas Web con Wordpress y No-code

Resumen

¿Cómo enlazar CSS al HTML?

Es fundamental entender cómo incorporar CSS en nuestros proyectos HTML. Para comenzar a trabajar con CSS, creamos un archivo dedicado en una carpeta específica para mantener el orden en nuestros proyectos. Se enlaza este archivo CSS con el HTML utilizando la etiqueta <link>, ubicada dentro de la etiqueta <head>. Esta etiqueta define que el tipo de archivo conectado es una hoja de estilos. Aquí te mostramos cómo hacerlo paso a paso:

<head>
    <link rel="stylesheet" href="css/styles.css">
</head>

¿Cómo verificar la conexión de la hoja de estilos?

Antes de avanzar, asegúrate de que la conexión sea correcta. Un método común es aplicar un fondo rojo al body. Si el navegador refleja este cambio, ¡estás conectado!

body {
    background: red;
}

¿Qué son los estilos por defecto en los navegadores?

Los navegadores aplican estilos predeterminados a los elementos. Aunque no los veas, están allí, listos para complicarte la vida al organizar tus elementos. Por ejemplo, un margen extraño alrededor de las imágenes podría dificultar el diseño.

Para controlarlo, una práctica común es resetear los márgenes y paddings predeterminados usando un asterisco (*) que selecciona todos los elementos:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

¿Cómo funciona el 'box-sizing'?

El box-sizing es crucial para garantizar una disposición precisa de los elementos. La propiedad border-box incluye el padding y el borde dentro del ancho y alto especificados. Para demostrar su importancia:

Crea un elemento <div>:

<div id="explicacion"></div>

Dale estilo y observa la diferencia:

#explicacion {
    width: 500px;
    height: 500px;
    background: blue;
}

Al aplicar un padding:

padding: 100px;

Sin box-sizing, el navegador considerará 700px debido al padding adicional. Con box-sizing: border-box, el tamaño se mantiene en 500px.

¿Qué es el modelo de caja?

Este concepto es esencial al trabajar con CSS. Los elementos HTML se tratan como "cajas", que incluyen:

Contenido: texto o imagen dentro de la caja.
Padding: espacio entre el contenido y el borde de la caja.
Borde: línea que rodea la caja.
Margen: espacio fuera del borde de la caja.

Aplicar box-sizing: border-box asegura que el padding y el borde no afecten el tamaño total, facilitando el diseño y evitando la ruptura del layout.

Con estos conceptos, tu comprensión de CSS y su interacción con HTML mejorará significativamente. Así que no te quedes aquí, sigue practicando y explora más sobre CSS para crear sitios web impresionantes. ¡Nos vemos en la próxima clase!