Anatomía de una declaración CSS: selectores, propiedades y valores

Yesss! Hora de ver CSS 💚
.

.
Es normal que al principio pueda parecer “difícil”, pero realmente no lo es. CSS es un lenguaje muy simple y a la vez muy potente, puedes hacer desde cosas básicas (como estilizar algún elemento) ¡hasta cosas superavanzadas! (como hacer animaciones, por ejemplo) 😄.
.
CSS es tan fácil como agarrar cualquier elemento que tengas en tu HTML (por medio del selector) y dentro de las llavecitas poner en forma de lista los estilos que quieras, así es más fácil de verlo:
.

agarra el botón y ponle {
    color: rojo;
    ancho: 20px;
    alto: 50px;
    tipo-de-letra: Arial;
}

.
Obviamente aquí te lo puse en español, pero recuerda que la mayoría de lenguajes de programación son lo mismo, pero el principio y su forma de usarlos es el mismo 😌.
.
💙 No le tengas miedo a CSS 💙

css define los estilos a la pagina web

La anatomiía de CSS es:

Selector {
//aqui declaramos los pares de propiedad - valor
color: pink;
//color es propiedad y su valor es pink
}

Les comparto mis apuntes. 😄

Estructura principal

Selector

Es el medio que no comunica entre el HTML y el CSS, con él podemos decir que etiqueta, clase o id queremos estilizar.

Dentro de las llaves, que va seguido del selector, va todo nuestro código de CSS.

Propiedad

Hay muchos tipos y es el tipo o clase de estilos que queremos aplicar.

Valor

Es el valor que queremos que tenga nuestra propiedad.

Otros apuntes

Curso Definitivo de HTML y CSS

Clases

¿Qué es CSS?

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

Anatomía de una regla de CSS

Notas de la clase

h1 {
	color: pink;
}

• h1: selector
• color: propiedad
• pink;: valor

Una mala practica para nuestro codigo CSS es poner en los colores, los colores que vienen por defecto, es super recomendable utilizarlo en Hexadecimal .
un ejemplo es pink, es mejor poner “#ffc0cb”

La verdad aprender desde las bases CSS es de las cosas mas bonitas en el desarrollo web por que con este conocimiento puedes replicar o plasmar en una pagina web cualquier diseño que veas o que te pasen. al principio llega a frustrar un poco por la forma en cascada como se aplican y el tema de especificidad que choca con el de cascada si es que no se comprende bien coo es que funciona. Pero pese a eso, no se rindan!!! Cuesta al principio? SI, pero todo lo nuevo al principio es un poco caótico. Con practica lograran retener el conocimiento poco a poco.

Justo así nos vemos aplicando nuestros primeros estilos 😄

https://cssreference.io/

Estructura básica de una declaración en CSS:
.

p{
	color: red;
}

.
Encontramos primero que nada los Selectores §, este nos va a permitir hacer la conexión de HTML y CSS, lo cual nos ayuda a aplicarle una característica o estilo a un elemento que tenemos en HTML, entonces este será nuestro puente de comunicación entre el HTML y el CSS.
.
Después, dentro de esas llaves ira nuestro código CSS, el cual lo vamos a identificar por una “propiedad”, estas propiedades son las que verdaderamente nos van a ayudar a darle el estilo deseado a ese elemento o selector de HTML (color de fondo, color de texto, tamaño de letra) y existen diferentes tipos de propiedades.
.
Ahora los “valores” son las características con las que van a cumplir esas propiedades, por ejemplo, si a nuestro selector le indicamos que su propiedad “color de fondo” (background-color) sea “Rojo” este color sería el valor que se le asignaría específicamente a ese fondo, que seria “un color de fondo rojo”.

les dejo otra forma de entender como funcionan las reglas CSS por si les interesa:
https://www.tiktok.com/@angelo.dev/video/6996807911284559109

con CSS damos vida a nuestra pagina !!!

CSS es una maravilla

La estructura basica de CSS es

• selector
• propiedad y
• valor
  el selector es el puente que comunica el html como el css y da el comando para estilizar las etiquetas.
  dentro de las llaves se coloca la propiedad y el valor seguido de un punto y coma que cierra la linea de codigo css.

Les comparto la guía de un curso de CSS que preparé para dictar como parte de un grupo de trabajo en la universidad. Está bastante completo y tiene ejemplos en cada tema. https://github.com/Leeynyker/modulo_css

Selector:

El elemento HTML en el que comienza la regla. esta selecciona el(los) elemento(s) a dar estilo (en este caso, los elementos p ). Para dar estilo a un elemento diferente, solo cambia el selector.

Declaración:

Una sola regla como color: red; especifica a cuál de las propiedades del elemento quieres dar estilo.

Propiedades:

Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, color es una propiedad del elemento p.) En CSS, seleccionas que propiedad quieres afectar en tu regla.

Valor de la propiedad:

A la derecha de la propiedad, después de los dos puntos (😃, tenemos el valor de la propiedad, para elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para color además de red).

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Esta es la forma más básica de escribir css:

selector {
propiedad: valor1 valor2;
}

• Selector: Nos permite comunicarnos con nuestro documento HTML trabajar con cierta etiqueta.
• propiedades: Nos permite asignar un estilo o caracerística a nuestro selector.
• valor: Son las características como color que le asignamos a la propiedad para que pueda asignarle al Selector en particular.

Kemosionnn, a ver si ya le agarro la onda de una vez por todas!💪🏻

Notas 📒

✏️ Anatomía de una declaración CSS

Una declaración CSS esta compuesta por:

• Un selector: Es el puente entre CSS y HTML. Sencillamente un selector establece a que etiquetas se les aplicarán los estilos especificados entre las llaves {}
• Propiedades: Son los detalles que podemos modificar de una etiqueta, como el color, tamaño de letra, alto y ancho, etc.
• Un valor: Es el valor que se le otorgará a una propiedad. Si la es la propiedad color un valor puede ser red . Al fina de cada declaración de prpiedad: valor; se coloca un punto y coma.

DALE CRAK

Con CSS se pueden hacer maravillas 😄

Anatomía de una declaración CSS: selectores, propiedades y valores

Selector
Es el medio que no comunica entre el HTML y el CSS, con él podemos decir que etiqueta, clase o id queremos estilizar.

Dentro de las llaves, que va seguido del selector, va todo nuestro código de CSS

Propiedad
Hay muchos tipos y es el tipo o clase de estilos que queremos aplicar.

Valor
Es el valor que queremos que tenga nuestra propiedad.

Ahora si, a lo que vinimos !

Resumen en Notion
https://acortar.link/hMiNs1

Selector, propiedad y valor (anotado)

Se viene el tema que muchos ni a la tercera comprendemos, pero que entre más vemos más amamos

Estructura principal de CSS.

se viene lo entrete 😄

Notes:

• Un selector es el “puente” que conecta nuestro HTML con el CSS
• Las propiedades son los atributos en particular que queremos modificar del determinado elemento HTML que determinamos a traves del selector

anatomía

• selector
• propiedades
• valor

vamos vamos, css again 😄

css es super genialllll😎!!!

💙 No le tengas miedo a CSS 💙

fue tan rapida esta clase

En este link pueden encontrar los tipos de lectras seguros para la WEB o Web Safe Fonts, así evitar usar un tipo de lectra no compatible con los navegadores.

https://www.cssfontstack.com/

Hasta el momento no le preste mucha atención a CSS, pero aquí puedo ver lo importante que va a ser para trabajar en el mundo del Frontend 😄

😁

ahora viene lo bueno. espero nos dejen muchas practicas para manejar bien los conocimientos adquiridos

Sintaxis y estructura

La estructura de CSS se compone por un selector: directamente la etiqueta HTML de nuestro documento h1, una clase o un Id. Se siguen las llaves { } y en su interior encontramos la propiedad y el valor de esta { color: 'blue' }

h1 {
	color: "Blue"
}

Excellent!

Anatomía 3 principales:

• Selector

• Propiedad

• Valor

Anatomía de una declaración CSS:
h1 {
color: pink;
}
selector => h1
propiedad => color
valor => pink

Excelente, entramos a conocer el código CSS. Con este nuestras paginas luciran vivas y modernas. Indispensable de conocer.

En CSS se pueden observar tres elementos: los selectores, que relacionan un bloque de caracteristicas con el objeto que sera estilizado. Las propiedades son las caracteristicas que se personalizan y los valores el valor que toma cada propiedad.

Anatomía de una declaración CSS, quiere decir cómo podemos escribir el código CSS, para darles vida a todas nuestras páginas y sitios web.

La estructura principal y básica:

•Selector que es el puente que comunica el HTML y el CSS, vamos a poder decirle que queremos estilizar alguna etiqueta (h1, section, footer, etc.), para esto nos va a servir los tipos de selectores.
•{}.- Después del selector vamos a tener unas llaves y dentro va todo el código CSS.
•la propiedad, tenemos muchas propiedades en este caso sería el color.
•y el valor que en este caso sería pink se puede escribir con letra por que CSS tiene unos colores predeterminados
•por ultimo cerramos con un punto y coma ( ; ) .

con toda