Qué es CSS e Introducción a CSS

Para entender qué es CSS, este es la mejor introducción a CSS que puedes encontrar en todo Internet si estás empezando en el desarrollo web; entenderemos de qué se trata, para qué sirve y cómo funciona. CSS se trata de un fantástico lenguaje de estilos que convierte a elementos de HTML en elegantes y vistosos dentro de una página web. ¿Estás listo para profundizar en CSS? ¡Vamos por ello!

Porqué es necesario una introducción a CSS

Si estás buscando aprender CSS Seguramente ya sabes utilizar el lenguaje de marcado HTML ¿Verdad? Claro que si, si no lo sabes, pues anda primero ve a aprender HTML con el curso completo, pues CSS se aplica sobre HTML.

Cuando empezamos en el mundo del desarrollo web y apenas hemos empezado con HTML, hay que tener cuidado a la hora de explicar cada detalle de lo que sigue a continuación y por ello me tomo la tarea de escribir esta introducción.

Recordemos que las páginas que hicimos con HTML poseen elementos, pero muy pobres en cuanto a apariencia o diseño, podemos tener textos, imágenes, formularios, o cualquier elemento, pero seguramente nos vendría bien saber controlar al detalle aspectos como: los colores, la posición, el tipo de texto, los bordes, rellenos, márgenes, hasta animaciones, etc. De dichos elementos HTML. Pues para ello nos serviremos de las virtudes de CSS, el lenguaje de diseños 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.

Escribir nuestro primer código CSS

Ahora que ya sabemos, utilizar HTML es momento de ponerle estilo a la estructura de nuestra página web.

Recordemos que HTML nos permite crear la estructura de una página web y de alguna manera podíamos poner estilos a nuestros elementos HTML. Pero como hemos visto es bastante limitado y no es muy práctico poner estilos en un documento HTML utilizando los atributos.

Pues bien para ello tenemos el lenguaje de estilos CSS, este nos permitirá manejar la apariencia de nuestros elementos HTML de una manera muy simple.

Para que entiendas, con CSS seleccionaremos el elemento HTML que queremos maquetar o  darle estilo, luego escribiremos las instrucciones o declaraciones para definir las propiedades, características o estilos de dicho elemento, estas propiedades lo definiremos  mediante un valor.

Por ejemplo, imagina que queremos dar un color de fondo verde a un elemento de párrafo.

Para ello tenemos que hacer lo siguiente:

1. Seleccionamos el párrafo.
2. Definimos la propiedad, en este caso el color de fondo (background-color).
3. Definimos el valor para la propiedad especificada, en este caso el valor será el color verde (green).

p {background-color: green;}

Note la sintaxis, las llaves, los dos puntos, el punto y coma son signos importantes ya forman parte de la sintaxis o forma de escribir código CSS. Todo ello lo veremos con detenimiento en las lecciones que continúan, este solo es un pequeño ejemplo.

Muy sencillo ¿verdad? Simplemente seleccionamos el elemento, definimos la propiedad y finalmente su valor.

Cómo controla CSS la apariencia de páginas HTML

Existen muchas propiedades como: color, alineación, tamaño, tipo de letra, bordes, tipos de borde, márgenes, etc. Realmente hay muchísimos, para hacer de ellas lo que nuestra creatividad alcance y lo veremos durante el curso.

También están los valores para dichas propiedades como por ejemplo para alineación puede ser a la izquierda, al centro, a la derecha, para tipo de letra puede ser: Helvética, Verdana, Lato, etc.

Aprender CSS básicamente consiste en comprender la sintaxis, la forma en la que se escriben las instrucciones y cuáles son las características que podemos controlar con CSS.

Ahora que ya tienes idea ¡Adentrémonos en CSS!

[popup_anything id=»4273″]