Manual de CSS, hojas de estilo

Qué es CSS

Comenzamos presentando las Hojas de Estilo en Cascada y explicando de qué manera ayudan a los diseñadores de páginas web.

1.- Introducción a las CSS
Una breve introducción a CSS, para las personas que no saben nada sobre la tecnología el por qué de su creación y cómo ayuda a hacer páginas web mejores. Entrar

2.- Características y ventajas de las CSS
Conoce las principales características del lenguaje, su potencia y sus posibilidades. Entrar

Distintas maneras de incluir estilos

Existen distintas formas de definir estilos en una página, a diversos niveles que van desde las más específicas, que permitirían definir estilos en un pequeño texto de una página, hasta las más generales, para definir estilos para toda una página o incluso un sitio web.

3.- Usos de las CSS I
Describimos las distintas aplicaciones de las Hojas de Estilo en cascada. En este capítulo veremos las más sencillas. Entrar

4.- Usos de las CSS y II
Te describimos los usos más avanzados de las hojas de estilo en cascada. Para poder utilizarlas de la manera más potente. Entrar

5.- Otra manera de definir estilos en un archivo externo
También podemos incluir estilos en un archivo externo con un código con la sintaxis @import url("estilo.css"). Se utiliza para definir estilos comunes cuando hay también definición de estilos específicos. Entrar

lenguaje CSS

Distintos apartados que tienen que ver directamente con el lenguaje utilizado para definir los estilos en páginas web, el CSS. Veremos su sintaxis, los diferentes atributos o reglas de estilo que podemos aplicar a los elementos y cómo seleccionar conjuntos de elementos de la página para aplicarles estilo agrupados o por separado.

6.- Sintaxis y unidades CSS
En este capítulo explicamos la sintaxis CSS, de hojas de estilo en cascada, con especial atención a las unidades CSS. Entrar

7.- Notación de colores CSS
Varias maneras, sintaxis o notaciones para definir colores con CSS de los elementos de la página. Entrar

8.- Atributos de las hojas de estilo
Explicación y ejemplos de los distintos atributos de las CSS. Podrás encontrar la lista en una tabla para imprimirtela y trabajar fácilmente. Entrar

9.- Definición de estilos CSS Shorthand
Disminuye el peso de tus hojas de estilo utilizando la forma shorthand de especificación CSS, que no es más que una manera reducida de escribir las propiedades de estilos. Entrar

10.- Pseudo-element en CSS (pseudo elementos)
Vamos a conocer los pseudo elementos en CSS, hojas de estilo en cascada, que sirven, entre otras cosas, para definir estilos para la primera línea o letra de un texto. Entrar

11.- Trucos avanzados con CSS
Vamos a ver una serie de técnicas con hojas de estilo, imprescindibles para utilizar esta tecnología con toda su potencia. Entrar

Modelo de caja

En CSS se crea un nuevo modelo de caja que nos sirve para agrupar elementos en contenedores, a los que luego podremos aplicar estilos con CSS. Se trata de las capas, o cajas, que cobrarán una gran importancia a la hora de realizar tus diseños.

12.- Qué son las capas
Vemos las diferencias entre varias etiquetas para aplicar estilos y crear capas y una pequeña introducción a las capas. Entrar

13.- Atributos para capas
Veamos el posicionamiento de capas y otros atributos que podemos utilizar al definirlas. Entrar

14.- Problema con el posicionamiento absoluto de capas
A veces el posicionamiento absoluto de capas es demasiado rígido, pues si la definición de pantalla cambia de un usuario a otro las capas pueden quedar colocadas en lugares donde no deseamos. He aquí una solución. Entrar

15.- El Modelo de Caja en CSS
Un aspecto especialmente relevante de CSS es el Modelo de Caja. Este artículo brinda una primera aproximación a su arquitectura y a las distintas posibilidades que ofrece. Entrar

16.- Problemas del Modelo de Caja en Internet Explorer 5
Si no se toman ciertos recaudos nuestros diseños se verán distinto en distintos navegadores y aún peor: en distintas versiones del mismo navegador. Este artículo analiza esos comportamientos anómalos y brinda algunos trucos para que nuestros diseños Entrar

