Posible error en CSS curso HTML espacio y falta punto y coma al final CU00718B

[Manu]

Buenas! Estoy por el capitulo CU00718B del curso de HTML de aprenderaprogramar y he encontrado algo que no me cuadra en la explicación de las listas no ordenadas. Justo en la parte que explica la sintaxis correcta en CSS vemos esto:

Código: [Seleccionar]

<ul style="list-style-type:disc">

<ul style="list-style-type:circle">

<ul style="list-style-type:square">
La duda que me surge es, no falta el punto y coma después del tipo de cada viñeta?

Es decir ....type: disc;"> ....type: circle;">

Aparte de eso, me doy cuenta de que unas veces hay espacio después de los dos puntos y otras no.

...type:(espacio)circle
...type:circle

Son esto dos errores en el manual o me los he inventado yo? jajaja

Lo curioso es que he probado a ponerle el punto y coma a quitárselo, pero el resultado sigue siendo correcto (o al menos el navegador me muestra la lista de forma correcta), incluso he probado a quitar los espacios que comentaba mas arriba y el resultado sigue pareciendo correcto.

No lo entiendo!!

Espero que se comprendan bien las dos dudas (y el resultado probando a hacer lo contrario). Pasan en mas sitios pero ahora no recuerdo otros porque no he ido apuntándolos.

Un saludo!

[Kabuto]

Hola, el punto y coma no es obligatorio cuando aplicamos estilo solo a una propiedad.

Por ejemplo, a este párrafo le ponemos fondo rojo "tomate"

Código: [Seleccionar]

<p style="background-color:tomato">Ejemplo de parrafo.</p>
No necesita el punto y coma.

En cambio, si además queremos poner el color de texto en blanco:

Código: [Seleccionar]

<p style="background-color:tomato color:white">Ejemplo de parrafo.</p>
Esa línea NO va a funcionar, porque estamos alterando dos propiedades sin separarlas con punto y coma, entonces el navegador no sabe donde comienza una indicación y donde termina la otra.

Esa es la función del punto y coma, separar las instrucciones unas de otras:

Código: [Seleccionar]

<p style="background-color:tomato; color:white">Ejemplo de parrafo.</p>

Sobre el espacio en blanco, son irrelevantes, el navegador los ignora. Puedes no ponerlo, poner uno, poner veinte...., no importan.
Va a funcionar igual:

Código: [Seleccionar]

<p style="background-color:                  tomato; color:white">Ejemplo de parrafo.</p>

Lo del espacio en blanco queda a gusto del programador. Poner un espacio en blanco puede ser útil para que sea más legible a simple vista, para que la propiedad que alteramos quede separada del valor que le asignamos.
Habitualmente estaremos usando algún editor de texto que resalte la sintaxis con colores, así que ya resultará legible de por sí.

Pero nunca sabemos si en algún momento vamos a tener que editar un código HTML con un editor más simple, tipo Bloc de Notas.
En ese caso, se agradece un montón si el código HTML utiliza espacios en blanco e indentaciones, que son cosas que al navegador le da igual y las ignora, pero para el ojo humano supone la diferencia entre un elegante texto legible y un horror de instrucciones apelotonadas.

[Manu]

Muchísimas gracias, Kabuto! Queda muy claro.

Una pequeña duda sobre lo que comentas:

Por ejemplo, "background-color" es lo que se llamaría propiedad.

Y valor sería, en este caso, el color asignado.

Correcto?

Y, por lo tanto cualquier cosa que tengamos entre las comillas es una propiedad seguida de dos puntos y el valor de la propiedad.

Verdad?

Estas denominaciones se explican en el curso de CSS?

Lo digo porque cuando lees a gente que sabe, como tu, sin duda van a denominar cada cosa por su nombre. Y no es lo mismo decir "eso que aparece entre comillas", que "la propiedad seguida de su valor".

Poco a poco...! jajajaja

Un saludo!

[Kabuto]

Uy, pues no creas que tengo tanta sapiencia en diseño web.
Seguro que cuando completes el curso sabrás más que yo je je..


Pero sí, para aplicar estilos a los elementos HTML invocamos una o varias de sus "propiedades" y le asignamos un nuevo "valor".
En el curso CSS se explica así:

[Manu]

Una imagen vale mas que mil palabras.

Todo muy claro.

Me acordare de ti cuando este creando webs en Google...

Muchas gracias!

Un saludo