Tutorial: Como fazer CSS

Tutorial: Como fazer CSS
O que é CSS? é a sigla para Cascading Style Sheets que em português foi traduzido para folhas de estilo em cascata e nada mais é, que um documento onde são definidas regras de fomatação ou de estilos, a serem aplicadas aos elementos da marcação de um documento HTML.
Por que devo usar CSS e quais as vantagens? CSS permite que você retire da marcação HTML toda a formatação (apresentação) do documento WEB. Quem vai determinar cores, formas, tipos e tamanhos, posicionamento e em fim todo o "visual" da página são as CSS. Inúmeras são as vantagens do uso das CSS nos documentos Web. Eis uma relação das principais: controle total sôbre a apresentação do site a partir de um arquivo central; agilização da manutenção e redesign do site; saida para diferentes tipos de mídia a partir de uma versão única de HTML; redução do tempo de carga dos documentos Web; adequação simplificada aos critérios de acessibilidade e usabilidade;elaboração de documentos consistentes com as aplicações de usuários futuras;aumento considerável na portabilidade dos documentos Web.

(Outras definições que voce precisa saber: uppercase o texto fica maiusculo, padding deixa uma distancia da borda, width é o tamanho do post, comentário, etc, border-left é a borda do lado direito, border-right borda do lado esquerdo, border-bottom borda de baixo, border-top borda de cima (voce coloca a borda onde achar que for necessario, quando for colocar a borda igual em todos os lados, coloca só border).
Agora que voce já sabe porque esta lendo isso, vamos ver como fazer esse "mostrinho" kkkkkkk Primeiramente voce precisa de uma base, então fiz uma especialmente para voces, (clique aqui). Agora, a lista de borda e de cursores (clique aqui).
Eu deixei o css todinho aqui, ai do lado botei a "legenda" ou melhor, o que isso significa e o que voce deve colocar ai. Essa base é simples, depois que voce adquirir mais experiência vai acrescentando coisas mais elaboradas e tal.
Logo no começo, tem os creditos, não precisa tirar pois não afeta em nada seu css, se quiser por acrescentar "editada por: FULANO DE TAL".

p, a, body, td, tr, div {
font-family: verdana; Ai voce coloca a fonte que vouce quer no css em geral, pode ser georgia, arial, tahoma, enfim da fonte se sua preferencia!
font-weight: normal;
font-size: 11px; Aqui voce coloca o tamanho da fonte, quanto maior o número, maior a fonte vai ser. 
color: #000000;} A cor da fonte em geral, ou melhor o codigo da cor. (voce obtem ela no cs, pf, ou em alguma tabela de cor que se acha no google. 

a, a:link{ Esse é os links antes de passar o mouse em cima. 
font-family:georgia; A fonte do link (antes de passar o mouse em cima). 
color: #000000; A cor do link (antes de passar o mouse em cima). 
cursor: Help; Qual cursor voce quer quando o mouse for para cima do link. 
font-weight: bold; O estilo do link, (bold é em negrito, italic é em italico e assim por diante) isso claro, antes de passar o mouse em cima. 
TEXT-DECORATION: none;}

a:hover { Esse é os links com o mouse em cima
color: #000000; A cor do link quando voce passar o mouse por cima 
font-family:georgia; A fonte que vai ter quando voce passar o mouse por cima 
font-weight: bold;font-weight: bold; O estilo do link, (bold é em negrito, italic é em italico e assim por diante) quando voce passar o mouse em cima. 
TEXT-DECORATION: none;
cursor: Help; Qual cursor voce quer quando o mouse for para cima do link. }

.subtitulo { Isso é onde tem escrito "favoritos, últimas fotos, links, visitas e últimos cadastros". 
font-family: Georgia; A fonte do subtitulo
color: #000000; A cor do subtitulo 
font-style: none;
font-weight: bold; O estilo do subtitulo, bold é em negrito, italic é em italico e assim por diante. 
-moz-border-radius: 0px;
background-color: #none; A cor do fundo do subtitulo, se não quiser fundo no subtitulo, deixa #none mesmo 
font-size: 11px; Tamanho do subtitulo 
padding: 2px;
width: 120px; }

.titulo {
color: #000000; A cor do titulo
height: 15px;
margin-left: 500px;
width: 278px;
font-family: georgia; Ai voce coloca a fonte que vouce quer no css em geral, pode ser georgia, arial, tahoma, enfim da fonte se sua preferencia!
font-style: italic; O estilo do titulo, bold é em negrito, italic é em italico e assim por diante. 
margin-top: 25px;
font-size: 34px; O tamanho da fonte do titulo, quanto maior o numero, maior vai ser}

input, textarea { A parte onde escreve o comentário
color:#000000; A cor do comentario, (na parte onde escreve). 
font-family: georgia; A fonte do comentario, (na parte onde escreve). 
text-align: center; A posição, tipo center a pessoa escreve no centro, right no lado direito e left no lado esquero. (na parte onde escreve). 
font-size: 11px; O tamanho da fonte do comentario, (na parte onde escreve). 
background-color: #2B2B2B; A cor do fundo da parte do comentario, (na parte onde escreve). 
border: 1px solid #666666; A cor da borda da parte onde escreve. 
-moz-border-radius: 0px 0px 0px 0px; O aredondamento do comentario, na parte onde escreve. }

.comentarios { E a parte onde voce le o comentario, e para quem não le é a parte onde tem "Apenas o dono deste FlogVip pode visualizar os comentários desta foto!" 
background-color: #none; a cor do fundo
border: 1px solid #none; a cor da borda
color: #000000; a cor da fonte
font: 11px georgia; o tamanho e a fonte do comentario
text-align: center; A posição, tipo center a o comentario fica no centro, right no lado direito e left no lado esquero. 
padding: 2px 2px 2px 2px;
width: 450px; o tamanho da caixa de comentario }

::-moz-selection { essa é a seleção colorida, ou seja quando agente seleciona o texto sabe, pronto a cor que fica é a que voce botar aqui. 
color: #ffffff; a cor da fonte 
background: #E476A1; A cor do fundo da seleção. }

::selection {
color: #ffffff; a cor da fonte 
background: #E476A1; A cor do fundo da seleção. }

#footer { rodapé.
background: #B3CE6E url(''); fundo do rodapé.
color: #000000; cor da fonte do rodapé 
font-family: verdana; a fonte do rodapé.
text-transform: uppercase;
font-size: 10px; o tamanho da fonte.
line-height: 25px;}

a img {
filter:alpha(opacity=95 );
-moz-opacity:0.95; opacity:0.95;
padding: 0px;border: 0px solid #000000;
cursor: Help; }
a:hover img {
filter:alpha(opacity=100);
cursor: Help;
-webkit-transition: 0.9s ease-in;
-moz-opacity:1.0;opacity:1.0;
-moz-border-radius: opx;
padding: 0px;
border: 0px solid #000000;}

essa é a parte da formatação da fonte, quando voce for escrever bota <*b> seu texto para ficar em destaque. Pode acrescentar quantas letras quiser.
b {
cursor: sw-resize; color: #000000; Cursor quando passar o mouse em cima dessa marcação e a cor, respectivamente. }
s {
cursor: sw-resize; color: #000000; Cursor quando passar o mouse em cima dessa marcação e a cor, respectivamente. }
i {
cursor: sw-resize; color: #000000; Cursor quando passar o mouse em cima dessa marcação e a cor, respectivamente. }

html, body { o corpo da página
border-top: 5px solid #ffffff; Borda de cima, (fica em cima da barra de ferramentas). 
background-attachment: scroll;
background: #F7F5F4 url('=') repeat;} Cor do fundo do corpo da página, ou se preferir o link do fundo. 

.table { Essa é a tabela, ou seja o post. Voce pode fazer varias, mais não esqueça de trocar os nomes.
color: #000000; a cor da fonte da table.
background-color: #FCF5F9; o fundo da table.
border-top: 1px solid #F8E7F0; borda de cima, grossura da borda, estilo da borda e cor, respectivamente.
border-bottom: 1px solid #F8E7F0; borda de baixo, grossura da borda, estilo da borda e cor, respectivamente.
border-left: 12px solid #F8E7F0; borda do lado esquerdo, grossura da borda, estilo da borda e cor, respectivamente.
border-right: 5px solid #F8E7F0; borda do lado direito, grossura da borda, estilo da borda e cor, respectivamente.
text-align: justify; padding: 12px; distancia entre a borda e na parte que escreve.
-moz-border-radius: 0px; arredondamento da borda.
line-height: 13px;
font-family: Verdana; fonte da table.
width: 500px;}tamanho da table.

#barra { essa é a barra de ferramentas, onde tem "postar foto, painel de controle, sair, etc".
align: center;
margin: auto;
height: 40px;
width: 100%;
background: #151515; a cor do fundo
border-right: 0px solid #;
border-left: 0px solid #;
border-bottom: 1px solid #161616; a borda de baixo da barra, grossura, estilo e cor.
border-top: 6px solid #000000;a borda de cima da barra, grossura, estilo e cor. 
-moz-border-radius: 0px 0px 0px 0px;
text-align: center;}

#barra .tubo {
padding:0;
background: transparent;
width: 100%;}

#barra .fvbarraf {
padding:0;
width: 100px;
height: 15px;
background: transparent;
border: #000000 1px dashed;
font: bold 11px Verdana; color: #2A2A2A; } A cor dos links na barra, antes de passar o mouse. 

#barra .fvbarra a:link, #barra .fvbarra a:visited , #barra .fvbarra a:active {
color: #2A2A2A; a cor dos links da barra, antes de passar o mouse
line-height: 10px;
font-size: 9px;
text-decoration: none;
text-align:center;
padding:0;
border:0;
text-transform:uppercase;
position: relative; top:auto; left:auto;
background:transparent;}

#barra .fvbarra a:hover {
color: #3F3F3F; a cor dos links na barra, com o mouse em cima.
line-height: 10px;
font-size: 9px;
text-align:center;
padding:0;
-moz-border-radius: 10px 10px 10px 10px;
text-transform:uppercase;}

#barra .fvbarra {
font: bold 11px Verdana;
color: transparent; }

#barra .barraimg { opacity:.0; }


AGORA É SÓ HOSPEDAR EM ALGUM SITE (recomendo o webs.com) E SER FELIZ *O*
- - -ESPERO TER AJUDADO, BEIJOS :* - - - ALINE MOURA - - -