Qual a diferença entre CSS inline, interno e externo?
Na faculdade, uma das dúvidas mais frequentes que pude notar, e que causava bastante confusão na cabeça dos meus colegas, era sobre qual a diferença do uso do css inline, externo e interno.
À grosso modo, podemos resumir essa diferença da seguinte maneira. No CSS inline, é preciso adicionar à cada elemento(tag) uma estilização logo à frente da mesma. por exemplo, caso desejemos adicionar a cor vermelha e uma fonte verdana à um elemento h1 específico, devemos escrever da seguinte forma no CSS inline:
<h1 style="color: red; font-family: Verdana;">Olá mundo!</h1>
A grande e principal desvantagem deste modo de escrita, é que em trabalhos reais, seria necessário estilizar tag por tag, atrasando muito o nosso serviço e ocupando um tempo desnecessário.
Para agilizarmos este processo, temos o recurso da escrita interna e externa. Começaremos pela escrita interna. Com esta escrita, escrevemos nossa folha de estilos(nosso CSS) no head de nosso código entre as tags <style> como no código abaixo:
<html>
<head>
<style>
h1{
color: red;
font-family: Verdana;
}
</style>
</head>
<body>
<h1>Cabeçalho número 1</h1>
<p>Isto é um teste</p>
<h1>Cabeçalho número 2</h1>
</body>
</html>
Dessa forma, estilizamos todas as tags <h1> para terem a cor vermelha, e a fonte Verdana. Note que tanto o cabeçalho número 1, como o cabeçalho número 2 possuem as mesmas propriedades, porém não possuem nenhum css em suas respectivas linhas, isto ocorre pois já declaramos suas propriedades no <head> de nosso código dentro da tag <style>, dessa forma, todas as tags h1 herdam esta propriedade, é possível também selecionar tags <h1> específicas para receberem propriedades através de ids e classes, porém isto é um tema para outro artigo, voltemos ao nosso foco.
Outra maneira de facilitar nosso código e além disso, deixar nossos códigos mais organizados, é através da escrita externa, dessa forma, escrevemos nosso código css em um arquivo e o nosso html em outro, utilizando uma tag de link para "importarmos" a nossa folha de estilo, dessa forma, é possível adotar as mesmas propriedades para mais de uma página(arquivo) html.
Atente-se para a imagem abaixo:
Perceba que temos 3 arquivos, index.html, pagina2.html e estilo.css. note também que em nossos arquivos html, não possuímos nenhuma tag, fizemos isto, pois utilizamos uma escrita externa em nosso arquivo estilo.css, linkando-o em nossos htmls com a tag <link rel="stylesheet" href"NomeDoArquivo.css">, dessa forma, conseguimos aproveitar a mesma folha de estilos para mais de uma aba de nossos sites. importando esta folha, todos os nossos h1 terão cor vermelha e serão escritos na fonte verdana. Note também que por se tratar de um arquivo .css, não é necessária a tag style antes de nosso css, basta escrever o nome da tag e suas propriedades entre "{ }".
Espero que este artigo tenha vos ajudado à entender essa questão sobre a escrita de nosso css, encontro vocês em nossos próximos artigos!