17.- Por qué diseñar con CSS
Mostramos algunas ventajas al maquetar con CSS respecto a otras formas de hacerlo. Entrar

Posicionamiento CSS y maquetación

A partir de la implantación de CSS el estándar se volvió la herramienta indicada para la maquetación de las páginas web. En los próximos artículos hablaremos sobre el posicionamiento de elementos en la página y sobre la maquetación de los contenidos atendiendo a cualquier distribución que el diseñador necesite.

18.- Maquetación CSS
Una introducción sobre cómo maquetar una página utilizando capas, que ilustra el funcionamiento y la potencia de las CSS con ejemplos. Entrar

19.- Formas de aplicar estilos en maquetación CSS
Repaso a los métodos por los que se pueden aplicar estilos a las páginas web mediante CSS. Entrar

20.- Flujo HTML y atributos CSS
El flujo HTML es el modo en el que se van colocando los componentes de la página, a partir de cómo aparecen en el código HTML y los atributos CSS de los elementos. Entrar

21.- Posicionamiento CSS
Las hojas de estilo en cascada incorporan múltiples formas para posicionar elementos en la página, lo que comúnmente se conoce como posicionamiento CSS. Entrar

22.- Tipos de posicionamiento con el atributo position de CSS
Explicamos los distintos valores que puede tener el atributo position de CSS, con detalle. Entrar

23.- EL atributo Overflow de CSS
Explicamos esta propiedad interesante contemplada en la especificación CSS 2. Entrar

Trucos y consejos avanzados sobre CSS

Algunos trucos y consejos fundamentales que debemos conocer si deseamos realizar un uso de CSS medianamente avanzado.

24.- Trucos CSS para no enloquecer
Algunas soluciones a los problemas tipicos que te puedes encontrar con CSS. Entrar

25.- Utilizar porcentajes para tamaños de texto con CSS
El tamaño del texto se puede cambiar por medio de CSS, para agrandarlo o disminuirlo, por medio de porcentajes, de modo que el nuevo tamaño sea relativo al tamaño actual. Entrar

26.- CSS semánticas. Un nuevo enfoque
Existen infinidad de sitios en Internet que ofrecen miles de propuestas diferentes a la hora del uso de hojas de estilo CSS en la maquetación de portales web, como sabemos aplicables a múltiples tecnologías: XHTML, Flash, etc… Entrar

27.- CSS semánticas. Un nuevo enfoque (II)
Este artículo es la continuación de CSS semánticas. Un nuevo enfoque, y trata de dar una serie de consejos o recomendaciones a la hora del uso de hojas de estilo y escritura de código XHTML. Entrar

28.- 10 errores comunes en los css
Esta es una recopilación de errores comunes en las hojas de estilo. Es bastante provechoso hacer una lista con estos y otros errores comunes. Entrar

29.- Reglas de estilo CSS de usuario y de autor
Veamos qué son las reglas de estilo de usuario, configuradas opcionalmente por cada usuario en su navegador, y las reglas de estilo de autor, que define el desarrollador de cada web. Entrar

30.- Declaración !important en CSS
En CSS podemos declarar reglas de estilos como !important para que tomen precedencia sobre otras reglas de estilos que se puedan encontrar en una página web. Entrar

31.- Regla @media de CSS
Explicamos la regla @media permite definir estilos CSS específicos para distintos medios en los que se pueda mostrar una página web. Entrar

32.- Depurar CSS
Una lista de los errores más comunes en el código CSS y cómo averiguar cuál de esos errores se está produciendo en tu código, para depurar tus CSS. Entrar

Por dónde continuar

Ahora que ya sabes bastante sobre CSS, quizás quieras abrir nuevos horizontes y para ello te damos algunas referencias para continuar aprendiendo.

33.- Listado de distintos frameworks CSS
Un listado de los frameworks CSS que hay en el mercado para ayudar en la maquetación de páginas web con CSS. Entrar

34.- Frameworks CSS: Ventajas e inconvenientes
Ventajas e inconvenientes del uso de Frameworks CSS, Discutimos acerca de la conveniencia o no de usar frameworks CSS. Entrar

35.- Introducción a CSS 3
CSS 3 trae grandes novedades para el diseño de webs y algunos navegadores comienzan a implementar CSS 3. Entrar