CSS: qué es y tips para aplicar

CSS son las siglas de Cascading Style Sheets, que en castellano se traduce por hojas de estilo en cascada. Si ampliamos más el concepto de qué son CSS, te podemos decir que son documentos escritos en un lenguaje de marcado basado en reglas con el que se definen los estilos de las páginas web. Supusieron un antes y un después en el desarrollo web, ya que permitieron ampliar las posibilidades de mejorar la apariencia de las webs, que, en un principio estaban más enfocadas al contenido que a su presentación.

¿Para qué sirven los documentos CSS?

Como hemos mencionado anteriormente, las hojas de estilo permiten cambiar los estilos de una web. Para que lo entendamos de manera sencilla, podemos imaginar el HTML como una persona en ropa interior y al CSS como la ropa que le viste. De igual modo que podemos ponernos diferentes ropas en nuestro armario, podemos tener también para nuestra web diferentes archivos de CSS.

Entre otras muchas cosas, las hojas de estilo nos permiten por ejemplo modificar el color de fondo de una web, posicionar el logo a la izquierda o la derecha de nuestra web, redondear los bordes de las imágenes, cambiar la tipografía de nuestro contenido, entre otros.

Tips para aplicar

Para comenzar a aplicar estilos a tu página web, tan solo necesitas un editor de texto, guardar tu hoja de estilos con extensión .css y enlazar los estilos desde tu página HTML. A continuación, vamos a darte unos tips básicos para aplicar en tus webs.

Cómo poner una imagen de fondo

Es muy común añadir una imagen de fondo a los sitios webs. Si quieres añadir una, en primer lugar debes elegir el contenedor sobre el que quieres aplicar la regla css. Normalmente para cambiar la imagen de fondo de una web, el contenedor será body. La propiedad que vamos a cambiar, en este caso, es background-image. Por tanto, la regla CSS nos quedaría así:

body { background-image: url(‘imagendefondo.png’); }

El contenido de URL es la ruta de la imagen que deseamos añadir de fondo, que en este caso se encontraría en la misma carpeta que la hoja de estilos.

Cómo redondear los bordes de una imagen

Para aplicar redondear los bordes de una imagen debemos crear una clase como la que sigue:

.imagenRedonda{

                width: 400px;

                height: 400px;

                border-radius: 200px;

}

Las propiedades width y height indican el tamaño que va a tener la imagen, definen el ancho y el ato respectivamente. Por su parte, la propiedad border-radius indica el radio de los píxeles que queremos redondear. Al redondear un radio de 200px, teniendo en cuenta que la imagen mide de ancho y alto 400px, estaríamos haciendo que nuestra imagen quede totalmente redonda.

Cómo crear un texto con sombra

Imaginemos ahora que queremos que nuestros subtítulos H2 sea texto con sombra, ¿cómo debemos proceder para crear la regla CSS?

h2 { text-shadow: 2px 2px #ccc}

En este ejemplo estaríamos aplicando sobre en color gris (definido por el hexadecimal #ccc) con un desplazamiento de 2 píxeles desde la parte superior y desde la izquierda.

Aunque aquí hemos tratado de introducir brevemente aplicaciones de las hojas de estilo, debes tener en cuenta que las posibilidades son muy amplias, sin embargo, la curva de aprendizaje de CSS es alta, por lo que, con poco tiempo de estudio, podrás desenvolverte muy bien creando tus estilos web.