Esse é o terceiro post de uma série de posts que estou fazendo com o intuito de ajudar iniciantes no mundo do front-end, caso tenha interesse deixo aqui os links para os outros posts da série:
Introdução ao desenvolvimento web(Front-end)
Introdução ao desenvolvimento web(Front-end) - HTML
Link para o repositório com o código final: Código - Introdução ao desenvolvimento web(Front-end) - CSS
O que é CSS?
CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para descrever a apresentação de um documento escrito em HTML. Com o CSS, é possível controlar a aparência de elementos HTML, como cor, fonte, tamanho, espaçamento, posicionamento, etc. O CSS ajuda a separar o conteúdo do documento (HTML) da sua apresentação visual.
A seguir, vou dar alguns exemplos práticos de como o CSS pode ser usado.
Exemplo 1: Configurando a fonte de um elemento
O seguinte trecho de código CSS define a fonte usada em um elemento HTML:
p {
font-family: Arial, sans-serif;
}
Este código fará com que todos os elementos de parágrafo (<p>) na página usem a fonte Arial. Se a fonte Arial não estiver disponível no sistema do usuário, o navegador usará uma fonte sem serifa padrão.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>Este é um parágrafo com fonte Arial.</p>
</body>
</html>
Exemplo 2: Definindo a cor de um elemento
O seguinte trecho de código CSS define a cor de fundo de um elemento HTML:
h1 {
background-color: lightgray;
}
Este código fará com que todos os elementos de cabeçalho de primeiro nível (<h1>) na página tenham uma cor de fundo cinza claro.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: lightgray;
}
</style>
</head>
<body>
<h1>Este é um título com fundo cinza claro</h1>
</body>
</html>
Exemplo 3: Adicionando uma borda a um elemento
O seguinte trecho de código CSS adiciona uma borda sólida de 5 pixels de largura a um elemento HTML:
.bordered {
border: 5px solid gray;
}
Este código pode ser usado em qualquer elemento HTML que tenha a classe bordered atribuída.
<!DOCTYPE html>
<html>
<head>
<style>
.bordered {
border: 5px solid gray;
}
</style>
</head>
<body>
<div class="bordered">
<p>Este é um parágrafo com uma borda sólida de 5 pixels de largura.</p>
</div>
</body>
</html>
Exemplo 4: Centralizando um elemento
O seguinte trecho de código CSS centraliza um elemento HTML horizontal e verticalmente na página:
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Este código pode ser usado em qualquer elemento HTML que tenha a classe centered atribuída(Importante ressaltar que existem diversas maneiras de se centralizar um elemento utilizando css, é possível centralizar um elemento de forma absoluta, utilizando display flex, grid, dentre outros, essa é somente uma das maneiras existentes).
<!DOCTYPE html>
<html>
<head>
<style>
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="center">
<p>Este é um parágrafo centralizado na página.</p>
</div>
</body>
</html>
Exemplo 5: Ajustando o espaçamento entre elementos
O seguinte trecho de código CSS ajusta o espaçamento entre elementos HTML:
.spaced {
padding: 10px;
margin: 10px;
}
Este código pode ser usado em qualquer elemento HTML que tenha a classe spaced atribuída. A propriedade padding define o espaçamento interno do elemento, enquanto a propriedade margin define o espaçamento externo.
<!DOCTYPE html>
<html>
<head>
<style>
.spaced {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="spaced">
<p>Este é um parágrafo com 10 pixels de espaçamento interno e externo.</p>
</div>
</body>
</html>
Exemplo 6: Escondendo um elemento
O seguinte trecho de código CSS esconde um elemento HTML:
.hidden {
display: none;
}
Este código pode ser usado em qualquer elemento HTML que tenha a classe hidden atribuída.
<!DOCTYPE html>
<html>
<head>
<style>
.hidden {
display:none;
}
</style>
</head>
<body>
<div class="hidden">
<p>Este é um parágrafo escondido.</p>
</div>
</body>
</html>
Exemplo 7: Alterando o tamanho da fonte de um elemento
O seguinte trecho de código CSS altera o tamanho da fonte de um elemento HTML:
.font {
font-size: 20px;
}
Este código pode ser usado em qualquer elemento HTML que tenha a classe font atribuída. A propriedade font-size define o tamanho da fonte.
<!DOCTYPE html>
<html>
<head>
<style>
.font {
font-size: 20px;
}
</style>
</head>
<body>
<div class="font">
<p>Este é um parágrafo com fonte Arial e tamanho de 20 pixels.</p>
</div>
</body>
</html>
Exemplo 8: Ajustando a altura e largura de um elemento
O seguinte trecho de código CSS ajusta a altura e largura de um elemento HTML:
.sized {
height: 200px;
width: 400px;
}
Este código pode ser usado em qualquer elemento HTML que tenha a classe sized atribuída. A propriedade height define a altura do elemento, e a propriedade width define a largura.
<!DOCTYPE html>
<html>
<head>
<style>
.sized {
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<div class="sized">
<p>Este é um parágrafo com 200 pixels de altura e 400 pixels de largura.</p>
</div>
</body>
</html>
Exemplo 9: Alinhando o texto de um elemento
O seguinte trecho de código CSS alinha o texto de um elemento HTML:
.text-align {
text-align: center;
}
Este código pode ser usado em qualquer elemento HTML que tenha a classe text-align atribuída. A propriedade text-align define o alinhamento do texto.
<!DOCTYPE html>
<html>
<head>
<style>
.text-align {
text-align: center;
}
</head>
<body>
<div class="text-align">
<p>Este é um parágrafo centralizado.</p>
</div>
</body>
</html>
Exemplo 10: Adicionando uma borda a um elemento
O seguinte trecho de código CSS adiciona uma borda a um elemento HTML:
.border {
border: 2px solid black;
}
Este código pode ser usado em qualquer elemento HTML que tenha a classe border atribuída. A propriedade border define a borda do elemento, com 2 pixels de largura, solida e de cor preta.
<!DOCTYPE html>
<html>
<head>
<style>
.border {
border: 2px solid black;
}
</style>
</head>
<body>
<div class="border">
<p>Este é um parágrafo com borda preta e 2 pixels de largura.</p>
</div>
</body>
</html>
Página completa com CSS
Aqui está uma página completa com CSS utilizando todos os exemplos acima:
<!DOCTYPE html>
<html>
<head>
<style>
.background {
background-color: lightblue;
}
.color {
color: white;
}
.hidden {
display: none;
}
.font {
font-family: Arial, sans-serif;
font-size: 20px;
}
.sized {
height: 200px;
width: 400px;
}
.text-align {
text-align: center;
}
.border {
border: 2px solid black;
}
</style>
</head>
<body>
<div class="background color border">
<p class="font">Este é um parágrafo com fundo azul claro, cor branca, borda preta, fonte Arial e tamanho de 20 pixels, e centralizado.</p>
</div>
<div class="hidden">
<p>Este é um parágrafo escondido.</p>
</div>
<div class="sized">
<p>Este é um parágrafo com 200 pixels de altura e 400 pixels de largura.</p>
</div>
</body>
</html>
Como de costume vou deixar alguns links úteis pra você que quer se aprofundar um pouco mais na tecnologia:
W3Schools - Uma das fontes mais confiáveis e completas para aprender CSS e outras tecnologias web.
Mozilla Developer Network - Oferece uma documentação detalhada e exemplos de código para CSS.
CSS-Tricks - Um blog incrível com tutoriais, artigos e exemplos de código sobre CSS e outras tecnologias web.
https://www.codecademy.com/learn/learn-css- Oferece cursos interativos e desafios práticos para aprender CSS e outras tecnologias web.
FreeCodeCamp - Oferece cursos gratuitos e projetos práticos para ajudá-lo a aprender CSS e outras tecnologias web.
Agradeço por ter lido este artigo sobre o CSS. Espero que você tenha aprendido algo novo e que esteja mais animado para se aventurar no mundo do front-end. Não se esqueça de praticar e sempre estar atualizado com as novas tendências e tecnologias.
Top comments (0)