CSS e suas Propriedades mais usadas! - Chief of Design

Prévia do material em texto

11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 1/22
    
Veja como Funciona o CSS e suas Propriedades mais usadas!
David Arty | Publicado em 2 de julho de 2015
O E-book completo já está no ar! Clique em algum dos links abaixo para adquirir
o seu!
http://ebookhtmlcss.com/ ou 
http://ebookhtmlcss.com/b-e-book-solidario-fluencia-em-htmlcss/
Para que serve o CSS?
CSS e suas Propriedades mais usadas!
Eae? Td bele?
Há tempos eu falo sobre CSS, porém fico devendo um material no blog. Mas agora que es-
tou próximo de lançar o e-book sobre HTML e CSS e com um bom material nas mãos, pen-
sei: “Por que não antecipar um pouco sobre CSS no blog?”.
Talvez você se lembre que o último artigo foi sobre HTML e achei bacana complementar o
que vimos ali agora com CSS. O que você acha da ideia? Quer aprender a estilizar seus si-
tes? Enfim, temos um artigo sobre.
Lógico que é impossível em um artigo só falar tudo sobre esta linguagem. Porém te garanto
que com estes fundamentos iniciais já dá para você arriscar, como posso dizer, suas primei-
ras estilizadas em seus layouts. Simbora então?
Começarei com uma questão relevante.
Privacidade - Termos
https://fundamentosdodesign.com.br/
https://www.facebook.com/chiefofdesign
https://www.youtube.com/user/ChiefofDesign
https://www.instagram.com/chiefofdesign.br/
https://twitter.com/ChiefofDesign
https://www.pinterest.com/chiefofdesign/
https://www.chiefofdesign.com.br/author/david-arty/
http://ebookhtmlcss.com/
http://ebookhtmlcss.com/b-e-book-solidario-fluencia-em-htmlcss/
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 2/22
Porque usar CSS?
O que eu preciso para começar a aprender CSS?
Dar forma, estilos aos conteúdos criados em HTML. E principalmente separar a marcação
da apresentação.
Ele foi criado para tirar formas de apresentação até então atribuídas a elementos e atributos
HTML.
Com ele é possível definir, para uma página HTML sem estilos, cores de para textos, fun-
dos, bordas, tamanhos e tipos de fontes, espaçamentos, posicionar blocos, até fazer anima-
ções, entre outros.
Entre os principais benefícios estão:
O controle e facilidade de manutenção visual do site através de um arquivo externo;
Aumento da performance e velocidade das páginas;
Possibilidade de elaborar layouts para atender diferentes tipos de dispositivos.
É necessário possuir boas noções de HTML. Quanto a ferramentas, você precisa de um
bom navegador tipo Mozilla Firefox ou Google Chrome e um editor para desenvolvimento
web. O mais simples de todos e que eu indico para o aprendizado é o bloco de notas.
A sintaxe CSS é formada por uma regra com 3 itens fundamentais para definir um estilo.Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 3/22
Sintaxe CSS
São eles:
Seletor;
Propriedade;
Valor.
Veja a sintaxe:
Seletor {propriedade: valor}
O seletor vincula um elemento do documento HTML a declaração CSS. Declaração CSS é
formada pela propriedade e o valor.
A propriedade define uma característica visual para o elemento HTML “selecionado” pelo
seletor.
Exemplo: O texto de um parágrafo, marcado com elemento HTML “p”, possui uma proprie-
dade de cor denominada “color”.
Já o valor atribui valor a propriedade escolhida para o elemento selecionado.
Exemplo: O valor da propriedade color para o elemento HTML “p” selecionado é “red”
(vermelho). Ou seja, o texto do parágrafo terá uma cor vermelha.
Veja o que foi explicado na imagem a seguir:
Com esta regra qualquer parágrafo em um documento HTML, desde que não selecionado
de outra forma, receberá a cor vermelha.
Este parágrafo é vermelho.
Observações:
Uma regra pode ter mais que uma declaração.
p { 
 
 font-size: 14px; /* a fonte do texto tem 14 pixels de tamanho */ 
 
 color: red; /* a cor da fonte é vermelha */ 
 
}
Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 4/22
Todo conteúdo entre /* */ é um comentário. Comentários servem para instruir quem
está lendo o código CSS.
Tipos de seletores comuns
Seletor de tipo de elemento
E podemos usar um ou mais seletores para a mesma declaração. Para isso bastar
usarmos vírgulas para separa-los (como nos mostra o exemplo anterior).
Seletor tipo ID
Uma regra pode ter mais de um seletor.
/* Os parágrafos e cabeçalhos h1, h2, h3 possuem cor da fonte vermelha */ 
 
