Crie várias classes em HTML

1. Atribuir várias classes a um contêiner em HTML
2. Atribuir várias classes a um contêiner em HTML para escrever CSS eficiente

Este artigo apresentará como criar várias classes em HTML. O artigo discutirá os benefícios do uso de várias classes em HTML.

Atribuir várias classes a um contêiner em HTML

Em HTML, frequentemente vimos uma classe atribuída a um contêiner. Podemos atribuir uma classe nos elementos HTML com o atributo class e depois escrever o valor. Podemos criar uma classe em nível de bloco e elementos inline. Podemos criar classes para as diferentes tags HTML como <img>, <p>, <h1> e muitos mais. Geralmente, podemos criar um contêiner e atribuí-lo a uma classe e estilizar o contêiner com CSS. Podemos selecionar a classe de contêiner com . Seletor de CSS. Vamos ver um exemplo disso.

<div class ="box">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

Criamos um elemento div com uma classe box no exemplo acima. Temos alguns conteúdos dentro do div. Em CSS, selecionamos a classe box e aplicamos alguns estilos a ela. Criamos uma caixa com alguma altura e largura. Possui uma borda preta.

Também podemos atribuir duas classes a um contêiner em HTML. Para isso, devemos escrever os dois nomes das classes, um após o outro separados por espaços em branco. Em seguida, podemos definir o estilo das classes que contêm o mesmo contêiner individualmente.

Por exemplo, crie um div conforme mostrado no exemplo acima. Escreva as duas classes box e wrapper separadas por espaços em branco para o div. Em CSS, selecione a classe box primeiro e escreva a propriedade border. Dê o valor como 2px solid black para a propriedade border. Em seguida, forneça a altura e largura de 200px. Em seguida, selecione a classe wrapper e forneça o valor de 20px à propriedade margin.

Adicionamos uma margem de 20px ao contêiner usando duas classes no exemplo abaixo.

Código de exemplo:

<div class ="box wrapper">
    <p> Hello World </p>
</div>

.box{
    border: 2px solid black;
    height:200px;
    width:200px;
}

.wrapper{
    margin:20px;
}

Atribuir várias classes a um contêiner em HTML para escrever CSS eficiente

Aprendemos como podemos usar várias classes em um contêiner. Agora, precisamos entender a vantagem de seguir essa abordagem. Podemos usar várias classes em um contêiner quando algumas classes têm atributos idênticos. Podemos estilizar as classes comuns uma vez e estilizar as classes individuais separadamente. Assim, podemos escrever o CSS de forma eficiente.

Por exemplo, crie três elementos div em HTML. Para cada um dos elementos, escreva box como o nome da primeira classe. Em seguida, escreva os nomes das classes redBox para o primeiro div, greenBox para o segundo e blueBox para o terceiro div. A seguir, em CSS, selecione a classe box e forneça a altura e largura de 200px. Defina a margem de 20px. Agora, selecione o nome da classe individual e forneça a respectiva cor de fundo. Selecione a classe redBox e defina a propriedade background-color como red. Repita o mesmo para as demais classes com as respectivas cores como cor de fundo.

No exemplo abaixo, identificamos os atributos comuns dessas três caixas e criamos uma classe comum caixa. Devido a isso, não precisamos escrever os estilos repetitivos para cada uma das caixas. Também atribuímos os contêineres com as classes individuais, por meio das quais podemos estilizar as caixas com cores exclusivas. Dessa forma, podemos usar várias classes para escrever códigos CSS eficientes.

Código de exemplo:

<div class ="box redBox"></div>
<div class ="box greenBox"></div>
<div class ="box blueBox"></div>

.box{
    height:200px;
    width:200px;
    margin:20px;
}

.redBox{
    background-color:red;
}

.greenBox{
    background-color:green;
}

.blueBox{
    background-color:blue;
}