Unidad 2. Etiquetas de Texto (III)



2.3. Introducción a las hojas de estilo CSS

Un concepto fundamental en una página web es la separación entre el contenido y el formato, actualmente para dar formato al texto se utilizan las hojas de estilo en cascada CSS (Cascading Style Sheets). Es decir, en el archivo .html se escribe el contenido de la página web con etiquetas html, y en el archivo .css se define el estilo o formato del contenido, por ejemplo el color del texto o el tipo de alineación.

En la imagen siguiente podemos ver un ejemplo.

En el archivo ejemplo_2_1.html tenemos las etiquetas html y el contenido, y en el archivos ejemplo_2_1.css tenemos la hoja de estilo. El resultado es la página web que se muestra en la parte inferior.

En la hoja de estilo vemos que a la etiqueta h1 se le ha aplicado el estilo para centrar el texto h1 { text-align: center }, y a la etiqueta p se le ha aplicado el estilo para establecer el tipo de letra y el tamaño del texto p { (font-family: arial; font-size: 16px; }, con lo cual a todas las etiquetas p se les aplicarán estos dos estilos.

Si en lugar de aplicar un estilo a todas las etiquetas queremos aplicarlo a unas etiquetas en concreto podemos declarar una clase y asignarla sólo a las etiquetas que queramos. En nuestro ejemplo hemos creado la clase .resaltado que pone el texto en color azul, y lo hemos aplicado a una etiqueta concreta: <p class="resaltado">Microsoft es la propietaria de Excel.</p> .

En este ejemplo, también vemos que para enlazar un archivo .html con un archivo .css se utiliza la siguiente etiqueta: <link rel="stylesheet" type="text/css" href="css/ejemplo_2_1.css" /> que indica que el archivo enlazado se llama ejemplo_2_1.css que se encuentra en la carpeta css.

La hoja de estilo también se puede declarar en el mismo archivo .html, concretamente dentro de la etiqueta head, como se muestra en esta página básica: Incrustar CSS en HTML . Aunque lo recomendable es hacerlo en otro archivo, como acabamos de explicar.

Las reglas de las hojas de estilo están formadas por el selector y entre llaves las declaraciones separadas por punto y coma. Una declaración es un atributo (propiedad) seguido por dos puntos y a continuación el valor de la propiedad.

Sintaxis CSS

Más adelante dedicaremos la unidad 9 a explicar con detalle la sintaxis de las hojas de estilo y otras características, en realidad las hojas de estilo están muy relacionadas con las etiquetas de HTML por lo que deberían explicarse de forma simultánea, aunque por otro lado, es bueno que haya un lugar donde esté agrupada la explicación sobre hojas de estilo. A lo largo del curso iremos viendo más ejemplos del uso de las hojas de estilo al explicar algunas etiquetas, si hay algo que no entiendas de esos ejemplos puedes ir a la unidad 9 para consultar las dudas sobre las hojas de estilo.


Enero-2019 (V 2.0)
Pág. 2.3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.