p , h1, h2, h3 { 
 
 color: red; 
 
}
Apresentarei alguns tipos de seletores mais usados que já te possibilitará estilizar páginas.
O seletor “p” que usamos nos exemplos anteriores é um seletor de tipo de elemento. Esta
espécie de seletor identifica e vincula um elemento HTML, basta que para isso coloque o
elemento como seletor.
body { 
 
 /* aqui vai uma declaração qualquer */ 
 
} 
 
 
div { 
 
 /* aqui vai uma declaração qualquer */ 
 
} 
 
p, span, strong { 
 
 /* aqui vai uma declaração qualquer */ 
 
}
É um seletor individual usado para vincular somente um elemento por página web. Ele não
pode ser usado em dois ou mais elementos. Para construí-lo basta que você crie um nome
precedido pelo símbolo #.
#nome-do-identificador { 
 
 background-color: green; /* cor de fundo verde */ Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 5/22
Seletor tipo class
Seletor de atributo
 
}
Veja agora com atribuir no HTML para que o elemento receba a cor de fundo verde:
<body id="nome-do-identificador"> 
</body>
Este seletor possibilita o uso em mais de um elemento da mesma página. Indicado quando
você precisa atribuir algumas propriedades iguais em elementos diferentes. Para construí-lo
basta que você crie um nome precedido por um ponto.
.nome-da-classe { 
 
color: blue; /* cor de texto azul */ 
 
}
<h1 class="nome-da-classe">Título com cor azul</h1> 
 
 
<p class="nome-da-classe">Parágrafo com a cor azul.</p>
Este tipo de seletor associa a um atributo utilizado em um elemento HTML. Exemplo:
<input type="submit" value="Enviar">
Este é um botão para envio de dados de formulários. Podemos usar o atributo “type” com
valor “submit” para estilizar o botão.
input[type="submit"] { 
 
 font-weight: bold; /* texto em negrito */ 
 
}
Com estes seletores já da para estilizar suas primeiras páginas. Entretanto existem outros:
Seletor universal;
Seletor de elementos-filho;
Seletor adjacente;
Seletor contextual;
Seletores tipo pseudo-elementos;
Seletores tipo pseudo-classe.
Você pode consulta-los neste Guia da W3C.
Privacidade - Termos
http://www.w3c.br/divulgacao/guiasreferencia/css2/#mod-seletores
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 6/22
Unidades para valores
Existem inúmeros valores específicos para propriedades. Só que alguns são de uso comum
para muitas propriedades e vira e mexe você estará usando. Veja uma pequena relação a
seguir:
px – é a unidade de pixels. Muita usada em dimensões de blocos e fontes. Exemplo:
font-size: 14px;
width: 200px;
em – Indicada para tamanhos de fontes. Ao usarmos o tamanho padrão do dispositivo do
usuário podemos expressar o tamanho da fonte de outros elemento através dessa unidade.
Assim um elemento com tamanho de fonte de 2em (font-size:2em} tem duas vezes o tama-
nho padrão. Caso o tamanho padrãofor 16 pixels, uma fonte de 2em equivalerá a 32 pixels.
Exemplo de sintaxe:
font-size: 1.25em;
font-size: 0.5em;
% – é, obviamente uma unidade de porcentagens. Ela é relativa ao bloco onde o elemento
está contido. Se um bloco tem 150 pixels e for atribuído a outro bloco contido nele uma lar-
gura de 50%, equivalerá a 75 pixels.
font-size: 120%;
width: 50%;
Hexadecimal – é um sistema de numeração que representa os números em base 16, em-
pregando assim 16 símbolos. Este sistema é composto por 10 números, de 0 a 9, e seis le-
tras adicionais de A a F.
Usamos no CSS para atribuir valores para propriedades de cor para fontes (color), cor de
fundo (background-color), cor de borda (border-color) entre outras. Exemplo:
background-color: #cccccc;
color: #ff0000;
Neste caso temos a cor vermelha para textos. O valor em hexadecimal em CSS é precedido
do símbolo #.
O valor em hexadecimal é formado por três pares de caracteres. A ordem do pares, da es-
querda para direita, representa o sistema de cores RGB (Red, Green, Blue) reproduzindo
cores através da “mistura” em certa quantidade das cores aditivas Vermelha, Verde e Azul.
Na imagem abaixo vemos uma representação de um cinza escuro obtido pela mistura das
três cores:
Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 7/22
Declaração única
O que é herança?
O sistema hexadecimal precisa de um artigo a parte. Sugiro que consulte posteriormente 
este artigo.
É quando você abrevia declarações reunindo todos os valores destas em um só. E isto pode
ser aplicado para fontes, margens, preenchimentos, fundos, bordas, etc. Temas estes que
ainda apresentarei neste artigo.
Por exemplo: Border é a propriedade responsável por reunir em uma declaração única os
valores das propriedades, border-style, border-width e border-color.
Exemplo. Temos as seguintes declarações para uma div:
div { 
 
 border-style: solid; 
 
 border-width: 1px; 
 
 border-color: black; 
 
}
Podemos reunir todas estas declarações em uma só usando border. Veja:
div { 
 
 border: solid 1px black; 
 
}
A herança acontece quando elementos filhos herdam algumas propriedades dos elementos
pais.
Elementos filhos são os elementos contidos dentro do elemento pai, como por exemplo, os
elementos “li” que estão dentro de “ul”. Veja:
<ul> 
 
 <li>Este é um elemento filho de ul.</li> 
 
