1. Selector de tipo: Selecciona todos los elementos de un tipo específico, como <p>párrafos o <h1>encabezados de nivel 1.
2. Selector de clase: Selecciona elementos que tengan un atributo class específico
3. Selector de ID: Selecciona un elemento con un atributo id específico. Los ID deben ser únicos en una página.
4. Selector de atributo: Selecciona elementos con un atributo HTML específico.
5. Selector descendiente: Selecciona elementos que son descendientes de otro elemento.

• color: Controla el color del texto.
• font-size: Establezca el tamaño de la fuente.
• background-color: define el color de fondo de un elemento.
• margin y padding: Controlan los márgenes y el espacio interior alrededor de un elemento.
• border: Establece el borde de un elemento.
• width y height: Defina el ancho y la altura de un elemento.

Copiar códigoh1 { color: red; font-size: 24px; background-color: yellow; margin: 10px; border: 1px solid black; width: 300px; }

1. :hover: Se utiliza para aplicar estilos cuando el cursor del mouse se encuentra sobre el elemento
2. :active: Se aplica cuando el elemento está siendo activado, como cuando se hace clic en un enlace.
3. :focus: Se aplica cuando el elemento recibe el foco, como cuando un campo de entrada de texto está seleccionado.
4. :nth-child(n): Se utiliza para seleccionar elementos basados ​​en su posición dentro de un contenedor.

1. ::beforey ::after: Estos pseudoelementos permiten agregar contenido antes o después del contenido real de un elemento.
2. ::first-lettery ::first-line: Se utilizan para estilizar la primera letra o la primera línea de un elemento de bloque, como un párrafo.
3. ::selection: Permite estilizar el texto seleccionado por el usuario.
4. ::placeholder: Se utiliza para estilizar el texto de marcador de posición en campos de entrada de texto.

• block: hace que el comportamiento del elemento sea como un bloque.
• inline: el elemento se renderizará en línea con otros elementos.
• inline-block: el elemento tendrá un comportamiento mezcla entre los dos anteriores, que ahora voy a describir.

• flex: Permite que todos los elementos tengan la misma anchura, independientemente de su contenido
• flex-basis: Establece una anchura inicial del elemento
• flex-direction: Marca la dirección principal del contenedor
• flex-wrap: Controla el cambio de línea de elementos
• flex-flow: Aúna flex-direction y flex-wrap
• flex-grow: Marca el factor de crecimiento del contenedor
• flex-shrink: Marca el factor de contracción del contenedor
• justify-content: Alineación de elementos contenidos en eje principal
• align-items: Alineación de elementos contenidos en eje secundario (unos con respecto a otros)
• align-content: Controla la alineación de elementos contenidos cuando están en varias líneas (con respecto al contenedor principal)

• grid: Permite unir en una sola declaración varias reglas (grid-template-rows, grid-template-columns, grid-row-gap, grid-column-gap, grid-template-areas…)
• grid-template: Une en una sola declaración grid-template-rows, grid-template-columns y grid-template-areas
• grid-template-columns: Declara el número de columnas y su anchura (total o relativa)
• grid-template-rows: Declara el número de filas y su altura (total o relativa)
• grid-row-start: Define en qué fila comienza el contenedor
• grid-row-end: Define en qué fila acaba el contenedor
• grid-row: Define en qué fila comienza y cuánto se expande el contendor (aúna grid-row-start y grid-row-end)
• grid-auto-rows: Determina la altura por defecto en la fila
• row-gap: Controla los espacios entre filas
• grid-auto-columns: Determina la anchura por defecto en la columna
• grid-column-start: Define en qué columna comienza el contenedor
• grid-column-end: Define en qué columna acaba el contenedor
• grid-column: Define en qué columna comienza y en cuánto se expande el contendor (aúna grid-column-start y grid-column-end)
• column-gap: Controla los espacios entre columnas
• grid-auto-flow: Define cómo fluyen los elementos por defecto en el contenedor
• grid-area: Define el área que ocupa el contenedor. Une grid-row-start, grid-row-end, grid-column-start, grid-column-end
• grid-template-areas: Permite usar nombres de áreas usando la declaración como una cuadricula
• gap: Controla espacios entre filas y entre columnas

1. Átomos (Atoms): Son los elementos de interfaz más básicos e indivisibles, como botones, campos de entrada, etiquetas de texto, iconos o imágenes.
2. Moléculas (Molecules): Se componen de varios átomos y representan componentes más simples, como un formulario de búsqueda que contiene un campo de entrada y un botón.
3. Organismos (Organisms): Son componentes más complejos que se construyen a partir de moléculas y/o átomos y pueden ser secciones enteras de una interfaz, como un encabezado de página que incluye un logotipo, un menú de navegación y una barra de búsqueda.
4. Plantillas (Templates): Define la estructura de una página o sección, colocando los organismos en su diseño adecuado.
5. Páginas (Pages): Son instancias concretas de plantillas que representan páginas web completas con contenido real.

1. Reutilización de componentes: Los componentes atómicos y moleculares son altamente reutilizables, lo que facilita la creación de interfaces coherentes y eficientes.
2. Mantenimiento simplificado: Al dividir la interfaz en componentes más pequeños y manejables, es más fácil realizar cambios y actualizaciones sin afectar a otras partes del diseño.
3. Consistencia visual: Al seguir una estructura de diseño jerárquica, se promueve una consistencia visual en toda la aplicación o sitio web.
4. Desarrollo colaborativo: Facilita la colaboración entre diseñadores y desarrolladores, ya que ambos pueden trabajar en componentes individuales y luego ensamblarlos en interfaces completas.
5. Pruebas y depuración más sencillas: Los componentes individuales son más fáciles de probar y depurar, lo que mejora la calidad del producto final.