LINGUAGEM: CSS parte 3 - Começando a utilizar o CSS

LINGUAGEM: CSS parte 3 - Começando a utilizar o CSS

Como funciona o CSS.

Agora voce deverá começar a aplicar na prática o CSS. Você verá o básico sobre o modelo CSS e que código é necessário para usar CSS em um documento HTML.
Muitas das propriedades usadas em Cascading Style Sheets (CSS) são semelhantes àquelas do HTML. Assim, se você está acostumado a usar HTML para layout irá reconhecer muitos dos códigos que usaremos. Vamos dar uma olhada em exemplos concretos.

A sintaxe básica.

A  sintaxe da linguagem CSS é bem parecida com a HTML. Para quem já possui prática em construção de layout com html não tem dificuldades quando começa a utilizar a css.
Na sintaxe html as propriedades de um elemento é aplicada diretamente nele.

A sintaxe da linguagem CSS é constituida de três partes:
um seletor (selector), uma propriedade (property) e um valor (value):
selector {property: value}
O selector é na maioria das vezes uma tag HTML que será usada para dar propriedade há algum elemento, a property é o atributo que será modificado (fonte, cor, espaçamento, etc) e para cada uma destas propriedades terá um value que irá definir realmente a propriedade.
Obs.: A propriedade e o valor deve ser separado com dois pontos e devem estar entre chaves.
Ex. 1:
body{ color:white;}
Seguindo o exemplo acima, você pode/deve colocar mais de uma propriedade para o seletor e cada propriedade deve ser separada com ponto e vírgula.
Ex. 2:
body{ color:white;font:verdana;font-size:12px;text-align:center;}
A forma acima é aconselhável para pequena quantidade de propriedades, já quando há um número relativamente grande é melhor tornar mais legível nosso código:

body{ 
color:white;
font:verdana;
font-size:12px;
text-align:center;
}

As diferenças da sintaxe de HTML e CSS.


Suponha que sua página deve ter a cor de fundo branco deve ser aplicada diretamente na propriedade body:

 <body bgcolor="#fff">
Já com CSS o mesmo elemento (body) terá a propriedade separada em uma folha de estilos assim:

 body {background-color: #FF0000;}
Os códigos utilizados nas linguagens e HTML e CSS são bem parecidos. O exemplo acima serve para demonstrar o fundamento do modelo CSS.

Mas, onde devemos colocar o código CSS? Em uma folha de estilos como é conhecida, é onde colocamos os mais diversos seletores e suas propriedades. No próximo capítulo iremos dar ênfase para esta área.

Aplicando o CSS ao HTML.

Você pode aplicar CSS ha um documento html de três formas diferentes. Todas as 3 formas funcionam corretamente mas para uma melhor organização de código é mais viável a terceira forma.

1ª Forma: In-line (O atributo style).

A primeira maneira de aplicar o CSS é pelo uso do atributo style do HTML, nele aplicamos a propriedade diretamente no elemento.
Utilizando o exemplo anterior onde há cor branca para o fundo da página, pode ser aplicada conforme mostrado a seguir:
<html>
   <head>
  <title>Tipo 1: In-line</title>
   </head>
   <body style="background-color: #fff;">
  <p>Esta é uma página de fundo branco</p>
   </body>
 </html>

2ª Forma: Internamente (A tag style).

A segunda forma é uma das mais usadas, esta maneira de aplicar CSS consiste no da tag <style> do HTML. Voce poderá colocar dentro desta tag quantos seletores desejar. Para um melhor entendimento veja o exemplo a seguir:
<html>
   <head>
  <title>Exemplo</title> 
 
<style type="text/css">
    body {background-color: #fff;}
  </style> 
 
</head>
   <body>
  <p>Página de fundo branco</p>

   </body>
 </html>

3ª Forma: Página externa (Um link para uma folha de estilos externa)

A terceira forma é a mais indicada, porque voce pode incluir os seletores de todas as suas páginas economizando espaço e pode apenas chamar esta folha externa de estilos dentro de cada página.

Uma folha de estilos externa é um simples arquivo de extensão .css.
Vamos fazer um exemplo no qual voce criou uma folha de estilos externa de nome style.css e está localizada no diretório style. Tal situação está mostrada a seguir:

Para chamar esta folha de estilos devemos "linkar" ela (style.css) dentro do documento HTML. A "lincagem" é criada com uma simples tag usada para chamar todo conteúdo de dentro de style.css da seguinte forma:
<link rel="stylesheet" type="text/css" href="style/style.css" />
O caminho para a folha de estilos deve ser indicado no atributo href.
Obs.: Este link para a folha de estilos deve ser inserido dentro da secção header do HTML, isto é, entre as tags <head> e </head>. Veja no exemplo abaixo:
<html>
  <head>
  <title>Exemplo Documento HTML</title>
  <link rel="stylesheet" type="text/css" href="style/style.css" />

   </head>
   <body>
   .
.
.
</body>
 </html>
Este link é que informará o local do arquivo .css para utilizar o conteúdo CSS na organização do layout da página HTML, a grande vantagem deste tipo de aplicação, é a possibilidade de várias páginas HTML utilizarem o conteúdo de apenas uma página CSS, desta forma se economiza muito código o que consequentemente economiza trabalho e dá um padrão para para suas páginas. Caso voce necessite modificar algo no layout de todas as suas páginas, bastará modificar apenas uma vez na folha de estilos que todas serão modificadas, diferente do modo da tag style aplicada para cada página individualmente onde voce teria que fazer esta mesma modificação em cada uma.

Aplicação da integração Html / Css

Vamo agora criar uma pequena aplicação de teste de integração entre Html e CSS com a forma de link externo de folha de estilos, para realizar os testes crie as páginas index.html e style.css com algum editor simples, pode ser o bloco de notas ou o Notepad++ (Mais indicado).

style.css

body {
   background-color: #000;
 } 
 
Obs.: A propriedade Bg-color está com a cor preta para poder visualizar melhor o efeito
a cor branca é #fff.

index.html

<html>
   <head>
  <title>Primeira página de teste</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
   </head> 
<body>
 
<h1> Primeira página de testes html </h1>
 
 
   </body>
 </html>
 
Obbs.: Mantenha os dois arquivos no mesmo diretório. 
E lembre-se de salvar os dois arquivos com a extensão adequada (".css" e ".html").


Agora para verificar sua criação abra o index.html no seu navegador e veja uma página com o fundo preto e seu texto.



No próximo capítulo será abordado o uso das propriedades no CSS.



CSS parte 1 

CSS parte 2