Privacidade - Termos
http://tableless.com.br/sobre-cor-e-webdesign/
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 8/22
Onde colocar o CSS dentro do documento HTML
Inline
 <li>Este também.</li> 
 
</ul>
Elemento pai é, logicamente o que contém o elemento filho. No exemplo acima trata-se de
“ul”.
Ao especificar, por exemplo, um valor de font-size para “ul”, seus filhos herdam automatica-
mente este valor caso não especificarmos nenhum outro valor desta propriedade para eles.
Exemplo:
ul { 
 
 font-size: 14px; 
 
} 
 
ul li { 
 
 color: blue; 
 
}
Podemos afirmar aqui que o elemento “li” além de receber a cor azul, recebe também um
tamanho de fonte de 14 pixels.
Mas atenção! Nem todas as propriedades são herdadas. Porém você pode forçar através do
valor “inherit”. Exemplo:
div { 
 
 border: 1px solid #000000 /* borda de um pixel de cor preta */ 
 
} 
 
 
p { 
 
 border: inherit; 
 
}
Existem algumas formas de vincular as folhas de estilos em um documento HTML. Essas
formas também definem a localização de cada tipo. Classificam-se em três tipos:
Inline:
Incorporadas;
Externas.
Este tipo faz que as regras CSS sejam declaradas dentro de uma tag de abertura usando o
atributo “style”. Veja a sintaxe abaixo:
<h2 style="font-size: 18px">Este título possui 18 pixels de tamanho.</h2>
Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 9/22
Incorporadas
Externas
Este tipo é o menos indicado. Somente para casos específicos. É bom lembrar que o CSS
foi criado para separar a apresentação. O tipo inline foge deste objetivo por que incorpora o
estilo dentro de uma tag.
É considerada incorporada quando as regras de uma folha de estilo são declaradas na se-
ção head do documento HTML dentro do elemento HTML “style”. Este elemento é dedi-
cado especialmente para abrigar informações sobre estilos para o documento. Veja sintaxe:
Este tipo é mais indicado que o anterior, mas ainda não é o melhor. Pode ser uma boa
quando o estilo for aplicado somente a uma página.
Uma folha de estilo externa é quando as regras CSS são declaradas em um arquivo sepa-
rado do arquivo HTML que você trabalha.
Um arquivo de folha de estilo tem a extensão .css. Exemplos: estilo.css, style.css, qualquer-
nome.css.
Na minha opinião (e também da torcida do Corinthians inteira) essa é a forma mais indi-
cada. Com este tipo você pode separar a marcação (HTML) da apresentação (CSS). Você
pode também alterar um estilo de um site inteiro com uma simples edição nas regras
definidas.
Podemos classifica-las em linkadas e incorporadas:
Linkadas – Neste tipo usa-se o elemento HTML “link” mais atributos. Veja:
<!DOCTYPE html> 
 
