¡Hola, amigos de YCLAS! Esta semana compartimos algunos consejos y buenas ideas para que tu sitio web se vea mejor con código CSS.
Debes saber que el aspecto de tu sitio web determinará si los usuarios y clientes se quedan o se van en busca de un sitio más atractivo.
Primero, tienes que activar el uso de CSS en el panel de tu sitio web; Haz clic aquí para ver cómo activar y añadir CSS personalizado en YCLAS.
¡Empecemos!
En resumen
- Activa el CSS personalizado en Diseño, CSS personalizado con el interruptor 'Usar CSS personalizado', y pega solo CSS, nunca etiquetas style, head ni HTML.
- Los nombres de las clases varían según el tema, así que apunta a las clases que tu tema usa de verdad (búscalas con Inspeccionar) en lugar de selectores genéricos como ul o #grad.
- En el tema Nova, cambia el color principal con el ajuste de color de acento y sobrescribe variables CSS como --nova-radius para otros retoques.
- Funciones modernas como color-mix(), :has(), el anidamiento de CSS, las consultas de contenedor y flexbox ya funcionan en todos los navegadores principales y sustituyen a soluciones antiguas como los menús con float.
- Usa fuentes sans-serif, bordes redondeados y max-width: 100% para imágenes adaptables, y comprueba cada cambio tanto en el teléfono como en el ordenador.
Fondo
Hoy en día, los mejores sitios web usan fondos degradados, un cambio de color simple y suave; si usas los adecuados, tu sitio tendrá un estilo moderno. Aquí tienes 3 fondos modernos diferentes:
Degradado n.º 1 (colores del Pacífico)
#grad
{background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
Degradado n.º 2 (colores intensos)
#grad
{background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
Degradado n.º 3 (colores suaves)
#grad
{background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
Fuentes
La fuente de tu sitio web desempeña un papel fundamental; te recomendamos usar fuentes Sans-Serif, como:
Arial
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
Tahoma
p.sansserif {
font-family: Tahoma, Geneva, sans-serif;
}
Trebuchet MS
p.sansserif {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
Son fuentes cómodas para la vista.
Bordes de los elementos
Otro consejo es usar bordes redondeados en los elementos; esto hace que tu sitio web se vea sencillo y moderno. Para conseguirlo, usa este código:
p.round {
border: 2px solid black;
border-radius: 8px;
}
Puedes ajustar el color (negro sólido) y el radio (8px) del borde.
Barra de navegación
La barra de navegación es una de las cosas más importantes de un sitio web. Una barra de navegación bien hecha ayudará a los usuarios a moverse correctamente por tu sitio. Esta es una barra de navegación fija con elemento activo/actual; hará que tu barra de navegación se mueva y se quede fija en la parte superior según la posición del desplazamiento:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4682B4;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4169E1;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Inicio</a></li>
<li><a href="#search">Buscar</a></li>
<li><a href="#YCLAS">YCLAS</a></li>
<li><a href="#contact">Contacto</a></li>
<li><a href="#about">Acerca de</a></li>
</ul>Puedes cambiar los colores (fondo, texto y enlace activo/actual) y el tamaño (padding) de la barra de navegación.
Imágenes adaptables
¡Imágenes! Hoy en día las imágenes son esenciales en todos los sitios web y estamos acostumbrados a verlas en todas partes; pero no basta con poner una imagen en tu sitio web: tienes que configurarla como imagen adaptable para que se vea mejor en cualquier dispositivo. Para conseguirlo, usa este código en todas las imágenes que quieras que sean adaptables:
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="X" width="IMG width" height="IMG height">
La X representa la URL de la imagen; en IMG Width e IMG Height tienes que escribir el tamaño original de la imagen.
Estructura del sitio web
Esta es la distribución de los elementos principales de tu sitio web, por ejemplo, la cabecera. La cabecera es el primer elemento que ve cualquier usuario al entrar en el sitio web, así que tiene que ser fácil de entender y sencilla. Aquí tienes un código CSS para una cabecera con imagen y texto:
body {
margin: 0;
}
.header {
background:url(X) no-repeat;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>HEADER TEXT</h1>
</div>
La X representa la URL de la imagen; en Padding puedes fijar el tamaño de la imagen de la cabecera, y Header Text es donde puedes escribir lo que quieras mostrar sobre la imagen de la cabecera.
Otro elemento principal de tu sitio web es el pie de página, situado al final de tu página y tan importante como la cabecera. Puedes usar este código para un pie de página con buen aspecto:
.footer {
background-color: #00FFFF;
padding: 25px;
text-align: center;
}
Puedes cambiar el color y el tamaño (padding) del pie de página.
CSS moderno en 2026: qué ha cambiado desde estos consejos
Los fragmentos anteriores siguen mostrando las ideas básicas, pero el CSS ha avanzado mucho desde que se escribió esta entrada. Los navegadores comparten ahora una base común de funciones, y el tema que usa tu sitio decide a qué selectores puede apuntar tu CSS. Esto es lo que conviene saber antes de pegar nada en tu CSS personalizado.
Comprueba la compatibilidad de los navegadores con Baseline
Baseline, definido por el W3C WebDX Community Group, etiqueta una función como “recién disponible” cuando funciona en todos los navegadores principales (Chrome, Edge, Firefox y Safari, en ordenador y móvil). Pasa a ser “ampliamente disponible” 30 meses después, cuando la mayoría de los sitios pueden usarla sin preocuparse por los navegadores antiguos. MDN muestra el estado de Baseline en la parte superior de cada página de referencia. Estas son las funciones que sustituyen a la mayoría de las soluciones alternativas anteriores:
| En lugar de... | Usa hoy | Estado en Baseline (MDN) |
|---|---|---|
| Repetir colores hexadecimales en cada regla | Propiedades personalizadas de CSS (variables), p. ej. var(--nova-accent) | Consolidado desde hace tiempo |
| Elegir a mano los tonos al pasar el cursor | color-mix(), p. ej. el acento mezclado con un 18 % de negro | Ampliamente disponible (en todos los navegadores principales desde mayo de 2023) |
| Clases adicionales o JavaScript para dar estilo a un elemento padre | :has(), p. ej. form:has(:invalid) button { opacity: .6; } | Ampliamente disponible (en todos los navegadores principales desde diciembre de 2023) |
| Selectores largos y repetidos | Anidamiento de CSS con & | Ampliamente disponible (en todos los navegadores principales desde diciembre de 2023) |
| Consultas de medios atadas al ancho de la pantalla | Consultas de contenedor (@container), para que una tarjeta se adapte a la columna en la que está | Ampliamente disponible (en todos los navegadores principales desde febrero de 2023) |
Elementos de menú con float (li { float: left; }) | Flexbox: display: flex; gap: 8px; | Consolidado desde hace tiempo |
Empieza desde tu tema, no desde una página en blanco
La guía actual de Yclas activa el CSS personalizado en Diseño > CSS personalizado, con el interruptor “Usar CSS personalizado”. También advierte de que los nombres de las clases varían según el tema, así que una regla escrita para un tema puede no hacer nada después de cambiar de tema. Los selectores genéricos como #grad o ul o no hacen nada o cambian el estilo de todas las listas de tu sitio, así que apunta siempre a las clases que tu tema usa de verdad (haz clic derecho en un elemento y elige Inspeccionar en tu navegador para encontrarlas).
Los sitios nuevos de Yclas usan el tema Nova, que está construido con variables CSS. Para cambiar el color principal, usa el ajuste de color de acento en las opciones del tema en lugar de CSS: los botones, los enlaces y los elementos destacados lo siguen, y el tono al pasar el cursor se calcula por ti. Para otros ajustes, sobrescribir una variable es más seguro que reescribir reglas, porque una sola línea cambia todos los elementos que la usan:
:root {
--nova-radius: 10px; /* tarjetas y botones más redondeados o más cuadrados */
--nova-radius-sm: 6px;
}
Dos reglas más te evitarán problemas. El cuadro de CSS personalizado solo acepta CSS, así que deja fuera las etiquetas <style>, <head> y HTML que aparecen en algunos de los fragmentos anteriores. Y comprueba cada cambio tanto en el teléfono como en el ordenador antes de guardar.
¡Prueba estos consejos y cuéntanos si te funcionan!
Nota: el uso de código CSS requiere cierta habilidad y experiencia; si nunca has usado CSS, te recomendamos consultar algunos tutoriales de CSS y guías de CSS para conseguir lo que buscas. Si no quieres usar CSS, puedes usar nuestros temas: ofrecemos una gran variedad de plantillas de sitios web personalizables Haz clic aquí para verlas.
Saludos,
El equipo de YCLAS.
