En el artículo anterior vimos cómo el HTML es el esqueleto de tu página web: define dónde va el título, dónde están los párrafos y dónde colocas las imágenes. Pero seamos sinceros... una web que solo tiene HTML parece un documento de Word de 1995. Todo blanco, texto negro y enlaces azules subrayados.
Para transformar ese montón de huesos en un cuerpo espectacular con ropa de diseño, colores atractivos y tipografías elegantes, necesitamos al mejor amigo del HTML: el CSS (Cascading Style Sheets o Hojas de Estilo en Cascada).
Si quieres aprender a cambiar el color de un botón, poner el fondo oscuro o cambiar la letra de tu web sin romper nada, quédate. Hoy te enseñamos las bases del diseño web de forma muy sencilla.
El CSS es un lenguaje muy lógico. Su única función es decirle al navegador: "Coge este elemento de HTML y píntalo de esta manera".
Para conseguirlo, una línea de código CSS se divide siempre en tres partes:
<p>).Mira este ejemplo. Si quisiéramos que todos los párrafos de nuestra web fueran de color gris oscuro, escribiríamos esto en CSS:
p {
color: #333333;
}
No necesitas aprenderte los miles de estilos que existen. Para empezar a personalizar tus contenidos en WordPress, Shopify o cualquier plataforma, solo necesitas dominar estas propiedades esenciales:
color)Sirve para cambiar el color de las letras. Puedes usar nombres de colores en inglés (red, blue, black) o, lo más profesional, usar códigos Hexadecimales (esos que empiezan con un hashtag y tienen 6 letras o números, como #FF5733 para un naranja eléctrico).
h1 {
color: #1a73e8; /* Convierte tu título principal en azul corporativo */
}
background-color)¿Quieres que un texto resalte con un fondo llamativo o crear el famoso "modo oscuro"? Esta es tu propiedad.
body {
background-color: #0f172a; /* Fondo azul oscuro/negro para toda la web */
}
font-family y font-size)El tipo de letra define la personalidad de tu marca. Con font-family eliges la fuente (como Montserrat, Roboto o Arial) y con font-size decides el tamaño (normalmente medido en píxeles, px).
p {
font-family: 'Roboto', sans-serif;
font-size: 16px; /* Un tamaño ideal para que tus textos se lean bien en el móvil */
}
padding y border-radius)¿Has visto esos botones modernos que tienen las esquinas redondeadas y un espacio amplio alrededor del texto para que apetezca hacer clic? Se hacen combinando estas dos propiedades:
a {
background-color: #ff0055; /* Botón rosa/fucsia */
color: white; /* Texto blanco */
padding: 10px 20px; /* Espacio alrededor del texto para que parezca un botón */
border-radius: 5px; /* Redondea las esquinas del botón */
text-decoration: none; /* Quita el subrayado azul típico de los enlaces */
}
Para que tu HTML se entere de que tiene que vestirse con estos estilos, hay tres formas de hacerlo, pero la más limpia y correcta es la Hoja de Estilos Externa.
Creamos un archivo de texto que se llame estilos.css, metemos ahí todos nuestros diseños, y luego en el <head> de nuestro HTML (¿te acuerdas del cerebro invisible del post anterior?) añadimos esta línea para conectarlos:
<head>
<link rel="stylesheet" href="estilos.css">
</head>
¡Y listo! Al cargar la web, el navegador leerá el esqueleto (HTML) y automáticamente le aplicará la capa de pintura (CSS).
Ahora que ya sabes que el HTML da la estructura y el CSS aporta el diseño, tienes las llaves para entender el código de cualquier página web. La próxima vez que veas un color que te encante en internet, haz clic derecho, dale a "Inspeccionar" y busca el código CSS que lo hace posible.
Si te ha gustado esta serie sobre código básico para no programadores, compártela en tus redes. Y si lo que buscas es una web profesional, rápida y con un diseño a medida que convierta visitas en clientes sin que tú tengas que tocar una sola línea de código...
Haz clic aquí y deja que nos encarguemos de diseñar la web de tus sueños.
) y luego en tu CSS aplicas el diseño solo a esa clase (.texto-destacado { color: gold; }). Así mantienes el control absoluto de cada rincón de tu web.