Diseño de interfaces web: cómo usar los estilos

En la programación web habrás escuchado hablar de la hoja de estilos o CSS. Esto no es más que una tecnología para poder dar formatos visuales y estéticos a nuestras páginas web.

En el post de hoy veremos como usar los estilos para lograr dotar a nuestras páginas web de un estilo homogéneo y atractivo con poco esfuerzo.

¿En qué consisten los estilos?

Las hojas de estilo o CSS como también se denominan, es un lenguaje de programación que nos va a permitir aplicar estilos a nuestras páginas HTML.

Cuando decimos estilos, nos referimos a colores, formas, tipos de letras, tamaño de caracteres y muchos otros estilismos.

Recordemos que el HTML es un lenguaje de etiquetas con el que creamos el contenido de una web. La idea del CSS es el separar el contenido de la presentación para que los documentos HTML contengan el contenido de nuestra página web y el fichero CSS todo lo relativo al estilo de presentación de dicha página web.

Esto aporta un conjunto de ventajas interesantes, como son:

• Cuando queremos modificar alguna característica de presentación, bastará con modificar el fichero CSS y se aplicará a todos los ficheros HTML a los que referencie.  Es decir, una sola modificación se aplicará a toda la web.

• Al separar los estilos del contenido, se reduce el tamaño de las páginas de contenidos y por lo tanto se acelera la web.

• El uso de ficheros CSS, facilita el desarrollo o presentación de la web en diferentes dispositivos como pueden ser ordenadores, tablets o smartphones. Usaremos un fichero CSS diferente para cada tipo de dispositivo, pero el mismo contenido.

Somos lo que buscas
¡Visita nuestros centros y compruébalo tú mismo/a! 

Pide tu cita ahora

Cómo usar los estilos

Las hojas de estilo se pueden usar de 3 maneras diferentes según cómo las queramos incluir en los documentos HTML a los que van a aplicarse.

La primera forma es mediante una hoja de estilo externa. Esta hoja quedará enlazada al fichero HTML. Para ello, dentro del bloquedel fichero HTML deberemos incluir una relación al fichero CSS del estilo:

<link href=»estilo.css» rel=»stylesheet» type=»text/css»>

De esta forma el navegador al interpretar el fichero HTML sabrá que existe una hoja de estilos, en este caso llamada estilo.css que se deberá aplicar al HTML.

Se recomienda escribir la línea de referencia lo antes posible dentro del HTML para que los estilos se apliquen lo antes posible y no parezca que la página no carga correctamente.

La ventaja de este método es que permite aplicar los estilos a varias páginas al mismo tiempo y solo es necesario modificar el archivo ante cualquier actualización. Este método además es el recomendado de uso de los CSS

Otra forma de hacerlo es incluyendo los estilos dentro del fichero HTML. Para ello, se incluirá dentro del bloqueun script

, en donde se incluirán los estilos a aplicar a esta página HTML.

Un ejemplo de escritura sería este:

       div {

           background:#FFFFFF;

       }

Aunque esta forma de uso es habitual, no es la recomendable pues no conseguimos tener los estilos de forma independiente del contenido que es el objetivo principal.

La tercera forma de hacerlo es lo que se conoce como usar los estilos de forma embebida. Esto significa que definimos el estilo dentro de los tags del HTML.

Un ejemplo sería el siguiente:

¡Hola amigo lector!

Esta es quizás la forma menos recomendable de uso y más si se combina con alguna de las anteriores ya que rompería con la homogeneidad de la página, aunque en ocasiones puede ser lo que se busque.

Cómo funcionan los estilos

Ahora que ya sabemos como usar los estilos, veremos cómo funcionan los mismos.

Las hojas de estilo o CSS funcionan mediante la aplicación de reglas. Cada regla posee tres elementos.

selector {

propiedad: valor;

}

El selector especifica un elemento al que se aplicará la regla. Este elemento pueden ser cualquier tipo de definición.

A continuación, entre paréntesis se definen una o varias declaraciones de estilo. Siempre la propiedad y el valor deben estar separados por :

La propiedad es la característica de estilo que definimos y valor, el valor que toma dicha propiedad.

Si queremos definir varias propiedades dentro del mismo selector, las deberemos separar por ;

Es importante que estén bien construidas las reglas pues de lo contrario no se aplicarán.

Un ejemplo de estructura sería este:

h3  {

 line-height: 38px;

 margin: 6px;

 padding-top: 10px;

}

Con lo visto en el post de hoy, ya deberíamos ser capaces de crear estilos. Ahora solo queda profundizar con algún tutorial de los muchos que podemos encontrar en Internet. En estos tutoriales podremos ver el conjunto de propiedad y valores que podemos definir para los diferentes selectores que definamos.

Como veis, el concepto es sencillo y práctico. Os animo a profundizar en el tema y siempre recomendaría el uso de hojas de estilo externas.