Tutorial CSS

Aprende a decidir cómo se visualizarán tus páginas web

¿Te gustaría dominar tus páginas web para que se vean como realmente quieres?

Deja de dar vueltas por internet buscando parches y aprende las bases del diseño web con este tutorial CSS.

El temario es súper extenso y nunca terminas de aprender CSS del todo. Hay algunos contenidos todavía no terminados y que iré completando sin prisa pero sin pausa. He dividido el tutorial en diversas secciones.

Tabla de contenidos

Los apuntes, resúmenes de clase, chuletas y ejercicios que encontrarás están pensados para los alumnos del curso IFCD0110 de confección y publicación de páginas web. Pero te sirven aunque no lo curses.

Antes de leer este tutorial es conveniente que estés familiarizado con el html.

CSS indispensable

  1. Un poco de historia
  2. Introducción al CSS. Que significa Cascading Style Sheets.
  3. Acoplamiento CSS
  4. Sintaxis CSS básica. Como se escribe el CSS.
  5. Selectores
  6. Comentarios
  7. Herencia
  8. Cascada: ¿Qué selector tiene más prioridad? Especificidad e importancia de selectores CSS
  9. Medidas básicas
  10. Colores
  11. Tipografías
  12. Modelo de cajas
  13. Fondos (background) y sus propiedades
  14. La regla del reloj para margins, paddings y borders
  15. Dimensiones reales de una caja
  16. Box Sizing
  17. Elementos en línea. Elementos bloque. Elementos inline-block.
  18. Ejemplo de centrado horizontal de una caja.
  1. Como centrar (horizontalmente) correctamente un texto.
  2. Posicionamiento de cajas. Absoluto, relativo, fijo, estático y sticky.
  3. Significado de las propiedades top, bottom, left, right de css
  4. Z-index
  5. Ejemplo de centrado vertical y horizontal de una caja.
  6. Posicionamiento flotante de cajas y propiedad clear.
  7. Pseudoclases :active, :hover, :link, :visited
  8. Propiedades visibility y display.
  9. La propiedad overflow.
  10. Guía rápida para personaliar botones. Propiedades border-radius, box-shadow, cursor;
  11. Estilos para textos.
  12. Estilos para enlaces.
  13. Estilos para listas.
  14. Estilos para tablas.
  15. Opacidad.
  16. Estilizar formularios web.

CSS nivel intermedio

  1. Selectores avanzados
  2. Unidades de medida avanzadas
  3. Crear columnas de forma fácil mediante float o inline-block.
  4. La propiedad display:table
  1. Estrategias para el centrado vertical de un contenido.
  2. Transformaciones.
  3. Animaciones.

CSS en profundidad

  1. Ejemplo de creación y uso de un sprite
  2. Variables CSS3 var() y :root
  3. Pseudoselectores ::before y ::after
  4. Iconos de fontawesome (o parecidos) con css
  5. Estilizar listas con iconos.
  6. Letra capital (Dropcap)
  1. Decorar un texto seleccionado con el ratón
  2. Interrumpir un párrafo con puntos suspensivos.
  3. Como hacer un efecto parallax
  4. Contadores

Ejemplos de menús desplegables con CSS

  1. Ejemplo de creación de un menú horizontal de navegación con diferentes estrategias.
  2. Ejemplo de creación de un menú vertical con submenú desplegable horizontal.
  3. Ejemplo de creación de un menú vertical con submenú desplegable vertical.
  1. Ejemplo de creación de un menú horizontal con submenú desplegable vertical.
  2. Ejemplo de creación de un menú horizontal con submenú desplebable horizontal.

¿Cómo maquetar web mediante sistema de n columnas?

Contenidos en negro todavía no desarrollados. Próximamente…

  1. La rejilla y la industria editorial. ¿4, 8, 9, 12, 16, 24 columnas?
  2. Conceptos para hacer web responsive.
  3. Crea tu propia rejilla.
  4. La hoja de estilos reset.css
  1. El manual de estilos.
  2. Entender la rejilla de Bootstrap.
  3. Crea tu propio Framework.
  4. Ejemplos de maquetación web con rejilla.

Tutorial Flexbox

Contenidos en negro todavía no desarrollados. Próximamente…

  1. ¿Por qué flexbox está teniendo tanto éxito?
  2. Resumen de propiedades flexbox
  3. Contenedores flexbox encapsulados
  4. Maquetación simple con flexbox
  1. Ejemplos de maquetación simple con flexbox
  2. Maquetación responsive con flexbox
  3. Ejemplos de maquetación responsive con flexbox

Tutorial Grid

Contenidos en negro todavía no desarrollados. Próximamente…

  1. Introducción a grid
  2. Crear una rejilla con grid
  3. Primer layout con grid
  4. Primer layout responsive con grid
  1. Posicionar ítems en un grid
  2. Grids encapsulados
  3. Posicionamiento dentro de un grid

Otros contenidos CSS del blog

  1. Maquetar una página de Prestashop 1.6 con Bootstrap
  2. Factores que afectan al tiempo de carga de una página web
  3. Embellecer tu código css o comprimirlo
  4. La importancia de usar correctamente la tecla tabulador.
  5. Librosweb ahora es uniwebsidad.
  6. Recursos para emparejar tipografías sin morir en el intento

Ejercicios CSS

La siguiente colección de ejercicios y prácticas está ordenada siguiendo el orden de conceptos de este tutorial.

Atención: Los ejercicios que están en texto negro todavía no están publicados.

  1. Separar el css de un html
  2. Uso de selectores  I
  3. Uso de selectores II
  4. Uso de selectores III
  5. Suplanta etiquetas html con css
  6. Forzar y romper la herencia.
  7. Prioridad de etiquetas. ¿Cómo se visualizará?
  8. Unidades relativas. ¿Cómo pasará a verse el documento web?
  9. Escalera de colores.
  10. Equivalencia entre web safe colors, rgb, rgba y hexadecimal
  11. Uso de tipografías web.
  12. Creación de logotipos
  13. Ejercicio dimensiones reales de cajas.
  14. ¿Qué tipo de etiqueta es? ¿Bloque, en línea o en línea-bloque?
  15. Hacer banderas con gradientes.
  1. Diferencia entre centrado de texto y centrar cajas con css.
  2. Centrado vertical de un contenido.
  3. Ejercicio con box-shadow
  4. Pseudoclases de los enlaces
  5. Botones web
  6. Corrige los errores
  7. ¿Qué tipo de posicionamiento he usado? Preguntas test
  8. Creación de una landing page  de web en mantenimiento
  9. Poner iconos sociales flotantes en el lateral de una web
  10. Maquetar con float:left; o con display:inline-block;
  11. ¿Cuál es la utilidad de clear:both?
  12. Practicar con visibility:hidden; y display:none;
  13. Tabla de servicios con display:table
  14. Estilizar un formulario web
  15. Mostrar un número de teléfono responsive en una ubicación distinta si es desktop o smartphone

Últimos contenidos sobre CSS del blog