CSS Inline: Guia Pr�tico

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>

C�digo 1. Exemplo de CSS inline

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>

C�digo 2. Links em HTML


  a{
      color:red;
  }

C�digo 3. Estilo CSS dos links

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>

C�digo 4. index.html com CSS conectado atrav�s da tag link


  a{
      color:red;
  }

C�digo 5. Arquivo style.css com o conte�do que ser� carregado no index.css

CSS inline: compatibilidade

Compatibilidade com Navegadores
CSS inline	Edge	Chrome	Firefox	IE	Opera	Safari
CSS inline	Sim	Sim	Sim	Sim	Sim	Sim

CSS inline: utilizando CSS dentro de um arquivo HTML

Nesta documentação falaremos um pouco sobre CSS inline, a prática de usar CSS dentro de elementos HTML. Através do CSS inline podemos aplicar estilos a elementos específicos dentro de uma página HTML.