LINGUAGEM DE
DESENVOLVIMENTO WEB
TÉCNICO EM INFORMÁTICA
CSS - SELETORES E CLASSES
CLASSE é um atributo que você vai especificar por um título que
você vai nomear para fazer a estilização. As classes não começa
com número.
Exemplo:
<p class=“center”>Conteúdo da página </p>
No CSS:
p{
color: #007BFF;
}
.center{
text-align: center;
}
P*3
CSS - SELETORES E CLASSES
No CSS:
}
.vermelho{
color: red;
}
.font-size20{
font-size: 20px;
}
CSS – ID
identificador único para uma estilização específica.
O ID não pode começar com um número.
No CSS:
}
#teste{
color: blue;
background: yellow;
}
#box-item{
height: 250px;
width: 250px;
}
Seletor universal
No CSS:
*{
padding: 20px;
*body{
Color: red;
Text-align: center;
}
Agrupando os seletores
No CSS:
Agrupamento de seletores:
h1{ p{
Color: red; Color: red;
Text-align: center; Text-align: center;
} }
-------------------------------------------------------------------------------------------------------------------------------------
h1, p{
Color: red;
Text-align: center;
}
Propriedade color
No CSS:
h1{
Color: red; ou #E4080A ou RGB (228 8 10)
Podemos usar os padrões hexadecimal, RGB ou o nome da cor em inglês.
HEX: #2596be – padrão hexadecimal
RGB: (37, 150, 190)
Propriedade background
No CSS: cor do fundo (atrás) – podemos usar cor ou imagem.
body{
Background-color: cornflowerblue;
}
Podemos usar uma div para usarmos também a propriedade background-
color, ainda podemos criar uma classe para estilizarmos apenas ela.
No HTML No CSS
<div class=“exemplo-back”> .exemplo-back{
p>lorem height: 300px;
</div> Background-color: gray;
}
Propriedade background
No CSS: usando a imagem.
Baixe a imagem no pexel, salve em uma pasta, renomear como img
No HTML
<div class=“exemplo-back”>
No CSS
p>lorem .exemplo-back{
</div> height: 300px;
background-color: gray;
background-image: url(“../img/fundo.jpg”);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Propriedade background
No CSS: usando a imagem.
No HTML
* Podemos escrever na imagem porque a imagem está no fundo.
Imagem: pexel.com - 2025
Propriedade border
No CSS: usando a borda.
h1{
color: red;
text-align: center;
border: 1px solid black;
}
• Existem variações de bordas:
• solid (sólida);
• Dotted (borda com pontinhos);
• Dashed (borda com tracinhos);
• Double (borda dupla);
• Groove (efeito 3D);
• Inset: (borda por dentro) outset (borda por fora).
Propriedade border
No CSS: usando a borda.
h1{
color: red;
text-align: center;
border: 1px solid black;
}
• A borda também pode ser determinada por posição: direita,
esquerda, acima e abaixo. Right, left, top, bottom.
• Border-top: 1px solid black;
• Border-left: 1px solid green;
• Border-right: 1px solid blue;
• Border-bottom. 1px solid orange;
Propriedade border
No CSS: usando a borda arredondada.
h1{
color: red;
text-align: center;
border: 1px solid black;
border-radius: 15px;
Back-ground: green;
}
Propriedade margin (margem)
No CSS: usando a margem que dará espaço por fora do elemento.
h1{
color: red;
text-align: center;
border: 1px solid black;
border-radius: 15px;
Back-ground: green;
margin-top: 50px;
margin-bottom: 20px;
}
Na propriedade margin também podemos usar a % ou o px.
Propriedade padding (preenchimento)
No CSS: usando a propriedade padding que dará espaço de dentro do
elemento.
h1{
color: red;
text-align: center;
border: 1px solid black;
border-radius: 15px;
50px
back-ground: green;
padding-top: 50px; 10px
70px
20px
padding-bottom: 20px
Padding-left: 10px;
Padding-right: 70px;
}
Na propriedade padding também podemos usar a %.
Propriedade padding (preenchimento)
No CSS: usando a propriedade padding podemos criar botões para
facilitar o envio ou um link através do botão.
h1{
color: red;
text-align: center;
border: 1px solid black;
border-radius: 15px;
back-ground: green;
padding: 50px;
}
Na propriedade padding quando colocarmos só um valor, a propriedade
entende que é o mesmo para top, right, bottom, left.
CRIANDO UM BOTÃO COM CSS
No CSS: usando as propriedades background, border, margin, padding
podemos criar botões para facilitar o envio ou um link através do botão.
CSS
HTML
.botao{
<a class=“botao” href=“proximapagina.html> margin-left: 33%;
próxima página </a> background: green;
color: White;
padding: 30px;
border-radius: 5px;
text-decoration: none;
}
.botao:hover{
background: blue;
}
CRIANDO UM BOTÃO COM CSS
No CSS: usando as propriedades background, border, margin, padding
podemos criar botões para facilitar o envio ou um link através do botão.
CSS
HTML
.botao{
<a class=“botao” href=“proximapagina.html> margin-left: 33%;
próxima página </a> background: green;
color: White;
padding: 30px;
border-radius: 5px;
text-decoration: none;
}
.botao:hover{
background: blue;
}
