---
Ficha:
Conhecimentos necessários: HTML
Nivel: Iniciante
Ferramentas utilizada: Bloco de Notas
---
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 já 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 básico de tudo, com CSS vc pode posicionar elementos, definir font/cor/fundo para os textos e links, bordas e mais uma infinidade de funções.
---
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 conteúdo CSS de outro arquivo;
- Adicionar dentro das próprias tags do html usando o atributo style.
Abra um novo documento no bloco de notas, salve com a extensão .css e, na sua pagina html, adicione entre as tags <head></head>:
<link rel=stylesheet href="nome_do_arquivo.css" type="text/css">
Modo 2
Entre as tags <head></head>, adicione:
<style type="text/css"> Aqui vai o conteudo em CSS </style>
Modo 3
Entre as tags <head>:
<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 método é 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.:
<style type="text/css"> @import url(arquivo.css) Aqui vai mais códigos CSS </style>
Modo 4
Adicionando a parte CSS dentro das tags do HTML com o atributo Style. Ex.:
<h1 style="aqui vai o conteúdo css">Texto</h1>
---
Começando a criar
Para 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:
H1 {color:white; background:black; font-family:arial}Para testar, salve esse arquivo como estilo.css e crie uma pagina html como abaixo:<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 .css
A sintaxe usada para definir atributos as tags HTML é:
TAG(<b>, <h1> etc...) { atributo1; atributo2 }Veja que os atributos estão separados por ;(ponto e virgula).O exemplo criado antes:
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ções
Agora 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 usuário precisa ter essa font também 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
---
É isso.
Se tiver algum erro por favor me corrijam.
flw..........
