Para comprender qué es CSS, esta es la mejor introducción que encontrarás en todo Internet si estás comenzando en el desarrollo web. Vamos a explorar de qué se trata, para qué se utiliza y cómo funciona. CSS es un maravilloso lenguaje de estilos que transforma los elementos HTML en componentes elegantes y atractivos dentro de una página web.
Porqué es necesario una introducción a CSS
Si estás interesado en aprender CSS, es probable que ya sepas cómo utilizar el lenguaje de marcado HTML, ¿verdad? Si no es así, te recomiendo que primero aprendas HTML con el curso completo, ya que CSS se aplica sobre HTML.
Al comenzar en el mundo del desarrollo web y estar en las primeras etapas de aprendizaje de HTML, es importante tener cuidado al explicar cada detalle de lo que sigue, por lo que me he tomado la tarea de escribir esta introducción.
Recordemos que las páginas que creamos con HTML tienen elementos, pero su apariencia y diseño son bastante básicos. Podemos incluir textos, imágenes, formularios y otros elementos, pero sería útil saber cómo controlar aspectos como colores, posiciones, tipos de letra, bordes, rellenos, márgenes e incluso animaciones en esos elementos HTML. Para ello, aprovecharemos las ventajas de CSS, el lenguaje de estilos por excelencia.
¿Qué es CSS?
CSS por sus siglas en inglés (Cascading Style Sheets) “hojas de estilo en cascada” Es el lenguaje que define el estilo de los elementos de un documento HTML, por lo tanto es el lenguaje con la cual controlaremos el diseño, la apariencia de nuestras páginas web hechas con HTML.
El término cascada hace referencia a la manera en la que CSS trabaja, pues aplica los estilos sobre otro.
Recordemos lo que explica la siguiente imagen.
- HTML es la estructura que sostiene todo el contenido.
- CSS es la parte esterna visual de forma que se le dá a ese contenido.
- JavaScript es la parte que le da acción, la verdadera parte de programación que será ejecutada en el navegador para realizar algo.
Escribir nuestro primer código CSS
Ahora que ya hemos aprendido a utilizar HTML, es momento de añadir estilo a la estructura de nuestra página web.
Recordemos que HTML nos permite crear la estructura de una página, y aunque podíamos aplicar estilos a nuestros elementos HTML, este enfoque es bastante limitado y no resulta práctico usar atributos en un documento HTML.
Para eso contamos con el lenguaje de estilos CSS, que nos permitirá manejar la apariencia de nuestros elementos HTML de manera muy sencilla.
Para entenderlo mejor, con CSS seleccionaremos el elemento HTML al que queremos aplicar estilo y luego escribiremos las instrucciones o declaraciones para definir sus propiedades, características o estilos. Estas propiedades se establecerán mediante un valor.
Por ejemplo, supongamos que queremos darle un color de fondo verde a un elemento de párrafo.
Para ello tenemos que hacer lo siguiente:
- Seleccionamos el párrafo.
- Definimos la propiedad, en este caso el color de fondo (background-color).
- Definimos el valor para la propiedad especificada, en este caso el valor será el color verde (green).
p {background-color: green;}
Observa que la sintaxis, las llaves, los dos puntos y el punto y coma son signos cruciales que forman parte de la estructura del código CSS. Estos elementos se explorarán en detalle en las próximas lecciones; esto es solo un pequeño ejemplo.
¿Es fácil, verdad? Simplemente seleccionamos el elemento, definimos la propiedad y, por último, asignamos su valor.
Cómo controla CSS la apariencia de páginas HTML
Hay numerosas propiedades que podemos utilizar, tales como color, alineación, tamaño, tipo de letra, bordes, tipos de borde, márgenes, entre otras. De hecho, existen muchísimas opciones que nos permiten expresar nuestra creatividad, y exploraremos esto a lo largo del curso.
Además, cada propiedad tiene valores específicos; por ejemplo, para la alineación, los valores pueden ser a la izquierda, al centro o a la derecha, mientras que los tipos de letra pueden incluir opciones como Helvética, Verdana, Lato, etc.
Aprender CSS se basa principalmente en entender la sintaxis, cómo se redactan las instrucciones y qué características podemos modificar a través de CSS.
¡Ahora que tienes una idea general, adentrémonos en el mundo de CSS!