Aprenda o básico do CSS em um minuto

CSS significa folha de estilo em cascata. CSS especifica como os elementos HTML devem ser exibidos na tela. Em outras palavras, o CSS descreve a apresentação de páginas da web. Ele fornece diferentes propriedades de estilo para os elementos HTML, como cor de fundo, estilo de fonte, cor e muito mais. Ele também permite especificar como a página da web parece em diferentes tamanhos de tela.

Este blog é tudo sobre:

• Como definir propriedades CSS?
• Quais são os tipos de seletores de CSS?
• Diferentes maneiras de definir propriedades CSS
• Como usar CSS embutido?
• Como usar uma folha de estilo incorporada?
• Como usar uma folha de estilo externo?

Como definir propriedades CSS?

Para definir propriedades CSS para os elementos HTML, a seguinte sintaxe pode ser utilizada:

seletor
valor da propriedade;
valor da propriedade;

Aqui:

• O primeiro componente de uma regra CSS é um CSS “Seletor”. O seletor especifica quais elementos HTML devem ser selecionados para aplicar propriedades CSS.
• Dentro de seu corpo, as propriedades são definidas com seus respectivos valores.

Quais são os tipos de seletores de CSS?

Os seletores são de três tipos definidos abaixo:

Seletor de elementos
O seletor de elemento CSS é usado para aplicar as propriedades CSS aos elementos com nomes de tags específicos:

H1
cor azul;

No exemplo acima, o “H1”É o elemento de cabeçalho.

Seletor de classe
O seletor de classe seleciona todos os elementos que pertencem à classe mencionada e, em seguida, aplica as propriedades CSS adicionadas a eles:

.conteúdo principal
Largura: 300px

De acordo com o código fornecido, a propriedade de largura será aplicada ao elemento com o nome da classe “.conteúdo principal”.

Seletor de identificação
Seletores de ID selecionam um elemento específico com base em seu ID:

#pára
Alinhamento de texto: centro;

Observação: Nos exemplos acima, o “cor","largura", e "alinhamento de texto”São as propriedades.

Como usar CSS embutido?

CSS em linha refere -se ao CSS quando aplicado diretamente aos nossos elementos HTML. Para fazer isso, use o “estilo”Atributo dentro da etiqueta de abertura do elemento e inclua propriedades.

Veja o exemplo dado:

OLÁ MUNDO!

Saída

Como usar uma folha de estilo incorporada?

Para incorporar uma folha de estilo CSS no arquivo html, utilize o “”Elemento dentro da seção da cabeça para especificar as propriedades da seguinte forma:

Saída

Como usar uma folha de estilo externo?

Se o projeto contiver vários arquivos, é melhor fazer uma folha CSS externa com a extensão “.CSS”. Em seguida, utilize -o no projeto adicionando um link à folha CSS externa nos arquivos HTML.

Por exemplo, o elemento é fornecido na seção principal do arquivo HTML como este:

Dentro da folha de estilo externo, adicione o código:

P
tamanho da fonte: 30px;
cor roxa;
intensidade da fonte: Negrito;
Alinhamento de texto: centro;

O código acima será exibido conforme fornecido abaixo:

Isso foi tudo sobre o básico do CSS.

Conclusão

Três maneiras de definir propriedades de estilo para os elementos HTML são CSs embutidos, CSS internos e CSS externos. Para aplicar propriedades de estilo aos elementos, você pode usar seletores, como seletores de elementos, seletores de classe e seletores de identificação. Em seguida, especifique as propriedades com seus valores dentro dos colchetes encaracolados dos seletores. Este blog discutiu o básico do CSS com exemplos.