CSS significa “Planilha em estilo cascata”. É um idioma utilizado para definir a apresentação de páginas da web. É usado principalmente para estruturar e estilizar as páginas HTML, como ajustar o tamanho da fonte, a borda do elemento, a posição e muito mais. Mais especificamente, o CSS é uma parte importante do desenvolvimento da web que torna as páginas da web atraentes e fáceis de usar.

Este post discutirá o básico do CSS e seus usos.

Para que são usados ​​o CSS para?

CSS é utilizado para especificar o layout e o estilo das páginas da web. Ele controla o estilo de uma página da web com a ajuda de muitas propriedades CSS.

Tipos de CSS

Os três tipos de CSs a seguir são:

• CSS embutido
• CSS externo
• CSS incorporado

O que é CSS embutido?

No HTML, um CSS embutido é incorporado diretamente com o elemento com a ajuda do “estilo”Atributo. É utilizado para ajustar o estilo exclusivo para um elemento específico.

Exemplo
O exemplo abaixo demonstra uma página HTML que aplica um CSS em linha ao “

" elemento:

Linuxhint

Aqui está a explicação das propriedades do CSS acima mencionadas dentro do “estilo”Atributo:

• ““cor”Define a cor da fonte.
• ““família de fontes”Aplica o estilo de fonte.
• ““alinhamento de texto”Define o alinhamento do texto no centro, esquerda ou lado direito.
• ““tamanho da fonte”Determina o tamanho da fonte do elemento.

Saída

O que está incorporado CSS?

Quando as propriedades do CSS são declaradas no “”Elemento do documento HTML, esse tipo de CSS é referido como CSS incorporado.

Exemplo
No exemplo fornecido, incorporamos o CSS no HTML:

Linuxhint

Pode -se observar que acessamos o html “

”Elemento por nome da tag e aplique as propriedades da cor, a família, o alinhamento de texto e o tamanho da fonte, como discutido anteriormente.

Saída

O que é CSS externo?

A folha de estilo externo refere -se ao CSS externo, que é escrito em um arquivo separado. Este arquivo CSS está então vinculado ao arquivo HTML usando o “”Elemento na seção da cabeça.

Exemplo
Primeiro, crie um arquivo HTML e especifique o “”Elemento junto com os atributos“ rel ”e“ href ”. O "rel”Atributo Especifique a relação entre HTML e o documento vinculado e o“Href”O atributo é usado para definir a fonte do arquivo:

Linuxhint

CSS
Adicione o trecho de código abaixo no “estilo.Arquivo CSS ”:

H1
Cor: Darkred;
Fonte-família: Fantasia;
Alinhamento de texto: centro;
Size da fonte: 60px;

Saída

O que são seletores CSS?

Os elementos HTML que você deseja estilo podem ser selecionados utilizando um seletor CSS. Alguns dos principais utilizados vários seletores no CSS estão listados abaixo:

• Seletores simples
• Seletores de pseudo-classe
• Seletores de atributos
• Seletores de combinadores
• Seletores de pseudo-elementos

Vamos dar um exemplo de alguns seletores para um melhor entendimento.

Exemplo: Como usar seletores CSS simples?
Os seletores simples selecionam os elementos com base no ID, nome ou classe. Os blocos de código abaixo demonstram o exemplo de seletores simples:

• Adicione um “”Elemento com a classe“caixa”.
• Então, adicione “

  ”Elemento dentro do“ ”:

Linuxhint

CSS ID Seletor
O seletor de identificação refere -se ao “eu ia”Atributo de um elemento. No CSS, o “#”O símbolo é escrito para selecionar o elemento por id.

ID do estilo “cabeçalho”

#cabeçalho
Cor: Darkred;
Fonte-família: Fantasia;
Size da fonte: 60px;

Seletor de classe CSS
O seletor de classe CSS seleciona os elementos com particular “aula" atributos. No CSS, a classe é acessada pelo “.”Símbolo antes do nome da classe.

Classe de "caixa" de estilo

.caixa
Largura: 300px;
borda: 5px RGB sólido (214, 214, 214);
margem: automático;
Alinhamento de texto: centro;
Background-Color: RGB (255, 227, 218);

O ".caixa"É usado para acessar o"caixa”Classe e atribua as seguintes propriedades:

• ““largura”Ajusta a amplitude do elemento.
• ““fronteira”A propriedade é utilizada para adicionar uma borda ao redor do elemento.
• ““margem”Gera espaço ao redor do elemento.
• ““alinhamento de texto”Define o alinhamento do texto.
• ““cor de fundo”Define a cor de fundo.

Saída

Isso foi todo o básico do CSS.

Conclusão

A folha de estilo CSS ou em cascata descreve a aparência de um documento HTML. Ele fornece centenas de propriedades de estilo para elementos HTML que podem ser aplicados usando o CSS embutido, CSS incorporado e CSS externo. No CSS, o elemento HTML é selecionado por vários seletores de CSS, como o seletor de ID, seletor de classe e assim por diante. Este post demonstrou para que CSS é usado para.