Anatomía de una regla de CSS

Vale aclarar que el selector puede ser tanto un elemento conocido como p, h1, li, etc; como una clase, pseudo-clase, pseudo-elemento o id.

La diferencia es que a los elementos conocidos se les llama (se les inserta en CSS) mediante su propio nombre. Por ejemplo:

A las clases, pseudo-clases y pseudo-elemetos se les _llama _mediante un punto.

A los id se les _llama _mediante un numeral.

creo que esta clase debia ir antes de la clase pasada.

La estructura CSS se basa en reglas que tienen el siguiente formato:

Selector: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo concreto.

Propiedad: La propiedad es una de las diferentes características que brinda el lenguaje CSS para dar estilos.

Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro comportamiento.

Cada una de estas reglas se terminará con el carácter punto y coma (😉.

Con todo esto le iremos indicando al navegador que, para cada etiqueta (selector especificado) debe aplicar las reglas (propiedad y valor) indicadas.

Miren cómo me quedó el header con mis links:
https://donnyvasquez.github.io/Curso-definitivo-de-HTML-y-CSS/clasePseudoClases/

El “;” en CSS es opcional cuando solamente estás aplicando una única regla CSS, de hecho incluso a veces se suele escribir en línea al ser una sola regla, lo comento para que no se sorprendan al ver que a veces hay reglas sin “;” en CSS

Muchach@s para que no mezclen o confundan conceptos:

Las reglas de CSS están conformadas de:
Selectores
Declaraciones
Propiedades
Valores

Existen varios tipos de selectores
Selector de etiqueta
Selector descendiente
Selector de id:
Selector de class:

Existen varios tipos de propiedades
color:
text-transform:
align-items:
font-weight:

Existen varios tipos de propiedades de valores
#277cea;
uppercase;
center;
600;

Notas de la clase

Lo dejo escrito ya que muchos de mis compañeros han aportado imágenes:

Todo nuestro archivo de .CSS son reglas de estilos.

Estas se componen de ciertas cosas específicas
• Primero tenemos el selector, pseudo selectores, pseudo clases o pseudo elementos.
El selector es decirle a CSS qué elemento queremos modificar.

• Pondremos los dos Brackets {} y dentro de los mismos es donde introducimos la declaración del estilo.
Se compone de una propiedad que es el estilo que vamos a aplicar, finalizado con dos puntos “:” y el valor que le vamos a aplicar finalizado con punto y coma “;” la cual aplicaremos al final de cada línea de esta declaración que estamos generando.
Si no ponemos al final el punto y coma los estilos no funcionarán, lo mismo pasa al cerrar los Brackets.

para mi opionion esta clase, la tenia que impartir antes de la clase: pseudoclase y pseudoelementos.

De hecho se pueden seleccionar varios elementos a la vez usando comas:

.header-top, .important-paragraph, a {
	background-color: aqua;
	color: white;
}

✨ Una regla CSS siempre tiene un selector y una declaración.

me parecen buenas imagenes:

Genial este curso, estoy aprendiendo mucho.

En resumen, las reglas de CSS se componen de la siguiente manera:
![](

Recuerden, no los olviden 😅

Clase 24 - Anatomía de una regla de CSS

¿Cuál es la anatomía de una regla de CSS?

selector/pseudo clase/pseudo elemento 
{
Propiedad: valor:
}

¿Cómo se le conoce a un bloque de CSS que aplique estilos a un elemento de HTML?

• Regla.

¿De qué se compone una regla de CSS?

• Selector/ pseudo clase/ pseudo elemento
• Propiedad:
• Valor de la propiedad.

¿Qué es un selector?

• Representa al elemento que vamos a asignarle estilos de CSS.

¿Que es una propiedad?

• Representa el estilo que le vamos a dar a un elemento de HTML.

¿Qué es el valor del estilo?

• Representa el valor que tendrá el estilo que le queremos dar a un elemento HTML.

**¿Que forman la propiedad y el valor de la propiedad?

• Una declaración.

¿Qué símbolo usamos para encerrar las declaraciones como un bloque de CSS?

• Los brackets ({}).

¿Qué símbolo usamos para separar las declaraciones en CSS?

• El punto y coma (😉.

¿Qué razones hay para que nuestro código CSS se rompa?

• No separar las declaraciones con el punto y coma (😉.
• Cerrar mal los brackets.
• No escribir un selector o escribirlo mal.

Mis apuntes de la clase 😃

Luego de los brackets, ponemos el estilo que se les va a cambiar dospuntos y su valor (dentro de los valores que son permitidos)

Regla CSS
.

/*REGLA*/
	/*Selector: body*/
	body{
	 /*declaración = propiedad: valor;*/
	 background-color: blue;
	 /*una propiedad puede tener multiples valores*/
	 border: 1px solid blue;
	}
/*REGLA*/

Anatomía de una regla de CSS

Al iniciarnos en CSS es importante que conozcamos las partes de cada regla de CSS (regla es la forma a la que se denomina una estructura de CSS)

• Selector: El elemento HTML que comienza la regla, esta selecciona los elementos a dar estilos, para dar estilos a un elemento diferente solo cambia el selector, clase o ID.

• Propiedades: Maneras en las cuales puedes dar estilos a un elemento HTML, en este caso, color es una propiedad del elemento P.

• Valor de la propiedad: A la derecha de tu propiedad, después de colocar 2 puntos ( : ) colocas el valor de tu propiedad, para elegir una de las muchas posibles apariencias para una determinada propiedad.

• Declaración: Especifica una propiedad determinada que se asigna un elemento.

 Nota las otras partes importantes de la sintaxis:

• Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves ({}).

• Dentro de cada declaración, debes usar los dos puntos (😃 para separar la propiedad de su valor.

• Dentro de cada regla, debes usar el punto y coma (😉 para separar una declaración de la siguiente.

tambein hay gerarquias en los selectores se le conoce como “Especificidad”.

https://alert-opossum-f87.notion.site/CSS-e069c1adce7f4b31b2e55a4644bc2e0d

RESUMEN CLASE 24:
ANATOMIA DE UNA
REGLA DE CSS

Entiendo por selector:

1. Selector universal = " * "
2. Selector de atributo id = " # "
3. Selector de atributo class = " . "
4. Selector de tag = " "
   
   
   Para mayor info visita este link: Selectores - CSS

me gustaria que se expliquye mejor en orden la utilizacion de las diferentes etiquetas de estilo

• Selector: indica que elemento quiero modificar.

• Bracket: Son los {} donde se contiene la declaración del estilo.

• Declaración: Se compone de una propiedad y un valor.

Las declaraciones se separan por medio de ;

Vaya que queda bonito 😁:

Es muy importante conocer a detalle la terminología y estructura de HTML y CSS para poder entablar una buena y fluida comunicación profesional entre el equipo de UI/UX y el de desarrollo Frontend.

SELECTOR:
ELEMENTO DE HTML QUE VAMOS A SELECCIONAR O ELEGIR APLICARLE UN ESTILO CONCRETO
PROPIEDAD:
PROPIEDAD - ESTILO QUE VAS APLICAR Y VALOR QUE VA APLICAR

Resumen

A este conjunto de estilos que vas a aplicar, se le llama reglas de CSS. Todo nuestro archivo CSS es un conjunto de reglas.
El selector es decirle al lenguaje qué elemento se quiere modificar.
Dentro de los brackets viene la declaración de los estilos que se compone de la propiedad que le vas a aplicar, y el valor de la propiedad.
Si no aplicamos punto y coma el estilo se va a romper y no se aplicarán de la forma esperada.

Resumen

Cuando definimos estilos estamos definiendo reglas de cómo se deben mostrar nuestras etiquetas.

• Selector

  Etiqueta a la que se aplicarán los estilos.

• Declaración

  Definición de qué valores tienen propiedades visuales de los elementos.

excelente curso! Que manera tan profesional de trabajar con HTML y CSS

Amé este curso. Claro, corto, y al punto. 😄

Una regla de CSS está formada por una parte llamada “selector” y otra parte llamada “declaración” (puede haber una o varias dentro del mismo selector).

La declaración indica “qué hay que hacer” y el selector indica “a quién hay que hacérselo”. Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.

Una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas.
Pagina para leer mas.

Mi resumen de la clase es:

Anatomía de una regla de CSS
para:

.main-nav {
	list-style: none;
}

.main-nav : Es el selector
list-style: none: El conjuntoi se llama la declaración de una propiedad CSS
list-style: Es la porpiedad
none: Es el valor de la propiedad
}

Recordando clases anteriores, los estilos se aplican de arriba hacia abajo, es decir, el estilo que está más abajo modifica los estilos que están más arriba.
Por eso se llaman hojas de cascada 😮

selector->p
declaration-> color: red;
property-> color
property value-> red

El selector, señala a la categoría de elementos que queremos afectar y hay muchas formas de seleccionar a los elementos.

Selector: Hay PseudoSelectores, PseudoClases, PseudoElementos
Es decirle a CSS que elemento quiero modificar.

Property: Estilo que voy a aplicar.

Value: Valor que le voy a dar a la propiedad.

Estructura básica de un NAV

![](

Pasen Link de las Diapositivas
Del profe por favor!

.

Si en este curso te explican hasta los mas minimos detalles, estare feliz de tomar toda la escuela de JS

P (selector) {
(aquí viene la “declaración de estilo”) Estilo de la propiedad: valor del estilo;
}

Anatomía de una regla de CSS en Imagen

Regla en CSS : selector{Declaration(propiedad:property value)}

Que increíble como explica el profe! Es un genio total!!

Asi se desgloza la regla CSS.

Mi resumen:
Selector:
Etiqueta a la que se aplicarán los estilos.

Declaración:
Definición de que estilo y valor que va aplicar.

Selector { (propiedad : valor) declaración

Reglas CSS

#id .clase :estado []atributo *todos

Creo que me hubiese venido bien antes, para entender mejor lo que hacía, pero no es momento de lamentarse, es momento de prácticar

Información resumida de esta clase
#EstudiantesDePlatzi

• Podemos descomponer una regla de CSS en varias partes

• Selector: Aquí definimos a que elemento le vamos a aplicar el estilo

• Abrimos corchetes y allí especificamos la declaración

• La declaración se compone de 2 partes: La propiedad y el valor

• Finalizamos con un ; es importante para que funcione bien

gracias por la explicación

Esta parte a veces me confunde pero poco a poco

.

Me estoy dando cuenta de que por ejemplo al terminar de la linea de codigo de la propiedad , despues del valor se agrega punto y coma , anda mas como observacion les digo que esto tambien passa en el JavaScript

Comparto esta maravilla que me he encontrado por si alguien necesita repasar conceptos o aclarar algunos: https://lenguajecss.com/css/

Muy bien explicado y muy bien detallado.

Selector: Es decirle a CSS que elemento quieres modificar
{ }: Declarar el estilo
Ej: Propiedad = Color:
Evaluar el Color = Red; Blue; Green; etc…

OJO: SIEMPRE HAY QUE PONER LOS DOS PUNTOS, EL PUNTO Y COMA Y LAS LLAVES

Estructuro de una regla en css

p {
… color: red;
}

Selector {
… Property: Property value; <- Declaration
}

• p {} Selector
• color: Property
• red; Property value
• color: red; Declaración

Vamos ⭐️⭐️⭐️⭐️⭐️

• Selector: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo concreto.

• Propiedad: La propiedad es una de las diferentes características que brinda el lenguaje CSS para dar estilos.

• Valor: Cada propiedad CSS tiene una serie de valores concretos, con los que tendrá uno u otro comportamiento.
  Cada una de estas reglas se terminará con el carácter punto y coma

Anatomía del css:
Al terminal la declaración debe terminar en ;
La declaración debe estar dentro de las llaves.
En la declaracion esta la propiedad de lo que queremos cambiar del selector y el valor, por ejemplo el color de las letras de un parrafo o lel tipo de fuente del parrafo.

Declaración de estilo o delcaración de la regla CSS

Selector
|     Propiedad
p {   |
    color: red;
}           |
            Valor
(----Declaracion----)

Creo que esta clase deberia ir antes de la anterior

gran clase

GRACIAS

• El selector es el elemento al cual se aplicar el estilo.
• Dentro de la declaración entre llaves, esta la propiedad y valor que se va ha modificar.

Todo el estilo que aplicamos es llamado Regla CSS. Esta esta dividida en varias partes:
Selector: Dice a CSS que elemento va a modificar.
Declaración de estilos: Esta está compuesta por una propiedad y su valor.

Buen video corto pero bien explicado

Anatomía de los elementos CSS

Nuevamente una explicación clara y sencilla. Felicitaciones al instructor que ha explicado muy claramente el material del curso hasta el momento

Gracias por la aclaración

Luego del selector ponemos los brackets y adentro de los dos brackets viene la parte de la declaracion del estilos, termina con punto y coma.

Es importante aclarar que después de cada valor debes colocar un ;
.
Sin embargo, si es el último valor dentro del bloque, no es necesario colocar el ; y aún funcionará, pero desde mi punto de vista es importante colocarlo.
.
Es solo una anotación que quería hacer porque quizá nos encontremos con eso en algún momento. ¡Te invito a probar como funciona!

Selector, propiedad, valor declararción.

#id, .clase :estado (es un selector dependiente)

Los estilos CSS se aplican a traves de una regla de estilos, cada regla esta conformada por dos bloques bien definidos, estos bloques son:

SELECTOR ------> Este va a determinar que parte de la pagina se ve afectada, este selector puede contener desde una simples etiquetas, como etiqueta <p> parrafo, puede contener una etiqueta <section>, una etiqueta <footer> o puede contener classes e id, inclusive tenemos selectores avanzados que nos permiten aplicar estilos en funcion al estado de una determinada etiqueta. En pocas palabras el selector es donde vamos a colocar a quien queremos que se le apliquen los estilos.

DECLARACION ------> Las declaraciones empiezan con una llave de apertura { y concluye con una llave de cierre }, cada declaracion esta conformado por un bloque o una declaracion propia, cada declaracion esta conformada a su vez por una propiedad y un valor,  se pueden colocar las declaraciones que se necesiten, tomar en cuenta que cada declaracion termina con un punto y una coma ; es recomendable por temas de legibilidad que se coloque una declaracion por linea.

<.Selector {
Property: Property value;
}
/* Regla en CSS*/
> 

IMPORTANTE Algo que puedes aplicar tambien para conocerlos mejor es empezar a trabajar con ellos de forma continua para ir sabiendo que hacen y que son, tal cual como aplicar un algoritmo o un bucle dentro de programacion.

Muchas gracias

Css fue alanzado en el 1997!

Excelente clase!

Corta pero buena la explicación.