Como usar CSS interno, inline e externo no HTML
Tags: css, html, beginners, frontend
Published: 2024-02-21 20:00:02

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:
<br>


### 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:

```html
<!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>
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6janvkos5bfg6clkqpb4.JPG)

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:

```html
<!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>
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bl5jo3sfr4aqvjtmzaza.JPG)

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?
<br>






### 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:
```html
<!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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dgyfd8jhak6uz2a3fm2w.JPG)

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? 👀
<br>





### 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:
```html
<!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_**
```css
h1 {
  color: blue;
  background-color: gray;
}

p {
  color: red;
}
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8b0c183jt5x5yd2qtrhr.JPG)
Podemos ver pelo navegador que nosso `<h1>` está com a cor azul e fundo cinza, enquanto nosso `<p>` está com a cor vermelha.
<br>


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:
<br>

**_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é+ 😊.