Nenhum produto encontrado nessa seleção.
Agora que você já sabe criar um arquivo e diferenciar a maioria das tags, podemos dar continuidade ao nosso curso e introduzir um pouco de CSS em tags HTML.
O CSS – Cascading Style Sheets – é uma das partes mais importantes de um documento HTML, ele é capaz de introduzir formatos, posicionamento, cores e tamanhos em qualquer elemento da página, o que faz um site realmente parecer um site, e não só um documento com texto formatado.
Até agora falamos apenas de HTML, e não é por menos, você deve primeiro criar um elemento em uma página com HTML para depois modificar seu estilo com CSS.
Qualquer elemento HTML (tags HTML) pode receber instruções CSS para ter sua cor, tamanho ou posição modificados utilizando seletores CSS, tais seletores podem ser de um único elemento, ou de vários elementos ao mesmo tempo.
Os seletores mais comuns são as classes (atributo class) e IDs (atributo id), que são inseridos em tags HTML.
<p class="minha_classe">Parágrafo com classe "minha_classe".</p> <p id="meu_id">Parágrafo com ID meu_id.</p>
Também é possível chamar um elemento diretamente pelo nome da de sua tag HTML sem os sinais de menor que (<) e maior que (>).
/* Parágrafo com texto em cor preta */
p{
color:#000000;
}Vamos aprofundar mais um pouco em cada um desses assuntos para que você entenda melhor.
O atributo class
O atributo class pode estar presente em uma, ou mais, tags HTML, sendo assim, você pode definir que uma determinada classe terá cor do texto em vermelho e distribuir essa classe em milhares de elementos da página.
<div class="cor_vermelha"> Esta sessão tem o texto em vermelho. </div> <div class="outra_classe"> Esta sessão tem a cor determinada por outra classe. </div> <p class="cor_vermelha"> Este parágrafo tem o texto em vermelho. </p>
Perceba que não há o menor problema em utilizar uma mesma classe em vários elementos. No trecho acima utilizamos class=”cor_vermelha” em dois elementos, uma <div> e um <p>.
Um elemento HTML também pode estar ligado a várias classes, para isso basta separar os nomes das classes por um espaço dentro do valor do atributo class.
<div class="cor_vermelha texto_centralizado fonte_grande"> Esta sessão tem o texto em vermelho. </div>
No exemplo acima, uma <div> recebeu três classes: cor_vermelha, texto_centralizado, fonte_grande. Todos os estilos presentes nas três classes serão aplicados ao elemento, no entanto, caso alguma classe entre em conflito com a outra, a última classe lida pela renderização do navegador terá prioridade e seu valor aplicado, por exemplo: A classe cor_vermelha indica que o texto deve ser vermelho, mas a classe fonte_grande indica que o texto deve ser preto, se o navegador ler a classe fonte_grande por último, essa classe será aplicada ao texto, consequentemente ele terá cor preta.
Posteriormente você vai entender a organização de um documento CSS para saber qual classe terá precedência sobre a outra.
O atributo ID
O atributo ID é muito semelhante às classes, também pode selecionar elementos em um documento HTML, porém, você só pode identificar um elemento por ID.
<p id="meu_id">Parágrafo único com ID meu_id.</p>
Depois que você criou este atributo id=”meu_id”, o elemento <p> tem o identificador meu_id (que é como uma impressão digital para um elemento do seu documento HTML), nenhum outro elemento poderá ter o mesmo atributo.
Para contornar a situação, você pode criar vários IDs:
<p id="meu_id">Parágrafo com ID meu_id.</p> <p id="meu_id-1">Parágrafo com ID meu_id-1.</p> <p id="meu_id-2">Parágrafo com ID meu_id-2.</p> <p id="meu_id-3">Parágrafo com ID meu_id-3.</p>
Então só para reforçar:
- Não é permitido colocar mais de um ID em um elemento HTML;
- Não é permitido utilizar um mesmo ID para mais de um elemento;
- ID é único, e ponto.
Métodos para inserir CSS em Tags HTML
Existem três maneiras para inserir CSS em um documento HTML, em linha, interno e através de um arquivo CSS.
- Em linha: podemos utilizar o atributo style para inserir CSS diretamente em uma tag HTML;
- Interno: podemos utilizar a tag <style> dentro da <head> do documento para inserir CSS;
- Através de um arquivo de CSS: Esta é a solução mais correta e mais utilizada para inserir CSS em um documento HTML.
Exemplos:
Em linha:
<p style="color:red; font-size:20px;"> Olha só meu estilo! </p>
Interno:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título</title>
<style>
p{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<p>
Olha só meu estilo!
</p>
</body>
</html>Através de um arquivo de CSS:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Título</title> <link rel="stylesheet" type="text/css" href="meuestilo.css"> </head> <body> <p> Olha só meu estilo! </p> </body> </html>
Todas as três opções mostradas anteriormente irão apresentar a mesma coisa na tela do navegador:
Olha só meu estilo!
Como criar um arquivo CSS no Notepad++
Agora que você já sabe um pouco mais sobre CSS, podemos criar nosso primeiro arquivo para inserir formatos às nossas tags, veja como é simples:
- Com o Notepad++ aberto, pressione as teclas CTRL + N para gerar um novo documento;
- Escreva /* Meu CSS */ na primeira linha;
- Pressione CTRL + S para salvar;
- Em Tipo selecione “Cascade Style Sheets File (CSS)“;
- Salve dentro da pasta do nosso curso como “meuestilo.css“.
“Linkando” o CSS no HTML
Depois de criar seu arquivo CSS, vamos “linkar” (perdão pelo neologismo) este arquivo em um documento HTML, para isso basta utilizar a tag <link> dentro da <head> do documento:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="meuestilo.css"> <title>Título</title> </head> <body> <p id="meu_id">Parágrafo com ID meu_id.</p> </body> </html>
Para testar se tudo funcionou, digite o seguinte no seu arquivo CSS:
p{
color:red;
}Abra seu arquivo HTML no navegador e veja se o texto do parágrafo está vermelho, se estiver, vamos dar continuidade ao curso, caso contrário, tente fazer o processo novamente, você fez algo errado.
Seletores CSS
Quando você abre um site da Internet em um navegador, ele começa a ler a página da esquerda para a direita, de cima para baixo, portanto, a leitura do seu arquivo CSS é feita da mesma maneira. Tendo isso em mente, não é necessário ser nenhum gênio para saber que se algo entrar em conflito, por exemplo, duas classes em um mesmo elemento, uma exigindo que ele tenha cor vermelha, outra exigido que ele tenha cor preta, a última classe lida pelo navegador ganha. Ou, resumindo, as classes que estiverem mais próximas do final do seu arquivo CSS tem precedência sobre as primeiras classes. O mesmo acontece com os IDs.
Por falar em classes e IDs, no início desse artigo falamos sobre os atributos class e id, e agora eles vão começar a fazer sentido para você. Através desses atributos é que você “seleciona” uma tag HTML do documento e faz suas modificações apenas nessa tag escolhida.
Por exemplo:
Se meu arquivo HTML tiver essas Tags:
<p class="cor_vermelha">Parágrafo.</p> <p class="cor_preta">Parágrafo.</p> <p class="cor_vermelha">Parágrafo.</p>
E meu arquivo CSS tiver esses comandos:
.cor_vermelha{
color:red;
}
.color_black{
color:black;
}Eu terei exatamente um paragrafo vermelho, outro preto e outro vermelho na tela do navegador.
Selecionando uma classe
Para selecionar uma classe no seu arquivo CSS, basta colocar um ponto (.) e digitar o nome da classe:
.minha_classe{}As chaves são para o local onde você coloca as propriedades que essa classe terá, por exemplo:
.minha_classe{
color:black;
font-size:1em;
margin:0 1.62em 0 0;
float:left;
}Calma, posteriormente vamos aprofundar nas propriedades, por enquanto vamos apenas falar sobre os seletores.
Selecionando um ID
Para selecionar um ID, utilizamos uma cerquilha (sinal de hashtag – #) e o nome do ID:
#meu_id{}Do mesmo modo das classes, as chaves servem para envolver as propriedades que este elemento terá.
#meu_id{
color:black;
font-size:1em;
margin:0 1.62em 0 0;
float:left;
}Dica sobre IDs: Só os utilize se for necessário, ao invés deles, prefira as classes.
Selecionando um elemento diretamente
Como eu disse no começo da aula, você também pode selecionar um elemento diretamente, mesmo que este não tenha nenhuma classe ou ID, no entanto, tome bastante cuidado ao fazer isso, todos os elementos de mesma espécie serão afetados no documento.
Para selecionar um elemento diretamente, simplesmente digite o nome da tag sem os sinais de </>:
p{
color:black;
font-size:1em;
margin:0 1.62em 0 0;
float:left;
}Selecionando vários elementos de uma vez
Você também pode selecionar vários elementos ao mesmo tempo para que estes tenham as mesmas propriedades, para isso basta utilizar uma vírgula:
p,
#meu_id,
.minha_classe,
div{
color:black;
font-size:1em;
margin:0 1.62em 0 0;
float:left;
}Dica: Eu sempre coloco a vírgula e quebro a linha, isso apenas por questão de organização.
Convenção de nomes das classes e IDs
Sempre que for criar uma nova classe ou ID em CSS e no seu atributo HTML, utilize sempre essas regrinhas:
- Sempre utilize letras minúsculas;
- Sempre inicie o nome com uma letra;
- Utilize apenas letras, números, underline (_) e hífen (-) para nomes de classes;
- Dê nomes realistas, por exemplo: “topo-do-site” é muito mais realista e detalhista do que “tds”;
Exemplo:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="meuestilo.css"> <title>Título</title> </head> <body> <div class="topo"> <h1 class="titulo-topo">Meu site</h1> <p class="paragrafo-topo">Aprendi no TutsUP.</p> </div> <div class="corpo"> <h1 class="titulo-corpo">Corpo do meu site</h1> <p class="paragrafo-corpo">Aprendi no TutsUP.</p> </div> <div class="barra-lateral"> <h1 class="titulo-lateral">Barra lateral do meu site</h1> <p class="paragrafo-lateral">Aprendi no TutsUP.</p> </div> <div class="rodape"> <h1 class="titulo-rodape">Rodapé do meu site</h1> <p class="paragrafo-rodape">Aprendi no TutsUP.</p> </div> </body> </html>
Assim você vai garantir a organização do seu documento, e, acredite se quiser, vão existir tantas linhas no seu arquivo CSS e HTML, que vai se tornar fácil se perder caso você não criado os nomes de maneira adequada.
Concluindo
Agora você já sabe milhares de coisas sobre os arquivos CSS e HTML, já da para brincar um pouco.
Como é um assunto muito extenso, vou deixar para falar exclusivamente das propriedades CSS na próxima aula, porém, com base no documento que eu havia criado no exemplo anterior, vou deixar um pedaço de código para que você possa copiar e ir tentando editar da sua maneira.
Copie e cole nos seus arquivos:
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="meuestilo.css"> <title>Título</title> </head> <body> <div class="topo"> <h1 class="titulo-topo">Meu site</h1> <p class="paragrafo-topo">Aprendi no TutsUP.</p> </div> <div class="corpo"> <h1 class="titulo-corpo">Corpo do meu site</h1> <p class="paragrafo-corpo">Aprendi no TutsUP.</p> </div> <div class="barra-lateral"> <h1 class="titulo-lateral">Barra lateral do meu site</h1> <p class="paragrafo-lateral">Aprendi no TutsUP.</p> </div> <br style="clear:both" /><!-- Clearfix --> <div class="rodape"> <h1 class="titulo-rodape">Rodapé do meu site</h1> <p class="paragrafo-rodape">Aprendi no TutsUP.</p> </div> </body> </html>
CSS
/* Meu CSS */
*{
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.topo,
.corpo,
.barra-lateral,
.rodape{
padding:20px;
}
.topo,
.rodape{
width:100%;
height:100px;
background:#000;
color:#fff;
text-align: center;
}
.corpo{
width:70%;
float:left;
background:#f1f1f1;
}
.barra-lateral{
width:30%;
float:right;
background:#ccc;
}Tente ir editando todos esses arquivos e testando no seu navegador. Provavelmente você vai descobrir várias coisas por si mesmo. Se tiver dúvidas, não hesite em perguntar nos comentários, iremos ajudar.
Na próxima aula vamos discutir este layout junto com outras propriedades CSS.
Todas as aulas
Veja todas as aulas do curso:
- Aula 1: Introdução ao HTML
- Aula 2: Tags HTML
- Aula 3: Introdução ao CSS
- Aula 4: Propriedades CSS
- Aula 5: Criando seu próprio site
Lembre-se de seguir nosso blog. Postamos todos os nossos novos artigos no Google Plus, Twitter e Facebook. Além disso, enviamos artigos por e-mail, basta se inscrever. Fique sempre por dentro de nossos tutoriais.
