CSS Paso a paso

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

SelectorElemento de nuestro HTML que deseamos aplicar estilos
PropiedadNombre de la propiedad CSS que queremos modificar.
ValorValor 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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *