¿Qué es CSS y para qué sirve CSS?

¿Que es CSS?

CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML o de los documentos XML. CSS se creó para separar el contenido de la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas.
A partir del año 2005 se comenzó a definir el sucesor de esta versión, al cual se lo conoce como CSS3 o Cascading Style Sheets Level 3. Actualmente en definición, esta versión nos ofrece una gran variedad de opciones muy importantes para las necesidades del diseño web actual. Desde opciones de sombreado y redondeado, hasta funciones avanzadas de movimiento y transformación, CSS3 es el estándar que dominará la web por los siguientes años.

¿Para que sirve?

CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio web… ese es precisamente el poder de CSS, en otras palabras, el mismo sitio web puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen, ya con CSS3 se suman muchas nuevos efectos que harán de la que la parte visual de nuestra página sea mucho más agradable y llamativa, como sombras, transformaciones de figuras, creación sencilla de bordes y efectos 3D.

CSS Directas o En linea

Las CSS directas se usan para poder incluir CSS a una parte del texto concreta. Para ello debemos utilizar la etiqueta “style”. Observa el siguiente código de ejemplo:

<X style= “atributo1:valor1;atributo2:valor2;”>Aquí va el texto al que se le aplicará el estilo</X>

“X” sería la etiqueta html a la que se le ha aplicado el estilo, mediante el parámetro “style”. “X” puede ser un párrafo (<p>), una capa con salto de línea (<div>), una capa sin efecto (<span>), etc.

También apreciamos que el estilo está definido por unos atributos con un valor (“atributo1:valor1”), separados entre ellos por punto y coma.

El texto que veremos a continuaci&oacute;n <span style="font-size:23px;color:#0000FF">estar&aacute;

en azul y en un tama&ntilde;o m&aacute;s grande</span> gracias a la css directa

que hemos aplicado sobre &eacute;l.

Observa a continuación su efecto:

El texto que veremos a continuación estará
en azul y en un tamaño más grande gracias a la css directa
que hemos aplicado sobre él.

CSS INTERNO

Vamos a ver ahora cómo podemos definir esos estilos en la cabecera del documento HTML usando la siguiente sintaxis:

<head>
…
<style type="text/css">
elementoAfectadoPorElEstilo {
propiedad1ParaEseTipoDeElementos:valor;
propiedad2ParaEseTipoDeElementos:valor;
propiedad3ParaEseTipoDeElementos:valor;
…
propiedadnParaEseTipoDeElementos:valor;
}
</style>
</head

Las diferentes propiedades y valores se pueden poner en una misma línea o en distintas líneas según se prefiera (siempre separados mediante punto y coma).

Dentro de las etiquetas <head> … </head> incluiremos una etiqueta de apertura de declaración de estilos <style type=”text/css”>, a continuación colocaremos la definición de tantos estilos como deseemos y cerraremos la declaración con </style>. En HTML 5 no es necesario especificar type =”text/css” pero de momento seguimos recomendando que se use esta sintaxis.

En nuestro código de ejemplo el cambio de los elementos del menú para que tengan el texto color verde y el icono o símbolo de viñeta de color rojo se haría de esta forma:

<!DOCTYPE html>

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<style type="text/css">
ul {color:red;}
a {color:green; text-decoration: none;}
</style>
</head>

<body>

<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>

<br />

<div>

<div>
<div>Menú</div>
<hr/>
<ul>
<li><a href="#">Inicio</a></li>
<li> <a href="libros.html">Libros de programación</a> </li>
<li> <a href="cursos.html">Cursos de programación</a> </li>
<li> <a href="humor.html">Humor informático</a> </li>
</ul>
</div>


</html>

Puedes comprobar que hemos usado las mismas propiedades CSS y los mismos valores que usábamos en línea.

Visualiza la página en tu navegador. El resultado para el menú será el mismo que cuando aplicamos CSS en línea:

CSS EXTERNO

Aunque el CSS interno nos permite unificar en una declaración todos los estilos para un archivo html, seguimos teniendo el problema de tener que repetir la definición de estilos en la cabecera de cada uno de los archivos html de nuestro desarrollo web. Si el desarrollo tiene pocos archivos quizás sea menos problemático, pero cuando el desarrollo tiene cientos o miles de archivos sí se convierte en un verdadero problema, ya que cada vez que introdujéramos cambios habría que hacerlo en los cientos o miles de archivos de que constara el desarrollo.

Para solventar esta solución se ideó la declaración externa de CSS, basada en declarar los estilos CSS en un archivo independiente que puede servir como referente para dotar de estilos a decenas, cientos o miles de archivos html, que únicamente deberán invocar el nombre de archivo utilizando una sintaxis específica. De este modo un cambio en los estilos habrá que hacerlo únicamente en el archivo de estilos correspondiente, lo cual supone una gran ventaja. Incluso un cambio completo de los estilos de una página web se puede conseguir simplemente sustituyendo el archivo correspondiente.

Vamos a generar un archivo de estilos independiente. Para ello abre Notepad++ (o el editor de texto que estés usando) y crea un archivo con el siguiente contenido:

/* Comentario en CSS estilos aprenderaprogramar.com*/
ul {color:red;}
a {color:green; text-decoration: none;}

Seguimos usando las mismas propiedades CSS y los mismos valores que hemos usado en la forma CSS en línea y en la forma CSS interna.

Los contenidos que se encuentren entre los símbolos /* …. */ serán considerados comentarios y se pueden usar para introducir información del autor del archivo, versión, etc. así como para escribir aquellas aclaraciones sobre los estilos que se consideren necesarias. Un comentario puede comprender una o varias líneas según se desee.

Elige Guardar Como… y guarda el archivo con un nombre y extensión css, por ejemplo estilos.css. Asegúrate que la extensión del archivo sea css. No es válido si no tiene esta extensión.

En nuestro archivo HTML eliminaremos la definición de estilos interna y dejaremos sólo la invocación al archivo escrita con la siguiente sintaxis:

<head>

…

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

</head>

link es una etiqueta que se usa en HTML para establecer vínculos entre un documento HTML y otros recursos como una imagen de icono o una hoja de estilos CSS. En este caso se indica con la propiedad rel (relación o relationship) que el documento HTML debe usar los estilos definidos como texto/css en un archivo con el nombre indicado. Ten en cuenta que si como ruta de archivo indicas simplemente el nombre del archivo, éste debe encontrarse en la misma carpeta en que se encuentre el documento HTML. Si el archivo CSS se encuentra en otra carpeta deberás indicarlo escribiendo una URL completa u bien una URL relativa que determine la ruta.

Nosotros ubicaremos de momento el archivo CSS en la misma carpeta que el archivo HTML. En el archivo HTML tendremos lo siguiente:

Ahora procedemos a visualizar el archivo HTML en nuestro navegador. Si se está cargando la hoja de estilos correctamente deberemos obtener el mismo resultado que habíamos obtenido con la aplicación de estilos interna. Prueba a hacer distintos cambios en el archivo css y visualiza los resultados.

¿QUÉ TIPO DE CSS USAR?

En la siguiente tabla hacemos un resumen de las características de los distintos tipos de CSS que hemos visto hasta el momento:

DECLARACIÓN CSS	ARCHIVOS AFECTADOS	CSS SE APLICA A
En línea	Uno, aquel donde se realiza la declaración	Una línea de código.
Interna	Uno, aquel en cuya cabecera se realiza la declaración	Todos los elementos del archivo en los que resulte de aplicación el estilo
Externa	Todos los archivos que invoquen el archivo css	Todos los elementos de los archivos afectados en que resulte de aplicación el estilo

¿Cuál de estas formas de aplicar CSS es mejor? ¿Cuál usar?

En primer lugar cabe hacer una reflexión sobre qué forma de aplicar CSS hará nuestros desarrollos web más fácilmente mantenibles y aptos para ser modificados con poco esfuerzo. Parece claro que es la declaración externa la que mejor independiza los estilos del contenido y la que menor número de modificaciones implicará en general. Por ello es la forma de trabajar con CSS a la que debemos acostumbrarnos.

