Neste artigo você encontrará:
Muitas pessoas já sabem que para criar uma página atrativa na web é preciso ter o conhecimento de algumas linguagens específicas. No entanto, para que estas se conectem entre si, é necessário conhecer as formas de fazer as ligações de código. Por isso, hoje falaremos sobre linkar CSS com HTML.
Sabemos que ambas as linguagens são muito conhecidas, sendo o CSS (Folha de Estilo em Cascata) conhecido por dar vida a um site. No caso, não basta escrever um código incrível HTML para ter uma página interessante para os olhos dos usuários.
Sendo assim, aprender a linkar o CSS com HTML faz toda a diferença, principalmente para quem deseja se tornar um desenvolvedor full stack. Felizmente, existem algumas maneiras de fazer essa ligação, e abaixo explicaremos uma das mais utilizadas.
Baixe o guia completo sobre
Full Stack
Entenda por que linkar
Antes de mais nada, é preciso que você entenda por que deve linkar o CSS e HTML. Em geral, você já deve saber que a maioria das páginas da web precisam de mais de uma página de código HTML. Nesse caso, para que você não precise deixar o código muito grande inserindo o CSS na mesma página, existe a possibilidade de linkar uma outra página.
O fato é que nenhum site ficará atrativo sem o CSS. Por isso, independentemente da maneira que você escolha utilizar a linguagem juntamente ao HTML, sem dúvidas você precisará conectar ambas. Com esse método que iremos descrever, todos os estilos criados são colocados em um único arquivo de extensão, o que permite que você não tenha a necessidade de reescrever tudo no código HTML sempre que necessário.
Veja em detalhes como linkar o CSS on HTML
Primeiramente, você precisará ter acesso ao servidor, ter o documento HTML escrito com extensão .html e o arquivo CSS com extensão .css. Após isso, basta encontrar a tag do início do código HTML, sendo ela a <head>. Nesse caso, é preciso colar o código que diz respeito ao link CSS, como o exemplo:
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css” media=”screen” />
No código acima, o caminho para o CSS está definido como “stylesheet.css”. No entanto, você precisará definir exatamente o caminho correto para o seu arquivo. No caso, se este estiver em subdiretório do CSS, deve-se utilizar o nome do arquivo CSS. Para o exemplo acima, ficaria CSS/stylesheet.css.
Para explicar em detalhes, o atributo “rel” do código acima define o relacionamento entre o arquivo em que o comando está escrito e o arquivo que é definido no caminho “href”. Já o “type” irá definir o conteúdo do arquivo para qual está linkado, para esse caso, text/css. Por fim, o atributo “media” define a mídia, determinando quando as regras do CSS devem ser utilizadas.
Para o exemplo acima, o termo “screen” indica o uso em uma tela de computador. Lembrando que pode-se incluir outros arquivos CSS quando necessário, sendo que cada arquivo deve ter seu próprio atributo. Após finalizar o uso da técnica CSS on HTML, é preciso salvar as modificações e acessar a URL no navegador.
Conheça outras alternativas
Como mencionamos acima, não existe apenas uma forma de conectar o CSS à linguagem de marcação HTML, sendo a forma de linkar apenas uma delas. Em geral, existem mais duas: o CSS Inline e o CSS Interno.
A primeira opção adiciona o atributo Style para cada tag, sendo indicada apenas para mudanças específicas, como, por exemplo, para modificar a cor de um único parágrafo da página. Por outro lado, o CSS Interno permite que o atributo Style seja utilizado após a tag <head> do HTML, o que permite que todo o código de CSS criado possa ser inserido ali.
Em todo o caso, como foi falado, linkar o CSS ao HTML pode ser uma forma mais simples de garantir que o código ficará limpo e organizado. Assim, qualquer alteração posterior se torna uma missão relativamente mais fácil, já que o programador poderá encontrar com mais facilidade erros do conteúdo escrito.
Caso você tenha gostado de aprender um pouco até aqui e queira se especializar, te convidamos agora a conhecer o Instituto Infnet – referência no preparo de profissionais na área de TI –, que tem diversas opções de cursos para melhor adequar o seu tempo disponível para se especializar. Confira nossos programas abaixo!
