DEV Community

Carmichael Ferreira
Carmichael Ferreira

Posted on

Introdução ao desenvolvimento web(Front-end) - CSS

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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%);
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Exemplo 6: Escondendo um elemento

O seguinte trecho de código CSS esconde um elemento HTML:

.hidden {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

We're hiring!

We're Hiring

We're looking for someone who can develop, maintain, and implement our product roadmap and strategy as a Senior Product Manager.

Head here to learn more.