[CÓDIGOS] html/css para templates

Fala, gente bunita e zegzy! Como cês tão? \o
Hoje eu acordei de bom humor e resolvi, vendo que ninguém participou da challenge de códigos, fazer um apanhadinho pra vocês :3 não sou expert em códigos, mas a gente se arranja. O tutorial é dividido em três partes: html básico, CSS e html avançado.

primeira parte: HTML básico

- Background
- Borda
- Texto
- Posicionamento

segunda parte: CSS

- Sintaxe
- DIVs e SPANs
- Transition
- Scrollbar

terceira parte: HTML avançado

- Tabelas
- Padding e margin
- Opacidade
- CSS

Divirtam-se! E qualquer dúvida é só postar aí que a gente se resolve \o
e postem seus templates aqui, seus limdos, quero ver é

_______________- 1, medidas: width e height.
São as medidas básicas de um template, sendo width a medida horizontal e height, a vertical. Em geral, são medidas por pixel, mas também se pode medir usando centímetros (cm).

EXEMPLO (CLIQUE):

Um detalhe é: sempre, SEMPRE coloque o 'px' colado nos números e depois, coloque ponto e vírgula ( ; ), senão vai dar um bug tão infeliz que você nem vai saber aonde foi parar. Sério.

_______________- 2, background: color, image, repeat, attachment.
Background é o plano de fundo do template, por exemplo esse verde dyvo do exemplo acima. Ele pode ser de três tipos:
color: é só uma cor como plano de fundo.

EXEMPLO DE COLOR (CLIQUE):

image: é uma imagem como plano de fundo, por exemplo:

EXEMPLO DE IMAGE (CLIQUE):

color, image, repeat: é uma opção menos usada, mas é tão boa quanto. Nela, você pode colocar uma cor, que é mostrada enquanto a imagem carrega. Também é um exemplo de background-repeat, que é a repetição da imagem no fundo.

EXEMPLO DE COLOR E IMAGE (CLIQUE):

attachment: é a forma de rolagem da imagem, uma é quando ela é fixa e a outra, quando pode rolar junto com a página.
ps: me parece que o forumeiros não suporta esse tipo de attachment, mas taí:

EXEMPLO DE ATTACHMENT FIXED (CLIQUE):

EXEMPLO DE ATTACHMENT SCROLL (CLIQUE):

_______________- 3, bordas.
Bordas são... bordas. Não tem outra definição. Como são muitas e de diversos tipos, fazer exemplos de cada uma seria muito difícil e pouco objetivo, então aqui vão os codes:

BORDAS (CLIQUE):

_______________- 4, texto.
A parte mais importante de tudo, né? São diversas configurações que você pode usar individualmente ou misturadas, mas: BOM SENSO. Sempre, acima de tudo, lembre-se: um texto é pra ser lido. Tamanhos muito pequenos, cores exageradas... tudo isso contribui para que os Pandas morram =/

TEXTO (CLIQUE):

_______________- 5, posicionamento.
Algo bem importante para a estética do template. Para vias de informação, existem três tipos (absolut, fixed e relative), mas os dois primeiros dizem respeito ao posicionamento da página inteiro, ou sejam: vão deformar a skin do board. Por isso, restrijo o aprendizado.

relative: é o posicionamento do elemento (div) tendo por base o primeiro pixel da primeira linha, o canto superior esquerdo. Você pode usar duas configurações por div, senão corre o risco de deformar: top e left OU right. Existe também o bottom, mas eu nunca consegui usar, então deixa quieto -q.

EXEMPLO DE POSITION (CLIQUE):