INTRODUCCIÓN A CSS3

madesweb

Como aclaramos anteriormente, la nueva especificación de HTML (HTML5) no describe solo los nuevos elementos HTML o el lenguaje mismo. La web demanda diseño y funcionalidad, no solo organización estructural o definición de secciones.  En este nuevo paradigma, HTML se presenta junto con CSS y Javascript como un único instrumento integrado.

Oficialmente CSS nada tiene que ver con HTML5. CSS no es parte de la especificación y nunca lo fue. Este lenguaje es, de hecho, un complemento desarrollado para superar las limitaciones y reducir la complejidad de HTML. 

Al comienzo, atributos dentro de las etiquetas HTML proveían estilos esenciales para cada elemento, pero a medida que el lenguaje evolucionó, la escritura de códigos se volvió más compleja y HTML por sí mismo no pudo más satisfacer las demandas de diseñadores.

En consecuencia, CSS pronto fue adoptado como la forma de separar la estructura de la presentación. Desde entonces, CSS ha crecido y ganado importancia, pero siempre desarrollado en paralelo, enfocado en las necesidades de los diseñadores y apartado del proceso de evolución de HTML.

La versión 3 de CSS sigue el mismo camino, pero esta vez con un mayor compromiso. La especificación de HTML5 fue desarrollada considerando CSS3 a cargo del diseño. Debido a esta consideración, la integración entre HTML y CSS es ahora vital para el desarrollo web y esta es la razón por la que cada vez que mencionamos HTML5 también estamos haciendo referencia a CSS3, aunque oficialmente se trate de dos tecnologías completamente separadas.

Estilos y estructura

A pesar de que cada navegador garantiza estilos por defecto para cada uno de los elementos HTML, estos estilos no necesariamente satisfacen los requerimientos de cada diseñador. Normalmente se encuentran muy distanciados de lo que queremos para nuestros sitios webs. Diseñadores y desarrolladores a menudo deben aplicar sus propios estilos para obtener la organización y el efecto visual que realmente desean.

• ELEMENTO BLOCK

Con respecto a la estructura, básicamente cada navegador ordena los elementos por defecto de acuerdo a su tipo: block (bloque) o inline (en línea). Esta clasificación está asociada con la forma en que los elementos son mostrados en pantalla. Elementos block son posicionados uno sobre otro hacia abajo en la página. Elementos inline son posicionados lado a lado, uno al lado del otro en la misma línea, sin ningún salto de línea a menos que ya no haya más espacio horizontal para cubicarlos.

Casi todos los elementos estructurales en nuestros documentos serán tratados por los navegadores como elementos block por defecto. Esto significa que cada elemento HTML que representa una parte de la organización visual (por ejemplo, <section>, <nav>, <header>, <footer>, <div>) será posicionado debajo del anterior.

En el Capítulo 1 creamos un documento HTML con la intención de reproducir un sitio web tradicional. El diseño incluyó barras horizontales y dos columnas en el medio. Debido a la forma en que los navegadores muestran estos elementos por defecto, el resultado en la pantalla está muy lejos de nuestras expectativas. 

Tan pronto como el archivo HTML es abierto en el navegador, la posición errónea en la pantalla de las dos columnas definidas por los elementos <section> y <aside> es claramente visible. Una columna está debajo de la otra en lugar de estar a su lado, como correspondería. Cada bloque (block) es mostrado por defecto tan ancho como sea posible, tan alto como la información que contiene y uno sobre otro, como se muestra en la siguiente imagen:

MODELO DE CAJA

Para aprender cómo podemos crear nuestra propia organización de los elementos en pantalla, debemos primero entender cómo los navegadores procesan el código HTML. Los navegadores consideran cada elemento HTML como una caja. Una página web es en realidad un grupo de cajas ordenadas siguiendo ciertas reglas. Estas reglas son establecidas por estilos provistos por los navegadores o por los diseñadores usando CSS3.

CSS3 tiene un set predeterminado de propiedades destinados a sobrescribir los estilos provistos por navegadores y obtener la organización deseada. Estas propiedades no son específicas, tienen que ser combinadas para formar reglas que luego serán usadas para agrupar cajas y obtener la correcta disposición en pantalla. La combinación de estas reglas es normalmente llamada modelo o sistema de disposición. Todas estas reglas aplicadas juntas constituyen lo que se llama un modelo de caja.

CONCEPTOS BÁSICOS SOBRE ESTILOS

Antes de comenzar a insertar reglas CSS en nuestro archivo de estilos y aplicar un modelo de caja, debemos revisar los conceptos básicos sobre estilos CSS3.

ESTILOS EN LINEA

Una de las técnicas más simples para incorporar estilos CSS3 a un documento HTML5 es la de asignar los estilos dentro delas etiquetas por medio del atributo style.

ejemplo:

   <!DOCTYPE html>

       <html lang="es">

         <head>

            <title>Este es el título del documento</title>

         </head>

          <body>

             <p style=”font-size: 20px”>Mi texto</p>

         </body>

       </html>

Usar la técnica demostrada anteriormente es una buena manera de probar estilos y obtener una vista rápida de sus efectos, pero no es recomendado para aplicar estilos a todo el documento. La razón es simple: cuando usamos esta técnica, debemos escribir y repetir cada estilo en cada uno de los elementos que queremos modificar, incrementando el tamaño del documento a proporciones inaceptables y haciéndolo imposible de mantener y actualizar. Solo imagine lo que ocurriría si decide que en lugar de 20 pixeles el tamaño de cada uno de los elementos <p> debería ser de 24 pixeles. Tendría que modificar cada estilo en cada etiqueta <p> en el documento completo.