<html> 
 
 <head> 
 
 <meta charset="UTF-8"> 
 
 <title>Exemplo dos elementos apresentados</title> 
 
 <style type="text/css"> 
 
 h2 { 
 
 color: blue; 
 
 } 
 
 </style> 
 
 </head> 
 
 <body> 
 
 <h2>Este título possui a cor azul. Valor declarado na regra CSS incorpora
 
 </body> 
 
</html>
Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 10/22
O atributo rel define que o arquivo de destino é uma folha de estilo e href indica o endereço
do arquivo .css.
Para criar um aquivo .css, basta abrir seu editor preferido e salvar o documento com a ex-
tensão .css. Nele basta colocar as regras CSS vinculadas aos elementos do documento
HTML.
Importadas – Este tipo usa as tags “style” da mesma forma que usamos no tipo incorpora-
das. A grande diferença é que usamos entre as tags a regra @import. Ele é responsável
por importar todas as regras do arquivo “estilo.css”. O url(“”) representa a localização do
arquivo CSS a ser importado.
Veja:
Também podemos usar o @import dentro de um arquivo, uma folha, css externa.
<!DOCTYPE html> 
 
<html> 
 
 <head> 
 
 <meta charset="UTF-8"> 
 
 <title>Exemplo dos elementos apresentados</title> 
 
 <link rel="stylesheet" href="estilo.css"> 
 
 </head> 
 
 <body> 
 
 <h2>Este título possui a cor azul. Valor declarado na regra CSS dentro do 
 
 </body> 
 
</html>
<!DOCTYPE html> 
 
<html> 
 
 <head> 
 
 <meta charset="UTF-8"> 
 
 <title>Exemplo dos elementos apresentados</title> 
 
 <style type="text/css"> 
 
 @import url("estilo.css"); 
 
 </style> 
 
 </head> 
 
 <body> 
 
 <h2>Este título possui a cor azul. Valor declarado na regra CSS dentro do 
 
 </body> 
 
