Css y Html, presentación y contenido

Autor: comunicacion 14-10-2010

Css, presentción y contenidoCss "Cascading Style Sheets" (Hojas de Estilo en Cascada), es una tecnología desarrollada con el fin de separar la presentacion del contenido del HTML. Funciona aplicando reglas de estilo a los elementos HTML, De esta manera toda lo que tiene que ver con la parte gráfica de la web, queda separada completamente de la estructura del HTML.

Este lenguaje desarrollado por la W3C, ha ido extendiendose entre los diseñadores, gracias a la facilidad de uso y a los excelentes resultados a nivel estético.

Aprender a conocer CSS nos dará como resultado un mejor flujo de trabajo, mayor organización de nuestro codigo, menos peso en las paginas, y mas flexibilidad en los cambios. Ademas una vez familiarizados con sus capacidades, nos daremos cuenta de que es mas fácil y rápido diseñar con CSS que de la manera antigua, es decir mezclando código estructural con código de presentación

Intentaremos ver como hacer documentos válidos y que sean bien interpretados por la mayoría de los navegadores actuales. Lograremos esto conociendo los tres tipos principales de elementos en el desarrollo de CSS:

  • Selectores
  • Atributos
  • Valores

Atributos

Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo "background", etc.

Valores

Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo "color" y el valor "red".

Selectores

Se usan para definir los elementos HTML a los que vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta <body> del documento HTML.

Tipos de selectores

  • Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
  • Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre.
  • El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma:
    .mi_clase.

Sintaxis

Es muy simple, primero colocamos el selector, luego se abre una llave "{" y se empiezan a colocar el atributo, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden definir tantos atributos con sus respectivos valores como se desee, separandolos con un espacio o un salto de linea.

En CSS se deben escribir los atributos y valores con minusculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar, como vemos en los ejemplos siguientes:

  /*CSS sobre selector de etiquetas*/
  body {font-family: arial;
        font-size: 12px;
        color: black;
        background-color: #cccccc;
       }

Este tipo de selector no requiere de aplicación en el documento HTML, las etiquetas a las que se les defina un estilo de esta forma automáticamente heredarán los estilos.Por ejemplo el<body>.

 /*CSS sobre selector de identificador*/
  #header {background-color: #ff0000;
           color: #ffffff;
           font-size: 26px;
          }

En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este ejemplo: <div id="header">Aqui el contenido</div>

 /*CSS sobre selector de clase*/
  .mi_clase {margin: 5px;
             height: 100px;
             width: 200px;
             }

En los selectores de clase, usamos el atributo "class" en las etiquetas HTML para darles el estilo. Ejemplo: <div class="mi_clase">Aqui el contenido</div>

Ademas de esto, existen tres formas de aplicar estilos CSS a una pagina, la que recomiendo en primer lugar, haciendo un archivo de texto plano guardado como archivo.css, separado del archivo HTML, y vinculando la hoja HTML a el. Esto se hace colocando en la sección head de la página:

La mas recomendablees vincular el archivo .css a todas las páginas del sitio, es mucho mas liviano al ver la pagina y ademas a la hora de modificar algo se hace solo una vez:

  <link href="archivo.css" rel="stylesheet" type="text/css">

La segunda forma es aplicando los estilos directamente en la sección <head> del documento HTML. Se hace de la siguiente forma:

  <head>  <title>Pagina</title>  <style type="text/css">
       <!--
        body {font-family: Geneva, Arial, Helvetica, sans-serif;
           	font-size: 12px;
              color:#333333;
              }
        -->
  </style>  </head>

Esta sería una buena forma si los estilos son s exclusivos para la página a la cual atañe directamente.

El tercer método menos recomendable, aunque algunas veces puede ser necesario, consiste en aplicar los estilos directamente sobre el elemento HTML, de esta forma:

  <table style="background-color:#333333; padding:2px;
          width:300px;height;100px;></table>

Los atributos pueden ser simples como "color" o compuestos, como el atributo "font-family" o "background-color", puede llevar adicionalmente caracteristicas mas especificas, que van separadas por un guion "-" como vimos en los ejemplos.

Los valores tambien pueden ser de diferentes tipos, en los de medida, se pueden usar pixeles "px" centimetros "cm" o relativos como "em", en los colores se puede usar la notacion hexadecimal (#FF3300) o directamente el nombre del color en ingles (no recomendado).

De esta forma podemos aplicar estilos a todos y cada uno de los elementos HTML que constituiran nuestyra página web, ademas de lograr un documento completamente válido obtendremos resultados que solo el poder de CSS puede lograr, como cambiar completamente la apariencia de una página sin tocar el archivo HTML.

El punto ideal sera cuando logremos separar completamente el diseño del contenido, dominando las técnicas de posicionamiento con CSS, y eliminando el uso de tablas para estructurar el contenido.

Podemos ver un listado de los atributos y valores en la Guía de Refencia Rápida de Css de la Oficina Española del Consorcio W3C

597 comentarios