Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web.

Inicio > Tutorial CSS. Aprende a decidir como se visualizarán tus páginas web. (Page 2)
¿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.

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 sirven para todos.

Por cierto, antes de leer este tutorial es conveniente que estés familiarizado con el html.

El tutorial está dividido en 3 secciones principales:

Verás que hay algunos contenidos todavía no terminados y que voy completando el tutorial sin prisa pero sin pausa.

Por este motivo al final de todo verás también una sección de últimos contenidos publicados.

¿A que esperas?

¡Teclado, pantalla y acción!

CSS básico

      1. Introducción al CSS. Que significa Cascading Style Sheets.
      2. Versiones del css
      3. Acoplamiento CSS
      4. Sintaxis CSS básica. Como se escribe el CSS.
      5. Selectores
      6. Comentarios
      7. Herència
      8. Cascada: ¿Qué selector tiene más prioridad? Especificidad e importancia de selectores CSS
      9. Medidas
      10. Colores
      11. Tipografías
      12. Modelo de cajas
      13. Fondos (background) y sus propiedades
      14. Ejemplo de creación y uso de un sprite
      15. La regla del reloj para margins, paddings y borders
      16. Dimensiones reales de una caja
      17. Box Sizing
      18. Elementos en línea. Elementos bloque. Elementos inline-block.
      19. Ejemplo de centrado horizontal de una caja.
      20. Como centrar (horizontalmente) correctamente un texto.
      21. Posicionamiento de cajas. Absoluto, relativo, fijo, estático y sticky.
      22. Significado de las propiedades top, bottom, left, right de css
      23. Z-index
      24. Ejemplo de centrado vertical y horizontal de una caja.
      25. Posicionamiento flotante de cajas y propiedad clear.
      26. Crear columnas de forma fácil mediante float o inline-block.

      1. Pseudoclases :active, :hover, :link, :visited
      2. Propiedades visibility y display.
      3. La propiedad overflow.
      4. Ejemplo de creación de un menú horizontal de navegación con diferentes estrategias.
      5. Ejemplo de creación de un menú vertical con submenú desplegable horizontal.
      6. Ejemplo de creación de un menú vertical con submenú desplegable vertical.
      7. Ejemplo de creación de un menú horizontal con submenú desplegable vertical.
      8. Ejemplo de creación de un menú horizontal con submenú desplebable horizontal.
      9. Guía rápida para personaliar botones. Propiedades border-radius, box-shadow, cursor;
      10. Estilos para textos.
      11. Estilos para enlaces.
      12. Estilos para listas.
      13. Estilos para tablas.
      14. Opacidad.
      15. Estilizar formularios web.
      16. Animaciones y transformaciones.
      17. Introducción a la web responsive.
      18. El concepto de rejilla. ¿8, 12, 16 columnas?
      19. Instrucciones básicas para hacer web responsive. Media Queries, box-sizing y reset.css
      20. La rejilla de 12 columnas de Bootstrap
      21. Crea tu propio manual de estilos.
      22. Crea tu propio Framework.
      23. Tutorial flexbox
      24. Ejemplos de maquetación con flexbox
      25. Ejemplos de maquetación responsive con flexbox

CSS avanzado

  1. Selectores avanzados
  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
  5. La propiedad display:table
  6. Estrategias para el centrado vertical de un contenido.

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. Librosweb ahora es uniwebsidad.
  4. 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. Corrige los errores
  7. Forzar y romper la herencia.
  8. Prioridad de etiquetas. ¿Cómo se visualizará?
  9. Unidades relativas. ¿Cómo pasará a verse el documento web?
  10. Escalera de colores.
  11. Uso de tipografías web.
  12. Ejercicio dimensiones reales de cajas.
  13. Hacer banderas con gradientes.
  14. Diferencia entre centrado de texto y centrar cajas con css.
  15. Centrado vertical de un contenido.

  1. Ejercicio con box-shadow
  2. Logotipo con text-shadow
  3. Pseudoclases de los enlaces
  4. Botones web
  5. Corrige los errores
  6. ¿Qué tipo de posicionamiento he usado? Preguntas test
  7. Creación de una landing page  de web en mantenimiento
  8. Poner iconos sociales flotantes en el lateral de una web
  9. Maquetar con float:left; o con display:inline-block;
  10. ¿Cuál es la utilidad de clear:both?
  11. Practicar con visibility:hidden; y display:none;
  12. Tabla de servicios con display:table
  13. Estilizar un formulario web
  14. Mostrar un número de teléfono responsive en una ubicación distinta si es desktop o smartphone

Últimos contenidos sobre CSS del blog