</html>
Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 11/22
Propriedades bastante usadas
Para fontes e textos
Existem inúmeras propriedades CSS para diferentes aplicações que dá para escrever um
livro imenso sobre elas.
Não é objetivo e não daria explicar todas neste artigo. Entretanto, tentarei passar noções
básicas sobre as mais usadas para que um principiante possa dar seus primeiros passos e
tenha uma base para pesquisas posteriores.
É primordial para quem quer mexer comCSS entender as propriedades para fontes e tex-
tos, porque a maior parte do conteúdo na web até então é textual. Seguem algumas que
você usará bastante.
Font-size – Esta define o tamanho da fonte.
Os valores mais usados são px, em e porcentagens. Veja:
p { 
 
 font-size: 14px; 
 
}
Font-family – Define a família de fontes. Com ela você pode declarar uma fonte específica
e uma genérica.
Fontes específicas:
Verdana, Time New Roman, Monotype Cursiva, Courier New, etc.
Fontes genéricas:
1. serif (fontes com serifas),
2. sans-serif (fontes sem serifas),
3. cursive (cursiva),
4. monospace (fontes mono-espaçadas).
5. fantasy (fontes com representações decorativas de caracteres).
É indicado que toda vez que você declarar uma fonte específica, declare também na
sequência uma fonte de família genérica que corresponda à fonte específica declarada. Isso
porque se a fonte específica não estiver disponível no dispositivo do usuário o navegador
terá a liberdade para escolher uma fonte semelhante da família genérica.
Por exemplo. Se você declarou a fonte específica Verdana, declare também a genérica
sans-serif porque Verdana é uma fonte sem serifa. Veja a sintaxe:
Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 12/22
p { 
 
 font-family: Verdana, sans-serif; 
 
}
Importante observar também que quando usar fontes derivadas de família deve-se sempre
usar aspas. Exemplo: “Times New Roman”, “Palatino Linotype”, “Book Antiqua”. Veja:
p { 
 
 font-family: "Times New Roman”, serif; 
 
}
Font-weight – Esta propriedade serve para determinar o peso da fonte. É usada bastante
com o valor “bold” para negritar trechos de textos.
O valor maior representa maior peso:
100
200
300
400
500
600
700
800
900
Aqui outros valores possíveis: normal, bold, bolder, lighter.
Veja um exemplo de sintaxe desta propriedade:
p { 
 
 font-weight: bold; 
 
}
Font-style – Usada para dar estilo. Você pode usar esta propriedade para valores “nor-
mal”, “oblique” ou “italic”.
Veja:
p { 
 
 font-style: italic; 
 
}
Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 13/22
Ao usar esta propriedade os valores para “size” e “family” são obrigatórios. Se você
declarar line-height seu valor deve vir após o valor de “size” seguido de uma barra
“/”.
Para cor de textos
Line-height – É uma propriedade de dimensionamento que permite estipular espaçamento
entre linhas.
Os valores usados para esta propriedade podem ser de diferentes unidades de medidas
CSS px, cm, em, %, etc. E também um número (1, 2, 3). Veja:
p { 
 
 line-height: 36px; 
 
}
Font – A propriedade “font” é indicada se quer diminuir o código reunindo todos os valores
das propriedades acima em uma só declaração. Veja:
p { 
 
 font:bold italic 30px/36px Verdana; 
 
}
Text-align – Esta é a propriedade usada para determinar o tipo de alinhamento que um
texto possuirá. Os valores para esta propriedade são: left, right, center e justify.
Para alinhamento à esquerda – text-align: left;
Para alinhamento à direita – text-align: right;
Centralizado – text-align: center;
Justificado – text-align: justify.
Veja um exemplo:
p { 
 
 text-align: center; 
 
}
Bom… Existem outras propriedades para dar forma a textos e fontes. Em outra oportuni-
dade podemos comentar sobre elas. Entretanto, com essas apresentadas neste artigo você
já tem uma base para seus primeiros passos.
A propriedade para cor de textos é a “color”. Você pode usar valores hexadecimais nessa
propriedade. Veja:
Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 14/22
Para dimensões de blocos
Para fundos do site e de blocos
p { 
 
 color: #ff0000; /* cor vermelha */ 
 
}
Essa opção é boa porque você pode pegar o valor direto de editores gráficos como o Pho-
toshop, por exemplo. Basta que você coloque o sinal “ # ” antes do hexadecimal.
Outra opções mais avançada é usar os sistemas RGB, RGBA e HSL.
Você pode optar também pelo nome da cor em inglês. Você encontra uma lista de referência
aqui . Porém está opção é pouco utilizada se comparada com o hexadecimal.
Elementos estilizados com CSS possuem largura e altura. Muitas vezes elas nem precisam
ser especificadas, pois resultam de outros fatores como tamanho do conteúdo na tela e in-
terferência de outras propriedades.
Porém sempre existirá um momento em que você terá que estipular dimensões de um
bloco, principalmente quanto à largura. Veja um exemplo:
div { 
 
 width: 400px; /* cor vermelha */ 
 
 height: 200px; /* cor vermelha */ 
 
}
“Width” define a largura do bloco e “height” a altura.
Quando você define valores de porcentagem, por exemplo, para uma largura, seu valor será
calculado baseado na largura do elemento pai.
Um dos possíveis valores é o “auto” (width: auto). Quando usado faz que o elemento se
ajuste dentro do box pai.
A propriedade responsável por atribuir valores para características de fundo de sites, se-
ções e blocos é a background.
Com ele é possível atribuir valores de cor, posicionamento, imagens para fundos, entre ou-
tros. Um exemplo comum:
div { 
 
 background: #fff000 url(imagem-de-fundo.png) repeat;
 
}
Este exemplo define uma imagem de fundo “imagem-de-fundo.png”. Ela se repetirá em
toda a extensão do elemento no eixo x e y, e atrás desta temos uma cor de fundo amarela.Privacidade - Termos
https://www.w3schools.com/cssref/css_colornames.asp
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 15/22
Para margens
Essa cor será notada se a imagem em png tiver transparência ou enquanto a imagem de
fundo estiver sendo carregada no site.
Esta regra poderia ser obtida através de variantes de background. Veja:
Outras variações:
background-attachment – define se a imagem fica fixa ou não enquanto rolamos a tela;
background-position – define onde a imagem de fundo é posicionada;
background-clip – define a área onde a imagem de fundo é aplicada;
background-origin – define a posição de origem da imagem em um elemento;
background-size – define as dimensões da imagem de fundo.
As margens em CSS servem para que um bloco se distancie de blocos vizinhos e também
da extremidade do navegador. E isso é muito útil para criar áreas de respiro entre elemen-
tos, definir posicionamentos e auxiliar na diagramação de um layout quando usado em con-
junto com as propriedades width e height.
A propriedade responsável por definir margens para um elemento se chama “margin”. Veja
um exemplo:
div { 
 
 margin: 10px; 
 
}
Aqui diz que o elemento “div” deve se distanciar 10 pixels em todos os lados em relação a
outros elementos ao seu redor. Essa regra equivale a esta:
div { 
 
 margin-top: 10px; 
 
 margin-right: 10px; 
 
 margin-bottom: 10px; 
 
 margin-left: 10px; 
 
}
div { 
 
 background-image: url(imagem-de-fundo.png); /* Define a imagem de fundo */ 
 
 background-color: #fff000; /* Define a cor do fundo amarela */ 
 
 background-repeat: repeat; /* Define a se a imagem do fundo deve repetir ou não, ou s
 
}
Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 16/22
Para preenchimentos
Para bordas
Mais obviamente a regra anteriormente é melhor por economizar código, tempo e melhoraro desempenho do site.
É mais indicado usar as regras para os lados quando somente um deles precisa ser ado-
tado. Veja:
Preenchimento ou espaçamento é similar às margens. Ele também cria uma área de res-
piro. Só que desta vez é entre o conteúdo e extremidade de um box. A propriedade respon-
sável por isso se chama “padding”.
Veja um exemplo:
div { 
 
 padding: 10px; 
 
}
Da mesma forma que vimos em margin, o padding também pode ser aplicado para os lados
com padding-top, padding-right, padding-bottom e padding-left.
A propriedade “border” é responsável por especificar a espessura, o estilo e a cor da borda
de um elemento.
Existem variantes desta propriedade para cada tipo de valor que pretendes usar. São elas:
Border-style: Especifica o estilo da borda.
Desta propriedade ainda é possível conseguir variações para os lados de um box: border-
top-style, border-right-style, border-bottom-style e border-left-style.
Exemplo:
div { 
 
 border-style: solid; 
 
}
Border-width: Especifica a espessura.
Suas variações: border-top-width, border-right-width, border-bottom-width e border-
left-width.
div { 
 
 margin-top: 30px; /* aplica uma margem de 30 pixels no topo fazendo com que o bloco se 
 
}
Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 17/22
Exemplo
Exemplo:
div { 
 
 border-width: 1px; /* Só funciona se border-style também estiver declarado */ 
 
}
Border-color: Especifica a cor da borda.
Suas variações: border-top-color, border-right-color, border-bottom-color e border-left-
color.
Exemplo:
div { 
 
 border-color: #000000; /* Só funciona se border-style também estiver declarado */ 
 
}
Porém a forma mais utilizada é a que reúne as três em uma só declaração abreviada. Veja:
div { 
 
 border: 2px solid #000000; 
 
}
Temos o valor da espessura (2px), do estilo (solid) e da cor da borda (#000000) tudo reu-
nido na declaração.
Esta forma também representa outras variações de cada lado de um elemento. Veja:
div { 
 
 border-top: 2px solid #000000; 
 
 border-right: 2px solid #000000; 
 
 border-bottom: 2px solid #000000; 
 
 border-left: 2px solid #000000; 
 
}
Depois desta apresentação com propriedades bastantes usadas e princípios do CSS deixa-
rei um código de exemplo para você identificar e estudar o que foi passado neste artigo.
Primeiro o HTML. Ele é baseado no código desenvolvido no artigo 
“18 coisas sobre HTML que eu gostaria que tivessem me dito quando comecei a criar
meu primeiro site”
e está com pequenas alterações.
Veja (html-e-css.html):
Privacidade - Termos
https://www.chiefofdesign.com.br/18-coisas-sobre-html-que-eu-gostaria-que-tivessem-dito-quando-comecei-criar-meu-primeiro-site/
https://www.chiefofdesign.com.br/posts-archives/html-e-css.html
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 18/22
Você pode copiar este código e colar em seu editor para testar ou acessar o resultado final 
aqui.
Agora o CSS (estilo-html-e-css.css):
body { 
 
 background-color: #262626; 
 
 margin:0; 
 
 padding: 0; 
 
 font-family: Arial, sans-serif; 
 
 color: #626262; 
 
} 
 
#corpo { 
 
 background-color: #F9F9F9; 
 
 margin: 20px; 
 
 width: 570px; 
<!DOCTYPE html> 
 
<html> 
 
 <head> 
 
 <meta charset="UTF-8"> 
 
 <meta content="noindex, follow" name="robots"> 
 
 <link rel="stylesheet" href="https://www.chiefofdesign.com.br/posts-archi
 
 <title>Exemplo dos elementos apresentados</title> 
 
 </head> 
 
 <body> 
 
 <div id="corpo"> 
 
 <h1>Eu sou o título principal desta página</h1> 
 
 <div> 
 
 <h2>Eu represento um título importante dentro deste bloco (div) i
 
 <img src="imagem-do-bloco.jpg" alt="Sou a imagem deste bloco" wid
 
 <p>Eu sou o primeiro parágrafo deste bloco. Meu conteúdo consiste 
 
 <p>Eu sou o segundo parágrafo e dentro de um mim tem <strong>um t
 
 <a href="https://www.chiefofdesign.com.br/ebook-guia-porftolio/">
 
 </div> 
 
 </div> 
 
 </body> 
 
</html>
Privacidade - Termos
https://www.chiefofdesign.com.br/posts-archives/html-e-css.html
https://www.chiefofdesign.com.br/posts-archives/estilo-html-e-css.css
https://www.chiefofdesign.com.br/posts-archives/estilo-html-e-css.css
https://www.chiefofdesign.com.br/ebook-guia-porftolio/
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 19/22
O E-book completo já está no ar! Clique em algum dos links abaixo para adquirir
o seu!
http://ebookhtmlcss.com/ ou 
http://ebookhtmlcss.com/b-e-book-solidario-fluencia-em-htmlcss/
Conclusão
 
 padding: 40px; 
 
 border: 3px solid #CCC; 
 
} 
 
