CSS Introducción a las Hojas de Estilo en Cascada

Las hojas de estilo en cascada constituyen una gran herramienta para la construcción de páginas web. Su función es la de definir el formato, presentación y diseños de los diferentes elementos que integran un documento.

Una hoja de estilo CSS es básicamente un código donde se hacen declaraciones sobre las características y como deben presentarse los elementos HTML.

HTML por si mismo puede ser utilizado para dar formato, y hasta cierto nivel diseñar como se presentaran los diferentes elementos en la pagina web. Sin embargo al utilizar CSS para las tareas de formato y diseño, se puede concentrar el uso de HTML para el contenido y la estructura del documento. Una de las ventajas de esto es que el documento HTML es menos complicado, de mas fácil lectura, sin tantos atributos y etiquetas adicionales.

Otra de las ventajas es que al centralizar el formato y el diseño en CSS se pueden manipular todos elementos de un mismo tipo dentro de un documento desde un mismo lugar, no se tendría que ir elemento por elemento HTML para cambiarlos. Adicionalmente, como veremos mas adelante, se pueden hacer cambios a elementos ubicados en  diferentes páginas de un mismo sitio web.

Estructura de una declaración CSS

La sintaxis de una declaración CSS es muy simple, tal como se muestra a continuación.

CSS-intro-2

Existen dos partes una es el selector, que indica el elemento HTML al cual se le aplicaran los códigos para dar formatos y estilos. Y la otra parte es el bloque de declaraciones, que están integradas por declaraciones individuales. El bloque de declaraciones comienza con una llave y se cierra con otra llave.

cada declaración esta integrada por dos partes: la propiedad y su valor, los cuales están separadas por dos puntos( : ) y luego de cada declaración se coloca un punto y coma ( ; ).

Un ejemplo de codigo CSS se muestra a continuación:

p { color:red; background:gray; }

en este caso el selector es p, es decir se aplica a los elementos con la etiqueta <p>, hay dos declaraciones en la primera se aplica la propiedad color y su valor es rojo, lo que indica un texto de color rojo. En la segunda declaración se aplica la propiedad background y se le da el valor gray.

Formas de aplicar código CSS a una página

Existen 3 formas de aplicar código CSS a un documento HTML:

  1. En línea, Incluido dentro del documento HTML.
  2. Referencia interna, incluyendo el código dentro de la misma página.
  3. Referencia externa, creando un archivo tipo css y realizando un enlace desde el documento HTML.

En Línea con el Documento HTML

Una de las formas de aplicar formato y estilo en un documento HTML es aplicarlo directamente al elemento como un atributo dentro de la etiqueta de apertura del elemento. El atributo es style y la sintaxis es la siguiente:

<elemento style=”propiedad:valor; propiedad:valor; propiedad:valor;”>

donde elemento se refiere a cualquiera de los elementos HTML que se utilizan en un documento, por ejemplo <p>, <h1>, <h2>, <div>, <body>, etc. Por ejemplo:

<h1 style=”color:green; background-color:yellow; font-size:40px;”>

<h2 style=”color:red; font-size:30px;”>

CSS-intro-5

Cuando se utiliza el CSS en línea se sobrecarga de información el documento HTML, lo cual interrumpe un poco la legibilidad del contenido y su estructura. Por otra parte debe aplicarse elemento por elemento, por lo que a la hora de aplicar algún cambio no es muy flexible y no es muy recomendable.

La recomendación es utilizar la referencia interna, o externa y solamente utilizar CSS en línea cuando se desee hacer un cambio muy particular a un elemento.

La salida que se obtiene al aplicar CSS en línea es la que se muestra a continuación.

CSS-intro-6

 

Referencia Interna

En la referencia interna se crea el código CSS utilizando las etiquetas <style></style> y dentro de ellas se colocan las declaraciones para dar formato y estilo a los diferentes elementos HTML del documento. Las etiquetas <style></style> en la referencia interna se ubican dentro de las etiquetas <head></head>.

La sintaxis es la siguiente:

<style type=”text/css”>selectores y bloques de declaraciones</style>.

En la etiqueta de apertura se coloca el atributo type y su valor es “text/css”.

En la siguiente figura se muestra un ejemplo de un documento HTML con CSS de referencia interna. Se encerró en un rectángulo rojo las declaraciones CSS, las cuales están dentro de las etiquetas <style type=”text/css”> y </style>

CSS-intro-3

Como se observa dentro de la etiqueta body solo se muestran las etiquetas de los elementos con sus contenidos, lo que produce un documento mas sencillo y claro de leer.

La salida que se obtiene se muestra en la siguiente figura:

CSS-intro-4

 

Referencia Externa

La referencia externa se logra creando uno o mas archivos de texto con extensión .css donde se colocan todas las declaraciones con las reglas que queremos utilizar para dar formato y estilo a los diferentes elementos HTML.

la sintaxis es la que ya se mostro en la figura 1. En un archivo css no se colocan etiquetas de HTML, solo se deben colocar los selectores y el bloque con declaraciones.

Un archivo CSS tiene la siguiente configuración:

CSS-intro-7

Este archivo se realizo en notepad ++, su nombre es miestilo.css. No es necesario colocar cada declaración en una línea separada, solamente que da claridad.

para aplicar esta hoja de estilo a un documento HTML, debe crearse un enlace desde el documento HTML al archivo .css. El enlace se hace en el elemento head y se utiliza la etiqueta <link> con la siguiente sintaxis:

<link rel=”stylesheet” type=”text/css” href=”miestilo.css”>

Los atributos rel=”stylesheet” le indica al navegador que el archivo es una hoja de estilo (CSS stylesheet).

type=”text/css” también informa que el archivo es una hoja de estilo css.

href es un atributo para indicar la dirección del archivo a enlazar. para una discusión sobre la referencia a archivos ver el articulo: Referencia a archivos.

En la siguiente figura se observa como se hace la referencia al archivo miestilo.css que contiene las reglas CSS.

CSS-intro-8

La salida del navegador al utilizar esta hoja de estilos es el que se muestra a continuación.

CSS-intro-9

Si queremos hacer cambio en el formato y el estilo estos se realizan en el archivo miestilo.css, sin alterar para nada el documento HTML.

por ejemplo cambiemos el fondo de los títulos a color gris

CSS-intro-10

Esto tendrá el siguiente efecto en la presentación de la página.

CSS-intro-11

De los tres metodos utilizados para indicar el codigo CSS el mas recomendable es el que utiliza referencia externa. Esto debido a que se separa en uno o varios archivos las reglas para dar formato y estilo, dejando el documento HTML aparte dedicado a la estructura y al contenido. Por otra parte una hoja de estilo CSS creado en un archivo individual puede ser utilizado en muchas paginas al crearse enlace en cada pagina al mismo archivo de reglas CSS.

La referencia interna es util cuando las reglas CSS se van a aplicar unicamente a una sola pagina. y finalmente el menos recomendado de los métodos es aplicar CSS en linea, y solo deberia ser utilizado cuando se requiera aplicar un formato o estilo a un elemento de forma muy particular.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s