Cómo eliminar viñetas de estilo de lista en CSS

Por defecto, la etiqueta

de lista desordenada en HTML crea una lista de elementos precedidos por una viñeta redonda. En ciertas situaciones, puedes querer eliminar las viñetas por completo —por ejemplo, para mantener el diseño limpio sin la distracción de la viñeta, o si usas
para generar un menú desplegable. Para lograr esto, usa el atributo de estilo CSS "list-style-type", parte de las especificaciones CSS desde la primera versión.

Paso 1

Abre el archivo .html o .htm que contiene la lista desordenada cuyas viñetas quieres quitar. Usa un editor de texto plano como Bloc de notas para evitar errores en el código HTML.

Paso 2

Desplázate al código que inicia la lista desordenada, marcada por una etiqueta "

". Añade el siguiente código después de "ul" y antes de ">": style="list-style-type: none;". El código debería verse así: "
".

Paso 3

Guarda el archivo HTML y cierra el editor. Ábrelo en tu navegador para verificar que las viñetas se han eliminado.

Consejo

Si quieres quitar viñetas de todas las listas desordenadas en la página, añade esta línea entre las etiquetas "" y "" en el código fuente HTML: "".