El Manual de CSS te ofrece una formación básica sobre las Hojas de Estilo en Cascada (CSS, Cascading Style Sheets). Este tutorial te explica los fundamentos de CSS de una manera teórica y práctica, de modo que aprenderás a aplicar estilo sobre las páginas web. Además explicamos cómo utilizar este lenguaje de una manera correcta, lo que te te ayudará a crear páginas más atractivas y precisas, pero sobre todo sitios mantenibles y optimizados.
En el tutorial de CSS básico cubrimos los aspectos más esenciales y característicos del lenguaje de aplicación de estilos en páginas web: el por qué de su existencia, usos, sintaxis, atributos para crear estilos en los diversos elementos de la página, unidades, etc. Aprenderás a trabajar con CSS de diversas maneras, a usar los atributos para las necesidades más comunes, así como las distintas unidades disponibles en CSS.
Finalizamos el Manual de CSS 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 correctos, aplicando las buenas prácticas en CSS necesarias para conseguirlo.
Este manual, no obstante, cubre los aspectos de iniciación a CSS. Existen otros manuales en DesarrolloWeb.com que te explicarán temas más avanzados, para los que es importante dominar CSS con los conocimientos del presente texto.
En Tutorial de CSS básico encuentras:
Artículos del manual
-
Qué es CSS
Comenzamos presentando las Hojas de Estilo en Cascada, explicando de qué manera ayudan a los diseñadores de páginas web, por qué son tan importantes y qué necesidades viene a resolver CSS.
-
1
Introducción a CSS
Comenzamos con una 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
Distintas formas de incluir estilos CSS en una página web
Describimos los distintos usos de las Hojas de Estilo en Cascada y cómo estas formas de definir estilos CSS tienen más o menos relevancia o peso a la hora de aplicarse al documento HTML.
-
4
@import en CSS, importar archivos externos
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.
-
5
Sintaxis CSS: Atributos, unidades y valores CSS
En este capítulo explicamos la sintaxis CSS, de hojas de estilo en cascada, con especial atención a las unidades CSS y a los distintos tipos de valores que podemos indicar en los atributos de estilo.
-
6
Selectores de CSS
En este artículo explicaremos uno de los componentes principales de la sintaxis de CSS, los selectores, que nos sirve para seleccionar elementos a los que queremos aplicar estilos.
-
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
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.
-
13
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.
-
14
Atributos para capas
Veamos el posicionamiento de capas y otros atributos que podemos utilizar al definirlas.
-
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.
-
15
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.
-
16
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.
-
17
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.
-
18
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.
-
19
El atributo Overflow de CSS
Explicamos esta propiedad interesante contemplada en la especificación CSS 2.
-
Otros medios y CSS para impresión
Con CSS generalmente definimos el aspecto que tendrá la página cuando la vemos en la pantalla del navegador, pero también es posible ajustar el CSS para definir el aspecto que tendrá en medios distintos, como televisiones o la impresión en papel. En estos artículos vamos a introducir @media, centrándonos también en aspectos que tienen que ver con el CSS que podemos usar al imprimir una página web con la impresora.
-
20
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.
-
21
CSS para imprimir páginas web
Cómo hacer una hoja de estilo CSS distinta para la visualización de la página en el navegador y otra para la impresión en una impresora.
-
22
Saltos de página al imprimir con CSS
Código CSS que nos servirá para realizar saltos de página al imprimir una página web desde el navegador.
-
Técnicas, trucos y buenas prácticas con CSS
En los próximos artículos veremos algunos consejos fundamentales que debemos conocer si deseamos trabajar con CSS a un nivel de medio a avanzado, que nos ayudarán a profundizar en varios aspectos del lenguaje y del desarrollo de sitios web en general.
-
23
Fondos con CSS
Cómo aplicar fondos con CSS, ya sea con imágenes o con colores planos. Además te daremos toda una serie de consejos útiles a la hora de usar fondos en tu web.
-
24
Contadores de CSS
En este artículo vamos a explicar una utilidad bastante desconocida de CSS que permite llevar contadores de elementos en la página, muy útil para enumerar secciones en un documento HTML.
-
25
Trucos CSS para no enloquecer
Algunas soluciones a los problemas tipicos que te puedes encontrar con CSS.
-
26
Lo que nadie te contó de la propiedad z-index
Analizamos una propiedad de CSS muy importante y a veces compleja: z-index. Explicaremos los detalles que a veces se dejan pasar por alto en explicaciones generales de la propiedad y cómo usarla para que no tengas problemas al declarar tus estilos.
-
27
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.
-
28
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…
-
29
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.
-
30
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.
-
31
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.
-
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.
-
Selectores avanzados de CSS
Ahora nos vamos a dedicar a profundizar en el uso de selectores en CSS, que tiene enormes posibilidades más allá de los selectores básicos que podrías conocer, algunas de ellas extremadamente potentes.
-
33
Selectores de CSS que quizás no conozcas y debes revisar
Presentamos un listado de selectores de las CSS que puede que no conozcas y que resultan muy prácticos.
-
34
Selectores de atributo en CSS
Vamos a darle un poco más de atención a los selectores de atributo, ya que tienen algunas características avanzadas que no hemos llegado a comentar en el capítulo de selectores de CSS.
-
35
Pseudo-clase :hover en CSS
Veamos una de las pseudo-clases más utilizadas en el lenguaje CSS, :hover, que nos permite especificar estilos específicos cuando el elemento tiene el cursor del ratón encima.
-
36
Las pseudoclases :focus y :focus-within
En este artículo veremos la aplicación de unas de las pseudo-clases más importantes que debemos de conocer al aplicar nuestros estilos CSS, :focus y :focus-within.
-
37
Pseudo clase CSS :where()
En este artículo te vamos a explicar cómo usar uno de los selectores CSS de nivel 4, con la pseudo clase :where().
-
Manipular el aspecto del cursor del ratón
Además del documento HTML, CSS también nos permite cambiar algunas cosas que pertenecen más al sistema operativo que a los elementos de la página, como por ejemplo el cursor del ratón. Esto es muy útil para ofrecer información implícita sobre las interfaces de usuario de la página.
-
38
Cambiar el cursor del ratón con CSS
En este artículo aprenderás a cambiar el cursor del ratón con CSS cuando se coloca encima de elementos de la página. Pseudoclase CSS cursor.
-
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.
-
39
Listado de distintos frameworks CSS en 2009
Un listado de los frameworks CSS que hay en el mercado para ayudar en la maquetación de páginas web con CSS.
-
40
Frameworks CSS: Ventajas e inconvenientes
Ventajas e inconvenientes del uso de Frameworks CSS, Discutimos acerca de la conveniencia o no de usar frameworks CSS.
-
41
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.
-
42
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.
-
43
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.
-
44
ITCSS
Qué es ITCSS y cuáles son las bases de esta propuesta arquitectónica para el desarrollo del código CSS.
Descargas
-
Libro electrónico del Manual de CSS Este manual de CSS se puede obtener para descarga en distintos formatos de libros electrónicos, tanto para ordenadores con el PDF como para dispositivos o lectores electrónicos que soporten ePub como eReaders y Kindle. Una vez autorizada la descarga la puedes obtenerla todas las veces que quieras en cualquiera de los formatos disponibles.
Archivos disponibles: PDF, ePup
Páginas: 192 (Referencia por el archivo PDF)