No obstante, cuando trabajes con desarrollos web comprobarás que también son de uso frecuente la aplicación de estilos en línea o interna. En algunos casos esto es debido a desconocimiento de la persona que realiza el desarrollo o a la forma de funcionamiento del programa con el que se ha creado la página web, pero en otros casos obedece a que se ha querido hacer así.

En ocasiones se opta por hacer modificaciones en línea porque se buscan efectos puntuales que sólo se quieren aplicar en un punto concreto y en ningún otro. En ocasiones se opta por hacer definiciones CSS internas porque se quiere afectar muy puntualmente a un archivo y a ningún otro. Y en otros casos, se usan los estilos en línea o internos simplemente “por las prisas” o “por ser lo más rápido”.

A efectos del navegador, una declaración en línea tiene precedencia sobre una declaración interna, y a su vez una declaración interna tiene precedencia sobre una declaración externa. Por tanto podríamos tener CSS sobreescrito varias veces: la declaración externa puede ser sobreescrita por la interna, y ésta a su vez por la en línea. El navegador aplicará el orden:

Declaración en línea > Declaración interna > Declaración externa

Podría ocurrir que los estilos que visualicemos en el navegador estén definidos “a trozos” de modo que parte de lo que se visualiza se debe a las declaraciones CSS externas, parte a las declaraciones CSS internas y parte a declaraciones en línea. Esto en general será indeseable, ya que hará difícil de mantener el desarrollo web, no se sabrá con certeza cómo se generan los estilos y el desarrollo puede terminar convirtiéndose en un caos difícil de mantener. También puede dar lugar a visualizaciones incorrectas o erróneas.

A modo de resumen y como recomendación: mantén los estilos de forma externa, lo más ordenadamente posible y sin utilizar redefiniciones internas ni en línea. Usa este tipo de definiciones (interna o en línea) exclusivamente cuando resulte necesario y comenta adecuadamente el código. Trabajar ordenadamente será algo que a la larga te resultará ventajoso, tanto a ti mismo como a otras personas que tengan que trabajar en desarrollos donde tú hayas participado.

Comentarios

CSS permite incluir comentarios entre sus reglas y estilos. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es común utilizarlos para estructurar de forma clara los archivos CSS complejos.

El comienzo de un comentario se indica mediante los caracteres /* y el final del comentario se indica mediante */, tal y como se muestra en el siguiente ejemplo:

/* Este es un comentario en CSS */

Los comentarios pueden ocupar tantas líneas como sea necesario, pero no se puede incluir un comentario dentro de otro comentario:

/* Este es un
   comentario CSS de varias
   lineas */

Aunque los navegadores ignoran los comentarios, su contenido se envía junto con el resto de estilos, por lo que no se debe incluir en ellos ninguna información sensible o confidencial.

Modelo de cajas

El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:

Figura 1. Las cajas se crean automáticamente al definir cada elemento HTML

Las cajas de las páginas no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde. La siguiente imagen muestra las cajas que forman la página web de http://www.alistapart.com/ después de forzar a que todas las cajas muestren su borde:

Figura 2. Cajas que forman la página alistapart.com

Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis partes, tal y como muestra la siguiente imagen:

Figura 3 Representación tridimensional del box model de CSS

