CSS é uma linguagem de estilo usada para modificar a aparência das páginas da web. Está entre uma das tecnologias mais notáveis ​​que são usadas para construir uma página da web. Agora você deve estar se perguntando como o CSS governa o estilo? Bem! O CSS faz isso certificando -se de que como os elementos aparecerão em uma página da web como a cor do texto, a cor de fundo, o estilo da fonte, etc. Portanto, uma estrutura apropriada deve ser seguida para escrever um código CSS eficaz.

Este artigo apresentará um guia passo a passo para entender como o CSS está estruturado?

• a sintaxe básica do CSS.
• Como implementar CSS para um documento HTML.
• Como trabalhar com seletores CSS seguidos pela especificidade do seletor.
• Espaços brancos em CSS.
• Comentários no CSS.

Vamos começar com a sintaxe do CSS.

Sintaxe de CSS

A sintaxe básica do CSS inclui um seletor junto com seu bloco de declaração. O bloco de declaração consiste em duas coisas que eu.e. uma propriedade CSS com seu valor.

Na figura acima, P é um seletor que está apontando para um parágrafo do elemento HTML, a cor é uma propriedade CSS e o verde é o valor atribuído à propriedade Color.

Como aplicar CSS ao documento HTML

CSS pode ser aplicado a qualquer documento HTML de três maneiras que eu.e. Usando estilos embutidos, usando uma folha de estilo interno ou folhas de estilo externo. Este artigo explicará o funcionamento dos três métodos de estilo com a ajuda de exemplos.

CSS embutido

O método de estilo embutido é mais comumente utilizado para implementar um estilo único em um único elemento. Portanto, temos que usar o atributo "estilo" em um elemento HTML para implementar qualquer propriedade CSS para o elemento especificado.

Exemplo

O exemplo abaixo implementa o estilo embutido no

elemento:

CSS embutido

O código acima define a cor do texto como vermelha, a cor de fundo como azul e alinha o texto no centro:

CSS interno

O método de estilo CSS interno especifica o estilo na tag e dentro da seção da cabeça. É usado para implementar algum estilo específico em toda a página.

Exemplo Este exemplo descreve uma folha de estilo interna para todos os

elementos

CSS interno

Bem -vindo ao Linuxhint.com

Bem -vindo ao Linuxhint.com

Bem -vindo ao Linuxhint.com

A saída mostra que o estilo especificado no elemento de estilo implementado em todos os

Elementos:

CSS externo

Como o próprio nome sugere, uma folha de estilo externo é um arquivo CSS separado que pode ser usado para modelar o site inteiro. Nesse caso, a referência do arquivo CSS externo será adicionada ao arquivo html.

Exemplo Este exemplo define estilos diferentes para vários elementos HTML e esses estilos serão implementados usando uma folha de estilo externo.

Html

O arquivo HTML inclui um link para um arquivo CSS externo:

CSS externo

Bem -vindo ao Linuxhint.com

Bem -vindo ao Linuxhint.com

Bem -vindo ao Linuxhint.com

CSS

H2
Cor: ouro;
Background-Color: Black;

P
cor laranja;
Background-Color: Seagreen;
Alinhamento de texto: centro;

O código acima produzirá a seguinte saída:

Vamos concluir o que aprendemos nesta seção, use o CSS embutido apenas se você precisar estilizar apenas alguns elementos HTML, o embutido não é considerado uma boa abordagem, porque em caso de manutenção talvez você precise editar várias coisas para um estilo. Use estilo interno para sites de uma página, no entanto, quando você estiver trabalhando em um site amplo que possui mais de uma página, use uma folha de estilo externo.

Seletores CSS

Os seletores são usados ​​com destino dos elementos HTML que você deseja estilizar e existem vários tipos de seletores de CSS, como:

• CSS Seletor de elementos tem como alvo os elementos HTML com base em seu nome.
• CSS seletor de identificação tem como alvo os elementos HTML com base em seu ID.
• CSS seletor de classe tem como alvo o elemento HTML com base em um atributo de classe.
• CSS seletor universal alvo todos os elementos presentes na página.

Exemplo O estilo de código abaixo é diferente elementos HTML diferentes i.e. H2 e P usando seletor de elementos, seletor de classe e seletor de ID, respectivamente.

Html

H2 usando seletor de elementos

parágrafo usando seletor de classe