h1 { 
 
 text-align: justify; 
 
 color: #FF1B7B; 
 
} 
 
h2 { 
 
 color: #626262; 
 
 font-weight: 100; 
 
} 
 
img { 
 
 border: 5px solid #ffffff; 
 
} 
 
p { 
 
 font: normal 16px/20px Arial, sans-serif; 
 
} 
 
a { 
 
 font-weight: bold; 
 
 color:#11B4FF; 
 
 text-align: center; 
 
}
Você pode copiar este código e colar em seu editor para testar, baste que salve o arquivo no
mesmo diretório do arquivo HTML e nomeie como “estilo-html-e-css.css”.Ou se preferir
acesse aqui.
É bastante material, porém é só o começo. Como já disse antes, com um pouco de estudo e
prática já da para no mexer visual de seus projetos mesmo que engatinhando.
Peço que pratique e se tiver dúvidas poste nos comentários, bele? Estou aqui para ajudar
no que for possível.
Privacidade - Termos
http://ebookhtmlcss.com/
http://ebookhtmlcss.com/b-e-book-solidario-fluencia-em-htmlcss/
https://www.chiefofdesign.com.br/posts-archives/estilo-html-e-css.css
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 20/22
Artigos Relacionados
Editor grátis de PHP,
HTML, CSS, JavaScript
– Codelobster IDE
E-book Manual de Web
Design Responsivo
Curso de UI Design –
Tudo o que você precisa
saber para escolher o
melhor treinamento
Como Criar um Currículo
Criativo?
David Arty
Olá. Sou David Arty, fundador do blog Chief of Design. 
Sou natural de São Paulo, Brasil. Trabalho com design, prin-
cipalmente com design para web, desde 2009. Procuro trans-
formar ideias loucas e complexas em peças simples, atrativas
e funcionais. 
Saiba mais sobre mim
Digite seu e-mail aqui! Sim, Quero Receber!
RECEBA MAIS ARTIGOS POR EMAIL!
Fique atualizado das novas postagens do Chief direto no seu
email!
CSS é uma linguagem maravilhosa que dá um brilho especial em nossas interfaces e surgiu
para fazer uma bela parceria com o HTML. Espero que curta esta parceria. 😀
E se você deseja aprender ainda mais sobre CSS, o Chief of Design oferece conteúdo em
vídeo sobre essa ferramenta no Curso em Vídeo de Fluência em HTML & CSS. Dê uma
conferida!!!
Espero também que este artigo tenha sido útil para você . Te aguardo nos comentários!
Agora preciso correr para finalizar o e-book!
Forte Abraço!
Até Mais!
Also published on Medium.
Privacidade - Termos
https://www.chiefofdesign.com.br/codelobster-ide/
https://www.chiefofdesign.com.br/ebook-design-responsivo/
https://www.chiefofdesign.com.br/curso-de-ui-design/
https://www.chiefofdesign.com.br/como-criar-um-curriculo-criativo/
https://www.chiefofdesign.com.br/author/david-arty/
https://www.chiefofdesign.com.br/sobre
https://bit.ly/curso-HTML-CSS
https://medium.com/@davidarty/css-e-suas-propriedades-mais-usadas-efe7b14abd8b
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/21/22
TAMBÉM EM CHIEF OF DESIGN
33 preocupações preocupações
alémalém do do trabalho trabalho
queque … …
8 meses atrás MembershipMembership
Plugin -Plugin -
ARMemberARMember
2 meses atrás 1 comentário•
FerramFerram
essencessenc
oo … …
2 meses at
Comentários Comunidade 🔒 Política de Privacidade
Entrar1
t Tweet f Compartilhar
Ordenar por Mais votados
FAZER LOGIN COM
OU REGISTRE-SE NO DISQUS 
Nome
Participe da discussão...
?
Thaís Andreatti • 3 meses atrás
• Responder •
Olá David!! Estou eu aqui nessa pandemia mudando
de profissão e feliz com minha escolha! Claro que fico
meio perdida mas aos poucos me encontro =] obrigada
por esse artigo, me ajudou demais! Beijos
△ ▽
Sany • 3 meses atrás
• Responder •
Curti d+! Valeww
△ ▽
Rafael • 2 anos atrás
Saudações David! 
Estou iniciando estudos na área de programação, mas
aprendendo sobre css só agora. Sou arquiteto e curto
muito essa pegada visual e funcional apresentadas em
sites.
 Recomendar
Compartilhar ›
Compartilhar ›
Copyright © Chief of Design · Todos os Direitos Reservados 
política de privacidade
    
Privacidade - Termos
https://disqus.com/home/forums/chiefofdesign/
https://help.disqus.com/customer/portal/articles/466259-privacy-policy
https://disqus.com/home/inbox/
https://www.chiefofdesign.com.br/css/#comment-5307603472
https://disqus.com/by/disqus_wjnldfZpeg/
https://www.chiefofdesign.com.br/css/#comment-5296847206
https://www.chiefofdesign.com.br/css/#comment-4601498588
https://disqus.com/by/disqus_wjnldfZpeg/
https://chiefofdesign.com.br/politica-privacidade/
https://www.facebook.com/chiefofdesign
https://www.youtube.com/user/ChiefofDesign
https://www.instagram.com/chiefofdesign.br/
https://twitter.com/ChiefofDesign
https://www.pinterest.com/chiefofdesign/
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/
11/06/2021 CSS e suas Propriedades mais usadas! - Chief of Design
https://www.chiefofdesign.com.br/css/ 22/22
Privacidade - Termos
https://www.google.com/intl/pt-BR/policies/privacy/
https://www.google.com/intl/pt-BR/policies/terms/