Faixas separadoras de seções usando CSS

Olá, caros colegas.
Meu nome é Thiago e estou postando pela primeira vez no LeGauss, um blog dedicado ao que vem na cabeça dos editores temas nerds ou geek. Decidi começar minha contribuição escrevendo sobre algo sobre o que estou muito interessado.

Mantenho um blog mais pessoal em que uso como separação do texto com minhas notas de rodapé umas faixas azuladas [1]. A idéia é simplesmente organizar os textos, e resolvi aplicar aqui esta brincadeira.

Trata-se de mais uma das fabulosas invenções das folhas de estilo em cascata (CSS), que são conjuntos de atribuições feitas em separado ao código html de uma página. Há diversos textos bem completos que ensinam como utilizar estas folhas de estilo, dentre os quais sugiro o tutorial dado pela w3school.

Para utilizar estas faixas, utilizo o seguinte código em minha CSS, baseada em um estilo Facebook:

.notas
{
background:#faf7e2 none repeat scroll 0%;
border-bottom:1px solid #d6d0cc;
border-top:1px solid #d6d0cc;
color:#677284;
line-height:1.5em; padding:0px 4px;
}

Isto significa que se inserirmos o código

< div class="notas"> Notas: < /div >

teremos como resultado algo similar à seção notas abaixo [2]. Esta sintaxe pode ser compreendida com um pouco de estudo do tutorial que sugeri, mas para rapidamente compreendermos: ao adicionar a atribuição .notas, estamos criando uma classe que, quando aplicada sobre algum texto, caracteriza este texto com suas definições.

Espero poder ter dado alguma idéia de como fazer isto. Se alguém tiver alguma dúvida, sinta-se à vontade para entrar em contato. Para testar seus conhecimentos em css, veja que nós também temos uma classe codigo, que está aplicada aos códigos acima descritos.

Notas:

• [1] Podemos ver como exemplo aqui.
• [2] Se você verificar
  

Post scriptum:

Agradeço profundamente aos outros editores pelo convite.