Agora vamos ver como escolher o tamanho da fonte do nosso site.

A propriedade utilizada é font-size e a sintaxe é a seguinte:

lugar do texto {font-size:propriedade;}

onde lugar no texto é o lugar onde você quer aplicar a propriedade como paragrafo (<p>), cabeçário (h1, h2, …) etc..; e a propriedade pode ser :

• um tamanho padronizado (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger)
• uma medida reconhecida pela CSS (pt, px, em, cm…)
• porcentagem %

ex.

h1 {font-size: 16px;}

h2 {font-size: 12pt;}

p {font-size: 100%;}

O comado deve ser inserido antes da tag body no documento CSS que criamos , o estilo.css.

Com esta aula já podemos formatar o tamanho de fonte do nosso documento estilo.css.

Pratique esta aula !!!

Vejam tambem:

 CSS – Alinhando textos ,  CSS – Recuo do texto e CSS – Formatando fontes – Tipos

Qualquer dúvida entre en contato !!!

Param saber mais acesse:

CSS para webdesigners ; CSS tutorial ; W3 Schools

Espero que tenham gostado !!!

Aprendemos a colocar uma imagem de fundo e posiciona-la. Aprendemos tambem a colocar uma cor no fundo da página, A colocar cor no texto, alinha-lo e colocar um parágrafo na primeira linha. Nas proximas aulas vamos tratar de formatação da fonte. Agora vamos ver como escolher o tipo de fonte do nosso site.

A propriedade utilizada é font-family e a sintaxe é a seguinte:

lugar do texto {font-family:propriedade;}

onde lugar no texto é o lugar onde você quer aplicar a propriedade como paragrafo (<p>), cabeçário (h1, h2, …) etc..; e a propriedade pode ser :

• nome da fonte

ex.

h2 {font-family: arial;}

p {font-family: helvetica;}

O comado deve ser inserido antes da tag body no documento CSS que criamos , o estilo.css.

Se o nome da fonte for composto (como Times New Roman) utilizar aspas duplas no nome.

Com esta aula ja podemos formatar a fonte do nosso documento estilo.css.

Na próxima aula adicionaremos tamanho nas fontes.

Pratique esta aula !!!

Vejam tambem:

 CSS – Adicionando cor no texto , CSS – Alinhando textos e CSS – Recuo do texto

Qualquer dúvida entre en contato !!!

Param saber mais acesse:

CSS para webdesigners ; CSS tutorial ; W3 Schools

Espero que tenham gostado !!!

A propriedade utilizada é text-indent e a sintaxe é a seguinte:

lugar do texto {text-indent:propriedade;}

onde lugar no texto é o lugar onde você quer aplicar a propriedade como paragrafo (<p>), cabeçário (h1, h2, …) etc..; e a propriedade pode ser :

• tamanho nos padrões de medida reconhecidas pela CSS como cm, em, px, pt;
• em porcentagem de um elemento considerado padrão .

ex.

h2 {text-indent: 60pt;}

p {text-indent: 2cm;}

O comado deve ser inserido antes da tag body no documento CSS que criamos , o estilo.css.

Não esqueça do ponto e virgula no final de cada linha.

Fácil!!!

teste a tag e pratique um pouco .

Veja tambem :

 CSS – Como funciona e como aplicar em um documento HTML , CSS – Adicionando cor no texto e CSS – Alinhando textos

Qualquer dúvida entre en contato !!!

Param saber mais acesse:

CSS para webdesigners ; CSS tutorial ; W3 Schools

Espero que tenham gostado !!!

A propriedade utilizada é text-align e a sitaxe é a seguinte:

lugar do texto {text-align:propriedade;}

onde lugar no texto é o lugar onde você quer aplicar a propriedade como paragrafo (<p>), cabeçário (h1, h2, …) etc..; e a propriedade pode ser :

left – texto alinhado à esquerda;

right – texto alinhado à direita;

center – texto alinhado no centro;

justify -  texto justificado.

ex :

h1 {text-align:left;}

O comado deve ser inserido antes da tag body no documento CSS que criamos , o estilo.css.

Não esqueça do ponto e virgula no final de cada linha.

Fácil!!!

teste a tag e pratique um pouco .

Veja tambem :

A propriedade background , CSS – Como funciona e como aplicar em um documento HTML e CSS – Adicionando cor no texto

Qualquer dúvida entre en contato !!!

Param saber mais acesse:

CSS para webdesigners ; CSS tutorial ; W3 Schools

Espero que tenham gostado !!!

color – cor do texto

sintaxe:

lugar do texto {color:propriedade;}

onde lugar do texto é o paragrafo(<p>) , cabeçário(h1,h2…)e as  propriedade podem ser o código da cor, código em rgb ou o nome da cor

ex:

h1 {color:#FFFFFF}

h2 {color :00FF00}

p {color: blue}

As referências a cor devem ser colocadas antes da tag body no nosso documento estilo.css.

Não esqueça do ponto e virgula no final de cada linha.

Fácil!!!

teste a tag e pratique um pouco .

Veja tambem :

A propriedade background e CSS – Como funciona e como aplicar em um documento HTML

Qualquer dúvida entre en contato !!!

Param saber mais acesse:

CSS para webdesigners ; CSS tutorial ; W3 Schools

Espero que tenham gostado !!!

A propriedade background define a cor de fundo de um elemento, uma imagem para fundo e ainda se essa imagem será ou não repetida horizontalmente ou verticalmente.

Para linkar sua página HTML na página CSS basta digitar o seguinte código no cabeçário (Head) da página HTML:

Background-color

A cor de fundo em uma página é definida pela seguinte sitaxe:

background-color:propriedade

onde propriedade é igual a :

È mais comum se utilizar o código hexadecimal das cores A tabela de cores em hexadecimal você pode ver neste site. Ao colocar na página basta digitar o código:

e executar a página em html que a cor de fundo entrará automáticamente.

Background-image

Se você quiser por uma imagem de fundo a sintaxe é :

background-image: url (“caminho da imagem”);

Como no exemplo abaixo:

Background-repeat

Usa-se para repetir ou não a imagem na tela de fundo. A sintaxe é :

background-repeat: propriedade;

onde propriedade é igual a :

Exemplo:

Background-attachment

A propriedade background-attachment faz com que a imagem fique fixa na tela ou acompanhe a página conforme a barra de rolagem do navegador é utilizada.A sintaxe é:

background-attachment: propriedade;

onde a propriedade é igual:

Exemplo:

Background-position

A propriedade position da função background faz com que posicionemos esta imagem de fundo na página.Sua sintaxe é : background-position: propriedade onde propriedade é igual :

Exemplo;

Utilizar todas a propriedades em uma única declaração.

Para se utilizar todas as propriedades deve se seguir a seguinte sitaxe:

background: color image repeat attachment position;

em qualquer ordem podendo omitir uma ou mais propriedades. Veja o exemplo:

Com o tempo vamos explorar mais a propriedade background. Pratique estas propriedades para se ambientar bem com elas pois são muito úteis.

Espero que tenham gostado !

Obrigado !

Refêrencias:

http://www.w3schools.com/css/

http://www.maujor.com/tutorial/backtut.php

http://www.pt-br.html.net/tutorials/css/lesson3.asp

1- Utilizando o atributo style do HTML

2 – Uso da tag style no HTML

3 – O método externo no qual se linka uma página HTML para uma folha de estilos externa. Cria-se uma folha de estilo com a extensão .css e utiliza a propriedade link do HTML para ele “puxar” as propriedades da folha de estilo. O link é feito no reader do código HTML (entre as tags <head> e </head>)

Utilizaremos este ultimo método para aprendermos.

Depois de criada, você pode aplicar o CSS em quantas páginas quiser que elas manterão o mesmo lay – out.

A sintaxe da CSS

A sintaxe CSS é bem simples:

seletor {

propriedade: valor;

}

O Seletor é em qual tag HTML a CSS será aplicada; a propriedade é as propeiedades da página como fonte, cor de fundo, e outras; e o valor é o valor da propriedade. No caso da cor de fundo é o numero hexadecimal da cor, no caso da fonte é o tipo de fonte utilizada.

Espero que vocês gostem

Obrigado !

Referências:

HTML.net

CSS para web design.

Tutorial CSS – Primeiros Passos

Em umas dessas excursões de conhecimento na web me deparei com uma sigla que me chamou atenção. Me chamou mais atenção por confundi-la com RSS do pela própria função da mesma. Mas ao descobrir o CSS e sua utilidade, não poderia deixar de compartilha-la com todos iniciantes e estudantes de informática que, assim como eu, buscam tecnologias novas para facilitar o dia a dia.

Vou falar hoje uma introdução a CSS e depois com o tempo vamos apreder juntos (literalmente) o uso desta “linguagem”.

Introdução a CSS

CSS (Cascading Style Sheets) é uma linguagem de estilo que define a aparencia dos documentos HTML. O principal objetivo da CCS (em português folhas de estilo em cascata) é que quando alguém for montar uma página web, se preocupe mais com o conteúdo do que com o formato. Como assim? Monta-se o formato da página em um documento css, acertando o tipo de fonte, a cor do fundo, enfim todo o lay-out, e pode – se usar o formato criado na página que quiser sem se preocupar em montar a página novamente.

Pode usar HTML para isso, mais o CSS tem mais opções e é mais preciso e sofisticado. o código do CSS. É aconselhavel que você saiba HTML básico pois , além dos comandos CSS serem parecidos, usarmos um pouco de HTML.

Aqui vai alguns links de referêcia para quem quiser quiser aprender mais (e mais rápido CSS). Minhas matérias serão baseadas nestes links entre outros.

http://www.pt-br.html.net/tutorials/css/

http://www.maujor.com/tutorial/intrtut.php

http://pt.wikipedia.org/wiki/Cascading_Style_Sheets

Espero que tenham gostado.