CSS inline
O CSS inline é uma forma de estilizar elementos específicos dentro de um documento HTML.
Através do atributo style, podemos aplicar qualquer estilo CSS a um elemento dentro de uma página.
CSS inline: na prática
Veja no Código 1 como podemos estilizar um link através do CSS inline.
<a href="https://www.devmedia.com.br">DevMedia</a>
<a href="https://www.devmedia.com.br">DevMedia</a>
Perceba que o CSS é colocado dentro da tag <a> através do atributo style.
Você pode ver o Código 1 em funcionamento abaixo:
See the Pen Untitled by Eduardo Soares (@eduscxbox) on CodePen.
Note que o outro link da página não é afetado. O CSS inline é aplicado apenas ao elemento que recebe o estilo.
CSS inline: sintaxe
<elementoHTML ></elementoHTML>
CSS inline: recursos
O CSS inline suporta todas as propriedades do CSS, porém, existem algumas exceções quanto aos recursos suportados.
Como o CSS inline deve ser aplicado diretamente a um elemento HTML, não é possível estilizar pseudo-elementos ou pseudo-classes com esse modo de uso do CSS.
CSS inline: tag <style>
Outro modo de utilizar CSS dentro de um código HTML, é através da tag <style>, que deve ser colocada dentro do <head> do seu documento HTML, como mostra os Códigos 2 e 3.
<a href="https://www.devmedia.com.br">DevMedia</a>
<a href="https://www.devmedia.com.br">DevMedia</a>
a{
color:red;
}
Note que através do uso da tag style os estilos não precisam ser mais específicos, e podem ser aplicados globalmente a um tipo de elemento, ou classe. Nesse exemplo, estilizamos a tag a, desse modo, toda tag <a> da página terá a cor vermelha, não importa quantos links forem criados.
Outro ponto importante, é que através da tag style, é possível utilizar pseudo-elementos e pseudo-classes, diferente do que vimos para o atributo style, que deve ser aplicado a um elemento HTML.
CSS inline: apenas para desenvolvimento
Uma informação muito importante a respeito do uso de CSS inline e da tag Style é que essas formas de uso de CSS não devem ser utilizadas em versões finais de páginas web. Essas técnicas foram criadas para permitir a testagem rápida de CSS durante o processo de desenvolvimento, porém, a versão final da página deve possuir arquivos HTML e CSS separados e conectados através da tag <link>.
Veja nos Códigos 4 e 5 como deve ser o formato de uso de CSS em uma aplicação final.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Links vermelho</title>
</head>
<body>
<a href="https://www.devmedia.com.br">DevMedia</a>
<a href="https://www.devmedia.com.br">DevMedia</a>
</body>
</html>
a{
color:red;
}
CSS inline: compatibilidade
| CSS inline | Edge | Chrome | Firefox | IE | Opera | Safari |
| Sim | Sim | Sim | Sim | Sim | Sim |
