🤔 ¿Qué es CSS?
CSS (Cascading Style Sheets) en español significa "Hojas de Estilos en Cascada". Su nombre hace referencia a la forma en la que se aplican los estilos a una página web. Se lo conoce como "Casada" porque los estilos se van aplicando uno después del otro, y el navegador los va aplicando de arriba hacia abajo.
🎨 Colores en CSS
Hay varias formas en las que puedes especificar un color en CSS, las más comunes son:
🗨️ Editar texto en CSS
Tipografía
📐 Unidades de medida en CSS
En tu página web siempre tendrás que especificar medidas, ya sea alto, ancho o grosor de cualquier elemento. Estas medidas se pueden especificar en diferentes unidades, las mismas que tienes dos grupos principales: medidas absolutas y medidas relativas.
🟧 Modelo de caja en CSS
Cada elemento en CSS (div o etiqueta semántica como header o footer) tiene un modelo de caja que se encarga de mostrar el contenido de ese elemento. Para entender el modelo de caja en CSS hay que tomar en cuenta todos los espacios que puede tener un elemento en CSS. Estos espacios son los siguientes:
🔗 Estilos a enlaces
Un enlace en HTML tiene estilos básicos como un subrayado, y un color específico.
🤺 Posicionar elementos en CSS
Para poder posicionar un elemento en CSS, es necesario utilizar la propiedad position:
🖼️ Cómo insertar imágenes en CSS
Insertar una imagen en CSS es muy sencillo. Simplemente hay utilizar la propiedad background-image. Ésta propiedad puede tener como valor la función url(), la misma que recibe como parámetro la ruta de la imagen. Esto lo veremos mejor con un ejemplo:
🛞 Transiciones con CSS
Para crear una transición en CSS, sigue estos dos pasos:
🔃 La propiedad transform
transform es una propiedad en CSS que te permite mover, rotar, inclinar o modificar las dimensiones de un elemento tanto en 2D como 3D.
🌈 Animaciones CSS
Para hacer animaciones en CSS, primero tenemos que definir las propiedades de la animación y luego sus valores.