Agora que vimos sobre o que é HTML Aqui. Podemos prosseguir com nossas dicas e otimização.
Vamos criar estilos em CSS para nossas tags HTML, assim daremos uma aparência e posicionamento detalhado as nossas classes.
Vamos lá:
Id ou Class
Para que o estilo entenda as tags HTML, precisamos implementar divs, cada div pode ter uma classe ou uma id para que possa ser identificado pelo CSS.
por exemplo:
ou
Diferença entre classe e id
Uma classe pode ser usada várias vezes no mesmo código, já o id é de uso exclusivo por página. Vou usar como um exemplo, uma classe para definir o estilo de um box de postagem e um id para definir que todos pertencem a mesma estrutura do id.
<div class="box"> <!-- Classe de box, pode ser usado várias vezes de acordo com sua necessidade-->
Teremos um conteúdo aqui
</div>
<div class="box">
Teremos um novo conteúdo aqui seguindo o mesmo layout do primeiro
</div>
<div class="box">
Teremos um novo conteúdo aqui seguindo o mesmo layout do primeiro e segundo
</div>
</div><!--fechamento da tag id -->
A tag id é pouco usada, de fato, então nosso foco será em criar classes e estilos, mas irei dar exemplos usando id também.
Abaixo exemplo de uma estrutura html, igual ao que usamos no post anterior, aqui colocaremos as tags de conteudo e de box.
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="a descrição do seu site em no máximo 90 caracteres">
<meta name="keywords" content="escreva palavras-chaves curtas, máximo 150 caracteres">
<title>Título do Documento</title>
<link rel="stylesheet" type="text/css" href="style.css"> <!--Tag que busca na raiz do site o estilo css-->
</head> <!-- Fechamento da Tag Head -->
<body>
<div id="conteudo">
<div class="box">
<p>Teremos um conteúdo aqui</p>
</div>
<div class="box">
Teremos um novo conteúdo aqui seguindo o mesmo layout do <a href="#" target="_blank"> primeiro</a>
</div>
<div class="box">
<div class="box-interno">Teremos um novo conteúdo aqui seguindo o mesmo layout do primeiro e segundo</div>
</div>
</body>
</html>
Pronto, nosso estilo HTML está ok com as tags. Agora você precisa criar uma pagina, pode ser via bloco de notas mesmo ou editor de textos que desejar. Insira esse código e salve com a extensão .html, o ideal seria colocar o nome como INDEX, ou seja, index.html. (os navegadores entendem que index ou home são as paginas a serem iniciadas).
Feito isso agora vamos criar um novo arquivo chamando: ‘style.css’. Nele vamos colocar nosso estilo e personalizar nosso site. Mas antes, precisamos entender a forma em que o nosso html fará a ‘conexão’ com nosso estilo:
Inserindo estilos no html
Existem algumas formas de implementar o estilo em uma página html, vou dar alguns exemplos.
Tem Inline (na mesma linha ou dentro da tag), na mesma página incluindo no
e com uma página externa (mais apropriada para não sobrecarregar toda a estrutura html de uma vez).
—–
Inline seria algo aplicado diretamente na tag, por exemplo:
<p>Outro exemplo <span style="color: red">cor vermelha em outro local</span>.</p>
Interno a segunda forma é utilizar a tag style dentro do head da página HTML:
<style type="text/css">
.seletor { color: red; }
</style>
</head>
Externo
E a última e mais usada maneira de aplicar CSS é criar um ou mais arquivos com extensão .css e inseri-los na estrutura head do HTML:
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
No nosso exemplo iremos usar externamente, reparem que inserimos uma tag dentro da codigo ‘head’ acima. Agora que está tudo certo, podemos iniciar nosso estilo.
No arquivo css, vamos trabalhar nossas classes.
Para identificar uma id ou uma classe, no css, devemos inserir uma ‘#’ para id e um ‘.’ para classe, isso antes de escrever o nome da tag. Abaixo um exemplo de como:
.box {} /* . para classe*/
Todos os valores serão inseridos dentro da {}, e o nome da classe ou id usada no html, será usada no nosso css.
Já criamos nosso código html, e nossas tags, agora vamos estilizar nosso código! Eu vou criar apenas um exemplo, você pode aprimorar e verificar os principais elementos do CSS diretamente no site da documentação.
#conteudo {
margin: 0 auto; /* a margem com largura auto posiciona e centraliza nossa id*/
max-width: 800px; /* a argura máxima que vai chegar nosso conteudo*/
width: 100%; /* a largura é 100% (apropriado para sites responsivos)*/
}
/*as classes*/
.box {
width: 200px; /* width: damos a largura para cada box de 200px */
float: left; /*posiciona o item na esquerda*/
max-width: 100%; /* a largura máxima será de 100% caso queria ver o site em resuloções menores (ex.celular)*/
border: 1px solid #ccc; /*elemento que da uma borda ao box*/
padding: 10px; /* padding é uma largura interna*/
margin: 10px; /*margin é uma largura externa*/
border-radius:8px; /* esse elemento faz com que a borda fique arredondada*/
}
.box p { color: red} /* colocamos a cor red para todas as tags paragrafo dentro de box*/
.box a { color: #f50 } /* colocamos a cor laranja para todos os links que estiverem dentro da tag box */
.box .box-interno { background: #ccc;} /*colocamos um background dentro da tag box-interno que fica dentro de box*/
.box .box-interno p { color: red; padding:5px } /*colocamos uma cor vermelha e margem interna dentro de paragrafo em box-interno*/
Importante destacar que podemos usar várias outras classes dentro de uma classe. No exemplo criei um .box-interno para que possam ver que podemos estilizar todos os tipos de tags HTML sem mudar a estrutura principal que seria de box.
Reparem que no estilo tem:
Então o css entende que você está estilizando a classe ‘.box-interno’ dentro da classe ‘.box’.
Como é apenas uma introdução tem muita coisa que podemos trabalhar usando css e html, não deixem de consultar a documentação de ambos para que possam aprimorar e conhecer todas as formas de implementação de código.
Qualquer dúvida entre em contato conosco pelo site.
