TUTORIAL PRÁTICO DE CSS
Disciplina: Programação WEB I
Prof. Alexandre Zordan Durães
Araras-SP
2025
TUTORIAL BÁSICO E PRÁTICO DE CSS
Um guia para iniciantes em programação WEB
Este documento tem como objetivo fornecer um guia prático de CSS através das aulas
ministradas no curso de Programação Web I, registrando e facilitando o aprendizado dos
alunos iniciantes apresentando conceitos fundamentais de CSS
Autor: Alexandre Zordan Durães
Araras /SP - 2025
SUMÁRIO
SELETORES..............................................................................................................................3
PROPRIEDADES BÁSICAS.....................................................................................................6
UNIDADES DE MEDIDA.........................................................................................................9
MARGIN (Margem).................................................................................................................10
PADDING (Preenchimento).....................................................................................................12
3
SELETORES
Um dos conceitos mais importantes e fundamentais do CSS são os seletores. A partir deles
que conseguimos informar a nossa página qual elemento ou grupo de elementos que receberá
nossa estilização.
Podemos estilizar diretamente nossas tags HTML, informando apenas seu nome e aplicando
estilos a elas, por exemplo:
h1{
color: blue;
font-size: 24px;
}
Desta forma dizemos ao nosso navegador que TODAS as tags h1 terá o estilo alterado,
definindo que a cor da fonte será azul e o tamanho será 24px (pixels).
(Resultado no browser)
Podemos também utilizar seletores para um único objeto, a depender da nossa necessidade,
através do nosso seletor por id, para isso, basta que criemos um id em nosso documento
HTML e referenciamos em nossa folha de estilos através da tralha (#), por exemplo:
<!-- DEFININDO ELEMENTOS HTML-->
<p>Este é um parágrafo comum. </p>
<p id="p1">Este é um parágrafo com id</p>
/* ATRIBUINDO ESTILO AO ELEMENTO COM ID = p1 */
#p1{
color: green;
font-size: 18px;
4
}
Utilizando o seletor por id, somente o elemento que contiver o id mencionado receberá a
estilização. Neste caso, o elemento com id p1 será estilizado com a cor da fonte verde e
tamanho da fonte 18px.
(Resultado no browser)
Também temos a maneira de estilos mais popular e utilizada que é definirmos estilos através
de classes. Quando criamos uma classe em nossa folha de estilos (documento .css), todo
componente HTML que participar da nossa classe receberá o estilo
Para este exemplo, criamos duas classes: texto-amarelo e texto-azul. Para criar uma classe
CSS, basta irmos até ao nosso arquivo .css e definirmos a classe com um ponto na frente:
.texto-amarelo {
color: #f0ad4e;
}
.texto-azul {
color: #5bc0de;
}
Neste exemplo, definimos as duas classes e dizemos que todo elemento .texto-amarelo
receberá uma fonte da cor #f0ad4e (amarelo) e .texto-azul (#5bc0de)
As cores podem ser atribuídas no formato hexadecimal, RGB/RGBA ou pelo seu nome em
inglês.
Agora que definimos nossas classes, vamos criar alguns elementos do tipo parágrafo <p> em
nosso documento HTML para aplicarmos nossas definições!
5
<!-- DEFININDO ELEMENTOS HTML -->
<p>Este é um parágrafo comum. </p>
<p>Este é um parágrafo comum. </p>
<p class="texto-amarelo">Este é um parágrafo da classe texto-
amarelo. </p>
<p>Este é um parágrafo comum. </p>
<p class="texto-azul">Este é um parágrafo da classe texto-azul.
</p>
<p class="texto-azul">Este é um parágrafo da classe texto-azul.
</p>
Repare que basta atribuir o valor de nossas classes definidas em nossa folha de estilos à
propriedade class do nosso elemento HTML que ele já entende nossa referência!
(Resultado no browser)
6
PROPRIEDADES BÁSICAS
Temos uma gama muito rica de propriedades em nossos elementos que podemos estilizar.
Podemos encontrá-las nas documentações: CSS Tutorial e também em CSS | MDN.
Vamos conhecer algumas delas!
COLORS
A propriedade color altera a cor da fonte de um elemento, exemplo:
color: yellow;
BORDERS
A propriedade border atribui uma borda ao elemento, exemplo:
border: solid 1pt red;
Podemos definir o tipo de borda, neste caso solid, a espessura da borda e sua cor!
Para outros exemplos de borda, veja: border - CSS: Cascading Style Sheets | MDN
BACKGROUNDS
Podemos estilizar os backgrounds dos elementos através das propriedades de background
Podemos mudar a cor de um plano de fundo com a propriedade background-color
background-color: red;
7
Além de cores, podemos colocar uma imagem diretamente em nosso elemento, através da
propriedade background-image!
Para colocar uma imagem de fundo que englobe todo o nosso body, podemos fazer da
seguinte forma:
body {
background-image: url("[Link]");
}
Onde a url espera como argumento o local onde a sua imagem está. Neste caso está no mesmo
nível do nosso arquivo html, caso estivesse em outro nível, devemos passar as coordenadas
relativas por exemplo: ./imagens/[Link]
(Resultado no browser)
Se a sua imagem for menor que o seu display, por padrão, ela irá se repetir até ocupar todo o
espaço da tela!
Para configurar as repetições, temos a propriedade background-repeat:
body {
background-image: url("[Link]");
background-repeat: no-repeat;
}
8
(Resultado no browser)
Se atribuirmos o valor de no-repeat para nossa propriedade, nossa imagem aparecerá somente
uma vez!
Podemos configurar nosso repeat para repetir apenas na vertical ou horizontal, através dos
valores repeat-x e repeat-y
body {
background-image: url("[Link]");
background-repeat: repeat-x;
}
(Resultado no browser)
9
Além destas manipulações temos diversas outras possíveis que podem ser conferidas na
documentação: background - CSS: Cascading Style Sheets | MDN
UNIDADES DE MEDIDA
Para definir o tamanho de nossos elementos, podemos trabalhar com diversas unidades de
medidas aceitas pelo nosso navegador. Temos duas categorias relativas e absolutas:
MEDIDAS ABSOLUTAS
Não mudam, são travadas, independe do tamanho do display
Exemplos: px, cm, mm, in e pt.
MEDIDAS RELATIVAS
São ajustáveis ao tamanho display do dispositivo (calculadas proporcionalmente).
Exemplos:
% - Faz referência ao elemento pai
vw - Faz referência a largura do navegador
vh - Faz referência a altura do navegador
em - Faz referência ao elemento pai
rem - Faz referência ao HTML (root - padrão 18px)
10
MARGIN (Margem)
A propriedade margin define o espaço que estará do lado externo (de fora) do elemento
atribuído.
Temos propriedades específicas para cada direção de margem:
margin-top – Ajusta o espaço da margem superior
margin-right – Ajusta o espaço da margem a direita
margin-bottom - – Ajusta o espaço da margem ao sul
margin-left – Ajusta o espaço da margem a esquerda
Para definir margens diferentes para os quatro lados de um elemento fazemos:
Criamos uma classe .div-custom para teste
.div-custom {
border: solid 2px red;
background-color: pink;
margin-top: 100px;
margin-bottom: 50px;
margin-right: 30px;
margin-left: 80px;
}
Adicionamos uma borda preta em nosso body para identificá-lo e depois adicionamos uma div
com a classe configurada para fazermos o teste!
<body style="border: solid 1px;">
<div class="div-custom">
<p>Minha DIV</p>
</div>
</body>
11
(Resultado no browser)
Este espaço que ficou entre a borda do body e a nossa DIV é nossa margem!
Desta forma podemos dimensioná-la da maneira que quisermos.
Se pretendemos deixar todas as margens iguais, podemos apenas informar que a nossa
propriedade margin tem um valor único, exemplo:
.div-custom {
border: solid 2px red;
background-color: pink;
margin: 15%;
}
(Resultado no browser)
12
PADDING (Preenchimento)
Da mesma forma que temos a margem para medir o tamanho do espaço que temos do lado de
fora do nosso componente, temos o padding para fazer a mesma coisa do lado “de dentro”.
.div-custom {
border: solid 2px red;
background-color: pink;
padding: 15%;
}
(Resultado no browser)
Este espaço que tem entre a borda do nosso elemento até o nosso texto, é a ação do nosso
padding!
Ele, assim como a margin, também pode ser definido separadamente, exemplo:
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;