(Esquema utilizado con permiso de http://www.hicksdesign.co.uk/boxmodel/)

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
Borde (border): línea que encierra completamente el contenido y su relleno.
Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.

El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando imagenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.

Tipos de elementos

El estándar HTML clasifica a todos sus elementos en dos grandes grupos: elementos en línea y elementos de bloque.

Los elementos de bloque ("block elements" en inglés) siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea. Por su parte, los elementos en línea ("inline elements" en inglés) no empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario para mostrar sus contenidos.

Debido a este comportamiento, el tipo de un elemento influye de forma decisiva en la caja que el navegador crea para mostrarlo. La siguiente imagen muestra las cajas que crea el navegador para representar los diferentes elementos que forman una página HTML:

Figura 5.1 Cajas creadas por los elementos de línea y los elementos de bloque

El primer elemento de la página anterior es un párrafo. Los párrafos son elementos de bloque y por ese motivo su caja empieza en una nueva línea y llega hasta el final de esa misma línea. Aunque los contenidos de texto del párrafo no son suficientes para ocupar toda la línea, el navegador reserva todo el espacio disponible en la primera línea.

El segundo elemento de la página es un enlace. Los enlaces son elementos en línea, por lo que su caja sólo ocupa el espacio necesario para mostrar sus contenidos. Si después de este elemento se incluye otro elemento en línea (por ejemplo otro enlace o una imagen) el navegador mostraría los dos elementos en la misma línea, ya que existe espacio suficiente.

Por último, el tercer elemento de la página es un párrafo que se comporta de la misma forma que el primer párrafo. En su interior, se encuentra un enlace que también se comporta de la misma forma que el enlace anterior. Así, el segundo párrafo ocupa toda una línea y el segundo enlace sólo ocupa el espacio necesario para mostrar sus contenidos.

Por sus características, los elementos de bloque no pueden insertarse dentro de elementos en línea y tan sólo pueden aparecer dentro de otros elementos de bloque. En cambio, un elemento en línea puede aparecer tanto dentro de un elemento de bloque como dentro de otro elemento en línea.

Los elementos en línea definidos por HTML son: a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Los elementos de bloque definidos por HTML son: address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.

Los siguientes elementos también se considera que son de bloque: dd, dt, frameset, li, tbody, td, tfoot, th, thead, tr.

Los siguientes elementos pueden ser en línea y de bloque según las circunstancias: button, del, iframe, ins, map, object, script.

Propiedades abreviadas en CSS3

Propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.

La especificación de CSS define las propiedades abreviadas para agrupar la definición de propiedades en común para el mismo tema. Ejemplo: La propiedad background de CSS es una propiedad abereviada que puede definir el valor de background-color, background-image, background-repeat, y background-position. Similarmente, las propiedades más comúnes relacionadas con las fuentes se pueden definir usando la abreviación font, y los diferentes márgenes alrededor de una caja pueden ser definidos usando la abreviación margin.

Casos especiales delicados

Incluso si son convenientes de utilizar, hay algunos casos especiales que mantener en mente al utilizarlos:

Un valor que no es especificado se le asigna su valor inicial. Suena a algo anecdótico, pero significa que se sobreescribirán valores previamente definidos. Por lo tanto:
```
background-color: red;
background: url(images/bg.gif) no-repeat top right;
```
no pondrá el color en rojo si no al valor por defecto de background-color , transparent, puesto que la segunda regla tiene precedencia.
Solo los valores de las propiedades individuales pueden heredar. Dado que valores omitidos son reemplazados por su valor inicial, es imposible permitir la herencia de propiedades individuales omitiéndolas. La palabra clave inherit puede ser aplicada a una propiedad, pero solo como un todo, no como una palabra clave para un valor u otro. Eso significa que la única manera de hacer que un valor específico sea heredado es usar la propiedad a mano con la palabra clave inherit.

Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:

Shorthands handling properties related to edges of a box, like border-style, margin or padding, always use a consistent 1-to-4-value syntax representing those edges:

	The 1-value syntax: `border-width: 1em` — The unique value represents all edges
	The 2-value syntax: `border-width: 1em 2em` — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
	The 3-value syntax: `border-width: 1em 2em 3em` — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
	The 4-value syntax: `border-width: 1em 2em 3em 4em` — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL)

Similarly, shorthands handling properties related to corners of a box, like border-radius, always use a consistent 1-to-4-value syntax representing those corners:

	The 1-value syntax: `border-radius: 1em` — The unique value represents all corners
	The 2-value syntax: `border-radius: 1em 2em` — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
	The 3-value syntax: `border-radius: 1em 2em 3em` — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner
	The 4-value syntax: `border-radius: 1em 2em 3em 4em` — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.

