Anatomía de CSS

Teff es mi más grande referente de CSS. Sus cursos son espectaculares. Y sus aportes + tutoriales en el Blog de Platzi son de otro nivel. 💚 🔝

• Cursos de Teff
• Blogposts de Teff

Gente para que no estén entrando a ninguna pagina a buscar colores, solo escriban: #ffffff (son 6 efes xd ) en el buscador de su navegador y ustedes mismos seleccionan su color a gusto y abajo tienen para copiar sus valores en HEX, RGB, etc .

![](

![](

![](

Ejemplo claro :

PROFE JUAN = HTML

PROFE ESTEFANY = CSS

jajaja los quiero…

[](

hola les recomiendo que para asgnar colores usen paletas de colores en cual basarse les recomiendo coolors

Tipo = El nombre de la etiqueta HTML tal cual (h1, p , section , body, etc)
Clase = El nombre que le dimos a la clase en HTML simplemente le agregamos (.) punto al principio.
ID = El nombre que le dimos al id en HTML simplemente le agregamos (#) hashtag al principio.
Cada una se debe usar en casos especificos pero creo que eso lo veremos mas adelante.

Considero que como primera clase de CSS, es necesario condensar esta información en una presentación, mas que hablar acerca de los selectores y dar ejemplos en el código. Pienso que es necesario explicar, historia, generalidades, ejemplos un poco mas reales de lo que podemos lograr aplicando estilos a una pagina y la importancia de que sea o no un producto de calidad.

Para ver los colores, tanto en sistema RGB o hexadecimal, no es necesario abrir otra página web.
Escriban un nombre de cualquier color y un momento le dejan el mouse encima de la palabra y les sale esta opción para escoger cualquier color
Para sistema hexadecimal es similar, escriben # y cualquier código, dejan el mouse encima del código y sale la opción

Esto sale en Visual Studio. No sé si funcione con otros programas

RESUMEN:
CSS (Cascading Style Sheets) nos permite darle estilos a nuestro HTML.
Para cambiar dichos estilos primero debemos referenciarlos o indicar cuál elemento nos interesa, en este caso, se realiza mediante tipos de selectores.

• Tipo: Colocamos el tipo de elemento del html, en este caso, solo colocamos h1.
  

  

• Clase: Los elementos de html pueden tener una clase, asi que colocamos un punto en css para referenciarla.
  

  

• Id: De igual forma que trabajamos este id en javascript. en css lo referenciamos con un hashtag.
  

  

Ahora que ya tenemos la manera de indicar cuál etiqueta de html queremos cambiar, este elemento va a tener unas propiedades.
Le decimos puntualmente que color de letra queremos que tenga, que ancho y alto, o cambiar el color de fondo.

Existen muchas propiedades que puedes cambiar, las puedes leer aquí.

No es por presumir, pero… como yo tomé la clase de pre-work yo creé mis archivos desde la terminal de vscode conectada con wsl.

Les recomiendo la extensión, Color picker de Vs code para aggregar colores de manera sencilla

Yo no se como le voy a hacer ahora en adelante, yo no me puedo concentrar con la miradita que tiene esa profe, que bonita.

Unos Pequeños Apuntes

Para cambiar colores, posicionamiento, y personalízalo todo, necesitamos css, y para eso crear un archivo .css

Css es un lenguaje de estilos, este lenguaje trabaja de la mano con HTML.

Si en el archivo HTML, hay una etiqueta llamada H1, y luego colocamos esa etiqueta en css, estamos creando un Vínculo.
Ese vinculo se lo conoce como selector.

Para crear el diseño en css se necesitan las propiedades (características que le podemos dar a HTML, como color, ancho, etc.) y valores (corresponden a cada una de las propiedades que les estamos dando, si la propiedad es ancho el valor va a estar determinado por una medida en pixeles que le asignemos)

Tipos de selectores
-H1: Selector de tipo, se llama así porque es el mismo que tenemos en nuestra etiqueta HTML
-Class
-Id

Cualquier clase que se encuentre en el HTML, debe tener distinto nombre.

Partes del uso de CSS

una profe linda para enseñarnos a poner lindo nuestro juego , me enamore :3

Feliz de tener a una profesora tan profesional y dedicada en este curso. Lo aprovechare al maximo. Te admiro profe 🤩 espero algun dia ser tan pro como tu ( o mas) 💚💚

muy básico , me gustaría que hubieran desarrollado un proyecto mas complejo donde abarque las mayores etiquetas posibles

La clase estuvo excelente, lo que mas me soprendio fue de pasar de un profe full hiperactivo a uno full light.

Que manera tan sencilla de explicar CSS‼
Gracias profesora Teff 😊
Definitivamente usted y su especialidad van acorde.
A seguir aprendiendo 🥳

En el siguiente sitio web, también se puede analizar propiedades CSS.
https://www.w3schools.com/css/default.asp

Qué chevere se siente tomar este curso. ¿Por qué? Porque estoy repasando conceptos de otros cursos que ya se me estaban olvidando. Por ejemplo, dejé de lado CSS por enfocarme más en JS y ahora estoy repasando CSS y recordando lo aprendido hace meses xd

Thank you Platzi ❤️

me parece que la profe Teff va hablando muy lento😅

bueno aquí al menos no hay que preocuparse de que se dañe el jueguito, si algo falla solo queda horrible la presentación pero el juego sigue corriendo

Unas le mejores parte del curso, darle vida al contenido y quien mas que Estefany una crack. a code-ar estilos 🤗

Existen unas extensiones en Chrome que uso muy seguido para elegir los colores de mis paginas webs. Se llaman colorzilla y colortab. Pueden probar si les gusta. Saludos comunidad Platzi. Nunca pares de aprender

A esta clase le falto esa presentacion dónde mostraban lo que los profesores estaban hablando.
No es algo grave porque la profe lo hace ver muy sencillo pero puede aportar mucho a la clase.

.titulo{
    color: #FF5233;
    width: 310px;
    height: 50px;
    background-color: beige;
}

Que buena forma de explicar, detallada y pausada, muchas gracias por el contenido tan bueno.

tuve un grandioso recorrido con Juan DC, GENIAL, ahora embarquémonos a otra gran aventura 🎉

me enamore de la profesora…ahora si me acabo el curso!

Esa de arrastrar hacia los costados para cambiarle el tamaño en el inspector no la sabia jajaj, trucazo

El curso se ve interesante la verdad ,pero le hace falta mas explicacion en algunas cosas , como por ejemplo :
Class : Se puede utilizar varias veces
Id: Solo se puede una vez

Hola CSS, que bella mujer!!! <<3

Si no logran vincular el archivo css, vuelvan en sus pasos, yo no podía hacerlo porque había movido la carpeta de mi mokepon al desktop, y ahí lo creé, (yo antes lo tenía en la carpeta programar) borré el archivo css, creé una carpeta, volví a crearlo, y ahí si se vinculaba bien. Espero le sirva a alguien, ¡No se rindan por aprender!

Vamos que se sigue aprendiendo!¡!¡

comienza css y acaba el curso para mi xD
que terrible todo eso jajajaja.
Hermoso hasta llegar aquí, allí es donde se divide el trabajo para cada quien supongo

CSS = Cascading Style Sheets = Hojas de estilo en cascada

por fin llego esta clase ya tenia toc de ver esa pagina toda fea jajjaj

Aprendimos que hay 3 tipos de selectores en css: tipos, clases y de id’s. Tienen propiedades y valores.

exelente trabajo

Siendo nuevo por acá en esta primera clase de CSS, les deseo lo mejor. No importa la situación en la que estén, nunca se rindan muchachos

Por lo que voy entendiendo CSS es la parte visual artística como colores, que lleva html

está bonito esto de los colores me siento muy feliz el anterior profe se daba muchas vueltas que estresaba

Bella la profe Estefany

CSS es un lenguajes de estilos que se encarga de toda la parte estética de una página web como

• Colores Titulos
• Posicion de los elementos
• Color de fondo

Para esto crearemos un nuevo archivo llamado styles.css y crearemos el enlace desde el archivo HTML con

<link rel="stylesheet" href="./styles.css">

Posteriormente en el archivo CSS podemos empezar a poner colores y estilos haciendo referencia a los elementos de HTML, como por ejemplo

h1{
    color: lightcoral;
}

Este es un vínculo que se ha creado entre HTML y CSS, un vínculo conocido como selectores, hay de varios tipos, trabajaremos con 3

Solo como consejo: hacen falta las ayudas visuales para cuando está explicando que es un atributo, un selector, etc. así como cuando explicaba Juan Castro.

Primero perdimos a Freddy, luego a Juan, tengo la sensación de que justo cuando le agarremos confianza a Teff, nos la van a cambiar 😭

En HTML, la etiqueta id se utiliza para identificar de manera única un elemento en una página web. Por otro lado, la etiqueta class se utiliza para identificar varios elementos de una página web que comparten una característica o estilo en común. La id debe ser única en toda la página, mientras que una class puede ser compartida por varios elementos.

Las funciones que cumple cada uno de los lenguajes explicado con hamburguesas. 😅

Qué siginifica esta línea de código? 🤔

<link rel="stylesheet" href="./styles.css">

1-<link>: Esta etiqueta HTML se utiliza para establecer relaciones entre el documento actual y recursos externos, como hojas de estilo, iconos y más.

2-rel=“stylesheet”: El atributo rel (relationship) se establece en “stylesheet”, lo que indica que el recurso vinculado es una hoja de estilo que se utilizará para dar formato y diseño a la página web.

3-href="./styles.css": El atributo href (hypertext reference) especifica la ubicación del archivo de hoja de estilo. En este caso, el valor es “./styles.css”, lo que significa que la hoja de estilo se encuentra en el mismo directorio que la página HTML actual. La ruta “./” se refiere al directorio actual, y “styles.css” es el nombre del archivo de hoja de estilo.

4-En resumen, este código <link> se utiliza para vincular una hoja de estilo externa llamada “styles.css” a la página HTML actual. Esto permite que el navegador cargue y aplique la hoja de estilo para dar formato y estilo al contenido de la página web de acuerdo con las reglas definidas en la hoja de estilo.

noooooooooooo primero freddy, ahora juan pipipipi y ya que a aprender con esta nueva profe

¿Te aparecieron los valores tachados? no te preocupes.

Esto sucede cuando no colocamos el px (pixeles) al final o los separamos por un espacio (100 px) lo ideal es que siempre queden junto al número, así:

width: 300px;
height: 40px;

Quiero compartir algunos recursos que me han parecido muy utiles para seleccionar colores o paletas:

En Color Hunt pueden encontrar paletas prediseñadas y algunas valoradas por la comunidad para que se puedan guiar: https://colorhunt.co/palette/

Paletton y AdobeColor son herramientas para la creacion de paletas, aca los links:
https://www.paletton.com/
https://color.adobe.com/create/

ay Dioh mío 🙌💗

❤️

que bueno que CSS es mas facil jaja 🥴

Si necesitan paletas de colores que combinen pueden usar Adobe color

Esta pagina es super buena si quieres practicar:
https://cssbattle.dev/

super esta clase me evacuó las dudas que tenía

¡Tenemos nueva profesora! Vamos a seguir aprendiendo. Gracias por la clase.

Le puse un poco más de color y estilos uwu 💜

Se va notando la importancia de contar con diferentes profesionales en este proceso de programacion… Estefany tiene estilo

https://platzi.com/clases/3208-programacion-basica/52008-anatomia-de-css/?time=642
Toda mi vida de programador haciendo el backgraund a prueba y error para ver el tipo de tamaño que debe de tener y aqui lo resolvieron en un instante veo que la inspeccion de crohme sirve demasiado.

https://arantius.github.io/web-color-wheel/
Aquí se encuentra todo el rango de colores con sus respectivos nombres de forma visual y compacta.

Las propiedades tienen valores… ejemplo (propiedad: titulo) (valor ,color :azul)

Podemos cambiar el valor desde inspeccionar como cambiar el ancho de px, pero para q se guarde cambiarlo VS

super interesante la clase, esto de cambiar estilos, colores y demás. está excelente.

Nosé si es un aporte que sirva mucho, pero ese acento colombiano de la profe, me dan mas ganas de seguir adelante jajajaja .😍😍😍😍😍

en lugar de background-color pueden simplemente utilizar background e igual les funcionará el cambio de color de fondo…