48

5 tips para aprender CSS

20191Puntos

hace 4 años

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 CSSve 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><pclass="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><pid="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.

anatomia.PNG

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.
modelo de caja.PNG

4.- Domina cómo se posicionan los elementos en el layout.

layout_2.PNG

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?

Melisa
Melisa
melisapurpura

20191Puntos

hace 4 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
5
29529Puntos

Alto post para comenzar a aprender CSS!

5
2766Puntos

Gracias Melisa!, que buen post.

4
22725Puntos

Excelente información, gracias

4

Justo ahora estoy renegando con Css jaja muchas gracias por tu aporte Melisa 😄

4
13081Puntos

Excelente… este post refuerza mi aprendizaje del curso Frontend Developer.
Gracias!!!

4
19423Puntos

Muchas gracias Melisa. Son puntos muy importantes y fácilmente explicados

4
38113Puntos

Recién comencé con los cursos de Desarrollo Web y Responsive Design y este post me ayudó bastante!

3
16043Puntos

Lo que un me falla es el modelo de caja y el layout ya le estoy entendiendo .

aun que es un buen inicio, me gusto.

3
705Puntos

Gran Aporte Gracias!!

Donde dice display: dice fexbox no flexbox

1
7543Puntos

Buen aporte muchas gracias

1
6267Puntos

Muy buena explicación. Gracias Melisa ❤️

1
5478Puntos

El mundo del diseño en css se me hace tan amplio y complejo 😦
voy a tener que practicar mucho
muchas gracias por el post y por los consejos !

1
3766Puntos

Justo ayer aprobé el examen de "Curso de desarrollo web online"
Soy un polluelo en esto 🐣