Respostas:
Apenas para adicionar o que o jdelStrother mencionou sobre as especificações do w3 e o ARTstudio sobre a renderização do navegador.
É recomendado porque quando você tiver o CSS declarado antes <body> início, seus estilos já foram carregados. Muito rapidamente, os usuários veem algo aparecer na tela (por exemplo, cores de fundo). Caso contrário, os usuários verão a tela em branco por algum tempo antes que o CSS chegue ao usuário.
Além disso, se você deixar os estilos em algum lugar no <body>, o navegador precisará renderizar novamente a página (nova e antiga ao carregar) quando os estilos declarados tiverem sido analisados.
linke stylenão devem aparecer no corpo, a menos que tenham escopo (estilo) ou tenham o atributo itemprop(link) declarado.
styleé um elemento de fluxo em html5 e html4.1 (mesmo que não esteja no escopo) e pode ser colocado no corpo.
scopedatributo foi obsoleto.
As versões mais recentes da especificação HTML agora permitem a <style>marca nos elementos do corpo. https://www.w3.org/TR/html5/dom.html#flow-content
Além disso, o scopedatributo que costumava ser um pré-requisito para ter uma styletag no bodyagora está obsoleto.
Isso significa que, como você pode usar a styletag em qualquer lugar que desejar, as únicas implicações são a diminuição do desempenho da página devido a possíveis refluxos / alterações quando o navegador atinge os estilos mais abaixo na árvore de páginas.
Resposta obsoleta:
A <style>tag não é permitida de <body>acordo com as especificações do w3. (É claro que você pode aplicar estilos embutidos via, <div style="color:red">se necessário, mas geralmente é considerado uma separação inadequada entre estilo e conteúdo)
<style>é um elemento de fluxo nos html 5 e 4.1 e pode ser colocado no corpo (como todos os outros elementos de fluxo).
Colocar CSS no corpo significa que ele é carregado mais tarde. É uma técnica que alguns usam para permitir que o navegador comece a desenhar a interface mais rapidamente (isto é, remove uma etapa de bloqueio). Isso é importante para a experiência do usuário em SmartPhones.
Eu faço o meu melhor para manter um css pequeno no <head>e movo o resto na parte inferior. Por exemplo, se uma página usa CSS da interface do usuário do JQuery, eu sempre a movo na parte inferior da página <body>, imediatamente antes dos links para o javascript do JQuery. Pelo menos, todo o item que não é Jquery já pode ser desenhado.
A cabeça foi projetada para (Citar o W3C):
"informações sobre o documento atual, como seu título, palavras-chave que podem ser úteis para mecanismos de pesquisa e outros dados que não são considerados conteúdo do documento "
Veja a estrutura global de um documento HTML . Como o CSS não é um conteúdo de documento, ele deve estar na cabeça.
Além disso, todos os outros desenvolvedores da Web esperam vê-lo lá; portanto, não confunda as coisas colocando-o no corpo, mesmo que funcione!
O único CSS que você deve colocar no corpo é CSS embutido , embora eu geralmente evite estilos embutidos.
Os padrões ( HTML 4.01: o elemento style ) especificam claramente que a tag style é permitida apenas dentro da tag head. Se você colocar tags de estilo na tag body, os navegadores tentarão tirar o melhor proveito de qualquer maneira, se possível.
É possível que um navegador ignore uma marca de estilo no corpo se você especificar um tipo de documento estrito. Não sei se algum navegador atual faz isso, mas não contaria com todas as versões futuras tão relaxadas sobre onde você coloca o elemento de estilo.
styletags são permitidas no corpo se tiverem um scopedatributo.
Embora a styletag não seja permitida no corpo, ela linké, desde que você esteja fazendo referência a uma folha de estilo externa, todos os navegadores devem renderizar e usar o CSS corretamente quando usados no body.
Fonte: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
Além das respostas anteriores, embora colocar um bloco de código de estilo dentro do elemento possa funcionar em navegadores modernos (embora isso ainda não o conserte), sempre há um perigo, principalmente nos navegadores mais antigos, de que o navegador renderize o código como texto a menos que a seção de estilo esteja incluída em uma seção CDATA.
É claro que a outra coisa ao colocá-lo dentro do elemento, além dos estilos embutidos, é que, como não atende às especificações HTML / XHTML do W3C, qualquer página com ele dentro do corpo falhará no validador do W3C. É sempre mais fácil caçar problemas de exibição inesperados se todo o seu código for válido, facilitando a detecção de erros. Um elemento HTML inválido pode afetar adversamente a renderização de todo e qualquer elemento além do local em que ocorre no código, para que você possa obter efeitos inesperados tendo elementos em locais onde não deveriam estar, porque quando um navegador encontra um elemento inválido, ele apenas faz com que seja melhor adivinhar como deve exibi-lo e navegadores diferentes podem tomar decisões diferentes na maneira como o renderizam.
Se você usa um tipo de documento de transição ou estrito, ele ainda é inválido de acordo com as especificações (X) HTML.
Você realmente derrotaria o propósito de usar CSS colocando os estilos no corpo. O objetivo seria separar o conteúdo da apresentação (e função). Dessa forma, qualquer alteração no estilo pode ser feita na folha de estilo, não no conteúdo. Depois de usar o método de estilo embutido, todas as páginas com estilo embutido precisam ser alteradas uma a uma. Tedioso e arriscado, pois você pode perder uma página ou três ou dez.
Usando uma folha de estilo, você só precisa alterar a folha de estilo; as alterações se propagam automaticamente para todas as páginas HTML vinculadas à folha de estilo.
o argumento de neonble também é outro grande motivo; se você estragar o HTML adicionando CSS embutido, a renderização se tornará um problema. O HTML não gera exceções ao seu código. Em vez disso, ele sai e o processa da melhor maneira possível, e segue em frente.
A adesão aos padrões da web usando uma folha de estilo cria um site melhor. E quando você precisar de ajuda, porque as coisas na sua página não são exatamente da maneira que você deseja, colocar o CSS na cabeça, em vez do corpo, cria uma solução de problemas muito melhor para você e para qualquer pessoa de quem você pedir ajuda.
Duas respostas conflitantes:
Da página MDN na tag do link:
Um
<link>elemento pode ocorrer no elemento<head>ou<body>, dependendo se ele possui um tipo de link que está correto para o corpo. Por exemplo, o tipo de link da folha de estilo é body-ok e, portanto, a<link rel="stylesheet">é permitido no corpo. No entanto, essa não é uma prática recomendada; faz mais sentido separar seus<link>elementos do conteúdo do corpo, colocando-os na sua cabeça.
Do CSS The Definitive Guide (4a Edição / 2017) página 10
Para carregar com êxito uma folha de estilo externa, o link deve ser colocado dentro do elemento principal, mas não pode ser colocado em nenhum outro elemento.
Que diferença isso fará?
Prós: Às vezes, é mais fácil aplicar certos atributos em determinados lugares, especialmente se o código está sendo gerado em tempo real (como construir via php e cada uma de uma lista de tamanho dinâmico precisar de sua própria classe ... como para temporizações de itens para transformações).
Contras: um pouco mais lento, pode não funcionar um dia em um futuro distante.
Minha opinião geral sobre o assunto: não faça isso, você não precisa, mas se precisar, não perca o sono por causa disso.
Colocar o <style>no corpo funciona bem com todos os navegadores modernos.
Eu estava usando isso no eBay.
Se funcionar, não chute.