Como deixar a primeira letra maior e diferente em texto ou posts de blogs do blogger

Vou mostrar como personalizar, com Css, a primeira letra de um elemento em Html, como exemplo a primeira letra das postagens de blogs do blogger. No blogger.com, isso é feito apenas uma vez e esse efeito se aplicará a todas as postagens antigas e novas, é melhor do que personalizar cada vez que for postar.

Para personalizar a primeira letra usa-se o pseudo-elemento first-letter, na verdade não é a primeira letra, mas poderia ser o primeiro caractere, mas nem todos caracteres vão ter essa personalização se forem o primeiro, e, alguns podem ter a mesma personalização da letra, por exemplo 4% juntos os dois ficam personalizados, o caractere º não fica personalizado e o ª fica personalizado se vier antes de algo ou desacompanhado, resumindo, os caracteres especiais podem ficar ou não personalizados, por esse motivo é bom não usá-los para iniciar frase onde tem esse efeito. Se você colocar uma imagem link antes da primeira letra aí não funciona o efeito da letra, se colocar primeiro  imagens com title ou alt também não dá certo.

Você pode mudar o estilo da primeira letra de um elemento Html, como uma div, e, deixá-la vermelha, assim:
div:first-letter{color:red;}

Exemplos de Css para personalizar primeira letra que pode ser usado no blogger

Se você precisa saber como colocar Css no blogger, clique aqui

Diferente do código mostrado acima, geralmente a gente quer personalizar elementos que já tenham um nome de class, como, no caso do blogger, a área referente ao conteúdo de postagens tem uma class chamada post-body e, sendo assim, usaríamos algo como:.post-body:first-letter{color:red;}
Entre chaves está a estilização{aqui estilos} e são separados por ponto-e-vírgula; você pode pesquisar estilos Css na web, pode ver estilos e tipos de fontes aqui

Nos exemplos abaixo, vamos usar float:left porque quando tiver uma letra muito grande, nesse caso é necessário para que o restante do texto 'se encaixe' e a primeira linha não fique muito distante do elemento acima dela, se você optar por tamanho de fontes de tamanho média ou pequena, aí talvez precise retirar o float:left

Vamos a mais um exemplo, acima apenas deixava a letra vermelha, agora, será a letra azul e 50% maior que o aplicado...:.post-body:first-letter{float:left; color:blue; font-size:150%}
No exemplo acima, a cor de fonte(letra) é azul e tem um tamanho de 150% que é multiplicado pelo tamanho de fonte aplicada a postagem, por exemplo, se o tamanho usado for de 18px essa letra agora terá 27px, que é 150% de 18. Agora, vamos pegar o exemplo acima e mudar a cor da letra para verde, duplicar o tamanho da fonte e com font-style:italic ainda deixá-la em itálico:.post-body:first-letter{float:left; color:green; font-size:150%; font-style:italic;}
Agora, pegaremos o código acima e, vamos aumentar a letra para o dobro com 200% e acrescentar font-weight:bold; que irá deixar ela em negrito:.post-body:first-letter{float:left; color:green; font-size:200%; font-style:italic; font-weight:bold;}
Agora, além de todos os estilos que acrescentamos, com o uso de font-variant:small-caps vamos torna a fonte em um tipo de maiúscula bonita, e isso acontece isso acontece mesmo que você tenha escrito em minúsculo:.post-body:first-letter{float:left; color:green; font-size:200%; font-style:italic; font-weight:bold; font-variant:small-caps;}
Agora, vamos mudar a cor novamente e com font-family:georgia serif vamos ainda mudar o tipo de fonte para uma letra com 'pézinho', que parece mais antiga, talvez fique mais bonito para esse efeito com apenas a primeira letra diferente:.post-body:first-letter{float:left; color:#888888; font-size:200%; font-style:italic; font-weight:bold; font-variant:small-caps; font-family:georgia serif;}No exemplo de código acima, usei um código de cor chamado hexadecimal, o código de cor #888888 é preto menos escuro(tendendo para cinza), a gente pode optar por nome de cores básicas em inglês ou códigos hexa que servem para ampliar a quantia ou tonalidades de cores, saber mais sobre códigos de cores hexa clique. O tipo de fonte é georgia e se no Pc do visitante não tiver ela o navegador irá escolher uma outra da familia serf(com pé)

Com estilos Css dá para fazer muita coisa, eu não mostrei como mudar o fundo dessa primeira letra porque ficaria esquisito, mas se alguém tiver uma dúvida sobre estilizar essa primeira letra, pergunte nos comentários abaixo, na medida do possível eu respondo.

• Css para resolver regras de comentário que ficam abaixo do formulário no Blogger
• Porque ficou tão difícil usar o blogger para criar um blog ou site?
• Mudar aparência da data do título da postagem do Blogger para ficar quadrada
• Letras maiúsculas com Css, exibir ou impedir, exemplo o comentário no BlogSpot