> Manuales > Tutorial de CSS básico

Tutorial completo, teórico y práctico sobre hojas de estilo en cascada (CSS, acrónimo de Cascading Style Sheets). Aprende a utilizar este lenguaje que te ayudará a crear páginas más atractivas y precisas, mantenibles y optimizadas.

En este tutorial cubrimos los aspectos más básicos del lenguaje, el por qué de su existencia, usos, sintaxis, atributos para crear estilos en los diversos elementos de la página, etc.

Finalizamos con una serie de artículos más avanzados para ir un poco más allá y saber por dónde podemos continuar en el aprendizaje del lenguaje y cómo podemos usarlo para crear sitios web más atractivos y optimizados.

Artículos
  • Artículos del manual

  • 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.

  • 2 CSS: Separar contenido y presentación

    Para entender bien CSS debemos hablar de la separación entre contenido y presentación, el objetivo principal de la existencia del lenguaje.

  • 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.

  • 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.

  • 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.

  • 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.

  • 7 Notación de colores CSS

    Varias maneras, sintaxis o notaciones para definir colores con CSS de los elementos de la página.

  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

  • 13 Atributos para capas

    Veamos el posicionamiento de capas y otros atributos que podemos utilizar al definirlas.

  • 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.

  • 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.

  • 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...

  • 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.

  • 17 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.

  • 18 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.

  • 19 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.

  • 20 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.

  • 21 Tipos de posicionamiento con el atributo position de CSS

    Explicamos los distintos valores que puede tener el atributo position de CSS, con detalle.

  • 22 El atributo Overflow de CSS

    Explicamos esta propiedad interesante contemplada en la especificación CSS 2.

  • Trucos y consejos avanzados sobre CSS

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

  • 23 Trucos CSS para no enloquecer

    Algunas soluciones a los problemas tipicos que te puedes encontrar con CSS.

  • 24 Lo que nadie te contó de la propiedad z-index

    Analizamos la propiedad CSS z-index para intentar descifrar su correcto uso más allá del habitual conocimiento que tenemos de ella, normalmente consistente en saber que las capas con mayor valor de z-index se colocan delante de las de valor...

  • 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.

  • 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…

  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

  • 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.

  • 35 Modelo de tabla CSS con la propiedad display

    Posibilidades del modelo de tabla en CSS con display table, table-row, table-cell y muchas otras. Explicaciones y ejemplos.

  • 36 Arquitectura CSS: problemas

    Proponemos contemplar CSS como si fuera un lenguaje de programación, analizando algunas de las inofensivas costumbres, que resultan no serlo tanto.

  • 37 Arquitectura CSS: Soluciones

    Después de ver en el artículo “Arquitectura CSS – Problemas” los problemas de código y las consecuencias que podemos tener por tenerlos, es hora de darte algunos consejos para mejorar.