Diferencias entre Class y ID - Ejemplo de uso en HTML y CSS

Un elemento HTML sólo puede tener un ID que pertenezca a ese único elemento, mientras que varios elementos pueden usar un nombre de clase.

Diferencias entre Class y ID - Ejemplo de uso en HTML y CSS | Aprender HTML | Un elemento HTML sólo puede tener un ID que pertenezca a ese único elemento, mientras que varios elementos pueden usar un nombre de clase
COMPÁRTELO:

Puedes definir sus propios selectores en forma de selectores de clase e ID.

El beneficio de esto es que puede tener el mismo elemento HTML, pero presentarlo de manera diferente según su clase o ID.

En el CSS, un selector de clase es un nombre precedido por un punto (".") Y un selector de ID es un nombre precedido por un carácter hash ("#").

Entonces, el CSS podría verse algo así como:


#top {
    background-color: #ccc;
    padding: 20px
}

.intro {
    color: red;
    font-weight: bold;
}

El HTML se refiere al CSS utilizando los atributos idy class. Podría verse más o menos así:


<div id="top">
	<h1>Cerry de chocolate</h1>
	<p class="intro">Esta es mi receta para hacer curry con chocolate</p>
	<p class="intro">Mmm mm mmmmm</p>
</div>

La diferencia entre una ID y una clase es que una ID se puede usar para identificar un solo elemento, mientras que una clase se puede usar para agrupar más de uno.

También puede aplicar un selector a un elemento HTML específico simplemente indicando primero el selector HTML, por p.mermelada { /* lo que sea */ } lo que solo se aplicará a los elementos de párrafo que tengan la clase "memelada".

Diferencias entre Class y ID - Ejemplo de uso en HTML y CSS

Un elemento HTML sólo puede tener un ID que pertenezca a ese único elemento, mientras que varios elementos pueden usar un nombre de clase.
🤖

ChatGPT Gratis
Realiza preguntas sobre cualquier tema

¡Participa!

¡Compártelo en tus Redes Sociales!
Compartir en:

CITAR ARTÍCULO


Para tareas, investigaciones, tesis, libros, revistas, blogs ó artículos académicos

Referencia en Formato APA:

Delgado, Hugo. (2020).
Diferencias entre Class y ID - Ejemplo de uso en HTML y CSS.
Recuperado 27 de marzo, 2024, de
https://disenowebakus.net/class-id.php

Profesor en la Universidad de Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Profesional en Desarrollo Web y Posicionamiento SEO desde hace más de 15 años continuos.
Contamos con más de 200 constancias y reconocimientos en la trayectoria Académica y Profesional, incluidos diplomados certificados por Google.

CONTINÚA APRENDIENDO

Menú categoría


Aprender HTML

TAMBIÉN MERECE LA PENA VISITAR:

¿Te gustaría aprender más sobre Diseño Web?

Conoce todos los cursos y tutoriales que tenemos para ti completamente gratis
Aprender Diseño Web

¿Todavía no encuentras lo que necesitas?

Usa nuestro buscador interno para descubrir más información
Contenido relacionado:

1 Comentario en "Diferencias entre Class y ID - Ejemplo de uso en HTML y CSS"

  1. Avatar usuario
    Carlos Sánchez

    muchas gracias ya comprendi la diferencia entre ambos tipos.

 

Deja tu Comentario

PATROCINADOR

Tu negocio también puede aparecer aquí. Más información
Anunciate aquí

Tu navegador ha bloqueado la publicidad.
Por favor 🙏 permite visualizar los anuncios para poder acceder, gracias.