Qué es CSS y cómo aprenderlo

CSS (Cascading Style Sheet) es uno de los lenguajes de programación web más indispensable para el desarrollador web y permite dar a las páginas el aspecto deseado. Es entonces uno de los lenguajes indispensables para los programadores front end, junto a HTML. Descubramos entonces algo más sobre CSS y el mejor modo para aprenderlo.

Qué es CSS y cómo funciona

CSS se usa para definir el aspecto visible y estético de una página web, adaptándola a las exigencias de los proyectos individuales. Cuando se configuran los diferentes elementos con HTML, como títulos, link y párrafos, se obtiene una página que sigue la configuración estándar de los navegadores: en una palabra, un estilo suave y neutro. Para personalizar el estilo entra en juego CSS, a través del cual se puede transformar una página eligiendo colores y fuentes, modificando el layout o incluyendo animaciones y gráficos sencillos.

Con CSS se establecen reglas de estilo para aplicar a elementos específicos, que tendrán que aparecer en la página con un determinado estilo. Veamos por ejemplo cómo crear un título azul y de dimensiones más grandes respecto al texto de los párrafos.

Lo primero es seleccionar el elemento HTML a modificar, en este caso el título H1.

Dentro de los corchetes declaramos las propiedades que se establecerán (color y dimensión de la fuente) y los valores que tendrán que asumir (azul y 18 pixel). Una hoja de estilo consta de una serie de reglas como esta, que le permiten cambiar la apariencia de los elementos deseados.

¿Por qué aprender CSS y cuánto tiempo se necesita?

Aprender CSS es útil para todo el que tenga un sitio web personal y profesional, porque permite modificar el estilo al gusto sin límites de plantillas preestablecidas. Así podrás crear un portafolio realmente acorde con tu imagen profesional, o una página web que represente de la mejor manera posible el mensaje que queremos transmitir.

Como ya anticipado, CSS es uno de los lenguajes de base para quien quiere trabajar como programador front end o como diseñador web.

Aprender CSS a un nivel básico es más bien simple y es posible conseguirlo en menos de un mes. Requiere empezar estudiando los conceptos principales de HTML, lo que facilitará la comprensión de la sintaxis de CSS.

Sin embargo es bueno especificar que si las bases de CSS son simples, hacer diseños complejos y articulados requiere experiencia y conocimientos, además de un buen conocimiento del uso del framework de front-end enfocado en CSS como Bootstrap o Tailwind

Por supuesto, para aprender CSS a nivel profesional y trabajar como programador front-end, se necesita un período de estudio más intensivo de unas pocas horas al día lo que ayudará a dominar conceptos más complejos.

Los mejores métodos para aprender CSS online

Online existen recursos válidos para aprender CSS de manera independiente, siempre que participe regularmente en estudios y ejercitaciones. En base al estilo de aprendizaje se pueden utilizar vídeos tutoriales, artículos de blog o cursos más prácticos que permiten escribir desde el inicio el código. Dada la naturaleza de esta disciplina, los materiales interactivos para poner inmediatamente en acción todo lo que se aprende están aconsejados. Algunos sitios para explorar para aprender solos las bases de CSS incluyen freeCodeCamp, Codecademy, Khan Academy y Udacity. Estos recursos son perfectos para quien quiera personalizar su sitio web y desee aprender CSS a un nivel básico.

Si se quiere trabajar con CSS a tiempo completo como front end developer, Hackademy- el Bootcamp intensivo de aulab- es una solución más eficiente a nivel de tiempo y perspectivas ofrecidas. En este caso también cuentas con el apoyo de los docentes dedicados, para resolver rápidamente cualquier duda y progresar más rápido.

Ya sea que elija recursos online gratuitos o cursos de formación más estructurados, todavía quedan algunos pasos a seguir para aprovechar al máximo sus estudios de lenguaje CSS.

Aprender los conceptos básicos de CSS

Cuando se empieza a estudiar CSS puede ser tentador lanzarse de inmediato a un proyecto ambicioso y complicado, pero en primer lugar es necesario entender los conceptos básicos de este lenguaje. Entre estos citamos:

• La sintaxis de CSS, es decir, las reglas que definen los estilos, a tener en cuenta al escribir código;
• Los principales selectores y su funcionamiento, además de las reglas para el uso de las clases, ID y etiquetas;
• El box modelo, es decir, las propiedades que definen la disposición de los elementos en la página;
• La posición de los elementos a través de los instrumentos como Grid Layout o Flexbox;
• Fuentes y colores, y sus opciones y propiedades;
• La especificidad de una regla CSS le permite desentrañar los problemas que pueden surgir en un diseño web complejo.

Una vez que estos temas se entienden completamente, puedes pasar a conceptos avanzados y proyectos complejos, como el uso de animaciones y la interacción, utilizando solo CSS.

Construir un proyecto y experimentar con los estilos

