quinta-feira, 2 de abril de 2015

Trabalhando com Classes e Ids no CSS

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