Parágrafo usando seletor de identificação

CSS

H2
Background-Color: Black;
Cor: Goldenrod;
Alinhamento de texto: centro;

.estilo
Background-Color: Black;
cor verde;
Alinhamento de texto: centro;

#style1
Background-Color: Black;
cor vermelha;
Alinhamento de texto: centro;

Teremos a seguinte saída:

Especificidade

Às vezes ocorre um confronto eu.e. Dois seletores/estilos direcionados ao mesmo elemento html o que acontecerá nesse caso e qual seletor receberá a preferência. Bem! Temos uma regra geral para a especificidade

• !importante tem maior especificidade para que ele substitua tudo
• Inline tem uma segunda maior especificidade, para que possa substituir tudo, exceto o !importante
• O seletor de identificação tem maior especificidade entre outros seletores, mas menor que !importante e embutido
• Em seguida, seletor de classe, seletor de atributos e pseudo-classe
• Seletor de elementos e pseudo-elementos
• O seletor universal tem a menor especificidade
• Se a mesma regra for repetida em uma folha externa, a última será implementada

Vamos entender a especificidade com um exemplo:

Exemplo O exemplo abaixo dado explicará o conceito de especificidade.

Html

Bem -vindo ao Linuxhint.com

Exemplo de especificidade

CSS

P
cor laranja !importante;

#style1
cor vermelha;

.estilo
cor verde;

P
cor azul;

H1
cor azul;

H1
cor verde;

A saída será:

No exemplo acima, observamos os seguintes pontos:

• O

  elemento é direcionado por !IMSTRAÇÃO, ID, CLASSE e SELETOR DE ELEMENTOS mas o

  o elemento é estilizado de acordo com o !importante que mostra isso !importante tem maior especificidade.

• Existem dois seletores de elementos diferentes para definir dois estilos diferentes para o

  Elemento, o seletor de elementos que vem no final recebe a prioridade.

Para uma melhor compreensão, embaralhe a ordem dos seletores e observe a diferença!

Espaços brancos em CSS

No CSS, os navegadores ignoram os espaços brancos, no entanto, o uso correto dos espaços brancos pode melhorar a legibilidade do código.

Exemplo: Este exemplo explica como os espaços brancos/ quebras de linha aumentam a legibilidade do código:

Html

H2 usando seletor de elementos

Exemplo de especificidade

CSS

.estilo
Background-Color: Black; cor verde; Alinhamento de texto: centro;

#style1
Background-Color: Black;
cor vermelha;
Alinhamento de texto: centro;

No seletor de classe, todo o código é escrito na mesma linha enquanto no seletor de identificação, escrevemos cada propriedade em uma nova linha. Os espaços de branco/quebras de linha aumentam a legibilidade do código. A saída verifica se o navegador não se importa com a forma como você escreveu o código e os dois seletores executados com sucesso:

Comentários no CSS

No CSS, todas as seções comentadas serão incluídas nos "/*" e "*/". Tudo o que estiver dentro dos comentários será negligenciado pelo navegador. Alguns detalhes extras podem ser adicionados nos comentários para entender o código.

Exemplo Este exemplo adicionou alguns comentários que nos ajudarão a entender o código.

Html

Primeiro parágrafo

Segundo parágrafo

CSS

/* Seletor de classe*/
.estilo
Background-Color: Black;
cor laranja;
Alinhamento de texto: centro;

/* seletor de identificação*/
#style1
Background-Color: Black;
cor vermelha;
Alinhamento de texto: centro;

O código acima gera a seguinte saída:

A saída verifica se os comentários fornecem uma melhor compreensão do código sem afetar os resultados.

Conclusão

A estrutura básica do CSS inclui sintaxe básica de selecionar o elemento HTML usando seletores CSS e modelar o elemento selecionado usando as propriedades CSS.CSS pode ser implementado em um arquivo html de três maneiras que eu.e. estilo embutido para definir o estilo para um elemento específico, estilo interno usando tag e adicionar arquivo CSS externo.

Este artigo discute todos os princípios básicos para estruturar um arquivo CSS. A partir da sintaxe básica do CSS e depois, explica os diferentes tipos de seletores CSS e CSS. Além disso, explica o conceito de especificidade no CSS e conclui que entre todos os seletores de identificação de seletores CSS possuem maior especificidade. Finalmente, explica o significado dos comentários e espaços brancos no CSS.