CSS

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los agentes de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.
Por ejemplo, el elemento de HTML indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como . Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta debía disponer de la información si se deseaba un diseño consistente para una página, y además, una persona que lea esa página con un navegador pierde totalmente el control sobre la visualización del texto.
Cuando se utiliza CSS, la etiqueta no debería proporcionar información sobre cómo va a ser visualizado, solamente marca la estructura del documento. La información de estilo separada en una hoja de estilo, específica cómo se ha de mostrar : color, fuente, alineación del texto, tamaño, y otras características no visuales como definir el volumen de un sintetizador de voz, por ejemplo.
La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este último podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo «style».

Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:

• Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.
• Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que será aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.
• Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil, o ser «leída» por un sintetizador de voz.
• El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño.

Hay varias versiones: CSS1 y CSS2, con CSS3 en desarrollo por el World Wide Web Consortium (W3C). Los navegadores modernos implementan CSS1 bastante bien, aunque existen pequeñas diferencias de implementación según marcas y versiones de los navegadores. CSS2, sin embargo, está solo parcialmente implementado en los más recientes.

@font-face en CSS

CSS

 La única solución técnicamente correcta desde el punto de vista de CSS es el uso de la directiva @font-face. Esta directiva se definió en el estándar CSS 2, pero desapareció en el estándar CSS 2.1. La versión de CSS 3 incluye la directiva @font-face en el módulo llamado Web Fonts (http://www.w3.org/TR/ css3-webfonts/) .

Problemas con los FLOAT en CSS

CSS

La principal característica de los elementos posicionados de forma flotante mediante la propiedad float es que desaparecen del flujo normal del documento. De esta forma, es posible que algunos o todos los elementos flotantes se salgan de su elemento contenedor.

Igualar altura en CSS

CSS

Hasta hace unos años, la estructura de las páginas web complejas se creaba mediante tablas HTML. Aunque esta solución presenta muchos inconvenientes, su principal ventaja es que todas las columnas que forman la página son de la misma altura.

Transparencias con estilos CSS

CSS

El estándar de CSS 2.1 no incluye ninguna propiedad para controlar la opacidad de los elementos de la página. Sin embargo, la versión CSS 3 incluye una propiedad llamada opacity, definida en el módulo de colores de CSS 3 (http://www.w3.org/TR/css3-color/) y que permite incluir transparencias en el diseño de la página. Los navegadores que más …

Transparencias con estilos CSS Leer más »

Sombras con css

CSS

Dependiendo de la version de CSS que qieramos utilizar podemos lograr sombras espectaculares de distintas formas. La versión CSS 3 incluye una propiedad llamada box-shadow para crear este tipo de sombras. con lo cual es extremadamente sencillo. Una de las carencias del estándar CSS2.1  más demandadas por los diseñadores es la posibilidad de mostrar sombras …

Sombras con css Leer más »

hasLayout en css para Internet Explorer

CSS

El navegador Internet Explorer 7 y sus versiones anteriores incluyen decenas de errores relacionados con CSS. La mayoría de esos errores se pueden solucionar con trucos y técnicas que aprovechan otros errores o características del navegador. Además, muchos errores  se solucionan gracias a la propiedad hasLayout de Internet Explorer.

Shorthand en css

CSS

Algunas propiedades  del estándar CSS son especiales, ya que permiten establecer simultáneamente el valor de varias propiedades diferentes. Este tipo de propiedades se denominan «propiedades shorthand» y todos los diseñadores web profesionales las utilizan.

Como mostrar un input radio como botón conmutable en Bootstrap con CSS

CSS, HTML

Vamos a mostrar como convertir un input radio de un formulario como botón en Bootstrap con CSS   Si tienes un formulario con Bootstrap tipo: <label for=»opt-0″><input type=»radio» name=»opt» id=»opt-0″ checked>Option 0</label> <label for=»opt-1″><input type=»radio» name=»opt» id=»opt-1″>Option 1</label> <label for=»opt-2″><input type=»radio» name=»opt» id=»opt-2″>Option 2</label>   Y en lugar de mostrar los option inputs te gustaría …

Como mostrar un input radio como botón conmutable en Bootstrap con CSS Leer más »