Como todos sabemos que HTML e CSS andam de mãos dadas para criar um design de site responsivo e atraente, mas às vezes precisamos aplicar as mesmas propriedades CSS a várias tags HTML de acordo com o requisito de design. Agora surge a pergunta, o que fazemos em tal situação? Aqui, as aulas CSS chegaram para nos salvar de escrever o mesmo código CSS várias vezes.

A classe CSS é o principal player na adição de várias propriedades a um elemento ou em toda a página da web. Tendo em vista a importância da classe CSS, este artigo tem como objetivo fornecer uma visão da classe CSS com os seguintes resultados de aprendizado:

• O que é uma classe CSS
• Como usar várias classes em uma única tag html
• Classe CSS para tag html específica

O que é uma classe CSS

No CSS, a classe é usada para definir um conjunto de propriedades para aplicar as propriedades CSS em massa. Uma classe pode ser usada por várias tags HTML por vez, o que significa que não precisamos escrever as mesmas propriedades CSS em nosso código HTML várias vezes, basta usar a classe em vez disso. Uma classe é definida com o grupo de propriedades CSS. A sintaxe geral da classe CSS é fornecida abaixo:

.nome da classe
Propriedades do CSS

No CSS, um ponto (.) é usado para definir um nome de classe e as propriedades CSS são então fechadas em aparelhos encaracolados.

Como criar uma classe CSS

Principalmente, a classe CSS é usada para incluir um conjunto de propriedades CSS e depois aplicar essas propriedades chamando a classe. O código a seguir explica como as classes CSS são criadas.

Classe CSS

Este é o primeiro parágrafo para o tutorial de classe

Este é o segundo parágrafo para o tutorial de classe

No exemplo acima, criamos três classes CSS, recipiente, Centro e cor. Essas classes são aplicadas no ,

, e

tags respectivamente.

Saída

Na classe de contêiner de saída acima, especifica a altura e a largura do recipiente, também coloque uma borda enquanto a classe de cor muda a cor da fonte e a classe central alinham o texto ao centro.

Como usar várias classes em htmltag único

No CSS, podemos usar várias classes em uma única tag html que ajuda a modelar o HTML com mais eficiência. O exemplo a seguir demonstra esse conceito melhor.

Classe CSS

Este é o primeiro parágrafo para o tutorial de classe

Este é o segundo parágrafo para o tutorial de classe

Este é o terceiro parágrafo para o tutorial de classe

No código acima, cinco classes CSS são criadas. O recipiente A classe é aplicada na tag, enquanto o restante das quatro classes é aplicado no

Tag. Além disso, quatro classes CSS diferentes são aplicadas em um único

tag (último

Saída

Na saída acima, o terceiro parágrafo é mostrado com a aplicação de várias classes CSS de uma só vez.

Como usar aulas em HTML

Também podemos especificar uma classe CSS para uma tag HTML específica. Esse tipo de classe é útil quando queremos aplicar o mesmo estilo em uma tag específica toda vez que é usada. O exemplo a seguir ajuda você a entender melhor.

Exemplo

Classe CSS

Este é o primeiro parágrafo é escrito dentro da tag span

Este é o segundo parágrafo para o tutorial de classe

Este é o terceiro parágrafo para o tutorial de classe

Neste exemplo, criamos uma classe de cores especificamente para

tag e aplicou -o tag e também

.

Saída

A saída acima mostra claramente que a classe colorida só funcionou

tag porque é criado especificamente para

Conclusão

No CSS, a classe é um atributo usado para aplicar várias propriedades CSS em tags html. Uma única classe CSS pode ser aplicada em várias tags HTML e vice -versa. O ponto (.) Símbolo identifica uma classe CSS. Neste artigo, aprendemos sobre aulas de CSS, como usar várias classes CSS em uma única tag html e classe CSS para htmltag específico. Além disso, a mesma classe CSS pode ser usada por várias tags por vez.