¿Qué es CSS?

Publicado: 2019-03-08

Última actualización el 22 de abril de 2020

Cascading Style Sheets for the web En la World Wide Web (www), CSS es el acrónimo de Cascading Style Sheets. CSS es un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en un lenguaje de marcado, comúnmente HTML. CSS rige cómo se mostrará el diseño y el contenido de una página web en una pantalla, papel u otros medios. CSS ahorra mucho trabajo porque controla el diseño de varias páginas web a la vez.

Un documento es comúnmente un archivo de texto estructurado usando un lenguaje de marcado como HTML. Presentar un documento significa convertirlo en un formato utilizable presentado visualmente en la pantalla de una computadora a través de un navegador web como Chrome, Firefox, Opera, Microsoft Edge y otros. Los navegadores web aplican reglas CSS a un documento para afectar la forma en que se muestran.

Este blog es una introducción general a las hojas de estilo en cascada (CSS), que define qué son y para qué se utilizan en la Web. Esta es una introducción que responde preguntas básicas al respecto sin profundizar en el maravilloso e interesante mundo de CSS.

¡Que! La empresa ofrece servicios de diseño web atractivos y efectivos para agencias de todo el mundo. Obtenga más información sobre nuestros servicios de diseño web de marca blanca y cómo podemos ayudarlo a usted y a sus clientes a crear o mejorar su presencia en la web. ¡Empiece hoy!

CSS se inició en 1994. Fue creado y mantenido por W3C. El Grupo de Trabajo CSS del W3C crea documentos llamados especificaciones. Una vez que los miembros del W3C han discutido y ratificado oficialmente las especificaciones, se convierten en una recomendación.

El nivel 1 de hojas de estilo en cascada (CSS1) salió del W3C como una recomendación en diciembre de 1996. CSS2 se convirtió en una recomendación del W3C en mayo de 1998. El nivel 3 de CSS, que se inició en 1998, todavía está en desarrollo. CSS3 es una combinación de especificaciones CSS2 y nuevas especificaciones llamadas módulos. Una especificación CSS se forma a partir de un conjunto de propiedades, que tienen valores establecidos para actualizar cómo se muestra el contenido HTML.

CSS llegó para simplificar el proceso de presentación de nuestros documentos de lenguaje de marcado. Puede controlar una variedad de propiedades como:

  • color del texto,
  • estilo de fuentes,
  • espacio entre párrafos,
  • cómo se dimensionan y distribuyen las columnas,
  • imágenes de fondo o colores,
  • diseños de diseño,
  • variaciones en la visualización según el tamaño de la pantalla (Media Queries).

¿Cómo aplicamos CSS?

Cascading Style Sheets for the web Hay cuatro formas de aplicar estilos a nuestros documentos HTML. Los métodos más utilizados son archivos CSS externos que están incrustados en un elemento <style> dentro de nuestro documento HTML. Si se especifican diferentes estilos de hoja, los estilos se convertirán en nuevos estilos con la siguiente prioridad (cuanto mayor sea el número, menos importante):

Prioridad 4: predeterminado del navegador

Los navegadores incluyen algunos estilos preescritos para nosotros. A veces no queremos estos estilos precargados, por lo que podemos anularlos. Hay algunos navegadores que no son compatibles con las especificaciones CSS modernas o tienen su propia forma de usar las propiedades CSS. Debido a esto, debemos tener cuidado al escribir nuestro CSS en un documento HTML.

That! Company White Label Services

Prioridad 3: archivo de hoja de estilo externo

El elemento <link> se puede usar para incluir un archivo de hoja de estilo externo en su documento HTML. Una hoja de estilo externa es un archivo de texto separado con la extensión “.css”. Definimos todas las reglas de estilo dentro de este archivo de texto y luego incluimos este archivo en cualquier documento HTML dentro de las etiquetas <head>…</head> usando el elemento <link>.

 <enlace rel="hoja de estilo" type="texto/css" href="estilo.css" />

Prioridad 2: incrustado en el documento HTML

Podemos poner nuestras reglas CSS en un documento HTML usando el elemento <style> para contener las reglas. Las etiquetas <style>…</style> se colocan dentro de las etiquetas <head>…</head>.

 <estilo>
 seleccionador {
 El valor de la propiedad;
 }
 </estilo>

Prioridad 1: en línea en nuestros elementos HTML

Podemos usar el atributo de estilo de cualquier elemento HTML para definir reglas de estilo. Estas reglas se aplicarán únicamente a ese elemento.

 <p>¡Hola Mundo!</p>

Anulación de reglas CSS

Hemos descrito cuatro formas de aplicar reglas de hojas de estilo a nuestro documento HTML. Aquí está la regla para anular cualquier regla de hoja de estilo:

Cualquier hoja de estilo en línea tiene la máxima prioridad. Por lo tanto, anulará cualquier regla definida en etiquetas <style>…</style> o reglas definidas en cualquier archivo de hoja de estilo externo.

Cualquier regla definida en las etiquetas <style>…</style> anulará las reglas definidas en cualquier archivo de hoja de estilo externo.

Cualquier regla definida en el archivo de hoja de estilo externo tiene la prioridad más baja, y las reglas definidas en este archivo se aplicarán solo cuando las dos reglas anteriores no sean aplicables.

Selectores de CSS

El navegador interpreta una regla CSS y luego la aplica a los elementos correspondientes en nuestro documento HTML. Una regla de estilo se compone de tres partes:

  • Selector: se utiliza para "buscar" (o seleccionar) elementos HTML en función de su nombre de elemento, id, clase, atributo y más.
  • Property − es un tipo de estilo del CSS. Puede ser el color, el borde, el fondo, la fuente, la visualización, la alineación del texto, los márgenes, el espacio entre líneas, etc.
  • Valor: se asigna a las propiedades. Por ejemplo, la propiedad de color de fondo puede tener un valor de rojo o verde.

Sintaxis de la regla CSS

La sintaxis de una regla CSS consta de un selector y una declaración de propiedad y valor:

 selector { propiedad: valor; }

El selector apunta al elemento HTML al estilo.

El bloque de declaración (entre llaves) contiene una o más declaraciones separadas por punto y coma.

Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.

Podemos escribir una regla CSS y luego reutilizar la misma regla en múltiples elementos y documentos HTML. Usando CSS, no necesitamos escribir atributos de etiquetas en línea HTML cada vez que se aplica solo al elemento con estilo. Simplemente escribimos una regla CSS y la aplicamos a todas las ocurrencias de ese elemento de etiqueta. Entonces, menos código significa páginas más rápidas.

Los cambios y el mantenimiento de nuestro documento HTML son simples cuando usamos reglas de estilo externas o incrustadas. Simplemente cambiamos la regla de estilo y todos los elementos de nuestros documentos HTML se actualizarán automáticamente. Con CSS tenemos acceso a múltiples tamaños de pantalla de dispositivos a través de Media Queries. Las consultas de medios nos permiten optimizar nuestro documento HTML para más de un tipo de dispositivo. Usando el mismo documento HTML, podemos presentar diferentes versiones de nuestras páginas web.

Lee mas

Nuevamente, esta publicación apenas abre el interés del lector en aprender sobre CSS y la variedad de cosas disponibles para controlar nuestros documentos HTML. Es una parte súper poderosa y muy importante de la web. Algunos recursos principales donde puede profundizar en esto son:

Escuela W3C

MDN

Tutorial CSS