Propiedades Background

Un fondo con las siguientes propiedades...

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

... puede acortarse con una sola declaración:

background: #000 url(images/bg.gif) no-repeat top right;

(La forma abreviada es realmente equivalente a las propiedades a mano anteriores más background-attachment: scroll y, en CSS3, a algunas propiedades adicionales.)

Herencia, cascada y especificidad en CSS

La cascada, especificidad y herencia en Css son tres conceptos básicos. Mira si será importante, que hasta en el nombre lo lleva: CSS = "Cascading style sheet" = "Hoja de estilos en Cascada". Su comprensión evitará muchos quebraderos de cabeza y ahorro de tiempo.

A continuación una breve explicación de estos conceptos claves, tomando como base la Especificación del consorcio W3c y su Wiki.

Es conveniente que conozcas la terminología utilizada en Css. Para una mejor comprensión de este artículo (qué son las reglas, las declaraciones, porpiedades y valores) te recomiendo leas antes el artículo sobre Terminología y Glosario Css

Qué es la Cascada en Css

La cascada en Css es el mecanismo que controla el resultado final cuando, por existir declaraciones múltiples, surgen conflictivos sobre qué estilos se aplican a un elemento. Dicho de otra manera: si hay dos o más declaraciones que afectan a un elemento, la cascada determina cuál de ellas tiene preferencia, mayor peso, y se aplicará.

La forma de calcular esta preferencia no se realiza de forma arbitraria, sino que tiene su proceso y reglas en base a los tres conceptos principales que controlan la prioridad en que las declaraciones CSS se deben aplican:

La importancia de la regla.
El origen o procedencia.
El orden de aparición en el código.

Cuando el navegador recibe una página actúa de la siguiente manera para calcular qué aplicar:

Selecciona los estilos a aplicar por el tipo de medio.
Aplica los que corresponde por su importancia y origen.
Si las declaraciones tienen la misma importancia y origen, prima la especificidad del selector.
Si se mantiene el empate por importancia, origen y especificidad manda el orden de aparición en el Css. La última declarada gana.

Tipo de Medios en Css

CSS permite definir diferentes estilos según cuál sea el dispositivo en que se va a mostrar la información: pantallas, impresoras, móviles, proyectores, etc.
Este valor se declara en el método que se emplee para incluir los estilos, ya sea mediante enlace <link rel="stylesheet" media="screen" .../> o cualquier otro, por ejemplo: @import 'estilos.css';.
También están incluidas en el tipo de medio las declaraciones llamadas mediante las propiedades @media Queries.

Importancia y origen de las reglas Css

Este punto ha sido modificado y ampliado por los últimos documentos del W3c. Tienes las novedades en este artículo.

El peso de una declaración CSS depende de dónde venga y su grado de importancia. En caso de haber declaraciones contradictorias se aplicarán en el siguiente orden, de menor a mayor peso (los posteriores anula las precedentes, esto es, la 5ª prevalece sobre la 1ª):

Declaraciones del agente de usuario (navegador).
Declaraciones normales en los estilos del usuario.
Declaraciones normales en los estilos del autor.
Declaraciones con !important del autor.
Declaraciones con !important del usuario

Especificidad del selector

La especificidad es un método de resolución de conflictos dentro de la cascada.

La especificidad se calcula de una manera muy particular, basado en los valores de 4 categorías distintas. Con fines explicativos la especificación CSS2 representa estas categorías con las letras a, b, c, y d. Cada una tiene un valor de 0 por defecto.

a es igual a 1 si la declaración proviene de un atributo de estilo en el código HTML ("los estilos en línea") en lugar de una regla CSS con un selector.
b es igual al número de id´s que haya en su selector.
c es igual al número de otros atributos y pseudo-clases en el selector.
d es igual al número de elementos y pseudo-elementos en el selector.

¿Difícil de entender? Mejor con un ejemplo práctico de un selector cualquiera:

