Algunos de los efectos que se pueden crear con CSS

4.- ¿Qué es el CSS?

Es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores...

CSS son las siglas de Cascading Style Sheets, en español Hojas de estilo en Cascada. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera.

5.- ¿Cómo adjuntar una hoja de estilo a una página Web?

Hay varias maneras de Añadir las instrucciones de estilo CSS a una página web.

• Se puede añadir el estilo individualmente a cada elemento HTML.

• Se puede añadir declarando los estilos CSS en el encabezado del código HTML <header></header>.

• O se puede añadir toda la lista de estilos CSS en un documento separado con extensión ‘.css’.

Con la combinación de 4 elementos HTML podemos añadir el estilo CSS a una sección de la página web, estos son: <style>, <div>, <span> y <link>. O con 3 atributos de HTML, que son: style, id y class también podemos afectar el estilo CSS más directamente en un elemento HTML.

Todos los elementos HTML tienen un atributo llamado ‘style’, basta añadir este atributo junto con la regla CSS que se desea aplicar para añadir el estilo deseado, no es recomendable usar este atributo para aplicar un estilo CSS a tu documento HTML, lo más optimo es separar el estilo CSS del código HTML, salvo en algunos casos especiales cuando queremos darle más jerarquía a un estilo CSS sobre el elemento HTML.

Ejemplos añadiendo estilos a diferentes elementos HTML:

Cambiando el color del párrafo: <p style=”color:#fff;”>Este párrafo es de color VERDE</p>

Cambiando el tamaño de la fuente: <h2 style=”font-size:22px;”>Este elemento H2 ahora tiene un tamaño de letra de 22px</h2>

Añadiendo un background a una sección de tu pagina: <div style=”background-image: url(/imagenes/laimagen.png)”></div>

Es bastante fácil, como puedes ver. Solo es necesario añadir el atributo ‘style‘ en el elemento al cual deseas aplicar un estilo.

Es importante entender que los elementos <div> y <span> pueden ser usados para aplicar estilos CSS por secciones en la página web.

Hay una manera más de añadir reglas CSS a un website, esta es llamando a un documento externo.

...