# = id
. = class
Exemplos:
#para {
text-align: center;
color: red;
}
.center {
text-align: center;
color: red;
}
Propriedades tipográficas e fontes
font-family: tipo de fonte
h1 {
font-family: serif;
}
h2 {
font-family: sans-serif;
}
p {
font-family: monospace;
}
text-align: alinhamento do texto
p {
text-align: right;
}
center,justify,left
É possível configurar também uma série de espaçamentos de texto com o CSS:
p {
line-height: 3px; /* tamanho da altura de cada linha */
letter-spacing: 3px; /* tamanho do espaço entre cada letra */
word-spacing: 5px; /* tamanho do espaço entre cada palavra */
text-indent: 30px; /* tamanho da margem da primeira linha do texto */
}
Imagem de fundo:
h1 {
background-image: url(link-da-imagem.jpg);
}
Bordas:
body {
border-color: red;
border-style: solid;
border-width: 1px;
}
ou
body {
border: 1px solid red;
}
Cores:
h1 {
color: red;
}
h2 {
background-color: yellow;
}
RGB:
h3 {
color: rgb(255, 200, 0);
}
notação hexadecimal
h3 {
background-color: #f2eded;
}
Espaçamento, margem e dimensões
Padding (Espaçamento)
- padding-top
- padding-right
- padding-bottom
- padding-left
Se passados quatro valores, serão aplicados respectivamente a padding-top, padding-right, padding-bottom e padding-left. Para facilitar a memorização dessa ordem, basta lembrar que os valores são aplicados em sentido horário.
p {
padding: 10px 20px 15px 5px;
}
Margin (margem)
- margin-top
- margin-right
- margin-bottom
- margin-left
p {
margin: 10px 20px 15px 5px;
}
Há ainda uma maneira de permitir que o navegador defina qual será a dimensão da propriedade padding ou margin conforme o espaço disponível na tela: definimos o valor auto para os espaçamentos que quisermos.
Dimensões
É possível determinar as dimensões de um elemento, por exemplo:
p {
background-color: red;
height: 300px;
width: 300px;
}
