Integración de diseño Web. CSS sobre HTML

"Se utiliza CSS en páginas HTML para dar diseño o formato al documento..."

¿Que es HTML y CSS?(Breve introducción)

Se trata de dos lenguajes con su propia sintaxis, interpretados en última instancia por los motores de procesamiento de los navegadores Web, pero a diferencia de los lenguajes de programación de propósito general, éstos tienen unas posibilidades limitadas y predefinidas y se aplican en un campo acotado de la Web, concretamente, para la creación y diseño de páginas Web.

Nota: en esta entrada de blog no se enseña a programar con estos lenguajes, pero tienes en la sección "Webs de interés" un buen punto de partida para aprender a utilizar estos lenguajes"

¿Porque utilizar hojas de estilo en cascada (CSS)?

HTML ha evolucionado de tal manera que actualmente se denomina a sí mismo como lenguaje de etiquetado semántico de datos en la Web. Esto que significa? Que utiliza etiquetas, ("tags" en inglés), para definir el el tipo de dato que contienen y su significado. Por ejemplo, se reconoce los datos que componen una imagen mediante el contenedor <IMG />. O, se define una porción de texto como un párrafo utilizando el contenedor <P></P>. Una vez definido y diferenciado los distintos tipos de datos que componen un documento Web, los motores de procesamiento se encargaran de su interpretación y renderizado.
Pues bien, CSS surge con el proposito de separar el contenido semantico de un documento con su diseño o formato, mejorando de forma ostensible tanto las posibilidades de diseño como la eficiencia en la creación de documentos Web. Por ejemplo, con CSS puedes intervenir en aspectos como el formato de tipo de letra que usas en tu documento, la disposición de los elementos que conforman tu propia composición, etc...

Nota: "...los exploradores Web utilizan por defecto hojas de estilo en cascada para dar formato a los documentos o páginas HTML"

¿Como se integra CSS en HTML?

 - Antes que nada, una breve explicación de conceptos -.

Las hojas de estilo en cascada son archivos con extensión .css cuyo contenido esta compuesto por partes diferenciadas según una sintaxis precisa llamada reglas. Cada regla asocia un conjunto de propiedades de estilo (con formato, atributo:valor), a uno o varios selectores, los cuales representan o se corresponden  con los elementos existentes en el documento HTML.
Por lo tanto, la sintaxis que utilizariamos para, por ejemplo, definir el ancho del cuerpo de una página HTML, seria:
BODY { width : 100%; }
donde,

•  BODY { width : 100%; }, es una regla.
• BODY, es el selector, y se realizará una búsqueda en el documento HTML para conocer a cual o cuales elementos  se aplicaran las propiedades de estilo.
• { width : 100%; }, es la definición de estilo, la cual puede contener una o varias propiedades de estilo.
• width : 100%, es una propiedad de estilo compuesta por el par "atributo:valor".

Existe tres formas posibles de integrar hojas de estilo en cascada sobre HTML:

• Hojas de estilo en línea
• Hojas de estilo embebidas
• Hojas de estilo externas

 Hojas de estilo en línea

Se utiliza el atributo 'style=""', disponible en cualquier elemento HTML, para insertar código CSS.
En este tipo de integración solamente puede insertarse una regla CSS y se interpreta en el contexto del elemento HTML que la contiene, es decir, solo afecta a dicho elemento.
La ventaja de este estilo de inserción es, por un lado, la facilidad a la hora de aplicar estilo a elementos individuales dentro del documento. Por otro lado, permite al programador sobreescribir todas aquellas propiedades de estilo que afectan a dicho elemento debido al efecto cascada o herencia que poseen por defecto algunos estilos CSS, ya que una regla en línea tiene en principio, una prioridad más alta en cuanto a su ejecución.

Nota: "CSS utiliza unas reglas para establecer qué propiedades de estilo deben aplicarse cuando existe conflictos entre reglas. Y, como uno de tales principios es: "el orden de jerarquia de prioridades se establece en función de las propiedades más generales a las más específicas", entonces una regla definida para un elemento específico debe ser la que predomine sobre el resto."

Dicho esto, hay que decir que este estilo de integración es el más desafortunado y desaconsejado estilo de integración de todos los posibles. La razón se debe a que, por un lado, el código de diseño se entremezcla con el código semántico, y invalida por lo tanto, la premisa "Separar el diseño del contenido", la cual aporta a la larga muchos beneficios en lo referente al mantenimiento de documentos. Por otro lado, la eficiencia en el código, ya que este estilo de integración no permite la reutilización de código.

EJEMPLO:
    <p style="font-family:Arial;color:black;">...</p>

Hojas de estilo embebidas

Este estilo de integración se basa en el uso de la etiqueta  HTML <style></stile>

Dentro de dicho contenedor se inserta toda la sintaxis CSS y, su procesamiento, afectará al resto del documento. Las pautas y condiciones que deben seguirse para que este embebido sea correcto son las siguientes:

• El contenedor <STYLE> debe incluirse entre las etiquetas <HEAD></HEAD> del documento, esto es, debe anidarse en la cabecera del documento.
• El contenido debe expresarse en sintaxis CSS, ya que en este punto de ejecución, para interpretar su contenido,  se pondrá en marcha el motor de procesamiento CSS, y por lo tanto deben cumplirse las reglas de sintaxis precisas que exige este motor de procesamiento.
• Ha de informarse al navegador qué tipo de contenido debe interpretar, por lo tanto, se le ha de especificar que se trata de una hoja de estilo en cascada o "stylesheet". Para ello, bastará con especificar el atributo "type="text/css", aunque la sintaxis habitual y por mí recomendada, es la siguiente:

  <style rel="stylesheet" type="text/css">...</style>

Ejemplo:

<style rel="stylesheet" type="text/css">
  html { height : 100%; overflow : auto; }
  body { padding : 0; margin : 0; height : 100%;
         background: #247878 "//www.blogger.com..."
 {
</style>

Hojas de estilo externas

En este tipo de integración se trata de editar un archivo de texto con código CSS y guardarlo con extensión .css
Luego, para indicar que queremos vincular nuestro documento HTML con este archivo, utilizamos el elemento <LINK /> desde la cabecera del documento. Para ello utilizamos la siguiente sintaxis:

 <head>
 ...
<link rel="stylesheet" type="text/css" href="..ruta/relativa o absoluta/al/archivo.css" />
...
</head>

donde vemos, como novedad, el atributo 'href=""' para expresar la ruta origen del recurso que queremos enlazar...

--PRACTICA:

Prueba el cambio de color del siguiente texto

El valor que introduzcas en el cuadro de texto debe especificarse en inglés, o bien, introducir la sintaxis: #XXXXXX, donde X representa un valor hexadecimal.

Cambia el color del texto

ESTE TEXTO CAMBIA DE COLOR;

Espero les haya sido fructifera y amena esta entrada de Blog

Saludos