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
- Un poco de historia
- Introducción al CSS. Que significa Cascading Style Sheets.
- Acoplamiento CSS
- Sintaxis CSS básica. Como se escribe el CSS.
- Selectores
- Comentarios
- Herencia
- Cascada: ¿Qué selector tiene más prioridad? Especificidad e importancia de selectores CSS
- Medidas básicas
- Colores
- Tipografías
- Modelo de cajas
- Fondos (background) y sus propiedades
- La regla del reloj para margins, paddings y borders
- Dimensiones reales de una caja
- Box Sizing
- Elementos en línea. Elementos bloque. Elementos inline-block.
- Ejemplo de centrado horizontal de una caja.
- Como centrar (horizontalmente) correctamente un texto.
- Posicionamiento de cajas. Absoluto, relativo, fijo, estático y sticky.
- Significado de las propiedades top, bottom, left, right de css
- Z-index
- Ejemplo de centrado vertical y horizontal de una caja.
- Posicionamiento flotante de cajas y propiedad clear.
- Pseudoclases :active, :hover, :link, :visited
- Propiedades visibility y display.
- La propiedad overflow.
- Guía rápida para personaliar botones. Propiedades border-radius, box-shadow, cursor;
- Estilos para textos.
- Estilos para enlaces.
- Estilos para listas.
- Estilos para tablas.
- Opacidad.
- Estilizar formularios web.
CSS nivel intermedio
- Selectores avanzados
- Unidades de medida avanzadas
- Crear columnas de forma fácil mediante float o inline-block.
- La propiedad display:table
- Estrategias para el centrado vertical de un contenido.
- Transformaciones.
- Animaciones.
CSS en profundidad
Ejemplos de menús desplegables con CSS
¿Cómo maquetar web mediante sistema de n columnas?
Contenidos en negro todavía no desarrollados. Próximamente…
- La rejilla y la industria editorial. ¿4, 8, 9, 12, 16, 24 columnas?
- Conceptos para hacer web responsive.
- Crea tu propia rejilla.
- La hoja de estilos reset.css
- El manual de estilos.
- Entender la rejilla de Bootstrap.
- Crea tu propio Framework.
- Ejemplos de maquetación web con rejilla.
Tutorial Flexbox
Contenidos en negro todavía no desarrollados. Próximamente…
- ¿Por qué flexbox está teniendo tanto éxito?
- Resumen de propiedades flexbox
- Contenedores flexbox encapsulados
- Maquetación simple con flexbox
- Ejemplos de maquetación simple con flexbox
- Maquetación responsive con flexbox
- Ejemplos de maquetación responsive con flexbox
Tutorial Grid
Contenidos en negro todavía no desarrollados. Próximamente…
- Introducción a grid
- Crear una rejilla con grid
- Primer layout con grid
- Primer layout responsive con grid
- Posicionar ítems en un grid
- Grids encapsulados
- Posicionamiento dentro de un grid
Otros contenidos CSS del blog
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.
- Separar el css de un html
- Uso de selectores I
- Uso de selectores II
- Uso de selectores III
- Suplanta etiquetas html con css
- Forzar y romper la herencia.
- Prioridad de etiquetas. ¿Cómo se visualizará?
- Unidades relativas. ¿Cómo pasará a verse el documento web?
- Escalera de colores.
- Equivalencia entre web safe colors, rgb, rgba y hexadecimal
- Uso de tipografías web.
- Creación de logotipos
- Ejercicio dimensiones reales de cajas.
- ¿Qué tipo de etiqueta es? ¿Bloque, en línea o en línea-bloque?
- Hacer banderas con gradientes.
- Diferencia entre centrado de texto y centrar cajas con css.
- Centrado vertical de un contenido.
- Ejercicio con box-shadow
- Pseudoclases de los enlaces
- Botones web
- Corrige los errores
- ¿Qué tipo de posicionamiento he usado? Preguntas test
- Creación de una landing page de web en mantenimiento
- Poner iconos sociales flotantes en el lateral de una web
- Maquetar con float:left; o con display:inline-block;
- ¿Cuál es la utilidad de clear:both?
- Practicar con visibility:hidden; y display:none;
- Tabla de servicios con display:table
- Estilizar un formulario web
- Mostrar un número de teléfono responsive en una ubicación distinta si es desktop o smartphone