Diseña tu página con CSS

Empieza por los estilos generales.

Antes de diseñar cada sección, estableceremos unas reglas básicas para toda la página.

Abre el archivo styles.css de tu proyecto y empieza con:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #222222;
  background: #ffffff;
  line-height: 1.6;
}

Con esto eliminamos el margen predeterminado del navegador y establecemos una base común para la página.

box-sizing: border-box facilita el control de tamaños porque hace que padding y bordes formen parte del ancho total de los elementos.

Diseña la navegación.

Empezaremos dando estructura al menú que creamos en la lección anterior.

nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Aquí aparecen varias propiedades nuevas.

max-width limita el ancho máximo del contenido.

margin: 0 auto centra el bloque horizontalmente.

display: flex permite distribuir los elementos de forma flexible.

justify-content: space-between separa los elementos hacia los extremos.

Da estilo a los enlaces.

Por defecto, los navegadores muestran los enlaces subrayados. Podemos cambiar su apariencia.

nav a {
  color: #222222;
  text-decoration: none;
  margin-left: 20px;
}

También podemos indicar qué ocurre al pasar el cursor:

nav a:hover {
opacity: 0.6;
}

Este pequeño cambio ya aporta interacción visual.

Diseña la sección principal.

La primera sección de la página debe tener suficiente espacio para que el mensaje principal destaque.

main > section:first-child {
  max-width: 1200px;
  margin: 0 auto;
  padding: 120px 30px;
}

Ahora podemos diseñar el título:

h1 {
  max-width: 850px;
  margin: 0 0 30px;
  font-size: 64px;
  line-height: 1.05;
  font-weight: 400;
}

El espacio en blanco también forma parte del diseño. No intentes llenar cada zona de la pantalla con contenido.

Crea un botón.

Podemos convertir el enlace de la sección principal en una llamada a la acción visual.

En HTML podemos añadirle una clase:

<a href="#servicios" class="button">
Ver servicios
</a>

Y en CSS:

.button {
  display: inline-block;
  margin-top: 20px;
  padding: 15px 25px;
  background: #222222;
  color: #ffffff;
  text-decoration: none;
}

La clase nos permite aplicar estilos únicamente a los elementos que la utilicen.

Da espacio a las secciones.

Una web suele resultar más fácil de leer cuando las secciones tienen suficiente separación.

section {
  padding: 90px 30px;
}

section > h2,
section > p,
section > article {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

Podemos diferenciar alguna sección utilizando un fondo distinto:

#sobre {
background: #f5f2ec;
}

Convierte los servicios en tarjetas.

En la lección anterior creamos elementos article para los servicios.

Podemos diseñarlos como tarjetas:

#servicios article {
  margin-top: 20px;
  padding: 30px;
  border: 1px solid #dddddd;
}

También podemos mejorar sus títulos:

#servicios h3 {
  margin-top: 0;
  font-size: 26px;
  font-weight: 400;
}

Incluso un diseño sencillo puede verse profesional cuando existe una buena jerarquía y suficiente espacio.

Diseña la sección de contacto.

Queremos que la llamada a la acción final destaque del resto del contenido.

#contacto {
  text-align: center;
  background: #222222;
  color: #ffffff;
}

Podemos adaptar también su enlace:

#contacto a {
  display: inline-block;
  margin-top: 20px;
  padding: 15px 25px;
  background: #ffffff;
  color: #222222;
  text-decoration: none;
}

Termina el diseño con el footer.

Mantendremos el pie de página sencillo.

footer {
  padding: 35px 30px;
  text-align: center;
  border-top: 1px solid #dddddd;
}

footer p {
  margin: 0;
  font-size: 14px;
}

La coherencia importa más que decorar.

Cuando empiezas con CSS es fácil intentar añadir muchos colores, sombras, bordes y efectos.

Sin embargo, un buen diseño suele depender más de mantener decisiones consistentes.

Utiliza una paleta de colores limitada.

Mantén tamaños de títulos coherentes.

Repite los mismos espacios entre secciones.

Utiliza el mismo estilo para botones similares.

Prioriza siempre la legibilidad.

Un diseño profesional no necesita ser complicado. Necesita tener intención, jerarquía y consistencia.

RESUMEN

Lo que has aprendido.

Cómo establecer estilos generales para una web.
Cómo utilizar max-width para controlar el contenido.
Cómo centrar bloques con margin auto.
Cómo utilizar Flexbox en una navegación.
Cómo diseñar títulos y secciones.
Cómo crear botones utilizando clases.
Cómo convertir contenido en tarjetas.
Cómo diferenciar secciones mediante fondos.
Cómo diseñar un footer sencillo.
Por qué la coherencia visual es fundamental.

PONLO EN PRÁCTICA

Diseña la web que construiste.

Abre tu proyecto mi-primera-web y trabaja sobre la estructura creada en la Lección 05.

Aplica estilos generales al body.
Diseña la navegación.
Limita el ancho del contenido.
Añade espacio a la sección principal.
Diseña el h1.
Convierte un enlace en botón.
Añade un fondo diferente a una sección.
Diseña los servicios como tarjetas.
Da estilo a la sección de contacto.
Diseña el footer.

Después modifica algunos tamaños, espacios y colores para crear una versión propia.

Comprueba también qué ocurre al hacer pequeña la ventana del navegador. Probablemente descubrirás que algunos elementos dejan de verse bien. Eso nos lleva directamente a la siguiente lección: diseño responsive.

Diseña tu página con CSS.