CSS

Si te gusta el mundo del diseño web o tienes curiosidad por empezar en este ámbito, probablemente ya habrás escuchado el término CSS. Se trata de una tecnología utilizada para dotar de cualidades visuales y estéticas a una página web.
cronuts digital - css

¿Qué es el CSS?

CSS (Cascading Style Sheets) es lo que se denomina lenguaje de hojas de estilo en cascada y se usa para estilizar elementos escritos en un lenguaje de marcado como HTML. CSS separa el contenido de la representación visual del sitio. Antes de comenzar, debes tener claro un concepto clave: una página web es realmente un documento de texto. En dicho documento se escribe código HTML, con el que se que crea el contenido de una web. Por otro lado, existe el código CSS, que unido al código HTML permite darle forma, color, posición (y otras características visuales) a una página. En resumen, se trata de un idioma, que los navegadores web como Chrome conocen y pueden entender. Nuestro objetivo como diseñadores y programadores web es precisamente ese: aprender el idioma. Las siglas CSS (Cascading Style Sheets) significan «Hojas de estilo en cascada» y parten de un concepto simple pero muy potente: aplicar estilos (colores, formas, márgenes, etc…) a uno o varios documentos (generalmente documentos HTML, páginas webs) de forma masiva. Se le denomina estilos en cascada porque se aplican de arriba a abajo (siguiendo un patrón denominado herencia que trataremos más adelante) y en el caso de existir ambigüedad, se siguen una serie de normas para resolverla. La idea de CSS es la de utilizar el concepto de separación de presentación y contenido, intentando que los documentos HTML incluyan sólo información y datos, relativos al significado de la información a transmitir (el contenido), y todos los aspectos relacionados con el estilo (diseño, colores, formas, etc…) se encuentren en un documento CSS independiente (la presentación).

¿Cómo funciona el CSS?

CSS utiliza una sintaxis simple basada en el inglés con un conjunto de reglas que la controlan. Como mencionamos anteriormente, HTML no fue hecho con la intención de utilizar elementos de estilo, sino solo para el marcado de la página. Fue creado simplemente para describir el contenido. Por ejemplo: <p>Esto es un párrafo.</p>. Pero, ¿cómo le aplicas un estilo al párrafo? La estructura de sintaxis CSS es bastante simple. Cuenta con un selector y un bloque de declaración. Primero seleccionas un elemento y luego declaras lo que quieres hacer con él. Bastante sencillo, ¿verdad?

Veamos un ejemplo:

Todos los elementos <p> aparecerán en color azul y en negrita.
  1. <style>
  2. p {
  3. color: blue;
  4. text-weight: bold;
  5. }
  6. <style>

Mantente al día con vocabulario digital

Suscríbete y recibe cada mes un concepto digital diferente directamente en tu mailbox.

Comparte este concepto

Share on linkedin
Share on email
Share on whatsapp

GRAN EMPRESA

¿Estás pensando optimizar alguna parte de tu estrategia digital?

PYME​

¿Necesitas un partner digital?

Te mereces el mejor contenido

Suscríbete a nuestro blog y entérate de las últimas tendencias digitales.