Já vimos no Blog, quais as diferenças entre Ids e Classes, tanto no Javascript como no CSS. Vamos fazer um pequeno estilo para dar vida a nossa página HTML.
Antes disso, entre no site da W3C para poder ver todas as propriedades e descrição do CSS.
1 - Abra seu documento HTML, digite de acordo com a imagem abaixo:
Vimos que na tag DIV colocamos a classe com o nome de paragrafo, e na tag P colocamos uma id com o nome txt. Salve seu documento com a extensão .html, abra o navegador e veja o resultado.
O resultado é gerado no seu navegador igual a imagem acima. Agora vamos inserir o nosso estilo para dar mais vida ao nosso documento.
2 - Abra seu editor de texto e digite de acordo com a imagem abaixo:
Obs: No CSS quando chamamos as classes devemos colocar 0 '.' em seguida o nome da classe e quando for ID colocamos o '#' antes do nome, igual mostrado na imagem acima.
Salve seu documento com a extensão .css, e não se esqueça de chamar esse arquivo externo dentro do seu HTML. Ex: <link rel="stylesheet" type="text/css" href="nomedoarquivo.css" />.
Em seguida vamos ao navegador, atualize sua página apertando F5 e veremos o resultado:
É isso ai galera, como visualiza na imagem, colocamos alguns estilos na nossa página HTML, como cor, borda, fonte, tamanho da fonte e deixamos nosso documento com estilos. Com o CSS, podemos fazer o que imaginarmos na nossa mente. Espero que eu tenha ajudado, e não se esqueçam de entrar no site da W3C para ver muitas propriedades do CSS.
Abraços e até o próximo post.
Nenhum comentário:
Postar um comentário