MiniTutoriales: Introducción a CSS (Cascading Style Sheets)

Antes de aprender CSS, es necesario tener algunos conocimientos de HTML. En un tutorial anterior, comparábamos el código HTML con la estructura interna de un ser biológico, entonces, si HTML es el cuerpo, CSS es la vestimenta de una página web. Es importante comprender que HTML y CSS no compiten entre sí, si no que son ambos necesarios.

El código HTML indica cuáles elementos mostrará la página. El código CSS establece cómo se mostrarán los elementos. Por ejemplo, mediante HTML inserto 10 fotografías en mi blog, y con CSS hago que 2 tengan un borde punteado y cambien de color al pasar el puntero sobre ellas, 4 estén centradas y se abran en una página diferente, 3 produzcan una sombra sobre el fondo y 1 se muestre como fondo de las demás.

La sintaxis, en ambos casos, es similar:

HTML: <body bgcolor=”#FFFFFF”>

CSS: body {background-color: #FFFFFF;}

Un ejemplo práctico: colores Casi al comienzo del código fuente de la página encontraremos agrupados todos los elementos CSS. A esta sección se le llama “hoja de estilos”. Luego, en la sección de HTML propiamente dicha, encontraremos referencias a los estilos preestablecidos.

Para mostrar el texto del título alineado a la izquierda, en rojo y negrita, y sobre un fondo blanco:

• en la hoja de estilos:

h1 {
color: #FF0000;
text-style: bold;
text-align: left;
background-color: #FFFFFF;
}

• en el cuerpo de la página:

<h1>Introducción a CSS</h1>

• el resultado en el navegador:

Introducción a CSS

Una vez definido el estilo, cada vez que quieras escribir un título con estas características, sólo debes encerrarlo entre las etiquetas <h1> y </h1>, en este caso. Las posibilidades que brinda CSS son enormes. Puedes ver el código fuente de este blog para investigar un poco cómo funciona. Más adelante agregaremos otros tutoriales más específicos.

Nota: h1 es la etiqueta que normalmente se usa para definir el título. H2 para subtítulos, y así sucesivamente: cuanto más alto el número, menor importancia tiene el texto. Esta información también es utilizada por los buscadores para comprender cuál es el tema del que trata la página. Pero esto es un tema aparte. Puedes definir cualquier estilo reemplazando todos los “h1” de este ejemplo por la etiqueta que quieras, por ejemplo “mitexto”.

Introducción a CSS (Cascading Style Sheets)

1 comentarios:

Publicar un comentario