Cascading Style Sheets, também conhecido. O CSS permite gerar folhas de estilo reutilizáveis ​​que podem ser usadas para estilizar várias páginas da web de uma só vez. Essas folhas de estilo economizam muito tempo e são fáceis de manter. Mas você já se perguntou como vincular folhas de estilo CSS aos documentos html? Bem, temos a resposta resumida para você neste blog.

As três maneiras que você pode vincular ao CSS ao HTML. Estes são alistados abaixo.

1. CSS embutido
2. CSS interno
3. CSS externo

Todas essas abordagens foram discutidas neste blog.

Como vincular CSS embutido ao HTML

Se você estiver adotando essa abordagem, precisará usar o atributo de estilo do elemento específico que deseja estilizar. Basta inserir o estilo na etiqueta inicial do elemento.

Essa abordagem não é recomendada, pois o estilo é feito na etiqueta inicial de um elemento específico que dificulta a leitura e a manutenção do código. Além disso, o CSS embutido não é reutilizável, portanto, você precisa estilizar todos os elementos separadamente, tornando a tarefa de estilo complicada, matando assim o propósito por trás do uso de CSS.

Aqui demonstramos essa abordagem com um exemplo.

Html

Como vincular CSS ao HTML

CSS embutido

No código acima, três elementos estão sendo gerados que são; ,

, e

. Todos os três estão sendo estilizados usando o atributo de estilo. O contêiner Div recebeu um pouco de preenchimento e, enquanto isso, o título e o parágrafo recebem uma certa cor de texto.

Saída

Os elementos foram estilizados usando CSS embutido.

Como vincular o CSS ao HTML internamente

Essa abordagem direciona os usuários a estilizar elementos usando a tag na seção principal do documento HTML. Você pode usar os nomes dos elementos ou usar classes ou IDs atribuídos a elementos para estilizá -los com CSS interno.

Para entender o funcionamento dessa abordagem, consulte o exemplo abaixo.

Html

Como vincular CSS ao HTML

CSS embutido

Novamente três elementos que são ,

, e

estão sendo gerados, no entanto, para estilizá -los, estamos usando a tag na seção principal do documento. Observe que, como o código acima consiste apenas em três elementos, portanto, estamos usando diretamente os nomes dos elementos para estilizá -los; deles de maneira diferente. O código gerará a mesma saída que acima.

Como vincular CSS ao HTML externamente

Esta abordagem permite que você vincule o CSS ao HTML usando folhas de estilo externas. Essa abordagem exige que você faça suas folhas de estilo em um arquivo separado e depois vincule este arquivo externo ao seu arquivo html usando a tag.

Aqui anexamos capturas de tela do editor de código para demonstrar essa abordagem corretamente.

Html

Esta captura de tela acima mostra o arquivo html. Neste documento, você não precisa estilizar os elementos, basta colocar seus elementos de uma maneira que você deseja que eles apareçam na página da web. Com o objetivo de vincular sua folha de estilo, basta usar o atributo e fornecer o link do arquivo CSS ao atributo href da tag.

CSS

Esta captura de tela representa a folha de estilo CSS. Neste arquivo, basta usar os nomes de elementos ou classes/IDs atribuídos para estilizá -los. O código mostrado nas capturas de tela também gerará a mesma saída.

Essa abordagem é considerada a melhor abordagem, pois permite gerar folhas de estilo separadamente, tornando o código limpo, legível e sustentável.

Conclusão

Para vincular o CSS ao HTML, existem três abordagens disponíveis; CSS inline, CSS interno e CSS externo. O CSS embutido exige que você use o atributo de estilo de um elemento específico na tag de partida para estilizá -lo, enquanto isso, o CSS interno permite que os usuários estilizem elementos usando a tag na seção da cabeça do documento HTML. Por fim, CSS externo significa que você precisa gerar folhas de estilo em outro arquivo e conectá -lo ao documento HTML com a tag. A abordagem CSS externa é preferida ao resto, porque torna o código legível e sustentável.