CSS pode ser adicionado como um arquivo separado ou incorporado diretamente no seu documento HTML. Se você deseja incluir CSS no HTML, então “Estilos embutidos”, "Estilos incorporados" e a “Folhas de estilo externo” são os três métodos para alcançar essa funcionalidade. No entanto, a maneira ideal é criar e aplicar estilos ao HTML é utilizando as folhas de estilo externo, pois a modificação mínima de marcação será necessária para afetar várias páginas de uma só vez.

Este artigo discutirá o procedimento para adicionando um arquivo CSS externo em Html. Nós também explicaremos vincular e importação Um arquivo CSS externo em HTML. Além disso, exemplos relacionados aos métodos mencionados serão fornecidos. Então vamos começar!

Como adicionar um arquivo CSS externo em html

Se você deseja aplicar um estilo a várias páginas da web simultaneamente, adicionar um arquivo CSS externo é perfeito. Um CSS externo é considerado um arquivo separado que compreende todas as regras de estilo e pode ser vinculado a qualquer página HTML do seu site. A adição de um arquivo CSS externo permite que você modifique a aparência do seu site, apenas fazendo alterações em um único arquivo. Além disso, manter os arquivos CSS, JavaScript e HTML separados permitem manter o código e melhorar a legibilidade.

Existem dois métodos para adicionar um arquivo CSS externo HTML: vincular e importar.

Vinculando um arquivo CSS externo em HTML

Primeiro de tudo, criaremos um arquivo CSS em HTML. Para esse fim, você pode abrir seu editor de código favorito; No entanto, usaremos o código do Visual Studio.

Após abrir o código VS, criaremos um "estilo.CSS ” Arquivo CSS para adicionar estilos:

Em seguida, especificaremos o estilo que queremos aplicar na página da web no arquivo CSS aberto. Aqui, atribuímos os valores ao "fundo" e "Fonte" Propriedades para o HTML "corpo" e também adicionou o "cor" para o título:

corpo
Antecedentes: rosa;
Fonte: 18px Arial, sem serrif;

H1
cor azul;

Imprensa “Ctrl+S” Para salvar o código adicionado no "estilo.CSS ” arquivo:

O "" A tag é utilizada para vincular um CSS externo a um arquivo html. Esta tag é adicionada no "" Seção de um documento HTML. Nós vinculamos nosso arquivo html com "estilo.CSS ” No programa abaixo do rodoviário, usando a tag. Então, adicionamos um título com o

tag e um parágrafo com o

marcação. O estilo especificado no "estilo.CSS ” O arquivo será aplicado a esses elementos HTML:

Isso é Linuxhint.com

Estamos aprendendo como adicionar um arquivo CSS em HTML

Salve este programa JavaScript e abra seu arquivo HTML no navegador:

Como você pode ver, aplicamos com sucesso o estilo especificado aos nossos elementos HTML, vinculando -os ao arquivo CSS externo:

Importando um arquivo CSS externo em HTML

Outro método para adicionar um arquivo CSS externo é usar o "@importar" regra no documento HTML. O javascript "@importar" As declarações dão instruções ao navegador para carregar e utilizar os estilos do arquivo CSS externo.

Você pode importar um arquivo CSS externo no HTML simplesmente adicionando a declaração "@import" na etiqueta do documento HTML. Dessa forma, você poderá adicionar outras regras CSS para os elementos HTML, dentro da mesma tag:

Isso é Linuxhint.com

Estamos aprendendo a adicionar um arquivo CSS em HTML

No programa JavaScript fornecido, importamos o "estilo.CSS ” arquivo e o estilo especificado com o arquivo mencionado serão aplicados aos títulos. Também adicionamos estilo para o elemento HTML do parágrafo:

Nosso "meu projeto.html ” O arquivo possui os seguintes elementos HTML com os estilos aplicados:

Conclusão

Adicionar um arquivo CSS no HTML é útil se você deseja aplicar um estilo a várias páginas da web de uma só vez. Além disso, quando você mantém os arquivos HTML, JavaScript e CSS separadamente, seu código se torna fácil de gerenciar. Este artigo discutiu o procedimento para adicionar um arquivo CSS em HTML. Também explicamos a ligação e a importação de um arquivo CSS externo em HTML. Além disso, exemplos relacionados aos métodos mencionados também são fornecidos.