Introdução ao desenvolvimento web(Front-end) - CSS
Tags: webdev, beginners, programming, braziliandevs
Published: 2023-02-03 17:34:03

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)](https://dev.to/carmichaelf/introducao-ao-desenvolvimento-webfront-end-1pfi)

[Introdução ao desenvolvimento web(Front-end) - HTML](https://dev.to/carmichaelf/introducao-ao-desenvolvimento-webfront-end-html-2a1j)

Link para o repositório com o código final: [Código - Introdução ao desenvolvimento web(Front-end) - CSS](https://github.com/CarmichaelF/intro-front-end/tree/introdu%C3%A7%C3%A3o-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:

```CSS
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._

```HTML
<!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:

``` CSS
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._

``` HTML
<!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:

``` CSS
.bordered {
  border: 5px solid gray;
}
```

_Este código pode ser usado em qualquer elemento HTML que tenha a classe `bordered` atribuída._

``` HTML
<!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)._

``` HTML
<!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:

``` CSS
.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._

``` HTML
<!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:

``` CSS
.hidden {
  display: none;
}
```

_Este código pode ser usado em qualquer elemento HTML que tenha a classe `hidden` atribuída._

``` HTML
<!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:

``` CSS
.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._

``` HTML
<!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:

``` CSS
.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._

``` HTML
<!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:

``` CSS
.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._

``` HTML
<!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:

``` CSS
.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._

``` HTML
<!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:

``` HTML
<!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](https://www.w3schools.com/css/) - Uma das fontes mais confiáveis e completas para aprender CSS e outras tecnologias web.

[Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS) - Oferece uma documentação detalhada e exemplos de código para CSS.

[CSS-Tricks](https://css-tricks.com/) - 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](https://www.freecodecamp.org/news/tag/css/) - 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.