Um estilo pode ser definido diretamente no corpo HTML5. Aqui é um exemplo deste tipo de código. Um estilo local também é às vezes chamado de elemento de nível

estilo, porque ele modifica uma instância específica de um elemento na página.

Estilos locais
Este parágrafo tem uma borda definida localmente
Este parágrafo tem uma série de regras de fonte e texto aplicados.

Como você olhar sobre esse código, algumas coisas devem tornar-se evidentes:

• Não elemento é no cabeçalho. Normalmente, você usa uma seção no cabeçalho da página para definir todos os seus estilos. Esta página não tem um tal segmento.

• Os parágrafos têm seus próprios atributos de estilo. UMA estilo atributo foi adicionado a cada parágrafo no corpo HTML. Todos os elementos HTML apoiar o estilo atributo.

• O código de estilo inteira vai em um único par de aspas. Para cada elemento de estilo, o estilo de toda vai para um par de aspas porque é um atributo HTML. Você pode usar o recuo e espaço em branco para tornar as coisas mais fáceis de entender.

Quando usar estilos locais

estilos locais não devem ser sua primeira opção, mas pode ser útil em algumas circunstâncias.

Se você estiver escrevendo um programa para traduzir de um processador de texto ou outra ferramenta, estilos locais são muitas vezes a maneira mais fácil de fazer o trabalho de tradução. Se você usar um processador de texto para criar uma página e você diga a ele para salvar a página como HTML, que, muitas vezes, usar estilos locais, porque os processadores de texto costumam usar esta técnica em seu próprio formato proprietário.

Normalmente, quando você vê uma página HTML com um monte de estilos locais, é porque uma ferramenta de tradução automática feita na página.

Às vezes, você vê estilos locais usados ​​em exemplos de código. Por exemplo, a sequência código pode ser utilizado para demonstrar diferentes estilos de limite:

inline Fronteiras
Este parágrafo tem uma borda preta sólida
Este parágrafo tem uma borda preta dupla

Para fins de exemplo, é útil para ver o estilo certo ao lado do elemento. Este código seria bom para demonstração ou fins de teste (se você quiser apenas para obter uma rápida olhada em alguns estilos de borda), mas não seria uma boa ideia para o código de produção.

estilos locais têm prioridade muito alta, então qualquer coisa que você aplicar em um estilo local substitui as outras regras de estilo. Esta pode ser uma solução alternativa útil se as coisas não estão funcionando como o esperado, mas é melhor para obter seus estilos funcionando corretamente do que para confiar em uma solução alternativa.

Os inconvenientes de estilos locais

É muito fácil de aplicar um estilo local, mas para a maior parte, a técnica não é geralmente recomendado porque tem alguns problemas, tais como

• Ineficiência: Se você definir estilos no nível de elemento com o estilo atributo, você está definindo apenas a instância particular. Se você quiser definir as cores de parágrafo para toda a sua página Desta forma, você vai acabar escrevendo um monte de regras de estilo.

• Legibilidade: Se as informações de estilo é intercalada em toda a página, é muito mais difícil encontrar e modificar do que se ele está localizado centralmente no cabeçalho (ou em um documento externo).

• Falta de separação: Colocar os estilos no nível elemento derrota o objetivo de separar o conteúdo de estilo. Torna-se muito mais difícil de fazer alterações, ea mistura de estilo e conteúdo torna seu código mais difícil de ler e modificar.

• constrangimento: todo um lote de regras CSS tem de ser enchido em um único atributo HTML com um par de aspas. Isso pode ser difícil de ler porque você CSS integrado diretamente no fluxo de HTML.

• problemas de Citações: O atributo HTML requer aspas, e alguns elementos CSS também exigem aspas (famílias de fontes com espaços entre eles, por exemplo). Tendo vários níveis de citações em um único elemento é uma receita para problemas.