CSS embutido | Explicado

CSS embutido | Explicado
As folhas de estilo em cascata, também conhecidas. O CSS é bastante fácil e pode economizar muito tempo ao lidar com a formação de muitas páginas da web simultaneamente e, para que o CSS funcione, você deve incluir sua folha de estilo no seu documento HTML.

Existem três maneiras possíveis de adicionar sua folha de estilo ao seu documento HTML;

  1. CSS externo
    CSS externo é uma folha de estilo que é definida em um arquivo separado e está incluído em um documento HTML como um link com .Extensão CSS.
  2. CSS interno
    CSS interno é definido no mesmo documento HTML usando o elemento na seção.
  3. CSS embutido
    CSS embutido também é definido no mesmo documento HTML usando o atributo de estilo de um elemento. Neste tutorial, no entanto, discutiremos o CSS em linha de profundidade ..

CSS embutido

Para estilizar um elemento HTML individual, a abordagem CSS em linha é usada. Esta técnica utiliza o atributo de estilo de uma tag html para incluir CSS. A definição de estilo especificada no atributo de estilo só afetará esse elemento específico.

Sintaxe

Vamos explorar e entender a técnica CSS embutida com a ajuda de alguns exemplos.

Exemplo 1

Suponha que você queira estilizar

Elemento usando CSS embutido.




CSS embutido.



No exemplo acima, usamos o atributo de estilo do

Tag para estilizar o cabeçalho, usando a seguinte parte do código.

CSS embutido.

Saída

Definimos a cor do caminho para o roxo, a família para "Times New Roman" e o alinhamento de texto ao centro.

Exemplo 2

No exemplo acima, estilizamos um texto simples usando CSS embutido. No exemplo seguinte, iremos estilizar um CSS em linha.





Este exemplo demonstra o uso de CSS embutido.

No exemplo acima, definimos o preenchimento, a borda e a cor de fundo do elemento usando a seguinte peça de código.


Este exemplo demonstra o uso de CSS embutido.

Saída

É assim que você pode estilizar elementos como ou

Usando a abordagem CSS embutida.

Agora que temos um bom entendimento do conceito sobre CSS em linha, vamos passar por alguns prós e contras da técnica em discussão.

Prós de CSS em linha
Aqui listamos algumas vantagens de CSS em linha.

  • Você pode estilizar um elemento individualmente.
  • Diminui a quantidade de arquivos que o navegador deve baixar, o que torna mais rápido o procedimento de exibição de páginas da web.
  • É adequado para pequenos projetos da web.

Contras do CSS embutido
Aqui listamos algumas desvantagens de CSS em linha.

  • CSS em linha pode tornar seu código menos gerenciável.
  • No CSS embutido, os arquivos não são armazenados em cache.
  • As definições de estilo especificadas usando CSS embutidas não são reutilizáveis.
  • Pseudo -códigos e classes não podem ser estilizados usando CSS embutido.
  • Não é apropriado para projetos maiores, pois diminui a mangata do código.

Conclusão

CSS embutido é uma técnica para incluir folhas de estilo em um documento HTML usando o atributo de estilo do elemento. O CSS embutido permite que o usuário estilize os elementos individualmente e a definição de estilo especificada afetará apenas esse elemento específico. Neste post, a técnica CSS em linha foi discutida em detalhes com a ajuda de exemplos apropriados, além disso, vantagens e desvantagens da técnica em discussão também são destacadas.