ESTILOS EMBEDIDOS

Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar referencias para afectar los elementos HTML correspondientes.

 Ejemplo:

          <!DOCTYPE html>

           <html lang="es">

             <head>

               <title>Este texto es el título del documento</title>

                <style>

                   p { font-size: 20px }

               </style>

             </head>

             <body>

               <p>Mi texto</p>

             </body>

           </html>

El elemento <style> mostrado en el ejemplo anterior, permite a los desarrolladores agrupar estilos CSS dentro del documento. En versiones previas de HTML era necesario especificar que tipo de estilos serian insertados.

El ejemplo anterior tiene la misma función que ejemplo de estilo en linea  pero para este ejemplo no tuvimos que escribir el estilo dentro de la etiqueta <p> porque todos los estos elementos ya fueron afectados.

Con este método reducimos nuestros códigos y asignamos los estilos que queremos a  elementos específicos utilizando referencias.

ARCHIVOS EXTERNOS

Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al código más consistente y actualizable, pero nos requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro sitio web. La solución es mover todos los estilos a un archivo externo y luego utilizar el elemento <link> para insertar este archivo dentro de cada documento que los necesite. Este método nos permite cambiar los estilos por completo simplemente incluyendo un archivo diferente.

Ejemplo:

   <!DOCTYPE html>

    <html lang="es">

      <head>

      <title>Este texto es el título del documento</title>

      <link rel="stylesheet" href="misestilos.css">

    </head>

<body>

<p>Mi texto</p>

</body>

En los articulos que desarollamos anteriormente en la seccion de HTML esdutiadmos la etiqueta  <link> y cómo utilizarla para insertar archivos con estilos CSS en nuestros documentos. Utilizando la línea <link rel=”stylesheet” href=”misestilos.css”> le decimos al navegador que cargue el archivo misestilos.css porque contiene todos los estilos necesitados para presentar el documento en pantalla.

REFERENCIANDO CON PALABRA CLAVE

Continuando con el desarrollo se detallaran las maneras con que CSS puede hacer referencias a elementos HTML utilizando palabras reservadas.

La cual ademas, es la forma de desarrollar los archivos .css externos que se enlazan a nuestra plantilla HTML.

Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada elemento de la misma clase en el documento. Por ejemplo, la siguiente regla cambiará los estilos de todos los elementos <p>:

                 

                   p { font-size: 20px }

Utilizando la palabra clave p al frente de la regla le estamos diciendo al navegador que esta regla debe ser aplicada a cada elemento <p> encontrado en el documento HTML. 

Todos los textos envueltos en etiquetas <p> tendrán el tamaño de 20 pixeles.

Si especificamos la palabra clave span en lugar de p, por ejemplo, cada texto entre etiquetas <span> tendrá un tamaño de 20 pixeles:

                               

                                     span { font-size: 20px }

REFERENCIANDO CON EL ATRIBUTO ID

El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo no puede ser duplicado. Este nombre debe ser único en todo el documento.

Para referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarada con el símbolo # al frente del valor que usamos para identificar el elemento:

              #texto1 { font-size: 20px }

Para que la linea de estilo anterior funcione, tenemos que haber definido en nuestro archivo HTML la instrucción siguiente, id="texto1", dentro de la etiqueta que queramos afectar, con esto podemos asignarle estilos a todas las etiquetas <p> que tengamos en nuestro HTML.

Ejemplo de condigo html:

       <!DOCTYPE html>

        <html lang="es">

         <head>

          <title>Este texto es el título del documento</title>

          <link rel="stylesheet" href="misestilos.css">

         </head>

       <body>

        <p id=”texto1”>Mi texto</p>

       </body>

       </html>

REFERENCIANDO CON EL ATRIBUTO CLASS

La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar class. Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento que comparte un diseño similar.

Para asignarle algún estilo al atributo class se define anteponiendo un (.) seguido de el nombre que le hayaamos asignado en nuestro archivo HTML.

             .texto1 { font-size: 20px }

Para que la linea de estilo anterior funcione, tenemos que haber definido en nuestro archivo HTML la instrucción siguiente, class="texto1", dentro de la etiqueta que queramos afectar, con esto podemos asignarle estilos a todas las etiquetas <p> que tengamos en nuestro HTML.

        <!DOCTYPE html>

          <html lang="es">

           <head>

           <title>Este texto es el título del documento</title>

           <link rel="stylesheet" href="misestilos.css">

           </head>

          <body>

             <p class=”texto1”>Mi texto</p>

             <p class=”texto1”>Mi texto</p>

             <p>Mi texto</p>

          </body>

         </html>

Los elementos <p> en las primeras dos líneas dentro del cuerpo del código tienen el atributo class con el valor texto1. Como dijimos previamente, la misma regla puede ser aplicada a diferentes elementos en el mismo documento. Por lo tanto, estos dos primeros elementos comparten la misma regla y ambos serán afectados por el estilo que contiene nuestro archivo .css

Existen otras maneras de hacer referecias mucho mas exactas, pero a manera de introduccion se estudiaran solo las mas generales, en nuevo articulo se detallaran las demas.
Espero que estos articulos, les sean de utilidad y sean de mucho probecho, si les sirvio les invito a compartirlo.

Hasta pronto!!!