html > head+body ul#nav *.miclase a:link {
/*tus declaraciones */
}

Veamos el último ejemplo en detalle: Tenemos a = 0, ya que es un selector, no una declaración estilo en línea. Hay un selector id (# nav), por lo que b = 1. Hay un selector de atributo (.miclase) Y una pseudo-clase (:link), por lo que c = 2. Hay cinco tipos de elementos (html, head, body, ul, a), por lo que d = 5. La especificidad final es: 0,1,2,5.

Nota que los combinadores (como >, + y el espacio en blanco) no afectan a la especificidad del selector. El selector universal (*) no tiene ninguna entrada en la especificidad, como tampoco la cadena !important. Así que la prevalencia de las declaraciones que incluyen la palabra calve !important no es por especificidad sino por importancia.

Hay una gran diferencia en la especificidad entre un selector de id y un selector de atributo que contenga como valor del atributo un id. La especificidad de #nav es 0,1,0,0, mientras que la especificidad de [id="nav"] es sólo 0,0,1,0.

El valor tan alto en la especificidad de los identificadores únicos (#id) es una de las razones invocadas por algunos "modernos del css" para entonar la cancioncilla de "id´s malos, no los uses".

Orden de aparición

Por orden de aparición de la declaración se entiende el lugar físico del documento css donde aparece escrita. Y en caso de haber varios archivos css, el lugar que ocupa la llamada al archivo Css en el Html que la contiene respecto a los demás archivos .
Así, si tenemos 4 archivos css (no importa el método de inclusión) en caso de conflicto prevalece el último, y dentro de éste tiene más peso una declaración en la línea 100ª que en la 1ª.

Así que lo último que se lee es lo que manda.

Qué es la herencia en Css

La herencia es distinta de la cascada ya que involucra al árbol (DOM) del documento.
La herencia en CSS es el mecanismo mediante el cual ciertas propiedades se transmiten de un elemento padre a sus hijos. Y sí, es bastante similar a la herencia de la genética.

Nota que he resaltado lo de "ciertas propiedades". Esto es porque no todas las propiedades se heredan. Así por ejemplo color, font sí, pero otras no, como tamaños, float, margin.

Para saber si una propiedad en concreto es heredada o no lo mejor es consultar la especificación. En todas ellas es un dato que se menciona explícitamente.

Agenda: Glosario de términos Css del artículo:

Estilos del agente de usuario: Cada navegador tiene unos estilos para aplicar en caso de que el documento carezca de ellos. Puedes ver cuáles son desactivándolos en cualquier página. "Web developer" o complementos similares te lo permite hacer de una forma sencilla.
Estilos del usuario: Por usuario entiende el visitante de la página. Los navegadores permiten en su configuración que la persona que lo utiliza incluya estilos propios (del usuario).
Estilos del autor: Los estilos del autor son los propios de cada documento. Son los que acompañan a cada documento para ser visto como el diseñador del mismo ha decidido.
!important: La cadena !important se puede añadir al valor de una propiedad para declarar su prevalencia con independencia de su orden, especificidad o procedencia.

¿Qué es minificar recursos?

Esta regla se activa cuando PageSpeed Insights detecta que podría reducirse el tamaño de uno de tus recursos mediante la minificación.

Descripción

Se entiende por "minificación" el proceso mediante el cual se eliminan datos innecesarios o redundantes de un recurso sin que se vea afectada la forma en que los navegadores lo procesan. Por ejemplo, eliminar comentarios y formato innecesario, retirar código que no se usa, emplear variables y nombres de funciones más cortos, etc.

Para obtener más información, consulta la sección Minificación: procesamiento previo y optimizaciones específicas para el contexto.

Recomendaciones

Es aconsejable minificar tus recursos de HTML, CSS y JavaScript. Para hacerlo, dispones de las siguientes herramientas:

Para minificar HTML, prueba HTMLMinifier.
Para minimizar CSS, prueba CSSNano y csso.
Para minificar JavaScript, prueba UglifyJS, aunque la herramienta Closure Compiler también es muy efectiva. Puedes diseñar un proceso de programación en el que se usen estas herramientas para minificar los archivos de desarrollo, cambiarles el nombre y guardarlos en un directorio de producción.

Minificar CSS

Normalmente, al codificar en CSS se lucha con dos factores clave:

Legibilidad: Correcta indentación que facilite la legibilidad de las propiedades y valores por separado, favoreciendo la velocidad de modificación e introducción de cambios.
Tamaño: Cuanto más texto tenga un archivo CSS (espacios incluídos), más grande será el tamaño final del archivo, por lo que más tiempo tardará en descargarse.

Minificación

En archivos CSS muy grandes esto suele influir de forma considerable, por lo que lo ideal es utilizar los llamados Minify (Minificadores) para reducir el tamaño del archivo CSS condensando toda la información, eliminando espacios, retornos de carro, etc... (y por consiguiente, haciéndolo menos legible). Esto es un paso totalmente opcional, que se realiza sólo para reducir el tamaño de los archivos CSS, por lo que no es algo que sea totalmente imprescindible, pero se considera una buena práctica.

Existen incluso algunas herramientas que se encargan de analizar el código y suprimir propiedades repetidas o inútiles. Veamos un ejemplo de un mismo archivo CSS con su contenido sin minificar y minificado:

Ejemplo de código CSS legible (index.css): 114 bytes

#main {
  background-color: black;
  color: white;
  padding: 16px;
  margin:4px;
  border:2px solid blue;
}

Ejemplo de código CSS minificado (index.min.css): 86 bytes

#main{background-color:#000;color:#fff;padding:16px;margin:4px;border:2px solid #00f}

Como se puede ver, el tamaño y la legibilidad del archivo CSS se reduce considerablemente, así que lo que se suele hacer es mantener un archivo legible (el primero) para realizar modificaciones y trabajar con él, y luego, de forma opcional, un archivo con la información condensada (el segundo) que será el que se utilice finalmente en nuestro proyecto cuando esté terminado.

Herramientas de minificación

Existen múltiples herramientas para minificar código CSS. Veamos algunas de las más populares:

Herramienta	Modalidad	Características
CSS Minifer	Online, API	Sencillo y simple.
CSS Compressor	Online	Opciones variadas: grado de compresión, optimizaciones...
CSS Tidy	PHP/C++	Parser open source, personalizable.
Clean CSS	NodeJS/NPM	Para automatizar desde terminal.
CSS Optimizer	NodeJS/NPM	Optimizador de CSS (clean, compress and restructuring)
YUI Compressor	Java	Compresor CSS de Yahoo
Sqwish	NodeJS/NPM	Compresor de CSS basado en Node
Atom-minify	Atom Editor	Plugin de minificación para Atom

Qué es Flexbox y cómo se utiliza.

Flexbox viene de “Flexible Box Layout“, que se puede traducir como “Diseño de caja flexible“, y nos aporta una magnífica solución para todos nuestros desarrollos “responsive”. Lo que nos permite es crear un conjunto de elementos flexibles que se adaptan automáticamente a su contenedor y con el que podemos controlar parámetros tales como la alineación, dirección (horizontal/vertical), ajuste de la fila según tamaños y multitud de posibilidades que vamos a presentar en este artículo.

En cuanto a compatibilidad, Flexbox es actualmente compatible con los navegadores web más importantes y diferentes versiones de los mismos, si bien en algunos debemos utilizar prefijos css para su buen funcionamiento (ver en caniuse.com). Si tenéis problemas con algunas versiones antiguas, podéis probar a utilizar “Autoprefixer“. En los siguientes ejemplos utilizaremos el código css tal cual, sin añadidos, así que espero que vuestro navegador esté actualizado.

La última definición conocida sobre Flexbox del W3C es del 26 de Mayo de 2016 en el momento de escribir este artículo. En el enlace podemos ver su definición y diferentes ejemplos de uso. Como se indica en la introducción, hasta ahora conocíamos cuatro modos de disponer los elementos, tres de presentación (con variaciones alternativas) y otro de posición:

– Elementos en línea (display:inline)
– Elementos en bloque (display:block)
– Elementos en tabla (display:table)
– Tipos de posición (position:absolute/relative/fixed)

Flexbox es una mezcla de todos ellos en cuanto a cómo afecta a la disposición de una estructura de elementos contenidos en una capa padre o contenedor, y se define como “flex” en la propiedad “display” (display:flex). Podemos crear una estructura de elementos en línea similar a una tabla, o hacer que funcionen como un bloque y en orden inverso en la siguiente resolución, todo ello a la vez que se adapta automáticamente al tamaño que necesitamos, tanto en anchura como en altura. Sí, ¡¡también en altura!!

El W3C define a esta estructura como un “flujo flexible” de elementos en dirección (arriba/abajo/izquierda/derecha) y tamaño (anchura/altura) según los ejes principal (horizontal) y transversal (vertical).

Ejemplos de maquetación utilizando Flexbox.

IMPORTANTE: Si no visualizas correctamente los siguientes ejemplos, lo más probable es que tu navegador no sea compatible con esta propiedad CSS. Por favor, prueba a actualizarlo o visualizarlo en otro navegador antes de increpar al autor.

Para poder probar todas las posibilidades que ofrece Flexbox CSS, vamos a crear una capa class=”contenedor” que hará de padre y siete capas class=”elemento”numeradas. ¿Y por qué siete? Para los ejemplos nos viene bien que sea un número impar para ver tanto la ordenación como la adaptación y su resultado, y siete también para ver un listado de elementos no muy corto, aunque podéis probar a colocar cualquier número de elementos.

HTML:

<div class=”contenedor”>

    <div class="elemento">1</div>

    <div class="elemento">2</div>

    <div class="elemento">3</div>

    <div class="elemento">4</div>

    <div class="elemento">5</div>

    <div class="elemento">6</div>

    <div class="elemento">7</div>

</div>

Más allá de los estilos de diseño definidos para la visualización de los ejemplos, vamos a colocar de inicio un tamaño de anchura del 25% para los elementos en relación al contenedor padre. Para comenzar a utilizar Flexbox añadimos al contenedor la propiedad “display:flex”

CSS EJEMPLO 1:

.contenedor{

    display:flex;

}

.elemento{

    width:25%;

}

EJEMPLO 1:

Como vemos, al no haber definido aún el comportamiento de dirección y tamaño que tendrán los elementos de nuestro contenedor, aunque hayamos definido una anchura de elementos del 25% éstos se adaptan a su padre ocupando el 100% de anchura entre la suma de todos. Por defecto, tiene ese comportamiento “flexible” como indica su nombre. Pero Flexbox es mucho más.

flex-direction:

Vamos a ver la propiedad “flex-direction“, que puede tomar 4 valores y se aplica al padre (contenedor):

– flex-direction:row; -> Los elementos se visualizan de izquierda a derecha (valor por defecto, similar al ejemplo 1)
– flex-direction:row-reverse; -> Los elementos se visualizan de derecha a izquierda.
– flex-direction:column; -> Los elementos se visualizan de arriba hacia abajo.
– flex-direction:column-reverse; -> Los elementos se visualizan de abajo hacia arriba.

CSS EJEMPLO 2:

.contenedor{

    display:flex;

    flex-direction:row-reverse;

}

EJEMPLO 2:

Los elementos invierten su orden de visualización de derecha a izquierda, sin tener en cuenta el orden de la maquetación.

CSS EJEMPLO 3:

.contenedor{

    display:flex;

    flex-direction:column;

}

EJEMPLO 3:

Los elementos se visualizan formando una columna de arriba hacia abajo. En este caso, como los elementos miden el 25% del contenedor, su anchura sí que toma el valor indicado. Si eliminamos la anchura, las capas se ajustarán al tamaño del contenedor, ocupando el 100% de anchura.

Páginas

CSS