Para evitar a repetição do código, usamos várias classes em HTML e CSS. Com o CSS, também podemos definir e estilizar as duas classes juntas e usar várias classes em um elemento, atribuindo -lhes diferentes IDs de classe. Essa abordagem pode ser seguida usando a sintaxe separada por espaço para adicionar várias classes a um elemento HTML.

Neste artigo, aprenderemos a adicionar várias classes a um elemento.

Como usar várias classes no CSS?

Para usar duas ou mais classes em um elemento, cada ID da classe será separado por um espaço.

Você deve seguir a seguinte sintaxe para usar várias classes em um elemento:

entregando ..

Em um único elemento HTML, você pode incluir mais de uma classe separando -os com um espaço. Para sua conveniência, aqui está um exemplo.

Exemplo: Usando várias classes no CSS

No exemplo abaixo, criaremos:

• Um título usando o

  Tag e atribua o nome da classe “cabeçalho”.

• Em seguida, criaremos outro título e o designaremos a duas classes diferentes: “cabeçalho" e "linha”. Esses IDs de classe são separados por um espaço:

Html

Várias classes em um elemento

Agora, vamos para o arquivo CSS e aplicar algumas propriedades CSS listadas abaixo:

• Defina a cor de fundo para o cabeçalho usando a função RGB () como “(69, 51, 151)”.
• Defina o estilo de fonte “itálico”Para o cabeçalho.

Na classe HTML, o primeiro título utiliza o nome da classe “cabeçalho”. Portanto, o estilo especificado na classe especificado será implementado no primeiro título:

.cabeçalho
Background-Color: RGB (69, 51, 151);
estilo de fonte: itálico

Para o "linha”Class, nós temos:

• Defina a cor do cabeçalho usando a função RGB () como “(255, 0, 0)”.
• Aplique linha de decoração de texto como “sublinhado”.

O segundo título utilizará os estilos de ambas as classes: “cabeçalho" e "linha" aula:

.linha
Cor: RGB (255, 0, 0);
linha de decoração de texto: sublinhado;

Após a implementação, verifique o resultado:

A partir da saída, você pode observar que o segundo título utiliza as duas classes CSS.

Conclusão

Para usar várias classes em um único elemento, use diferentes IDs de classe separados por espaços brancos. Usando isso, podemos aplicar diferentes propriedades CSS de uma só vez. Ele nos permite reutilizar a classe onde existem elementos semelhantes. Este artigo explicou como usar várias classes em um único elemento e estilizá -lo junto com um exemplo.