CursosEmpresasBlogLiveConfPrecios

Contenido del curso

Tomar examen

Qué es CSS y cómo funciona su sintaxis

Resumen

CSS es el lenguaje de estilos que le da vida visual a tus documentos HTML, permitiéndote definir colores, tipografías y comportamientos. Si vienes del diseño y trabajas con equipos de desarrollo, entender CSS te ayuda a verificar que tu diseño se implemente tal como lo pensaste.

Siguiendo la analogía del cuerpo humano, si HTML son los huesos, CSS es la piel y la ropa: lo que hace que un sitio no se vea esquelético, sino atractivo y coherente con tu propuesta visual.

Para qué sirve CSS en el diseño web

CSS te permite controlar la apariencia de cada elemento HTML y también pequeños comportamientos, como las transiciones cuando pasas el mouse sobre un botón. Es la capa que conecta tu trabajo en Figma con lo que el usuario realmente ve en pantalla.

¿Qué es CSS? Es un lenguaje de estilos basado en reglas que define cómo se ven los elementos HTML en un navegador, controlando propiedades como color, tipografía y tamaño.

Cuando colaboras con desarrollo, conocer CSS te da un par de ojos adicionales para revisar la implementación y cuidar la experiencia completa del usuario.

Cómo es la sintaxis de CSS y en qué se diferencia de HTML

A diferencia de HTML, CSS no usa etiquetas de apertura y cierre. En su lugar, defines reglas: especificas el elemento que quieres afectar y, dentro de llaves, declaras las propiedades con sus valores [01:05].

Un ejemplo típico afecta la etiqueta h1 con un color rojo y un font-size de 10 píxeles:

css h1 { color: red; font-size: 10px; }

Las propiedades no se inventan. Igual que con los atributos en HTML, debes consultar la documentación oficial para saber qué propiedades existen y qué valores acepta cada una.

Qué son los estilos de texto H1 a H6

HTML ofrece seis etiquetas para títulos, desde h1 hasta h6, que se asemejan a un sistema de diseño en Figma con seis estilos de texto jerárquicos. Por defecto, el tamaño disminuye a medida que aumenta el número después de la H.

Cada propiedad en CSS recibe distintos tipos de valores. En tipografía, por ejemplo, puedes configurar:

  • Tamaño de fuente.
  • Interlineado.
  • Espacio entre caracteres.
  • Color del texto.

Cuáles son las propiedades más comunes en CSS

Entre las propiedades que vas a usar con más frecuencia están color de texto, tamaño de fuente y color de relleno [02:30]. Cada una acepta un set específico de valores definido por la especificación de CSS.

No necesitas memorizarlas todas de inmediato. A medida que practiques, las más comunes se quedarán contigo de forma natural.

Cómo enlazar un archivo CSS con HTML

Para que los estilos se apliquen, tu documento HTML necesita saber dónde está el archivo style.css. Esto se hace con la etiqueta link, que no lleva etiqueta de cierre [03:45].

Dentro de sus atributos defines:

  • href: la ubicación del archivo CSS.
  • rel: el tipo de relación, en este caso stylesheet.

html

<link rel="stylesheet" href="style.css">

El elemento link le indica al navegador que hay una hoja de estilos esperando para vestir los elementos HTML. Así, ambos archivos trabajan en conjunto.

¿Cómo conecto CSS con HTML? Usa la etiqueta <link rel="stylesheet" href="style.css"> dentro del <head> de tu HTML para indicarle al navegador dónde están los estilos.

Por qué los navegadores muestran estilos por defecto distintos

No todos los navegadores son iguales. Existen Chrome, Firefox, Opera y Safari, y detrás de cada uno hay una compañía con sus propios criterios de soporte [05:10].

Esto significa que elementos como botones, inputs o selectores traen estilos por defecto que cambian de un navegador a otro. Un botón sin estilos personalizados se ve distinto en Chrome que en Firefox, y eso es algo que tendrás que conversar con tu equipo de desarrollo.

¿Por qué un botón se ve diferente en cada navegador? Porque cada navegador aplica sus propios estilos por defecto a elementos como botones e inputs cuando no defines tus propios estilos en CSS.

Reconocer estas diferencias temprano te evita sorpresas en la implementación y te ayuda a definir reglas claras para mantener consistencia visual.

Qué le falta a HTML y CSS para completar un sitio web

Uniendo HTML y CSS, tu sitio ya luce mucho mejor: la tipografía deja de ser la sans serif genérica y el layout toma forma definida. Pero todavía falta una pieza.

Lo que no puedes hacer solo con HTML y CSS es traer información dinámica desde un servidor, como cargar los últimos videos de una plataforma. Esa parte la cubre JavaScript, el siguiente lenguaje que entra en escena.

Dominar CSS te da las herramientas para verificar cómo se implementa tu diseño y para cuidar la experiencia completa de tus usuarios. ¿Habías utilizado CSS antes? Cuéntame en los comentarios qué te ha costado más al aprenderlo.