|

Qué es CSS y para qué sirve

¿Qué hace que las páginas web tengan una apariencia tan bonita?

Y la respuesta a esto, es gracias a la tecnología Frontend CSS.

CSS es la sigla que describe: “Cascading Style Sheets” que en español significa “Hojas de Estilo en Cascada”. El CSS es el estándar Frontend que nos permite estilizar nuestras etiquetas HTML.

Dato curioso: “cascading” es el nombre del algoritmo de los navegadores web para interpretar el código CSS que estilizan nuestras etiquetas HTML.

Tú puedes tener una página web tan solo utilizando HTML, pero aplicarle estilos CSS es imprescindible para proporcionar una mejor experiencia de uso y darle belleza a nuestros productos digitales en Internet.

Para diferenciar CSS, solo basta que observes a los documentos HTML como las etiquetas que organizan, estructuran y presentan nuestra información en una página web y el CSS, se encarga de embellecerlo, de hacerlo más accesible a las personas en la red.

En la imagen un ejemplo para diferenciar HTML y CSS, HTML es el esqueleto de una persona y CSS es es la persona con más características.
Ejemplo para diferenciar HTML de CSS. Imagen tomada de Platzi.com

A través de los estilos CSS, tenemos la posibilidad de: distribuir los elementos (Layout), aplicar colores, crear formas geométricas, mostrar u ocultar elementos, ajustar contenidos dependiendo de las dimensiones de pantalla donde se esté ejecutando el navegador, e incluso, crear animaciones.

Los estilos CSS se aplican en cascada. Es decir, tiene una jerarquía de funcionamiento dependiendo donde se apliquen. Quizá este es el aspecto más complejo de comprender, pero una vez lo entiendes, es pan comido.

CSS es un gran campo de estudio, está lleno de posibilidades laborales y existen personas apasionadas que crean con esta herramienta verdaderas obras de arte. El CSS lleva los documentos estructurados con HTML a otro nivel, al nivel que las personas desean observar a través de sus pantallas.

Entonces, de ahora en adelante, aprópiate de CSS como un complemento infaltable en tus proyectos. En estos momentos después de la revolución de Internet, HTML no puede vivir sin CSS.

Es importante resaltar que CSS no es un lenguaje de programación, sí es un lenguaje, pero este no ejecuta algoritmos ni da soluciones a problemas. Este, simplemente es un lenguaje para aplicar estilos a las etiquetas HTML.

Próxima lectura

Publicaciones Similares

  • |

    Patrones de maquetación Responsive: Column Drop

    Inicia todo en forma vertical y una vez comienza a crecer el viewport empieza a generar el drop de los contenedores. Es decir, comienza a posicionar los contenedores hacia arriba por orden de importancia que se haya definido. Platzi.com Ejemplo Documento HTML <!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Column…

  • |

    La página Index y su estructura básica

    La página Index tiene una estructura básica. En este artículo conocerás las etiquetas fundamentales para crear un documento Index HTML y así poder estructurar tus sitios web. ¿Por qué debe llamarse Index.html? Cuando una persona en Internet escribe en el navegador el nombre de una página web, el servidor con el cual se conecta esa…

  • |

    Herencia

    La herencia es el concepto de cascada de los Estilos CSS. Es decir, son los estilos que un elemento padre le proporciona a un elemento hijo bajo la jerarquía de cascada. Ejemplo Crearemos un documento HTML el cual va a tener un título y un párrafo. Se sabe que por defecto y sin aplicar estilos…

  • |

    Variables CSS

    En CSS es posible generar variables que nos permitan utilizar esos valores para diferentes usos en nuestros documentos de estilos. Si guardamos un valor, estamos evitando repetir código, lo que trae beneficios a la hora de mantener el código y el rendimiento de carga. Sintaxis para generar variables en CSS :root { –primary-color: black;} Luego,…

  • |

    Responsive design: Media Queries

    Responsive design es un patrón de diseño web estándar en la industria. A través de estas prácticas, lograremos que los productos que estamos desarrollando para la web puedan funcionar en cualquier plataforma. Es decir, pueda ser visualizado en cualquier dispositivo. El objetivo principal de responsive design es que nuestro producto pueda ser perfectamente visualizado desde…