Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

[Duda] Puedo usar clase y id juntos?

Hola, buenas noches.

De acuerdo a lo indicado por el profesor, no es una buena práctica usar las etiquetas de html para las referencias de estilo, entonces me surge la siguiente duda: Todos los párrafos tienen un estilo definido en el archivo css

p{
    text-align: center;
}

En caso de que yo quiera crear una clase para no usar la etiqueta p, pero uno de los párrafos tiene un id, podría también agregar la clase? Este es el párrafo al que hago referencia:

 <p id="mision"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a nuestros clientes".</strong></em></p>

Lo hice de esta manera en el archivo html, pero no sé si está bien.

 <p class="parrafos" id="mision"><em>Nuestra misión es: <strong>"Proporcionar autoestima y calidad de vida a nuestros clientes".</strong></em></p>

Gracias y saludos!

3 respuestas

Hola Janis!

tanto las etiquetas Class como las id son para diferenciar estilos a elementos especificos de un website. La diferencia más notoria (y que me ayuda a entender cuándo aplicar) es que un id es único en toda la página, mientras que class puede ser compartida por varios elementos.

Ejemplifiquemos un poco: ID se utilizará cuando necesitemos aplicar un estilo específico a un solo elemento de la página. Podría ser a un botón de "Comprar ahora"

<button id="boton-comprar">Comprar ahora</button>
#boton-comprar {
  background-color: #FFC107;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
}

Mientras que, por otro lado, la etiqueta Class se podría aplicar el mismo estilo a varios elementos de la misma categoría. Por ejemplo si hay varios botones en la web que deberían de tener el mismo estilo y generen coherencia en tu website.

<button class="boton-estilo">Botón 1</button>
<button class="boton-estilo">Botón 2</button>
<button class="boton-estilo">Botón 3</button>
.boton-estilo {
  background-color: #2196F3;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  margin-right: 10px;
}

Recordatorio (para mí también): El uso adecuado de class e id facilitará en un futuro la organización y mantenimiento de nuestro código.

Espero haberte ayudado.

Muchas gracias Alejandro

siempre las puedes usar depende del estilo que quieras llevar