Inline CSS is a method of applying CSS styles directly to a single HTML element using the style attribute. This method contrasts with internal CSS (using <style> tags in the <head>) and external CSS (using a separate .css file linked via the <link> tag).
Syntax
Styles are defined within the
style attribute as a series of property: value; pairs, separated by semicolons.<h1 style=”color: blue; font-size: 20px;”>Heading Size 1</h1>
Neste exemplo, a
h1cor do texto do elemento está definida como azul e o tamanho da fonte está definido como 20 pixelsQuando usar CSS embutido
Embora geralmente não seja considerada uma boa prática para grandes projetos devido às dificuldades de manutenção, a estilização inline é útil em situações específicas:
- Correções rápidas e testes: Para visualizar rapidamente as alterações ou depurar os estilos de um único elemento durante o desenvolvimento.
- E-mails em HTML: Muitos clientes de e-mail removem as tags <span>
<style>e<link><img>, tornando o CSS embutido a maneira mais confiável de garantir um estilo consistente. - Conteúdo dinâmico: Quando os estilos são gerados por JavaScript ou por um Sistema de Gerenciamento de Conteúdo (CMS) como o WordPress, onde você pode não ter acesso direto aos arquivos CSS principais.
- Prevalência de especificidade: Os estilos embutidos têm a maior especificidade, o que significa que eles substituirão os estilos conflitantes definidos em folhas de estilo internas ou externas
Desvantagens
- Dificuldade de manutenção: os estilos estão espalhados por todo o HTML, tornando as alterações em todo o site demoradas e difíceis.
- Duplicação de código: Os mesmos estilos precisam ser repetidos para cada elemento, aumentando o tamanho da página.
- Funcionalidade limitada: pseudo-classes (como
:hover) e pseudo-elementos não podem ser estilizados usando ostyleatributo. - Estrutura desorganizada: Mistura apresentação (CSS) com estrutura (HTML), o que viola o princípio de manter as responsabilidades separadas.
