Aprende CSS en español en CG Studios

Bienvenido a CG Studios CSS, el sitio web donde puedes aprender todo lo que necesitas para trabajar diseño y desarrollo para internet o dispositivos móviles.

Esta sección está dedicada a CSS, pero puedes saltar a cualquier otra sección con el menú superior.

Recuerda que contamos con herramientas, referencia y ejemplos a los que puedes acceder desde el menú de la izquierda.

 

¿Por qué aprender CSS?

Si estás interesado en hacer sitios web, web apps o apps para dispositivos móviles debes aprender a crear estilos en CSS.

Además, CSS te permite aplicar diseño que se ajusta a cada dispositivo según su resolución de pantalla u orientación (horizontal o vertical).

 

¿Qué es CSS?

CSS viene de cascading style sheet que signifíca hoja de estilos en cascada y es el encargado de manipular la capa de presentación de los sitios web.

Un sitio web se divide en 3 capas: la capa de contenido (que incluye todo lo que el usuario vé como texto, videos, imágenes, etc), la capa de presentación (que define cómo se ve) y la capa de comportamiento (que incluye todo lo relacionado con interacción).

Es importante utilizar CSS separado de la capa de contenido para el diseño de un sitio web ya que desde un solo archivo se le puede dar forma a cientos de páginas, lo que significa que todos los cambios se hacen desde un sólo lugar y que un cambio puede aplicar a la vez a todo el sitio.

 

¿Se pueden hacer sitios web sin CSS?

Si no quieres aprender CSS es necesario que utilices servicios que tengan plantillas prediseñadas, pero rápidamente te encontrarás con limitaciones de diseño e interacción. A cambio, si aprendes HTML y CSS, podrás hacer cualquier diseño a tu medida y manera así como modificar los que ya tengas, hacer diseño adaptable e incluso que el sitio entero cambie según la pantalla en la que se vea.

 

¿Dónde se incluye el CSS?

El código CSS puede ir incluido en 3 distintos lugares:

  • En el atributo style de la etiqueta HTML. Ejemplo: <div style="width:200px; height:300px;"></div>
  • En la la cabecera del documento.
  • En un documento aparte cargandolo con el elemento link o la regla @import.