|

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

  • |

    Anatomía de una etiqueta HTML

    Las etiquetas HTML tienen una estricta forma de ser escritas, la razón, radica en que las etiquetas HTML existen para dos funcionalidades: agregar contenido e indicarle al navegador cómo debe tratar ese contenido. Por otro lado, a parte de las funcionalidades, las etiquetas HTML poseen características que permiten diferenciarlas unas a otras y pueden desempeñar…

  • |

    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…

  • |

    Imágenes responsive con CSS

    Se recomienda utilizar la etiqueta <picture></picture> como contenedor de la imagen. Además se recomienda tener diferentes imágenes con diferentes dimensiones de tamaño para que se carguen en la medida que se observa la página web en dispositivos grandes. Es decir, si se abre en un dispositivo móvil, colocar una imagen con el tamaño y optimizada…

  • |

    Position en CSS

    Es la manera en la cual podemos posicionar las cajas. En el navegador la posición por defecto es “static”, quedan donde tú las colocas. Por eso, todos los bloques se ubican uno debajo de otro. Tomado de Platzi.com Sin embargo, tenemos la flexibilidad de utilizar otros tipos de posicionamiento como: Absolute. Hace que los contenedores…

  • |

    Los combinadores en CSS

    Los combinadores nos permiten tener una especificidad mucho más certera y nos ayudará a evitar varios IDs, o ID, con etiqueta, etiqueta y etiqueta. Se lee raro, pero sigue leyendo. Tenemos cuatro opciones de combinadores, existen muchos más, pero estos son las más importantes y utilizadas. Ejemplo Vamos a crear un documento HTML el cual…