Después de haber completado el tutorial y las guías se puede pasar a un proyecto de acuerdo con sus intereses, para poner en práctica en modo independiente los conocimientos de CSS. Gracias a la naturaleza visual de este lenguaje, es fácil crear un producto personalizado en detalle según tus gustos. De esta manera se puede finalmente dar rienda suelta a la creatividad, experimentando al mismo tiempo con los nuevos estilos para perfeccionar sus habilidades.

Adaptar CSS a los diversos buscadores y dispositivos

Convertirse en expertos en CSS quiere decir conocer también la diferencia entre el funcionamiento de este lenguaje en los diferentes buscadores. Las hojas de estilo pueden, de hecho, ser interpretadas de manera diferente, y saber escribir CSS que funcione bien en la mayor parte de los buscadores es una importante competencia para un programador.

Lo mismo vale para la compatibilidad en diferentes dispositivos, desde la pantalla del ordenador a la de los smartphones. A los desarrolladores front end se pide, de hecho, que sepan escribir código que cree páginas accesibles y fáciles de usar, independientemente de la plataforma.

Siguiendo estas pautas, aprender CSS y dar un estilo único a páginas y sitios web está al alcance de tu mano. Y tal vez una carrera de front end developer nos espera en el futuro.

Como crear una plantilla HTML y CSS

Ha llegado el momento de crear tu primera plantilla CSS tú mismo. Primero crea un archivo esempio.html en tu escritorio y cópialo como un editor de texto (puedes utilizar el bloc de notas o un editor profesional como sublime text 

Después copia en el documento este contenido:

Ahora guarda el documento y ciérralo. Haz doble click en el documento de tu escritorio y se abrirá en el interior del buscador tu primera plantilla HTML y CSS. Ahora te explicamos punto por punto el significado de cada tag. 

Analizamos juntos la parte de CSS dentro de la plantilla

Las hojas de estilo internas se definen en el tag head usando el tag <style>.

Una regla CSS se compone de dos partes: un selector y una o más declaraciones- selector { propiedad: valor;} El selector específica a qué elemento o elementos queremos aplicar el estilo definido entre llaves. Cada copia “propiedad: valor” constituye una declaración.

Márgenes y max- width 

Empecemos por el envase que forma parte del grid system y representa el envase en el que vamos a insertar los elementos secundarios.

Lo hemos personalizado al estilo con:

- una max-width de 600 pixel que define el ancho máximo de un elemento;

- un margin-left que define la distancia entre el lado izquierdo de un elemento y los elementos adyacentes;

- un margin-right que define la distancia entre el lado derecho de un elemento y los elementos adyacentes;

- un margin-top de 60 pixel que establece la distancia entre el lado superior de un elemento y los elementos adyacentes. Se aplica a todos los elementos y no se hereda.

Background-color, border y padding

Dentro del div con envase de clase, hemos utilizado el selector id con valor “hero” que selecciona un elemento único, presente como valor de un atributo id de un tag HTML.

Sirve para añadir a esa porción específica de texto un estilo bien definido, por ejemplo:

-  un fondo colorido (background-color) usando un número hexadecimal para especificar su color- un borde con espesore de 5 pixel de color negro un bordo;

- un relleno, una propiedad abreviada que se utiliza para definir el espacio que se tiene que dejar entre los contenidos de un elemento y su borde o su margen.

Redacta el texto: size, weight, transform y decoration 

Ahora analicemos nuestro h1 recordado en el estilo con un element type, que selecciona todos los elementos con el tag h1 indicado.

Dentro encontramos un font-size de 20 puntos cuya dimensión del carácter (font) se fija con el atributo size, y un text-transform que consiente variar el formato del texto con el valor uppercase (cada letra de cada palabra se muestra como si estuviese en mayúscula).
Para terminar tenemos la class language, reconocida dentro del atributo class y del tag span que representa el envase genérico en línea, donde encontramos un color rojo lo que nos permite dar un color preciso a nuestro texto, en este caso a la palabra CSS dentro del tag span.

La propiedad font-weight de 600 gestiona el aspecto de un texto aumentando o reduciendo el espesor: tenemos un font-size de 14 puntos donde la dimensión del carácter está fija con el atributo size y una text-decoration propiedad que se utiliza para establecer o eliminar el subrayado en los enlaces o en elementos textuales en general.

Underline sin embargo establece el subrayado en la parte inferior respecto al texto wavy como una línea que pasa que indica que esa parte del texto ha sido eliminada y podemos incluir incluso un color.

Selectores combinados

También usamos un selector combinado (descendiente) para darle un estilo específico a un elemento dentro de un tag con un determinado id.

En particular, en este caso el selector combinado “#hero p” significa que solo los párrafos de la sección hero serán estilizados con un font-size de 12 puntos y el tamaño de la fuente de los párrafos será para todos de 12 puntos.

Se pueden encontrar otros selectores combinados en esta lista:

https://www.w3schools.com/cssref/css_selectors.asp y nos pueden ayudar a redactar incluso páginas más complejas, indicando con precisión a qué elementos queremos dar un estilo particular.