Você que está iniciando no ramo de Desenvolvimento para a Web, ou até mesmo gostaria de entrar nesse mundo, não pode deixar de visitar o site HTML.net, ele possuía uma versão em inglês, que foi traduzida em conjunto com o Maujor.
As Divs(divisões), são elementos em níveis de bloco do (x)HTML usados para definir seções de um arquivo (x)HTML. Uma divisão pode conter todas as peças que compõem sua página, incluíndo divisões adicionais, imagens, texto.
Por exemplo, você define uma divisão dentro de um arquivo (x)HTML colocando o seguinte código dentro das tags <body></body>:
<div>
Aqui vai o conteúdo do site
</div>
E na hora de aplicar algum estilo você deve prosseguir da seguinte forma, o HTML fica assim:
Os seletores de ID são semelhantes as classes, mas há uma diferença, eles só podem seu usados uma única vez em uma página (x)HTML. Seu uso geralmente é denominado para elementos de disposição da página, que geralmente são usados uma única vez, e os seletores de classe ficam a cargo de estilizar o resto de nossa página.
Vamos pegar como exemplo uma div que contém o nosso site:
<div id="container">
Aqui vai o conteúdo do site
</div>
Isso mesmo que você está lendo, você desenha aquele layout maravilhoso no Photoshop, manda editar no Image Ready, faz os recortes e ainda leva um CSS prontinho de brinde, o código gerado não é dos melhores, mas achei a idéia interessante e estou compartilhando aqui com vocês. O site é o seguinte:
How to convert your photoshop document to a CSS in less than 30 seconds.
Muitas pessoas, quando estão iniciando em desenvolvimento para a Web, encontram algumas dificuldades para problemas simples, e um deles é como remover a margem de nossa página, ou seja, queremos que nosso documento fique sem aquelas margens indesejadas em nossos documentos. Para vocês entenderem melhor, veja uma screenshot do problema abaixo:
Como você pode notar existe uma área em branco entre a área do documento e a janela do browser, mas nós não queremos que nosso documento fique assim. A solução é a seguinte, em nosso CSS, devemos definir para o body que a margem seja 0:
<style type="text/css">
body {
margin:0;
}
</style>
Agora veja como ficaria o documento:
Viram como é fácil, isso diz ao browser que não deve haver nenhum espaço entre elementos estruturais e a janela do browser.
Em um mundo perfeito, nossas folhas de estilo funcionariam perfeitamente, mas como vivemos em um outro mundo, essa realidade está longe devido a navegadores inperfeitos, comportamentos desconhecidos e muitas vezes problemas que não acabamos achando a solução. Vou deixar aqui alguns passos para eliminar-mos os erros em nossas folhas de estilo:
A causa mais óbvia para um erro em nossa página é um erro em nosso código, para verificar-mos erros em nosso código, podere-mos usar o validador do W3C para checar o HTML ou o CSS. Uma outra maneira simples é usando a extensão Web Developer para o Firefox, ou a extensão HTML Validator, que lhe permite validar o código sem estar conectado.
Edipo é um editor de folhas de estilo personalizado com base na Web, especialmente desenvolvido e desenhado para ajudar aos usuários a criarem a sua própria folha de estilo personalizada, para modificarem a seu modo as páginas Web para uma melhor legibilidade.
Edipo é especialmente útil para os deficientes visuais, ele gera uma folha de estilos de acordo com as especificações do usuário, para modificar determinadas opções que podem ser instaladas em seu navegador como folha de estilo personalizada.
