O que é CSS?CSS(Cascating Style Sheets) é uma tecnologia que apareceu em 1996 e padronizada pela W3. O CSS permite que sejam adicionados atributos especiais as tradicionais tags do HTML alem de permitir uma formatação muito mais precisa nos elementos no layout da pagina.
---
Para que usar CSS?Um exemplo que todos ja conhecem é esse efeito de quando se passa o mouse acima de um link ele muda de cor ou faz qualquer alteração na font. Claro que isso é o mais basico de tudo, com CSS vc pode posicionar elementos, definir font/cor/fundo para os textos e links, bordas e até alguns efeitos especiais como sombra.
---
Como usar?Você pode usar 4 diferentes modos de usar CSS em uma pagina HTML:
Criar um arquivos .css onde vai estar todo o código e "chama-los" na pagina html;
Deixar os códigos dentro da própria pagina html entre as tags <style></style>
Importar o conteudo CSS de outro arquivo;
Adicionar dentro das próprias tags do html usando o atributo style.
Modo 1Abra um novo documento no bloco de notas, salve com a extensão .css e, na sua pagina html, adicione entre as tags <head></head>:
Código:
<link rel=stylesheet href="nome_do_arquivo.css" type="text/css">
Modo 2Entre as tags <head></head>, adicione:
Código:
<style type="text/css">
Aqui vai o conteudo em CSS
</style>
Modo 3Entre as tags <head>:
Código:
<style type="text/css">
@import url(nome_do_arquivo.css)
</style>
Você deve estar se perguntando, mas isso não é a mesma coisa do Modo 1? Não. Este metodo é melhor por permitir que o conteúdo do arquivo de onde esta sendo importado seja combinado com o CSS digitado na própria pagina HTML. Ex.:
Código:
<style type="text/css">
@import url(arquivo.css)
Aqui vai mais códigos CSS
</style>
Modo 4Adicionando a parte CSS dentro das tags do HTML com o atributo Style. Ex.:
Código:
<h1 style="aqui vai o conteúdo css">Texto</h1>
---
Começando a criarPara iniciar, vamos apenas adicionar atributos as tags do html, para isso, abra um novo arquivo no bloco de notas(vamos usar o modo 1).
Ex. 1:
Código:
H1 {color:white; background:black; font-family:arial}
Para testar, salve esse arquivo como estilo.css e crie uma pagina html como abaixo:
Código:
<html>
<head>
<link rel=stylesheet href="estilo.css" type="text/css">
</head>
<body>
<h1>Haha, olha só oq eu fiz!!!!!!!!!!</h1>
</body>
</html>
Salve os dois arquivos na mesma pasta e teste, você verá que o texto entra as tags <h1> esta escrito em branco e com fundo preto.
Explicando o arquivo .cssA sintaxe usada para definir atributos as ags HTML é:
Código:
TAG(<b>, <h1> etc...) { atributo1; atributo2 }
Veja que os atributos estão separados por ;(ponto e virgula).
O exemplo criado antes:
Código:
H1 {color:white; background:black; font-family:arial}
Primeiro definimos a tag a ser usada(H1);
Depois definimos a cor;
É definida a cor do background;
É definida a font a ser usada.---
Algumas funçõesAgora para você treinar, veja algumas funções para serem usadas como atributos nas tags:
color:cor - Define a cor do texto, pode ser uma cor em inglês ou então um valor hexadecimal(Ex: #554823);
Background:cor - Define uma cor para o fundo, use o mesmo esquema da função acima;
font-family:font - Define a font a ser usada, pode ser qualquer fonte do seu PC, mas lembre-se, o usuario precisa ter essa font tambem para visualiza-la. Evite usar fonts baixadas da internet.
font-size:tamanho - Define o tamanho do texto, sempre indique a medida a ser utilizada junto com o valor, por exemplo para 12 pixels: font-size:12px
Agora tente criar uma folha de estilos usando diferentes tags e atributos.
Pode parecer complicado no começo, mas é tudo um questão de treino, em uma semana você já pode ter um certo dominio de CSS.
Fonte: BR MAKER 
