Oi gente, tudo bem com vocês?
Hoje quero apresentar 3 formas distintas de utilizarmos o CSS no nosso site através do HTML.
Vejamos a seguir em detalhes cada um deles:
1. ESTILOS DE CSS INTERNO
Trabalhando com o CSS interno, podemos adicionar nossos estilos ao elemento <style> que fica localizado dentro do <head>, mas vamos por parte! Repare abaixo na estutura básica do HTML e a forma como ele é exibido no navegador:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Usando CSS interno no meu site</title>
</head>
<body>
<h1>Trabalhando com CSS interno</h1>
<p>Exemplo parágrafo no site.</p>
<body>
</body>
</html>
Por enquanto tudo normal pois ainda não foram aplicados os estilos ao documento, mas vamos adicionar agora o elemento <style> - logo abaixo do <title> - incluir alguns estilos e ver como ele vai ser exibido no navegador:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Usando CSS interno no meu site</title>
<style>
h1 {
font-size: 25px;
color: green;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>Trabalhando com CSS interno</h1>
<p>Exemplo parágrafo no site.</p>
<body>
</body>
</html>
E olha aí nossa primeira implementação de estilos internos no site 😁.
Basicamente colocamos no título <h1> uma fonte de 25px e cor verde. Ao parágrafo <p> colocamos uma cor de fonte azul.
Vamos para o próximo estilo?
2. ESTILOS DE CSS INLINE
Bom ... no inline, os nossos estilos são aplicados diretamente em um determinado elemento, fazendo novamente uso do atributo <style>, mas repare a seguir que a forma de utilização é um pouco diferente da anterior.
Veja o exemplo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Usando CSS inline no meu site</title>
</head>
<body>
<h1 style="color: green; background-color: yellow;">Trabalhando com CSS inline</h1>
<p style="color: red;">Exemplo parágrafo no site.</p>
<body>
</body>
</html>
Vejamos como fica a visualização pelo navegador:
Notou a diferença? Agora nós utilizamos o elemento <style> - sem o sinal < > - incorporado dentro do nosso título <h1>(cor de fonte verde com cor de fundo amarelo) e <p>(cor de fonte vermelha).
O que achou desse segundo estilo? 👀
3. ESTILOS DE CSS EXTERNO
Esta é a 3ª forma de trabalharmos com CSS no nosso site, mas não menos importante que as demais já apresentadas...muuuito pelo contrário já que esta é a forma recomendadíssima de se fazer o seu uso, pois todo nosso código CSS fica armazenado em um arquivo externo.
A partir daí, criamos um novo arquivo (por ex: styles.css) e conseguimos chamar esse arquivo de dentro do HTML através do elemento <link> - que também fica localizado dentro do <head> - da seguinte forma:
<link rel="stylesheet" href="styles.css" />
Nota: Esteja atento a pasta em que o seu arquivo .css estiver armazenado. No meu exemplo, ele está localizado na raíz do meu site ao invés de dentro de alguma pasta.
Veja agora como fica a estrutura do nosso HTML - separado do nosso CSS. Logo depois veja o arquivo CSS:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Usando CSS externo no meu site</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Trabalhando com CSS externo</h1>
<p>Exemplo parágrafo no site.</p>
<body>
</body>
</html>
styles.css
h1 {
color: blue;
background-color: gray;
}
p {
color: red;
}
Podemos ver pelo navegador que nosso <h1> está com a cor azul e fundo cinza, enquanto nosso <p> está com a cor vermelha.
Muito legal né?
Como dito anteriormente, a forma de uso recomendada é o CSS externo, mas também é muito importante conhecer as demais formas de uso e opções que vão de acordo com a necessidade de cada dev.
Quero encerrar este artigo com algumas pequenas notas:
Vantagens de usar CSS Externo
- O seu projeto fica bem organizado e limpo devido ao CSS não se misturar com o HTML;
- Encontramos mais facilidade para realizar ajustes ou prestar manutenções, tanto para quem trabalha individualmente quanto para equipes.
- Ganho na praticidade para trabalhar no dia a dia;
Desvantagens de usar CSS interno e inline
- É bem trabalhoso fazer alguma atualização, por exemplo: imagine que você tem um site com 15 páginas, e em um determinado momento precisa modificar algo. Você vai precisar fazer isso manualmente e em cada página;
- O seu HTML acaba ficando poluído, uma vez que o CSS fica junto com o HTML (embora seja comum ver o uso destes na criação de mailings);
- Em se tratando do inline, se precisar repetir o mesmo estilo a algum elemento, infelizmente não há possibilidade de reutilizá-lo. Vai ser necessário adicionar o novo estilo sempre que precisar.
- Lentidão no carregamento das suas páginas.
O CSS é muito poderoso e com ele é possível criar estilos incríveis, animações e muitas outras implementações que vão deixar o seu projeto bem interessante. Com a utilização dessas tecnologias alinhadas a paixão pela área, a criatividade vai longe 🚀.
Então é isso gente ... espero que tenham gostado e espero que esse material tenha ajudado vocês.
Bons estudos, um abração e até+ 😊.
Top comments (0)