¿Qué es CSS y para qué sirve?
Aprende más sobre este lenguaje y por qué es importante conocerlo si quieres convertirte en un Full Stack Developer.
Si estás dando tus primeros pasos en el mundo del desarrollo web, seguramente ya hayas oído hablar sobre CSS, un lenguaje de hojas de estilo –de ahí sus siglas en inglés, Cascade Style Sheets– que es utilizado para especificar una serie de reglas que describen la apariencia de un sitio web, incluida su visualización en distintos tipos de pantallas. Junto a HTML y JavaScript, es una de las tecnologías fundamentales para aprender programación en 2021 y una de las herramientas más usadas por las empresas y startups del ecosistema tech. En este post te contamos qué es CSS y para qué sirve.
?¿Quieres saber qué estudiar en 2021? Lee este artículo
CSS es clave en el ámbito del desarrollo front-end, una de las caras del desarrollo Full Stack que aprenderás en Henry, así que si estás pensando en convertirte en un Full Stack Developer, ¡deberías seguir leyendo! ??????
¿Qué es CSS y para qué sirve?
CSS (Cascade Style Sheets) es un lenguaje de hojas de estilos creado para controlar la apariencia o presentación de los documentos definidos con HTML. Con este lenguaje se especifican una serie de reglas que describen el aspecto de un sitio web, como por ejemplo los colores, la tipografía o el tamaño de los elementos, entre otros.
¿Cómo funciona?
Comúnmente, CSS funciona como complemento de HTML que es el lenguaje que nos permite, al momento de crear una página web, estructurar los contenidos y designar la función de cada elemento dentro de dicha página: párrafo, título, texto destacado, tabla, lista de elementos, etc, etc.
¿Cómo es esto? Una vez creados los contenidos con HTML, aplicamos CSS para definir el aspecto de cada elemento: color, tamaño, fuente, márgenes y posición de cada elemento dentro de la página, etc.
Veamos un ejemplo:
Antes de que se extendiera el uso de CSS, las páginas web eran diseñadas a partir de etiquetas HTML con las que también se podía determinar el aspecto de los elementos que la conformaban. En este caso, la etiqueta <font> con sus atributos color, face y size es lo que permite definir el color, el tipo y el tamaño de letra de cada elemento de la página.
¿Cuál es el problema? En estos casos, habría que insertar una etiqueta y sus atributos por cada elemento de la página sobre el que tengamos que definir su apariencia, lo que resulta en ensuciar el código HTML, además de su poca practicidad.
¿Qué nos facilita CSS? Separar los contenidos de la página y la información sobre su aspecto a partir de una etiqueta <style> que permite crear una zona especial donde se incluyen todas las reglas CSS que se aplican en la página. Como en el siguiente ejemplo, donde se especifica la apariencia para todas las etiquetas <h1> y las etiquetas <p>.
Además, podemos definir el estilo de un elemento y esto aplicará cada vez que aparezca el mismo, ¡sin tener que volver a estilizarlo! En nuestro ejemplo, digamos que queremos un estilo muy específico para cada párrafo (<p>) de texto normal: no solo evitamos la repetición de especificar el color y fuente cada vez que incluyamos uno de estos párrafos, ¡sino también se nos hace muy fácil cambiar los estilos para todos estos desde un único lugar!
Como vemos, al definir ciertas reglas, no es necesario especificar cada uno de los elementos como ocurría cuando usábamos solo HTML.
?¿Qué son los encabezados en HTML? Aprende más en este artículo
¿Qué puedo desarrollar con CSS?
Como ya aprendimos, CSS es un lenguaje muy sencillo e intuitivo utilizado en el desarrollo de proyectos para el front-end, y que, complementando su uso con HTML y JavaScript constituye el stack básico de cualquier developer que se desempeñe del lado del cliente, trabajando sobre la interfaz gráfica de plataformas y aplicaciones web.
?¿Qué es un desarrollador Front End? Aprende más en este artículo de nuestro blog
Al trabajar con un lenguaje “delante de escena”, es habitual que estos programadores sean los encargados de controlar todos los aspectos vinculados a lo visual de un proyecto, ya sea las formas del diseño, las tipografías, e incluso, la interactividad del navegador. Es decir, además de habilidades relacionadas con el mundo del diseño y la creatividad, la usabilidad es un elemento presente en el uso de lenguajes como CSS que apuntan a mejorar la interacción de los usuarios con el navegador e incluso adaptar el diseño del sitio o app a distintos dispositivos.
?¡Tip extra! Si apretas F12 en tu navegador (sea Chrome, Firefox u otro), se desplegarán las herramientas de desarrollador. Si buscas la sección de "estilos", podrás ver el CSS que se está aplicando a la página que estás visitando. Y no solo eso, podrás cambiar los valores y ¡ver cómo se cambia en vivo la página! Para volver a como estaba antes basta con recargar la página ?
Si te interesa aprender a programar en CSS desde cero, aplica a Henry y ¡acelera tu carrera en tecnología hoy!?