Herramientas
Tailwind CSS
https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048
https://htmlcheatsheet.com/css/
https://cssreference.io/
Sintaxis
| Selector | Elemento de nuestro HTML que deseamos aplicar estilos |
| Propiedad | Nombre de la propiedad CSS que queremos modificar. |
| Valor | Valor que le asignamos a esa propiedad. |
CSS Selectors
3 formas de insertar CSS
Interno
Colocamos nuestro código CSS dentro de la etiqueta en el head de nuestro archivo HTML.
Externo
Usamos la etiqueta donde el attr rel indica la relación con el recurso y el attr href la ruta a nuestro archivo css.
En línea
Se coloca en el attr style del elemento/etiqueta HTML a modificar.
primeras propiedades
Color
font-size
background-color
Clases e IDs
Especificidad, cascada, herencia
Práctica
Crear lo siguiente en HTML, y aplicar CSS (color a los titulos y subtitulos), cambiar color de fondo del párrafo y cambiar el tamaño de tipografía al listado de actividades.
Borders
The CSS Box Model
Content – The content of the box, where text and images appear
Padding (margen interno) – Clears an area around the content. The padding is transparent
Border – A border that goes around the padding and content
Margin (margen externo) – Clears an area outside the border. The margin is transparent
modelos
posicionamiento
flujo normal
flotante
absoluto
box-shadow
border-radius bonitas esquinas para las cajas
gradiente
RGBA
HSLA
Outline
nth-child(n) selector matches every element that is the nth child of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b).
Selectores combinados
Fuentes
Por defecto, solo podremos acceder a las que ofrecen los navegadores de forma nativa pero por fortuna siempre podemos agregar nuevas opciones.
Tipos de fuente
Serif
Sans-serif
Monospace
Cursive
Fantasy
Unidad de medida
Displays