¿Qué debo saber de CSS?

🎮 Juegos para practicar css 💪

Practicar selectores y propiedades aquí

Practicar css grid y flexbox aquí

Practicar css grid aquí

Practicar flexbox aquí

;

La energia del profesor es buenisima

Un “Tip”: Cuando tengas dudas o no te acuerdas…ve al buscador de Platzi. Allí, encontrarás las respuestas a tus dudas (curso, tema o clases). Podrás ver videos de de otros cursos para ayudarte. Además, muchas clases ya tienen vídeos para ayudarte (lecturas recomendadas o clases relacionadas).

Eres un capo hermano, saludos desde Perù

Despues de esta clase ya no deben tener miedo a CSS. ✨
.
por aqui les comparto otro resumen sobre selectores:
.
Selector universal

Sintaxis: * { atributo:valor; }

.
El estilo se aplicará a todos los elementos de la página

* { color: grey; }

.

Selector etiqueta

Sintaxis: etiqueta { atributo:valor } .

.
El estilo se aplicará a todos los elementos <p>.

p {color: green;}  

.
Selector clase

Sintaxis: .clase { atributo:valor }

.
El estilo se aplicará a cualquier elemento que tenga la clase .blend

.blend{color: red;} 

.
Selector identificador

El selector identificador utiliza el atributo id para seleccionar un elemento.
Solo puede haber un elemento con un id dado en un documento.

Sintaxis: #id { atributo:valor }

.
El estilo se aplicará al elemento que tenga el id #cent

#cent {color: blue;} 

.
Selector descendiente
Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del elemento padre.

Sintaxis: selector1 selector2 selectorN {atributo: valor;}

El estilo se aplica sobre el selector N
.
El estilo se aplica a todos los párrafos que se encuentren dentro de una etiqueta div

div p { color: black;} 

.
Combinación de selectores
La combinación de selectores nos permite dar un estilo a todos los selectores indicados.

Sintaxis: selector1, selector2, selector3{atributo: valor;}

El estilo se aplica sobre los selectores indicados
.
El estilo se aplica a todos los divs y párrafos

div, p { color: orange;} 

.
Selector de hijos
Se usa para seleccionar un elemento que es hijo de otro elemento.

Sintaxis: selector1 > selector2 {atributo: valor;}

El estilo se aplica sobre el selector 2
.
El estilo se aplica a todos los párrafos que sean hijos de un div

div > p { color: white;} 

.
Selector adyacente
Se usa para seleccionar elementos que son hermanos, es decir, su elemento padre es el mismo y están seguidos en el código HTML.

Sintaxis: selector1 + selector2{ atributo: valor; }

El estilo se aplica al selector 2
.
El estilo se aplica a todos los párrafos que sean hermanos de un div

div + p { color: black;} 

Es genial cuando te pasan el diseño en Figma y desde ahí se van proyectando los selectores.

Ser ordenadx es la clave.

jajajaja esta cool el jueguito! En un curso (no recuerdo en cual) lo recomendaro entre los comentarios.

uufffff que claridad y que lujo de clase y de curso, muchas gracias Carlos (Relax master), todo esta en un nivel épico 🙌🏼.

ese detrás de cámara muy bueno 😃

Terminé todos los niveles del jueguito!!!

tipos de selectores

1. Etiqueta (div)
2. ID (#)
3. clase (.)
4. Atributo ({ })

Epaaa!! primera vez que veo un detras de Camara, Estuvo divertido

Increíble clase ✨

Lo bonito del desarrollo web incluye la creatividad y diseño, la flexibilidad y accesibilidad, la comunidad y colaboración, los desafíos y resolución de problemas, y la contribución al mundo a través de la creación de sitios web que educan, informan, inspiran y conectan a las personas ❤️

CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style Sheets). Básicamente, es un lenguaje que maneja el diseño y presentación de las páginas web, es decir, cómo lucen cuando un usuario las visita. Funciona junto con el lenguaje HTML que se encarga del contenido básico de las páginas.

Se les denomina hojas de estilo «en cascada» porque puedes tener varias hojas y una de ellas con las propiedades heredadas (o «en cascada») de otras.

Para muchas personas una simple plantilla de blog es suficiente. Aun así, cuando quieras personalizar la apariencia de un sitio necesitarás implementar CSS que, en conjunto con un buen CMS, te ayudará a potenciar el alcance de tu contenido.

El profesor hace que te guste el tema, no hay falla

Se logró!! 😃

jajajaja me encanta

Costo… pero se hizo!!! 😄

Técnicas de alineación CSS

Tipos de selectores CSS

CSS viene de las iniciales de “Cascading Style Sheets”, que traducimos por “Hojas de estilo en cascada”. Es el segundo lenguaje más esencial para crear páginas web. El primero sería HTML, con el que se define el contenido de la página. El segundo CSS, con el que se define la parte de la presentación, es decir, cómo deben mostrarse los elementos de la página, su posición, forma, espaciados, colores y en resumen, toda la parte estética.

CSS no tiene ningún sentido sin HTML, igual que a día de hoy HTML sin CSS también resultaría imposible, ya que la web ha evolucionado de tal forma que su aspecto es fundamental y el CSS es la única vía para conseguir personalizarlo.

Algunas librerias dedicadas al CSS
Bootstrap es una librería de estilos CSS , es decir, es un archivo CSS que añades en tus proyectos para tener una serie de estilos ya preparados para utilizar. Este tipo de librerías CSS suelen incluir estilos para los elementos más comunes de una página web, como por ejemplo, botones, tarjetas, navbars, etc.
Tambien investigue algo sobre Materialize el framework CSS que permite aplicar fácilmente las guías de diseño de Material Design en sitios web. Ahi les dejo esos tips para que profundicen

Demore un poco con selectores que no habia utilizado, pero se logró

CSS tiene varias funcionalidades que lo hacen genial!

tipo de selectores para CSS