Al principio aprender a dar estilos puede parecer difícil por eso te dejo 5 tips que te harán más ligero entrar al mundo del CSS sin morir en el intento. Lo importante es que #NuncaParesDeAprender.
Si todavía no sabes qué es CSS ve este video.
1.- Identifica los diferentes selectores que puedes utilizar para estilizar tu HTML.
-
Universal
Aplica las reglas en todos los elementos de la página. Usualmente se utiliza para “resetear” el margin y el paddding.
*{
margin: 0;
padding: 0;
}
-
Tipo o etiqueta
Se aplica a los elementos cuya etiqueta HTML coincide con el nombre del selector.
p {
color: #000033;
}
-
Clase
El atributo clase se debe agregar primero al HTML para luego darle estilos en CSS. La principal característica de este selector es que en una misma hoja de HTML varios elementos pueden utilizar el mismo valor en class.
<body>
<p class="main-p"> Este es un párrafo </p>
</body>
.main-p{
font-size: 20px;
}
-
ID
Con el selector ID podrás seleccionar un elemento de la página a través del valor id en el HTML para después darle estilos.
A diferencia del selector “clase” el valor de este atributo no se puede repetir en dos elementos diferentes de una misma página.
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
#destacado{
color: red;
}
2.- Conoce la anatomía de las declaraciones. La estructura base con la que debe escribirse es fundamental para no tener errores.
3.- Comprende qué es el modelo de caja y qué propiedades afectan sus dimensiones.
El modelo de caja o box model hace referencia a los elementos del HTML que están contenidos en una caja rectangular. Estal tiene una serie de propiedades que afectan como se muestran.
Las propiedades principales para definir su tamaño son:
- height, width, margin, padding y border.
4.- Domina cómo se posicionan los elementos en el layout.
Display es la propiedad que controla la estructura de tu página.
Display: flexbox/ grid /absolut / relative/
Descubre aquí la diferencia entre Flexbox y Grid.
5.- Pon en práctica tus conocimientos.
La práctica y la constancia son fundamentales en tu proceso de aprendizaje.
En el curso de Frontend Developer podrás aprender todos estos conceptos, aplicarlos y crear tus propios proyectos desde 0.
¿Qué otros conceptos de CSS te gustaría aprender?
Curso de Frontend Developer
