{"id":9726,"date":"2018-05-15T10:15:54","date_gmt":"2018-05-15T13:15:54","guid":{"rendered":"https:\/\/blog.hostinger.io\/pt-tutoriais\/?p=9726"},"modified":"2025-12-18T12:25:31","modified_gmt":"2025-12-18T15:25:31","slug":"criar-site-responsivo-aprenda-como-fazer-usando-classes-no-css","status":"publish","type":"post","link":"\/pt\/tutoriais\/melhores-plataformas-de-ecommerce-5","title":{"rendered":"O que s\u00e3o classes CSS, como us\u00e1-las para estilizar elementos HTML e criar site responsivo"},"content":{"rendered":"

Uma classe CSS (folha de estilo em cascata)<\/strong> é um seletor que permite definir o mesmo estilo para vários elementos HTML simultaneamente. Trata-se de um atributo que simplifica a personalização de qualquer site, pois não é necessário escrever o código individualmente.<\/p>

Além de tornar o código mais limpo e conciso, esse atributo ajuda a manter a consistência do estilo em diferentes elementos. Devido aos seus benefícios, entender as classes CSS é fundamental se você quiser mergulhar no desenvolvimento web.<\/p>

Com isso em mente, este artigo explicará como usar classes CSS para estilizar elementos HTML e criar um site responsivo. Você também aprenderá várias dicas que te ajudarão a dominar o seletor para um desenvolvimento mais eficiente na web.<\/p>

Baixe o Guia de Recursos CSS Completo<\/a><\/p>

\n\n\n\n\n\n\n<\/p>

<\/p>

\n\n\n

\n \n \n <\/svg>\n

\n O Que é Uma Classe CSS?\n <\/p>\n <\/div>\n

A classe CSS é um atributo que permite selecionar vários elementos HTML e definir seu estilo simultaneamente. Isso ajuda a manter a consistência visual e a simplificar o desenvolvimento do site.<\/p>

Por exemplo, em vez de escrever código CSS para alterar a cor do texto de cada elemento de título, os desenvolvedores podem agrupá-los em uma classe e aplicar um único estilo a todos eles.<\/p><\/div>\n\n\n\n<\/p>

Como Usar uma Classe CSS para Estilizar um Elemento<\/strong><\/h2>

Para ajudar você a entender como usar uma classe CSS, esta seção explicará as seis etapas para utilizar esse atributo para modificar elementos específicos em seu arquivo HTML.<\/p>

1. Abra seu Documento HTML<\/strong><\/h3>

Antes de usar uma classe CSS, abra e verifique a estrutura de seu documento HTML. Essa etapa te ajuda a determinar qual elemento deve ser modificado para simplificar o agrupamento.<\/p>

As etapas para localizar o arquivo são diferentes, dependendo de você estar em uma área de desenvolvimento local ou no ambiente de hospedagem do seu site em si.<\/p>

Em um ambiente local, abra o editor de código e selecione o documento por meio da janela do explorador de arquivos. Por exemplo, os usuários do Visual Studio Code <\/strong>(VSCode) podem fazer isso navegando até Arquivo <\/strong>→ Abrir Arquivo<\/strong>.<\/p>

Por outro lado, se você estiver em uma área de hospedagem ativa, abra os arquivos do seu site usando um cliente de protocolo de transferência de arquivos<\/strong><\/a> (FTP) como o FileZilla <\/strong>e faça o download do documento. Em seguida, abra-o localmente usando um editor de texto.<\/p>

No entanto, este método é bastante ineficiente, pois é necessário reenviar o arquivo sempre que definir um novo estilo de CSS para verificar sua aparência no front-end. Se o seu provedor de hospedagem não oferecer um editor integrado no painel de controle, recomendamos a configuração de um host local.<\/p>

Como alternativa, os usuários de hospedagem da Hostinger<\/strong><\/a> podem abrir diretamente o conteúdo HTML de seus sites por meio de um navegador. <\/p>

\"\"<\/a><\/figure>

Para fazer isso, navegue até o hPanel <\/strong>→ Sites <\/strong>→ Gerenciar <\/strong>→ Gerenciador de arquivos<\/strong>. Localize e clique duas vezes no arquivo para abrir o editor de código.<\/p>

\n
\"\"<\/figure>\n<\/div>

2. Identifique o Elemento a Ser Estilizado<\/strong><\/h3>

Vamos verificar os elementos em seu documento HTML para identificar aqueles que você pode categorizar na mesma classe CSS e aplicar as mesmas regras de estilo. Embora você possa selecioná-los de acordo com suas necessidades, há vários aspectos importantes a serem considerados.<\/p>

Idealmente, os elementos que pertencem a uma classe CSS comum devem ter conteúdo semelhante ou uma finalidade idêntica. Por exemplo, talvez você queira agrupar as tags <h2><\/h2<\/strong>>, pois elas compartilham a mesma função para definir os principais subtítulos de um texto.<\/p>

Você também pode aplicar a mesma classe CSS a elementos contidos nas mesmas tags de elemento semântico<\/strong><\/a>. Por exemplo, o conteúdo do cabeçalho geralmente está contido em <header><\/header<\/strong>>.<\/p>

Além dos cabeçalhos, você pode modificar elementos adicionais, como parágrafos usando as tags <p><\/p> <\/strong>e divisões com <div><\/div<\/strong>>.<\/p>

Antes de atribuir uma classe CSS e aplicar estilos, recomendamos que você visualize o conteúdo da página para identificar a estrutura geral dos elementos. Isso ajudará você a determinar as classes necessárias e evitará que você crie muitas classes excessivas.<\/p>

\n\n\n

\n
\n \n \n <\/svg>\n

\n Dica <\/p>\n <\/div>\n

Para verificar a estrutura do código do site com mais detalhes no front-end, use a ferramenta de inspeção de elementos do navegador. Você pode acessá-la clicando com o botão direito do mouse na tela e selecionando Inspecionar<\/strong>.<\/p>\n <\/div>\n \n\n\n\n<\/p>

Se o arquivo estiver no ambiente de hospedagem ao vivo, você poderá fazer isso visitando seu site. Para a área de desenvolvimento local, hospede o arquivo em um host local usando uma stack da web ou use o recurso de visualização do seu editor de código.<\/p>

3. Atribua uma Classe CSS ao Elemento Desejado<\/strong><\/h3>

Depois de decidir sobre os elementos, podemos começar a atribuir as classes CSS. Para isso, adicione o atributo class <\/strong>após a tag de abertura da seguinte forma:<\/p>

<element class=\"nome-da-classe\">content<\/element><\/pre>
Por exemplo, digamos que você deseja atribuir o ID da classe CSS main-paragraph <\/strong>a cada elemento de parágrafo em seu HTML. Aqui está a aparência de todas as tags:<\/p>
<p class=\"main-paragraph\">conteúdo do parágrafo<\/p><\/pre>
Se você aplicar uma classe CSS a um elemento semântico, todos os elementos aninhados dentro dele pertencerão ao mesmo grupo. Considere este exemplo de código:<\/p>
<header class=\"main-heading\">
   <h1>The main heading<\/h1>
      <p>paragraph's content<\/p>
<\/header><\/pre>
Você pode usar a classe main-heading <\/strong>para aplicar estilo aos elementos <h><\/h> <\/strong>e <p><\/p<\/strong>>. Observe que você ainda precisa especificar o conteúdo aninhado no seletor CSS individualmente. Falaremos mais sobre isso na próxima seção.<\/p>
As etapas para adicionar classes CSS no ambiente de desenvolvimento local e na área de hospedagem ativa são as mesmas. Depois de atribuí-las, pressione Ctrl + S <\/strong>em seu editor de código ou pressione o ícone de salvar <\/strong>no canto superior direito se estiver usando o editor do Gerenciador de arquivos <\/strong>da Hostinger.<\/p>
\n
\"identificando<\/figure>\n<\/div>
A este ponto, você não verá alterações no front-end, pois não aplicamos nenhum estilo CSS aos elementos.<\/p>
4. Vá para seu Arquivo CSS<\/strong><\/h3>
Depois de atribuir classes aos elementos, podemos começar a aplicar o estilo. Há dois métodos para fazer isso: usando as tags <style><\/style> <\/strong>em seu documento HTML ou adicionando o código em uma folha de estilo CSS separada.<\/p>
Se você usar apenas o documento HTML, especifique o estilo após a classe para facilitar a leitura do código. Aqui está um exemplo:<\/p>
<body>
   \/* o elemento que você deseja estilizar *\/
   <p class=\"main-paragraph\">o conteúdo do parágrafo<\/p>
   <style>
      \/* o seletor de classe e as regras CSS vão aqui *\/
   <\/style>
<\/body><\/pre>
Esse método é mais conveniente, pois você não precisa alternar entre os arquivos para modificar os seletores de classe CSS e os elementos. No entanto, o desenvolvimento e a manutenção podem ser complicados a longo prazo, pois o código será muito complexo.<\/p>
Por esse motivo, recomendamos criar uma folha de estilo dedicada na mesma pasta que o documento HTML para organizar seu código. Em um ambiente de desenvolvimento local, você pode fazer isso por meio do explorador de arquivos do sistema ou usando o recurso do editor de código.<\/p>
No VSCode, navegue até Arquivo <\/strong>→ Novo arquivo<\/strong>. Enquanto isso, clique no botão Novo arquivo <\/strong>na barra lateral se você usar o Gerenciador de arquivos <\/strong>do Hostinger. Você pode usar qualquer nome, mas certifique-se de que ele termine com a extensão .css<\/strong>.<\/p>
\n
\"novo<\/figure>\n<\/div>
Em seguida, abra seu código HTML e adicione o seguinte na parte superior do arquivo para conectar a folha de estilo. Substitua stylesheet.css <\/strong>pelo nome real do arquivo:<\/p>
<head>
   <link rel=\"stylesheet\" href=\"stylesheet.css\">
<\/head><\/pre>
Isso permite que seu código HTML recupere e aplique automaticamente o código de estilo na folha de estilo.<\/p>
5. Defina a Classe CSS<\/strong><\/h3>
Após atribuir as classes CSS e criar a folha de estilo, adicione a regra de design desejada para elas. Veja a seguir como é a sintaxe do código:<\/p>
.your-class { 
  \/* a regra vai aqui *\/
}<\/pre>
Inicie o código com um seletor de classe CSS que inclua um símbolo de ponto (.<\/strong>) seguido do nome. Em seguida, especifique as propriedades CSS a serem aplicadas no bloco de declaração, entre colchetes.<\/p>
Cada propriedade ocupa uma única linha e termina com um ponto e vírgula. Por exemplo, o CSS a seguir alterará a cor e o peso do texto na classe CSS do parágrafo principal<\/strong>:<\/p>
.main-paragraph { 
   font-weight: bold;
   color: green;
}<\/pre>
Há várias outras propriedades CSS<\/strong><\/a> que definem diferentes tipos de estilo. Por exemplo, você pode alterar a cor do plano de fundo usando background-color <\/strong>e definir um design de cursor específico ao passar o mouse sobre um elemento usando cursor<\/strong>.<\/p>
\n\n\n
\n            \n                \n                    \n                <\/svg>\n                Important\n            <\/span>\n            
\n                Importante! <\/strong>Lembre-se de colocar os seletores e as regras de classe CSS dentro das tags caso você esteja adicionando-os diretamente sob os elementos em vez de usar uma folha de estilo dedicada.\n            <\/p><\/div>\n\n\n\n<\/p>
Para classes CSS aninhadas, especifique seus nomes após os pais. Neste código de exemplo, aplicaremos o estilo a class1<\/strong>, que faz parte da classe my-header<\/strong>:<\/p>
.my-header .class1 {
  \/* a regra vai aqui *\/
}<\/pre>
A mesma sintaxe se aplica a elementos aninhados. Por exemplo, o código CSS a seguir será aplicado ao h1 <\/strong>dentro da classe my-header<\/strong>:<\/p>
.my-header h1 {
  \/* a regra vai aqui *\/
}<\/pre>
Observe que o snippet selecionará o elemento ou a classe especificada aninhada em qualquer nível. Para descendentes diretos, adicione o símbolo de maior que <\/strong>(>) após os nomes das classes-pai.<\/p>
Você também pode selecionar várias classes ou elementos CSS listando-os separados por vírgula. Por exemplo, aplicaremos o estilo a h1 <\/strong>e p<\/strong>, que são descendentes diretos de my-header<\/strong>:<\/p>
.my-header > h1,
.my-header > p {
  \/* a regra vai aqui *\/
}<\/pre>
Após adicionar as regras de CSS, salve o arquivo e visualize a página da web para ver se ela é exibida corretamente no front-end. Recomendamos verificar o design sempre que você adicionar um novo estilo CSS.<\/p>
6. Aplique a Classe a Outros Elementos (Opcional)<\/strong><\/h3>
Quando estiver feliz com o design e garantir que o estilo seja exibido corretamente, retorne ao código HTML para aplicar classes a elementos adicionais.<\/p>
Como você já definiu a classe e o estilo, a seleção de um elemento adicional no final ajuda a manter a consistência do design. Isso lhe dará uma ideia aproximada da estrutura final do site para decidir quais conteúdos devem ter a mesma aparência.<\/p>
Isso também ajuda a minimizar a criação de novas classes, pois você pode reutilizar as classes já existentes. Lembre-se de manter a consistência do tipo de elemento ao reutilizá-los para garantir uma estrutura de código e um design coesos.<\/p>
Por exemplo, se você quiser estilizar um elemento semântico <div><\/div<\/strong>>, atribua-o a uma classe div <\/strong>existente. Você não deve usá-la para outro conteúdo, pois atribuir uma nova classe no futuro pode ser confuso e causar inconsistências no design.<\/p>
Como Criar um Site Responsivo com Classes CSS<\/h2>
Para a responsividade CSS, vamos definir uma classe que só será carregada quando a largura de tela do dispositivo for de 900 pixels ou menos. Com ela, vamos alterar a largura da classe “.menu” para 100% do tamanho da tela do navegador.<\/p>
Um media query que permite fazer isso deve se parecer com este código abaixo:<\/p>
@media only screen and (max-device-width: 900px) {
\/* .menu { width:100%; } *\/
}<\/pre>
Normalmente, não é preciso mudar todas as propriedades da classe CSS. Isso porque os valores de, por exemplo, cor de fundo, cor de texto e similares, não mudam. A menos que você queira que eles tenham algum tipo de mudança mais para a frente. <\/p>
Entretanto, propriedades como largura, altura ou margens são quase sempre mudados. Vamos explicar o exemplo que usamos no Passo 1<\/strong>.<\/p>
Considere a situação em que a largura do menu de um site esteja fixada para 900 pixels. Ao abrir esse mesmo site em um dispositivo com tamanho de tela menor que 900 pixels, o site site ganharia uma barra de rolagem horizontal e o menu não seria mostrado por inteiro.<\/p>
Não é confortável navegar em um site assim e é por isso que reescrevemos o código para adaptar a largura do menu do site para 100%. Isso significa que, qualquer que seja o tamanho de tela do dispositivo, a largura do menu vai ser exatamente a mesma da largura da tela.<\/p>
Exemplos<\/h3>
Se o tamanho da tela for 900 pixels ou menor, é possível configurar uma classe de largura de menus para 600 pixels usando:<\/p>
@media only screen and (max-device-width: 900px) {
\/* .menu { width:600px; } *\/
}<\/pre>
Se o tamanho da tela for 700 pixels ou menor, é possível configurar uma classe de largura de menus para 400 pixels usando:<\/p>
@media only screen and (max-device-width: 700px) {
\/* .menu { width:400px; } *\/
}<\/pre>
Dicas para Dominar as Classes CSS<\/strong><\/h2>
Existem várias práticas recomendadas de web design<\/strong><\/a> cruciais que você deve seguir ao usar classes CSS para ajudar a simplificar a organização do código, garantir a consistência do design e melhorar a eficiência da manutenção.<\/p>
Nomeie Todas as Classes Adequadamente<\/strong><\/p>
O nome da classe CSS deve fornecer informações sobre os atributos adicionados ao elemento para facilitar a identificação. Além de simplificar a manutenção, isso te ajuda a determinar rapidamente qual deles deve ser reutilizado para um elemento específico.<\/p>
Por exemplo, se você quiser adicionar uma classe que altere o tamanho da fonte para 36, o nome ideal seria font-36<\/strong>. Enquanto isso, use bg-blue <\/strong>para criar um estilo que defina a cor de fundo de um elemento como azul.<\/p>
Além disso, não use o mesmo nome de classe, pois seu código de estilo se sobreporá, impedindo que o design seja exibido corretamente.<\/p>
Aproveite Outros Seletores<\/strong><\/p>
Além do seletor de classe, use outros recursos de CSS para atribuir estilos ao seu elemento HTML. Alguns dos métodos comuns de aplicação de design incluem:<\/p>