Todas las propiedades de CSS que necesita saber para crear un sitio web

Está copiando código de StackOverflow hasta que encuentre una solución que se ajuste. Pero, ¿cómo será esa solución? ¿Por qué funciona?

La mayoría de las veces, no le tomes importancia a la respuesta. Solo concéntrate en el resultado.

Al crear un sitio web, algunas de las propiedades de CSS son imprescindibles, sin embargo, es difícil reconocerlos.

Este artículo existe para ayudarlo a resolver los problemas de CSS más comunes al crear un sitio web.

Vamos a sumergirnos en las propiedades que no puedes evitar.

1. display: flex;

¿Necesitas centrar un elemento?
Si Buscamos en Google probablemente veremos que se nos ofrecerá decenas de soluciones diferentes, sin embargo, solo necesitamos una, la mayor parte del tiempo.

.your-class-name {
display: flex;
justify-content: center;
align-items: center;
}


«display: flex» alineará los elementos secundarios uno al lado del otro en una fila horizontal.
Sugerencia: puede agregar «flex-direction: column» para cambiarlo a una fila vertical.

«flex-direction» determina su eje principal. El valor predeterminado es row.

«justify-content: center» alineará los elementos en su eje principal. Eso significa que el elemento estará centrado horizontalmente para nuestro fragmento de código.

«align-items» controla su eje transversal, es decir, sus elementos están centrados verticalmente.

Puede pasar muchos atributos aquí, pero sólo uno a mencionar: «justify-content: space-between». Esto distribuirá los elementos a lo largo de la fila sin márgenes al principio o al final.

2. margin

Esta propiedad determinará la distancia entre ciertos elementos.

.your-class-name {
margin-top: 16px;
margin-right: 12px;
margin-bottom: 16px;
}
// shorthand
.your-class-name {
margin: 16px 12px;
}


Puede conectarse directamente con propiedades de lados por hacer cómo margin-top, margin-right, etc., o la cubierta todo con una sola margin propiedad:

margin: {{ top }} {{ right }} {{ bottom }} {{ left }};


Si omite bottom, heredará top. Si omite left, heredará right.

3. padding

A primera vista, padding parece similar a margin.
La sintaxis también es idéntica a margin.

¿Por qué lo necesitamos entonces?

Imagina que tienes una papeleta física. Quieres escribir algo sobre el caso.
Sin embargo, no desea comenzar a escribir en la esquina superior izquierda. Quieres sangrar un poco tu texto.

Para eso, usará padding. El acolchado influye en el interior de nuestro elemento.

Sin embargo, si tienes dos maletas por ejemplo una al lado de la otra y quieres hacer una distancia entre ellas, usarás margin para eso.

4. background-color

Este es bastante simple y una necesidad absoluta. Puede aplicar esta propiedad a la mayoría de los elementos HTML.

background-color: blue;
background-color: #232323;
background-color: rgb(255, 255, 128);
background-color: rgba(255, 255, 128, 0.5);


Los atributos pueden variar: desde un nombre de color simple, sobre su valor HEX, hasta el RGB (incluso HSL).

RGBA es interesante aquí porque en lugar de simplemente establecer un color, también puede establecer la opacidad. ¿Viendo ese 0.5? Eso significa que la transparencia será del 50%.

5. color

colores similar a background-color, la diferencia es que hablamos del color del texto.

6. opacity

¡Pero podemos hacer que cualquier cosa sea transparente!

opacity: 0.1; // 10% visibility
opacity: 0.9; // 90% visibility


Esto es útil para estados desactivados o efectos interesantes.

7. width

Este es complicado. La mayoría de las veces, no desea tener anchos fijos. Su diseño debe ser receptivo y puede lograrlo con márgenes y rellenos.

Sin embargo, a veces es necesario que lo arreglen. ¿Quizás quieras configurar tu ícono a 24px?

8. height

height es mucho más simple que el ancho debido a la naturaleza de nuestra dirección de desplazamiento.

Sin embargo, aún querrá usar la menor cantidad de alturas fijas posible. Un ejemplo donde podrías es tu encabezado.

9. cursor: pointer;

Coloca el cursor sobre cualquier botón de esta página. ¿Puedes ver cómo el cursor se transformó en una manita?

«cursor: pointer» es la razón de eso. Siempre que pueda inducir alguna acción (botones, enlaces, etc.), debe usarlo.

10. font-size

Este es bastante simple y controla los tamaños de tu fuente. Si eres un principiante absoluto, se te recomienda usar solo px aquí.

Sin embargo, si quieres profundizar, investiga rem. Básicamente, establece el tamaño de fuente predeterminado en px,
y todas las demás fuentes serán relativas a ese valor base.

Por ejemplo, si su valor base es 16px, 2rem será 32px.

11. font-family

Quieres diferentes fuentes, ¿verdad? Las fuentes de Google son impresionantes y es muy fácil elegir una de ellas,
incluirla en tu index.html y agregar su nombre font-family.

Puedes investigar más sobre fuentes aquí

12. :hover

Esto agregará cualquier efecto a un determinado elemento al pasar el mouse.

.your-class-name:hover {
cursor: pointer;
}


Este ejemplo cambiará el cursor a un puntero.

En conclusión

¿Y si te decimos que resolverás la mayoría de tus problemas de CSS con estas 12 propiedades?

Claro, tal vez necesite algunos más dependiendo de su caso, o tendrá que profundizar en algunos de ellos.

Pero esto es suficiente para construir un sitio web de apariencia sólida.

Gracias por puntuar este post.