43

5 tips para aprender CSS

8162Puntos

hace un mes

Curso de Frontend Developer
Curso de Frontend Developer

Curso de Frontend Developer

Domina las bases de HTML y CSS. Define la arquitectura de tu código y construye un sitio web usando componentes estáticos. Maqueta las pantallas principales de tu página web. Agrega diseño responsivo y usa preprocesadores para optimizar tu código CSS. ¡Conviertete en Frontend Developer con Platzi!

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 </<span class="hljs-name">p>
</<span class="hljs-name">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</<span class="hljs-name">p>
<pid="destacado">Segundo párrafo</<span class="hljs-name">p>
<p>Tercer párrafo</<span class="hljs-name">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?

Curso de Frontend Developer
Curso de Frontend Developer

Curso de Frontend Developer

Domina las bases de HTML y CSS. Define la arquitectura de tu código y construye un sitio web usando componentes estáticos. Maqueta las pantallas principales de tu página web. Agrega diseño responsivo y usa preprocesadores para optimizar tu código CSS. ¡Conviertete en Frontend Developer con Platzi!
Melisa
Melisa
Escribe tu comentario
+ 2
Ordenar por:
5
24109Puntos

Alto post para comenzar a aprender CSS!

5
372Puntos

Gracias Melisa!, que buen post.

4
5110Puntos

Excelente información, gracias

4

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

4
2503Puntos

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

4
4803Puntos

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

4
9679Puntos

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

3
2422Puntos

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
273Puntos

Gran Aporte Gracias!!

Donde dice display: dice fexbox no flexbox

1
2363Puntos

Buen aporte muchas gracias

1

Muy buena explicación. Gracias Melisa ❤️

1
1479Puntos

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
3450Puntos

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