Olá pessoal,
Vou resumir aqui o conceito de HTML e CSS para que possamos iniciar nossa implementação.
HTML – Sigla HyperText Markup Language, traduzindo Linguagem de Marcação de Hipertexto é um tipo de marcação para que possamos produzir páginas na Web e acessando através de um navegador
CSS – Sigla Cascading Style Sheets é utilizada para definir uma aparência ao nosso HTML gerado no navegador, ou seja, para que o site fique com uma apresentação melhor para o usuário.
Logo abaixo temos um código HTML bem simples onde vamos aplicar o CSS para que possamos ter uma apresentação melhor deste conteúdo.
Um editor que acho bem interessante para que possamos começar a praticar é o Notepad++, ele é bem rápido, grátis e de fácil instalação.
Quem quiser baixar, link.
Abra seu editor, e digite o código abaixo:
<html> <head> <title>Exemplo 01</title> </head> <body> <h1>O meu nome é?</h1> <p>Rafael Fagundes</p> <h1>Qual módulo estou estudando?</h1> <p>HTML e CSS</p> </body> </html>
Salve este arquivo como index.html. Este HTML acima está sem folha de estilo (CSS). Clique aqui e veja o exemplo.
Para as perguntas que estão nesse exemplo, usamos a tag <h1> que é usada para títulos. E para nossas respostas usamos a tag <p>, para definir como parágrafo.
Vamos para o nosso CSS:
Continuando em nosso editor, vamos fazer um arquivo novo, ele deverá ter o nome estilo.css. É interessante fazer o arquivo CSS separado do HTML para que a manutenção dele seja bem mais fácil.
Digite:
/*Definir as configurações padrões*/
*{
font-family: arial; /*Definir a fonte padrão*/
font-size:12px; /*Definir o tamanha da fonte padrão*/
}
/*Perguntas*/
h1{
font-size:16px;
background:#ccc; /*Definir um fundo para o texto da pergunta*/
border:1px solid #999; /*Borda da caixa onde se encontra a pergunta*/
height:22px; /*Altura da caixa onde se encontra a pergunta*/
padding:5px; /*Margem interna para que o texto não fique grudado com a borda*/
}
/*Respostas*/
p{
color:#333; /*Cor da fonte*/
}
Salve o arquivo CSS.
Voltando ao index.html, dentro da tag <head> vamos fazer o link para o nosso CSS para que o site possa ter a aparência que definimos no CSS, exemplo:
<head></pre> <title>Exemplo 01</title> <link href="estilo.css" rel="stylesheet" type="text/css" /> </head>
Salve o arquivo index.html. Agora nosso HTML terá uma aparência diferente.
Abra em seu navegador o arquivo index.html, ele deverá ter esta aparência. Clique aqui para ver o exemplo.
Este formulário foi baseado em um exemplo que se encontra no blog do Nivaldo, onde ele está ensinando a parte básica do PHP, para quem tem interesse em programação, é bem interessante poder integrar este CSS ao exemplo que ele está passando, estarei ensinando em alguns posts como formatar layout de acordo com os formulários de programação que o Nivaldo esta fazendo. Clique aqui e confira o artigo.
Qualquer dúvida só falar pessoal.
Abraço