Descubra como importar o CSS no HTML usando a tag link HTML

Indicação
Imagem de um computador com códigos CSS. Neste Artigo Descubra como importar o CSS no HTML usando a tag link HTML.

Este é o quarto post da nossa série de tutoriais que vai te ajudar a criar sua primeira página web de forma profissional com HTML e CSS. Neste artigo, mostraremos como importar o CSS no HTML usando a tag <link> do HTML.

Mas antes de começar, é importante ressaltar que para compreender esse conteúdo é recomendado que você tenha conhecimento básico sobre CSS e HTML. No entanto, se você ainda não tiver nenhuma noção sobre essa tecnologia, recomendamos que siga o guia “O que é CSS“.

Conteúdo

O que é HTML e CSS na prática?

Na prática HTML e CSS são duas das principais linguagens utilizadas no desenvolvimento de websites e aplicações web.

HTML é a linguagem de marcação responsável por estruturar e organizar o conteúdo da sua página web. Com HTML, é possível definir títulos, parágrafos, listas, imagens, links, formulários e outros elementos que compõem uma página.

Já o CSS é a linguagem responsável pela aparência visual da página web. Com CSS, é possível definir cores, fontes, imagens de fundo, posicionamento de elementos e outros atributos que tornam uma página web esteticamente agradável e funcional.

O que é necessário para importar o CSS no HTML corretamente

Ao desenvolver um site, estilizar sua página é uma das tarefas mais importantes. Em resumo o CSS ou em português folha de estilo em cascata é uma linguagem utilizada para definir a aparência de um documento, e o HTML é responsável pela estrutura e conteúdo. Isso ira permitir que você crie seu site de forma mais atraentes e profissionais.

No geral para importar o CSS no HTML será necessário além do  arquivo CSS com o estilo, e HTML com todo conteúdo da página, a tag <link> no cabeçalho do HTML com o caminho correto para o arquivo CSS.

Além de importar o CSS no HTML com a tag <link>, existem mais duas formas de aplicar estilo. A primeira é inserir o código CSS no seu documento HTML usando a tag <style>, e a segunda é aplicar estilos diretamente nas tags HTML com CSS inline. Não se preocupe, vamos abordar essas outras formas mais adiante.

Vantagens de importar o CSS no HTML com a tag link

Uma das principais vantagens de importar o CSS no HTML usando a tag <link> é que ele permite manter seu código HTML e CSS separados, facilitando a manutenção e atualização do seu site. Além disso, melhora o desempenho do site. Mas essas não são as únicas vantagens, siga abaixo mais benefícios:

  1. Separar a apresentação do conteúdo: Ao importar o CSS no HTML com a tag link, é possível manter a estrutura do conteúdo separada da apresentação visual, o que torna o código mais organizado e fácil de gerenciar.

  2. Reutilização de código: Importar o CSS com a tag link permite reutilizar o mesmo arquivo CSS em várias páginas HTML, tornando o processo de desenvolvimento mais eficiente e economizando tempo.

  3. Carregamento mais rápido: Importar o CSS com a tag link permite que o navegador carregue o arquivo CSS de forma assíncrona, o que significa que ele não precisa esperar que o CSS seja carregado antes de exibir a página.

  4. Controle de estilos: O uso da tag link para importar o CSS permite que o desenvolvedor tenha um maior controle sobre o estilo da página, incluindo a capacidade de modificar a aparência de elementos específicos ou definir estilos globais para toda a página e site.

O que é a tag link no HTML

A tag <link> é utilizada para vincular arquivos externos ao seu documento HTML, como por exemplo importar uma folha de estilo para sua página web. Logo deve ser inserida dentro da tag <head> do seu documento e deve ter a seguinte estrutura: <link rel=“stylesheet” type=“text/css” href=“”>.

Passo a passo para importar o CSS no HTML

  1. Para colocar CSS a sua página primeiro você deve criar um arquivo CSS;
  2. Salve o arquivo CSS com uma extensão “.css” em um local acessível para o servidor web;
  3. Depois identifique a tag <head> em seu documento HTML e coloque a tag link;
  4. Insira no atributo href o URL para a seu arquivo .css, no final você terá algo parecido com o código abaixo;
  5. Então salve o arquivo HTML e abra-o em um navegador web para verificar se o estilo foi aplicado corretamente.
				
					<!-- Método CSS externo, em um arquivo .css  -->
<link rel="stylesheet" type="text/css" href="seu-arquivo.css" />
				
			

Método CSS interno

Após aprender a aplicar CSS externamente, vamos explorar o método interno. Utilize a tag <style> para incluir seu código CSS diretamente no seu documento HTML. Isso é útil quando você tem poucas regras de estilo ou deseja aplicar estilos específicos em uma página específica.

				
					<!-- Método CSS interno  -->
<style type="text/css">/* seu conteúdo */</style>
				
			

Método CSS inline

Neste método, você aplica o estilo diretamente na tag HTML usando o atributo style=”seu estilo”. Ele pode ser útil para edições rápidas, mas não é recomendado, pois pode deixar seu código extenso e desorganizado, além de afetar negativamente o desempenho do seu site.

				
					<!-- Método CSS Inline  -->
<h3 style="/* seu conteúdo */">Exemplo CSS</h3>
				
			

Em resumo, independentemente da forma escolhida para importar o CSS no HTML, é importante lembrar de sempre seguir as boas práticas. Primeiro, mantenha seu código organizado e legível, usando comentários e indentando corretamente. 

Em segundo lugar, evite aplicar estilos redundantes ou desnecessários, pois isso pode afetar negativamente o desempenho do seu site. E por fim, sempre teste seu site em diferentes navegadores e dispositivos para garantir que ele esteja funcionando.

Dúvidas frequentes

A tag <link> é uma tag HTML usada para vincular arquivos externos, como folhas de estilo (CSS), arquivos de fontes etc… ao documento HTML.

A tag <link> deve ser colocada dentro da seção <head> do documento HTML e é usada com o atributo href para especificar o caminho para o arquivo que está sendo vinculado, e o atributo rel para especificar a relação entre o arquivo vinculado e o documento HTML.

Para linkar o CSS no HTML, use a tag <link> no cabeçalho da página e especifique o arquivo CSS que deseja usar com o atributo href. O atributo rel deve ser definido como “stylesheet” e o atributo type como “text/css”. Isso permite separar a estrutura do conteúdo da apresentação visual, facilita o gerenciamento do código e permite reutilizar o mesmo arquivo CSS em várias páginas HTML.

CSS Externo: Você pode criar um arquivo separado com extensão .css e depois vincular ao seu HTML usando a tag <link> dentro da tag <head>.

CSS Interno: Você pode definir o estilo dentro do próprio documento HTML usando a tag <style> dentro da tag <head>.

CSS Inline: Você pode definir o estilo diretamente no elemento HTML usando o atributo style.

O local correto para importar um arquivo CSS externo em um documento HTML é dentro da tag <head> do documento HTML, usando a tag <link> com o atributo href apontando para o arquivo CSS.

Como se tornar um Desenvolvedor Web?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado.

Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.