¿Que es CSS?

0
387

Anteriormente vimos que es HTMLCSS va de la mano con este lenguaje y personalmente digo que hoy en día el que quiera aprender uno tendrá que aprender el otro también, pero entonces ¿que es CSS? ahora te lo explico.

CSS viene de  las siglas en ingles de Cascading Style Sheets o hoja de estilo en cascada, es uno de los  lenguajes fundamentales de cualquier pagina web y su función es definir el diseño gráfico de cada elemento previamente establecido con HTML.

En pocas palabras CSS se encarga de que un elemento HTML tenga color, forma, alineación entre otras muchas propiedades que CSS permite definir y así hacer nuestras paginas web mas agradables al usuario.

Actualmente existe un disputa en la comunidad de desarrolladores web  ya que no se termina de definir si CSS es un lenguaje de programación o no, yo digo que aun no lo es pero que esta próximo a serlo, ya que con los años y las nuevas versiones se ha vuelto mas complejo, permitiendo así que adopte algunas características típicas de los lenguajes de programación.

Ver definición: lenguaje de programación.

Historia del CSS

Con la estandarizacion de HTML se produjo la necesidad de mejorar el diseño a las paginas web, lo que provoco que cada navegador asignara un diseño diferente dando asi un dolor de cabeza a los desarrolladores que tenían que elaborar un sitio web para cada navegador.

No fue hasta 1995 cuando la W3c estandarizo un lenguaje de estilo uniendo dos propuestas de Hakon Wium Lie  y  Bert Bos en una sola, formando así el lenguaje CSS.

En 1998 se publica la version 2 de CSS y actualmente contamos con la version 3.

El lenguaje CSS ha ganado complejidad con los años, agregando características como el uso de variables y la creación de animaciones, eso sin sumar toda lo profundidad que le dan los framework existentes para este estándar de la web.

Ver definición: framework.

Crear un documento CSS

Para crear un documento CSS tendras que hacer el mismo procedimiento que para un documento HTML. Ve a un editor de texto plano y guardarlo con la extensión .CSS!Que bien! has creado tu primer archivo CSS, ahora tendrás que vincularlo a un documento HTML para poder darle uso.

muestra de documento CSS
muestra de documento CSS

Nada de usar Microsoft Word, ya que no es un editor de texto plano, es un procesador de texto y añade su propio código al mismo.

Sintaxis del CSS

El lenguaje CSS se basa en la asignacion de propiedades a elementos previamente definidos en HTML.

Un ejemplo de  sintaxis  es: Elemento {propiedad:valor;}

  • Elemento es al cual se le asignara la propiedad.
  • Propiedad sera la caracteristica del elemento a modificar.
  • Valor es el valor de la propiedad, es particular a cada una de ellas.

Veamos el siguiente ejemplo donde cambiamos el color a los parrafos.

P{color:red;}

Al igual que en HTML o cualquier otro idioma, mientras mas palabras conozcas mas fácil sera,  te invito a ver todas las Propiedades CSS y sus valores en este enlace incluyendo las ultimas añadidas en CSS3.

Lo mas recomendable es que pruebas la mayoría de propiedades y juegues con sus valores para ver los resultados.

Desde ahora cuando veas una pagina web ya tendrás una idea de como fue implementado su diseño con CSS.

Vincular CSS a HTML

Existen 3 formas de usar CSS en un documento HTML, te lo explicamos a continuación.

Como atributo

Puedes agregar CSS a tu documento HTML usando el atributo Style de las etiquetas como en el siguiente ejemplo. s

<p style="color:red;">esto es un parrafo de color rojo</p>

Como etiqueta

Puedes agregar CSS a tu documento HTML usando la etiqueta Style el selector del elemento a modificar, puedes ver un ejemplo a continuación.

<p>Esto es un parrafo de color rojo</p>
<style> p{color:red;} </style>

Como documento CSS

Puedes agregar CSS a tu documento HTML usando un documento externo usando la etiqueta Link, siendo esta la manera mas comun de usar CSS.

Para vincular un archivo CSS externo solo debes colocar la siguiente linea en tu documento HTML.

<link rel="stylesheet" type="text/css" href="direccion del documento CSS">

CSS3

CSS3 logo
CSS3 logo

CSS3 es la versión actual de CSS, trajo consigo muchas novedades, ahora muchas cosas que solo eran posible gracias a JAVASCRIPT están presentes en CSS.

Entre sus ventajas tenemos:

  • Animaciones
  • Varios tipos de maquetado
  • Colores desgradados
  • Curvaturas en las cajas
  • Uso de fuentes externas
  • Rotación de elementos

Estas son algunas de las novedades que trajo CSS3, facilitando mucho el trabajo al dar mejores herramientas, como la posibilidad de hacer curvas en las cajas, antes solo posible con imágenes, o la posibilidad de hacer animaciones que antes solo se podían realizar con JAVASCRIPT.