Tipografia
<strong></strong> negrito <em></em> itálico <sup></sup> x2 <sub></sub> H2O <p></p> parágrafo <h1></h1> títulos (h1, h2, h3...)
Links
<a href="home.html">clique</a>
Imagem
<img src="foto.jpg" alt="titulo">
Posicionamento
Por ID
tag#id {
position: absolute;
top: 10px;
left: 10px;
}
Por classe
tag.classe {
position: absolute;
top: 10px;
left: 10px;
}
HTML x CSS
Atributo da tag (HTML)
<tag class="estilo">
Declaração do estilo (CSS)
tag.estilo { ... }
Atributo da tag (HTML)
<tag id="estilo">
Declaração do estilo (CSS)
tag#estilo { ... }
CSS
seletor { propriedade: valor; }
Propriedades CSS
// largura width: 500px; // largura height: 300px; // cor do tipo color: red; // cor do fundo background: yellow; // fonte font-family: verdana; // corpo da fonte font-size: 12pt; // texto à esquerda text-align: left; // texto à direita text-align: right; // texto ao centro text-align: center; // bordas border: 1px solid black; // cantos arrendondados border-radius: 5px; // preenchimento padding: 10px; // margem margin: 10px; // imagem de fundo background-image: url(link); // repetir imagem em x background-repeat: repeat-x; // repetir imagem em y background-repeat: repeat-y; // não repetir background background-repeat: no-repeat; // cobrir tela com o fundo background-size: cover;
Cores
Por nome Lista Hexadecimal Color Picker RGB (CSS) // R, G e B: 0 a 255 color: rgb(R,G,B); // Transparência (alpha) // 0.0 a 1.0 color: rgba(R,G,B,1.0);
Tabelas
<table>
<tr>
<th>título 1</th>
<th>título 2</th>
</tr>
<tr>
<td>célula 1</td>
<td>célula 2</td>
</tr>
</table>