Si estás empezando a crear páginas web, aprender cómo escribir tu primera regla CSS es uno de los primeros pasos para controlar realmente el aspecto de tus contenidos. 🎨
CSS te permite modificar colores, tamaños, espacios, fuentes, bordes, fondos, posiciones y prácticamente cualquier elemento visual de una página sin cambiar su contenido.
Lo mejor es que no necesitas dominar programación para empezar, porque una regla CSS básica sigue una estructura muy sencilla que puedes aprender en pocos minutos.
En este tutorial vas a descubrir qué es una regla CSS, cómo está formada, dónde puedes escribirla y cómo comprobar que funciona correctamente.
🧩 ¿Qué es CSS?
CSS significa Cascading Style Sheets, que en español suele traducirse como hojas de estilo en cascada.
Su función consiste en indicar al navegador cómo debe mostrar los elementos HTML que forman una página web.
Mientras HTML define elementos como títulos, párrafos, imágenes o botones, CSS determina qué apariencia tendrán esos elementos.
Puedes encontrar una introducción más amplia a este lenguaje en la documentación de CSS de MDN.
Un mismo documento HTML puede cambiar radicalmente de apariencia simplemente modificando sus reglas CSS.
✏️ La estructura básica de una regla CSS
Una regla CSS sencilla puede tener este aspecto:
p {
color: red;
}
Aunque parezca algo muy básico, este pequeño fragmento contiene prácticamente todos los conceptos necesarios para empezar a escribir CSS.
La palabra p es el selector, color es la propiedad y red es el valor que quieres aplicar.
El navegador interpreta esta regla como una instrucción para mostrar todos los párrafos de la página en color rojo.
🔍 Las partes de una regla CSS
Para escribir CSS correctamente necesitas comprender las tres piezas fundamentales que forman cada declaración.
El selector determina sobre qué elemento o elementos quieres aplicar los estilos.
La propiedad indica qué característica visual quieres modificar.
El valor establece exactamente cómo quieres modificar esa propiedad.
Si escribes:
h2 {
color: blue;
}
Estás indicando al navegador que todos los elementos h2 deben aparecer en color azul.
Las llaves { } delimitan el conjunto de instrucciones que pertenecen al selector.
Los dos puntos : separan la propiedad de su valor.
El punto y coma ; marca el final de cada declaración CSS.
📋 Tabla resumen de una regla CSS
| Elemento | Ejemplo | Función |
|---|---|---|
| Selector | p | Indica qué elemento quieres modificar |
| Llave de apertura | { | Marca el comienzo de las propiedades |
| Propiedad | color | Determina qué característica quieres cambiar |
| Dos puntos | : | Separa la propiedad del valor |
| Valor | red | Define el nuevo estilo aplicado |
| Punto y coma | ; | Indica el final de una declaración |
| Llave de cierre | } | Marca el final de la regla CSS |
🚀 Cómo escribir tu primera regla CSS paso a paso
Puedes empezar modificando algo sencillo, como el color de todos los párrafos de una página.
- Elige el elemento que quieres modificar, como un párrafo, título, botón o enlace.
- Escribe su selector CSS, por ejemplo
psi quieres modificar todos los párrafos. - Añade una llave de apertura
{después del selector. - Escribe la propiedad CSS que quieres modificar, como
color. - Añade dos puntos
:después de la propiedad. - Escribe el valor deseado, por ejemplo
red. - Termina la declaración utilizando un punto y coma
;. - Cierra la regla utilizando una llave
}.
El resultado será:
p {
color: red;
}
Si guardas correctamente el código y recargas la página, todos los párrafos afectados por esa hoja de estilos deberían aparecer en rojo.
🎨 Cómo añadir varias propiedades
Una regla CSS no está limitada a modificar una única característica.
Puedes añadir tantas declaraciones como necesites dentro de las mismas llaves.
Por ejemplo:
p {
color: #333333;
font-size: 18px;
line-height: 1.6;
}
Esta regla modifica simultáneamente el color, el tamaño de la fuente y la separación entre líneas de los párrafos.
Cada propiedad debe escribirse normalmente en una línea independiente para que el código resulte más fácil de leer y mantener.
🖌️ Tu primera regla CSS un poco más completa
Puedes practicar creando un pequeño estilo para los títulos principales de tu web:
h1 {
color: #222222;
font-size: 40px;
text-align: center;
}
Con este código estás indicando que los títulos h1 deben tener un color oscuro, un tamaño de 40 píxeles y una alineación centrada.
Puedes consultar todas las propiedades disponibles en la referencia CSS de MDN.
📍 Dónde escribir tus reglas CSS
Existen diferentes maneras de añadir CSS a una página web, aunque normalmente utilizarás una hoja de estilos externa o el apartado de CSS personalizado de tu gestor de contenidos.
En un archivo CSS independiente podrías crear un archivo llamado style.css e introducir directamente tus reglas.
Después necesitarías enlazar ese archivo desde el documento HTML mediante una etiqueta <link>.
También puedes utilizar una etiqueta <style> dentro del documento HTML para introducir pequeñas cantidades de CSS.
Si utilizas WordPress, muchos temas y constructores incluyen algún apartado destinado específicamente a añadir CSS personalizado.
En WordPress también puedes trabajar mediante los archivos del tema, aunque si estás empezando resulta recomendable evitar modificar directamente archivos importantes sin disponer de una copia de seguridad.
🎯 Cómo seleccionar elementos concretos
Hasta ahora hemos utilizado selectores como p o h1, que afectan a todos los elementos de ese tipo.
CSS permite utilizar clases para aplicar estilos solamente a determinados elementos.
Por ejemplo:
.destacado {
color: orange;
}
El punto situado delante de destacado indica que estás utilizando un selector de clase.
En HTML podrías aplicarlo utilizando:
<p class="destacado">Este texto estará destacado.</p>
Gracias a las clases puedes crear estilos reutilizables y decidir exactamente qué elementos recibirán cada diseño.
🆔 Cómo utilizar un ID en CSS
También puedes seleccionar un elemento utilizando su atributo id.
En ese caso debes utilizar el símbolo #.
Por ejemplo:
#cabecera {
background-color: black;
}
Esta regla aplicará un fondo negro al elemento cuyo identificador sea cabecera.
Aunque los ID son perfectamente válidos, para estilos reutilizables suele resultar más flexible trabajar con clases CSS.
⚠️ Errores habituales al escribir tu primera regla CSS
Uno de los errores más frecuentes consiste en olvidar cerrar las llaves, provocando que otras reglas de la hoja de estilos puedan interpretarse incorrectamente.
También es habitual escribir mal una propiedad, como font-zise en lugar de font-size.
Otro fallo frecuente consiste en olvidar los dos puntos entre la propiedad y el valor.
Por ejemplo, este código es incorrecto:
p {
color red;
}
La versión correcta sería:
p {
color: red;
}
También debes prestar atención al punto y coma, especialmente cuando una regla contiene varias declaraciones consecutivas.
🛠️ Utiliza las herramientas del navegador
Los navegadores modernos incluyen herramientas para desarrolladores que te permiten probar reglas CSS sin modificar permanentemente tu web.
En navegadores como Chrome, Edge o Firefox puedes hacer clic con el botón derecho sobre un elemento y seleccionar Inspeccionar.
Desde el panel que aparece puedes modificar colores, tamaños, márgenes y muchas otras propiedades mientras observas los cambios inmediatamente en pantalla.
Estas modificaciones son temporales y desaparecerán al recargar la página, por lo que puedes experimentar sin miedo a estropear el diseño.
La documentación de Chrome DevTools también explica cómo inspeccionar y modificar estilos CSS directamente desde el navegador.
📐 Algunas propiedades CSS fáciles para practicar
Cuando ya hayas conseguido escribir tu primera regla CSS puedes experimentar con unas cuantas propiedades sencillas.
- Utiliza
colorpara modificar el color del texto. - Utiliza
background-colorpara cambiar el color del fondo. - Utiliza
font-sizepara modificar el tamaño de las letras. - Utiliza
font-familypara cambiar la tipografía. - Utiliza
text-alignpara controlar la alineación del texto. - Utiliza
marginpara modificar los márgenes exteriores. - Utiliza
paddingpara controlar los espacios interiores. - Utiliza
borderpara añadir bordes alrededor de un elemento. - Utiliza
border-radiuspara crear esquinas redondeadas. - Utiliza
widthyheightpara controlar la anchura y altura de determinados elementos.
🧪 Crea una regla CSS para practicar
Una buena forma de aprender consiste en crear una clase sencilla para diseñar un botón.
Puedes probar con este código:
.boton {
background-color: #222;
color: white;
padding: 12px 20px;
border-radius: 5px;
}
Con apenas unas líneas has creado una regla capaz de modificar el fondo, el texto, el espacio interior y las esquinas de cualquier elemento que utilice la clase boton.
A medida que experimentes descubrirás que CSS consiste principalmente en combinar selectores, propiedades y valores hasta conseguir el resultado visual que necesitas.
💡 Consejos para aprender CSS más rápido
No intentes memorizar todas las propiedades existentes porque incluso los desarrolladores experimentados consultan constantemente documentación y referencias técnicas.
Empieza utilizando propiedades sencillas y observa qué sucede cuando modificas sus valores.
Prueba valores extremos para comprender mejor qué efecto produce cada propiedad.
Utiliza las herramientas de inspección del navegador para experimentar antes de introducir los cambios definitivamente en tu web.
Mantén tus reglas ordenadas para que puedas encontrar fácilmente qué selector controla cada elemento.
Añade comentarios cuando sea necesario utilizando la sintaxis /* comentario */ para documentar partes importantes de tu hoja de estilos.
✅ Tu primera regla CSS es solo el comienzo
Aprender cómo escribir tu primera regla CSS te proporciona la base necesaria para empezar a personalizar prácticamente cualquier página web.
La estructura fundamental siempre gira alrededor de un selector, una propiedad y un valor, por lo que dominar estos tres conceptos facilitará enormemente todo lo que aprendas después.
No necesitas conocer cientos de propiedades antes de empezar, porque con unas pocas instrucciones puedes realizar modificaciones visuales sorprendentemente amplias.
Empieza cambiando colores, tamaños y espacios, después experimenta con clases y selectores más específicos y poco a poco podrás construir diseños mucho más avanzados con CSS. 🚀
