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:
-
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.
-
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.
-
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.
-
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
- Para colocar CSS a sua página primeiro você deve criar um arquivo CSS;
- Salve o arquivo CSS com uma extensão “.css” em um local acessível para o servidor web;
- Depois identifique a tag <head> em seu documento HTML e coloque a tag link;
- Insira no atributo href o URL para a seu arquivo .css, no final você terá algo parecido com o código abaixo;
- 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?
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
