Para especificar como será um documento HTML, as folhas de estilo CSS são usadas. Além disso, existem três maneiras de escrever propriedades de estilo CSS que são CSs embutidas, CSS incorporado e folhas de estilo CSS externas. Uma folha de estilo incorporada é aquela que integra dados da folha de estilo em um documento HTML usando o elemento.

Este artigo discutirá:

• Estrutura da página HTML
• Como criar uma folha de estilo CSS incorporada?

Estrutura da página HTML

Uma página HTML tem principalmente duas seções, “cabeça" e "corpo”. A seção da cabeça contém as meta informações sobre a página, enquanto a seção do corpo compreende os elementos visíveis na página da web, como imagens, listas, tabelas, títulos e muito mais.

A folha de estilo CSS é incorporada dentro da seção da cabeça, dentro do elemento, conforme destacado com a seta vermelha:

Como criar uma folha de estilo CSS incorporada?

Em HTML, primeiro, crie um elemento div com o nome da classe “contente”. Dentro deste elemento, adicione

elemento e elemento associados aos atributos:

• src: Este atributo é utilizado para especificar o caminho da imagem.
• alt: Este atributo especifica o texto alternativo que aparecerá quando uma imagem não é carregada.
• largura: Este atributo é utilizado para especificar a largura da imagem.

Então, adicione o
tags para adicionar quebras de linha e

elemento com o id “pára”Para adicionar conteúdo à página da web:

Escola Linuxhint

Olá Mundo!

Estilo todos os elementos

*
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;

O "*”É utilizado para representar todos os elementos aplicados ao“família de fontes" propriedade. Aqui, o valor “Verdana, Genebra, Tahoma, Sans-Serif”É fornecido para garantir que, se o primeiro estilo de fonte não for suportado pelo navegador, o próximo será aplicado.

Estilo “conteúdo” elemento div

.contente
Largura: 500px;
Altura: 300px;
preenchimento: 5px;
margem: automático;
preenchimento-esquerda: 50px;
Background-Color: #7DB9E4;

O ".contente”É especificado para acessar o elemento div ter o conteúdo da classe e aplicar as propriedades fornecidas:

• ““largura”Propriedade define a largura do elemento.

• ““altura”A propriedade define/ajusta a altura do elemento.
• ““preenchimento”O atributo inclui espaço em torno do conteúdo do elemento ou dentro da borda do elemento.
• ““margem”A propriedade adiciona espaço ao redor do elemento.
• ““preenchimento-esquerda”Propriedade adiciona o espaço à esquerda do conteúdo do elemento.
• ““cor de fundo”Propriedade define a cor de fundo do elemento.

Elemento de estilo “img”

img
transição: tudo 0.3s facilitar;

O elemento é aplicado transição com o CSS “transição”Propriedade, onde“todos"É um efeito de transição,"0.3s”Refere -se à duração da transição e“facilidade”Refere -se ao efeito de transição com um início lento, depois rápido e termina lentamente.

Elemento de estilo "IMG" no Hover

.Conteúdo IMG: Hover
Cursor: Ponteiro;
Transformação: Perspectiva (100px) TRANK3D (50px, 20px, 20px);

As propriedades aplicadas ao elemento no Hover são explicadas abaixo:

• ““cursor”Propriedade especifica o estilo do cursor do mouse no elemento, onde o valor“ponteiro”Mostra uma mão do cursor com um dedo apontador.
• Como o valor do “transformar”Propriedade, a“perspectiva (100px)”A função é utilizada para especificar a distância entre o usuário e o objeto, e o“TRANK3D (50px, 20px, 20px)”Realoca um elemento no avião 3D. Esses parâmetros exibem o eixo x, eixo y e zis z, respectivamente.

Estilo “para” id de elemento “p”

#para
Size da fonte: 25px;
intensidade da fonte: Negrito;
Cor: #3802CE;
preenchimento: 5px;

O "#pára”É utilizado para acessar o elemento com o ID para e aplicar as seguintes propriedades:

• ““tamanho da fonte”Propriedade define o tamanho da fonte do elemento.
• ““espessura da fonte”Propriedade define o tamanho da fonte como fino ou grosso.
• ““cor”A propriedade é usada para definir/aplicar a cor da fonte do elemento.

Aqui está a saída do código acima mencionado:

Pode ser observado na saída dada que a folha de estilo incorporada foi aplicada com sucesso.

Conclusão

As folhas de estilo embebidas em CSS são adequadas para documentos que possuem necessidades específicas de design. Para criar uma folha de estilo incorporada, é necessário declarar propriedades CSS dentro do elemento. Este elemento de estilo é especificado na etiqueta da cabeça HTML. Neste post, demonstramos o método para criar folhas de estilo CSS incorporadas com um exemplo.