¿Qué es CSS y para qué sirve?

⏱️ Tiempo de lectura: 4 min

El lenguaje de estilos que le da vida al diseño visual de la web.

Índice

Introducción

CSS (Cascading Style Sheets) es el lenguaje que se utiliza para darle estilo a una página web. Gracias a CSS, podemos definir colores, tipografías, márgenes, tamaños, posiciones y animaciones, haciendo que una página HTML luzca atractiva y profesional.

¿Cómo se integra CSS con HTML?

Hay tres formas de aplicar CSS:

  • En línea: usando el atributo style directamente en una etiqueta HTML.
  • Interno: dentro de una etiqueta <style> en el archivo HTML.
  • Externo: vinculando un archivo .css con <link> en el <head>. 
<link rel="stylesheet" href="estilos.css">

Como seleccionar los elementos en CSS

Los selectores son patrones que se utilizan para seleccionar los elementos HTML a los que se les aplicarán los estilos. Algunos ejemplos comunes son:

  • *: Selecciona todos los elementos.
  • h1: Selecciona todos los elementos <h1>.
  • .clase: Selecciona todos los elementos con la clase "clase".
  • #id: Selecciona el elemento con el ID "id".
  • p, h2: Selecciona todos los párrafos y títulos <h2>.
  • div > p: Selecciona todos los párrafos dentro de un <div>.
  • ul li:first-child: Selecciona el primer elemento de una lista desordenada.

Una vez seleccionado el elemento, se pueden aplicar propiedades CSS. Por ejemplo:

h1 {
  color: darkblue;
  font-size: 2.5rem;
  text-align: center;
}

Esto aplica un color azul oscuro y un tamaño de fuente de 2.5rem a todos los títulos <h1>.

Propiedades básicas de CSS

Las propiedades CSS se utilizan para aplicar estilos a los elementos seleccionados. Algunas de las propiedades más comunes son:

  • color: define el color del texto.
  • background-color: color de fondo del elemento.
  • margin: espacio exterior alrededor del elemento.
  • padding: espacio interior entre el contenido y su borde.
  • font-size: tamaño del texto.
  • text-align: alinea el texto horizontalmente ( left, center, right, justify).
  • display: define cómo se comporta el elemento (block, inline, flex, grid, etc).
  • position: posicionamiento del elemento (static, relative, absolute, fixed, sticky).
  • width y height: ancho y alto del elemento.

Buenas prácticas con CSS

  • Usar archivos CSS externos para mantener el código ordenado.
  • Agrupar estilos por secciones o componentes.
  • Evitar estilos en línea, ya que dificultan el mantenimiento.
  • Utilizar variables CSS para mantener consistencia en colores y tamaños.
  • Validar el CSS en W3C CSS Validator.
  • Usar box-sizing: border-box para facilitar el cálculo del tamaño.
  • Organizar el código visualmente usando comentarios, sangrías y orden alfabético si es necesario.

Sitios recomendados para practicar CSS

A continuación, te presentamos algunos sitios donde puedes practicar tus habilidades en CSS:

Artículos Relacionados

Sobre el autor

Autor

Miguel Gonzalez

Apasionado del diseño web moderno con CSS, tipografías y layouts atractivos.

Comentarios