CSS acrônimo de “Planilha em estilo cascata”É uma linguagem de design que define como projetar uma página da Web atraente. Ele descreve a aparência e a formatação de um site criado em uma linguagem de marcação. Geralmente, o CSS é usado junto com HTML para definir os estilos de sites e interfaces de usuário.

Planilha em estilo cascata

Cascading significa olhar, Estilo significa design no elemento HTML/ adicionar estilo aos documentos da web e Folha significa página e.g. Documento da página da web.

Tipos de CSS

CSS pode ser usado de três maneiras:

• CSS embutido: O CSS embutido implementa o estilo em uma linha.
• CSS interno: O CSS interno Aplique um estilo especificado em uma única página.
• CSS externo: O CSS externo é um arquivo separado e pode ser usado por vários documentos/páginas HTML.

Para esse fim, basta importar o link externo do arquivo CSS na seção principal.

Sintaxe CSS

Vamos dar uma olhada no seguinte estilo CSS para ter uma melhor compreensão da sintaxe do CSS:

No snippet acima, P é um seletor que aponta para um elemento HTML que você deseja estilizar. Enquanto “Background-Color” é uma propriedade e “ouro” é o seu valor.

Da mesma forma, "tamanho da fonte" e "alinhamento de texto" são propriedades, enquanto "médio" e "correto" são valores dessas propriedades.

Exemplo 1: Este exemplo fornecerá uma visão aprofundada de como o CSS embutido funciona:

Bem -vindo ao Linuxhint.com

O melhor site para ler artigos de alta qualidade

O script acima implementou algum estilo no primeiro

Elemento usando CSS embutido. Ele exibirá a seguinte saída:

Neste exemplo, temos apenas dois

Elementos e temos que implementar o estilo em apenas um elemento, então, utilizamos o CSS embutido. Portanto, sempre que precisamos estilizar alguns elementos HTML, podemos usar CSS embutido para cada elemento.

Mas e se tivéssemos centenas de elementos html em uma página e.g. Temos centenas

Portanto, quando precisamos implementar um estilo único em toda a página, usaremos o CSS interno.

Exemplo 2: O exemplo a seguir implementará a mesma cor de fundo, cor de texto para todo o corpo do documento HTML:

Bem -vindo ao Linuxhint.com

O melhor site para ler artigos de alta qualidade

O trecho acima fornecerá a seguinte saída:

Agora, e se tivermos que estilizar mais de uma página? Nesses casos, o CSS externo será implementado. Apenas um único arquivo pode modificar toda a aparência do site. Portanto, é recomendável que sempre use CSS externo.

Se você está trabalhando com CSS externo, deve ter para determinar o no seção.

Exemplo 3: Este exemplo criará um arquivo CSS para definir o estilo. O link para este arquivo será fornecido na seção principal. Os arquivos HTML e CSS são fornecidos:

Externo.html

Bem -vindo ao Linuxhint.com

O melhor site para ler artigos de alta qualidade

Externo.CSS

corpo
Background-Color: Brown;
Cor: Goldenrod;
estilo de fonte: itálico;

H1
cor preta;
Alinhamento de texto: centro;

A saída verificará se o arquivo CSS externo está vinculado ao arquivo html corretamente:

Ordem de estilo em cascata

Agora você pode ter uma pergunta? E se usarmos estilos CSS embutidos, internos e externos em uma página da web? Então qual deles será implementado? Qual estilo tem a máxima precedência?

Bem! Se houver um conflito na declaração de estilo CSS, o CSS embutido substituirá o CSS interno que, por sua vez, substituirá o CSS externo. Isso significa que o CSS embutido tem maior precedência do que o CSS interno e externo. Os estilos padrão do navegador têm a menor precedência.

Se os vários estilos CSS forem determinados no mesmo nível de precedência, o estilo mais próximo do elemento alvo terá maior precedência.

Exemplo-4: Vamos considerar o exemplo a seguir que determina os vários estilos:

Externo.Arquivo CSS

corpo
Background-Color: Brown;
Cor: Goldenrod;
estilo de fonte: itálico;

Precedência.Arquivo html

Bem -vindo ao Linuxhint.com

O melhor site para ler artigos de alta qualidade

O código acima determina três estilos que a saída verificará se o CSS embutido tem maior precedência:

Vantagens

1. Ele economiza muito tempo durante o desenvolvimento de qualquer página da web, porque podemos usar um arquivo CSS em vários arquivos HTML. Por exemplo, temos vários arquivos HTML, então temos que lidar com a aparência deles, estilo etc. Em vez de implementar o estilo em cada arquivo HTML separadamente, é melhor importar o arquivo CSS em qualquer documento HTML que você deseja estilizar.
2. As páginas da web são carregadas rapidamente porque o CSS não utiliza atributos HTML repetidamente, em vez disso, cria apenas uma regra CSS para uma tag e a implementa a todas as suas ocorrências no arquivo html.
3. CSS fornece manutenção fácil, pois podemos lidar com isso em um único arquivo. Suponha que tenhamos dez parágrafos em um documento e queremos mudar seu estilo. Em vez de fazê -lo dez vezes, podemos fazê -lo uma vez no arquivo CSS e será aplicado a todas as dez ocorrências do

   elemento.

4. CSS fornece compatibilidade. Isso significa que é compatível com vários dispositivos.

Conclusão

CSS é uma linguagem de design que cria páginas da web atraentes. É usado para criar estilos e personalizar elementos HTML disponíveis em uma página da web. Melhora a velocidade do site e fornece fácil personalização de qualquer página da web.

Neste post, você saberá o que é CSS, como usar o CSS e quais são as principais vantagens do CSS. Além disso, você aprenderá sobre a ordem dos estilos em cascata.