🎨

INTRODUÇÃO

O que é CSS3?

CSS significa Cascading Style Sheets, ou Folhas de Estilo em Cascata.

O CSS é utilizado para controlar a aparência visual dos documentos HTML. Com ele podemos definir cores, fontes, tamanhos, espaçamentos, bordas, sombras, posicionamentos, layouts, animações e muito mais.

Enquanto o HTML é responsável principalmente pela estrutura e significado do conteúdo, o CSS é responsável pela apresentação visual.

💡 Importante: nesta aula você não deverá apenas copiar os códigos. A proposta é copiar cada exemplo, colocá-lo no Visual Studio Code, salvar o arquivo e observar o resultado no navegador.

SEU PROGRESSO

Acompanhe sua evolução

1 Fundamentos

2 Seletores

3 Box Model

4 Layout

5 Efeitos

6 Projeto

FUNDAMENTOS

Preparando o ambiente

Criando HTML e CSS separados

Um projeto web normalmente possui arquivos separados para estrutura e apresentação.

O arquivo index.html contém a estrutura da página e o arquivo style.css contém as regras responsáveis pela aparência.

Essa separação facilita a organização, manutenção e reutilização dos estilos.

index.html Estrutura e conteúdo da página.

style.css Aparência e layout.

navegador Interpreta HTML e CSS.

HTML index.html

<!DOCTYPE html>

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Meu Primeiro Projeto CSS</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <h1>Meu primeiro projeto com CSS</h1>

</body>

</html>

CSS style.css

body {

    background-color: #f4f7fb;

    font-family: Arial, sans-serif;

}

h1 {

    color: #2563eb;

    text-align: center;

}

RESULTADO ESPERADO ● ONLINE

Meu primeiro projeto com CSS

O navegador agora está utilizando regras CSS para modificar a aparência do HTML.

🧪 Prática:

Crie uma pasta chamada projeto-css. Dentro dela crie os arquivos index.html e style.css. Copie os códigos acima, salve os dois arquivos e abra o HTML no navegador.

💡 O CSS pode ser colocado de três formas: inline, dentro de <style> ou em um arquivo externo. Nesta aula utilizaremos principalmente o arquivo externo style.css.

FUNDAMENTOS

Reset e variáveis CSS

Criando uma base organizada para o projeto

Antes de começar a criar um projeto maior, é muito comum estabelecer algumas regras gerais.

O reset reduz diferenças de estilos padrão entre navegadores.

Já as variáveis CSS permitem armazenar valores que serão reutilizados durante o projeto.

CSS RESET + :ROOT

/* ==========================================
   RESET
   ========================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


/* ==========================================
   VARIÁVEIS
   ========================================== */

:root {

    --cor-primaria: #2563eb;

    --cor-secundaria: #06b6d4;

    --cor-fundo: #f4f7fb;

    --cor-texto: #172033;

    --cor-branco: #ffffff;

    --espacamento: 20px;

    --raio: 12px;

}


/* ==========================================
   BODY
   ========================================== */

body {

    background-color: var(--cor-fundo);

    color: var(--cor-texto);

    font-family: Arial, sans-serif;

}

🔄

Por que usar reset?

Remove margens padrão.
Remove espaçamentos padrão.
Facilita o controle do layout.
Deixa o comportamento mais previsível.

🎨

Por que usar variáveis?

Evitam repetição.
Facilitam manutenção.
Permitem alterar o tema rapidamente.
Melhoram a organização do CSS.

CSS VAR()

.botao {

    background-color: var(--cor-primaria);

    color: var(--cor-branco);

    padding: var(--espacamento);

    border-radius: var(--raio);

}

🧪 Prática:

Altere --cor-primaria para outra cor e observe como todos os elementos que utilizam var(--cor-primaria) mudam automaticamente.

SELETORES

ID, Class, Tag e Atributos

Como escolher exatamente o elemento que será estilizado

Um seletor informa ao CSS qual elemento HTML receberá determinada regra.

Os principais seletores que o aluno precisa dominar são: seletor de tag, classe, ID, atributo, pseudo-classes e seletores combinados.

Seletor	Sintaxe	Uso
Tag	p	Todos os elementos daquela tag.
Classe	.card	Reutilizar estilo.
ID	#menu	Identificação única.
Atributo	input[type="email"]	Selecionar por atributo.

CSS SELETORES

/* Seletor de TAG */

p {

    color: #475569;

}


/* Seletor de CLASS */

.card {

    padding: 20px;

}


/* Seletor de ID */

#principal {

    background-color: #eff6ff;

}


/* Seletor de ATRIBUTO */

input[type="email"] {

    border-color: #2563eb;

}


/* Pseudo-classe */

a:hover {

    color: #2563eb;

}

A classe será um dos recursos mais importantes do nosso projeto.

Imagine que temos dez cards. Não queremos criar dez regras diferentes. Criamos uma classe chamada .card e aplicamos essa classe nos dez elementos.

HTML CLASS

<div class="card">

    <h2>Produto 1</h2>

    <p>Descrição do produto.</p>

</div>


<div class="card">

    <h2>Produto 2</h2>

    <p>Descrição do produto.</p>

</div>


<div class="card">

    <h2>Produto 3</h2>

    <p>Descrição do produto.</p>

</div>

💡 Regra importante: classes podem ser reutilizadas. IDs devem representar uma identificação única dentro da página.

BOX MODEL

Margin, Padding, Border e Box-Sizing

Entendendo o espaço ocupado por cada elemento

Todo elemento HTML pode ser entendido como uma caixa. Esse conceito é chamado de Box Model.

O Box Model é formado principalmente por: conteúdo, padding, border e margin.

Content Conteúdo do elemento.

Padding Espaço interno.

Border Borda ao redor.

CSS BOX MODEL

.card {

    width: 300px;

    padding: 25px;

    margin: 20px;

    border: 1px solid #cbd5e1;

    border-radius: 12px;

    box-sizing: border-box;

}

margin cria espaço do lado de fora do elemento.

padding cria espaço dentro do elemento.

border cria uma linha ao redor do elemento.

box-sizing: border-box facilita o controle das dimensões porque padding e border passam a fazer parte da largura e altura declaradas.

🧪 Prática:

Crie uma div com classe caixa. Teste valores diferentes para margin, padding e border. Observe no navegador o espaço que cada propriedade cria.

ESTILIZAÇÃO

Cores, fontes e textos

Criando uma identidade visual

O CSS permite controlar praticamente todos os aspectos visuais do texto.

Algumas propriedades fundamentais são: color, font-family, font-size, font-weight, line-height, text-align e text-transform.

color Define a cor do texto.

font-family Define a família da fonte.

font-size Define o tamanho.

font-weight Define o peso.

line-height Define o espaçamento das linhas.

text-align Define o alinhamento.

text-transform Modifica maiúsculas e minúsculas.

letter-spacing Controla o espaço entre letras.

CSS TEXTO

h1 {

    color: #2563eb;

    font-family: Arial, sans-serif;

    font-size: 42px;

    font-weight: 800;

    line-height: 1.2;

    text-align: center;

    letter-spacing: -1px;

    text-transform: uppercase;

}

p {

    color: #475569;

    font-size: 16px;

    line-height: 1.7;

}

EXEMPLO VISUAL

DESENVOLVIMENTO WEB

O CSS transforma uma estrutura HTML simples em uma interface visualmente organizada.

BACKGROUNDS

Backgrounds e imagens

Criando áreas visuais para o projeto

O CSS permite utilizar cores, gradientes e imagens como plano de fundo.

Algumas propriedades importantes são: background-color, background-image, background-size, background-position e background-repeat.

CSS BACKGROUND

.banner {

    min-height: 400px;

    background-image: url("imagem.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

.hero {

    background: linear-gradient(135deg, #07152d, #123d6b);

}

💡 cover é muito utilizado em banners porque faz a imagem ocupar toda a área disponível, mesmo que parte da imagem precise ser cortada.

LAYOUT

Display

Block, inline, inline-block, flex e grid

A propriedade display determina como um elemento participa do layout.

Os valores mais importantes para nosso projeto serão block, inline, inline-block, flex e grid.

CSS DISPLAY

.bloco {

    display: block;

}

.linha {

    display: inline;

}

.hibrido {

    display: inline-block;

}

.container-flex {

    display: flex;

}

.container-grid {

    display: grid;

}

🧪 Prática:

Crie três elementos <span>. Primeiro deixe como inline. Depois utilize inline-block e compare o resultado.

FLEXBOX

Criando menus e layouts com Flexbox

Uma das ferramentas mais importantes do CSS moderno

O Flexbox é utilizado para organizar elementos dentro de um container de maneira flexível.

Ele é muito utilizado para criar menus, cabeçalhos, barras de navegação, botões, cards e alinhamentos.

CSS FLEXBOX

.menu {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}

.menu-links {

    display: flex;

    align-items: center;

    gap: 15px;

}

HTML MENU

<header class="menu">

    <div class="logo">
        Minha Empresa
    </div>

    <nav class="menu-links">

        <a href="#">Início</a>

        <a href="#">Serviços</a>

        <a href="#">Contato</a>

    </nav>

</header>

💡 justify-content controla a distribuição no eixo principal.

align-items controla o alinhamento no eixo transversal.

GRID

Criando uma grade de cards

Organizando conteúdos em linhas e colunas

O CSS Grid é excelente para layouts formados por linhas e colunas.

Uma aplicação muito comum é uma área com vários cards de produtos, serviços ou notícias.

CSS GRID

.cards {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}

.card {

    padding: 25px;

    border-radius: 12px;

    background-color: white;

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, 0.08);

}

RESULTADO

HTML

Estrutura.

CSS

Estilo.

JavaScript

Comportamento.

DIMENSÕES

Width, Height, Min e Max

Controlando o tamanho dos elementos

As propriedades width e height definem largura e altura.

Já min-width, max-width, min-height e max-height permitem criar limites.

CSS DIMENSÕES

.container {

    width: 100%;

    max-width: 1100px;

    min-height: 200px;

    margin: 0 auto;

}

.card {

    width: 300px;

    min-height: 180px;

}

POSICIONAMENTO

Position, Z-index e Overflow

Controlando a posição e sobreposição

A propriedade position permite alterar a forma como um elemento é posicionado.

static Comportamento padrão.

relative Permite posicionar o elemento em relação à sua posição original.

absolute Posicionamento em relação ao ancestral posicionado.

fixed Fica preso à janela do navegador.

sticky Pode permanecer fixo durante a rolagem.

z-index Controla a sobreposição.

CSS POSITION

.pai {

    position: relative;

}

.filho {

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 10;

}

.menu-fixo {

    position: fixed;

    bottom: 20px;

    right: 20px;

}

💡 O position: relative é frequentemente utilizado no elemento pai quando queremos posicionar um filho com position: absolute.

EFEITOS VISUAIS

Border, Radius, Shadow e Opacity

Criando cards modernos

CSS EFEITOS

.card {

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    box-shadow:
        0 12px 30px
        rgba(15, 23, 42, 0.08);

    opacity: 1;

}

.card:hover {

    box-shadow:
        0 20px 40px
        rgba(15, 23, 42, 0.15);

}

border-radius arredonda os cantos.

box-shadow cria profundidade.

opacity controla a transparência.

INTERAÇÃO

Transition e Hover

Criando interações suaves

A pseudo-classe :hover permite definir um estilo quando o usuário passa o mouse sobre um elemento.

A propriedade transition deixa a mudança suave.

CSS TRANSITION

.botao {

    padding: 12px 20px;

    border-radius: 8px;

    background: #2563eb;

    color: white;

    transition: all 0.3s ease;

}

.botao:hover {

    background: #1d4ed8;

    transform: translateY(-3px);

}

💡 Valores comuns para a função de tempo: linear, ease, ease-in, ease-out e ease-in-out.

ANIMAÇÕES

@keyframes e Animation

Criando animações com CSS

O @keyframes permite definir diferentes estados de uma animação.

CSS KEYFRAMES

@keyframes aparecer {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


.card {

    animation: aparecer 0.8s ease;

}

🧪 Prática:

Crie uma caixa e aplique a animação. Altere o tempo de 0.8s para 2s e observe a diferença.

CONTROLE

Overflow e Cursor

Controlando conteúdo e interação

CSS OVERFLOW

.caixa {

    width: 300px;

    height: 150px;

    overflow: auto;

}

.botao {

    cursor: pointer;

}

overflow: hidden esconde o conteúdo que ultrapassa.

overflow: auto adiciona barras quando necessário.

overflow: scroll mantém as barras de rolagem.

cursor: pointer indica que o elemento pode ser clicado.

FORMULÁRIOS

Estilizando formulários

Criando campos profissionais

CSS FORM

.formulario {

    max-width: 600px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.formulario input,
.formulario textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid #cbd5e1;

    border-radius: 8px;

}

.formulario input:focus,
.formulario textarea:focus {

    outline: none;

    border-color: #2563eb;

    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);

}

FORMULÁRIO

PROJETO PRÁTICO

Construindo um cabeçalho completo

Logo, menu e botão

Agora vamos começar a construir partes reais de um site.

O cabeçalho normalmente contém a identidade visual da empresa e uma navegação para outras áreas da página.

HTML HEADER

<header class="cabecalho">

    <div class="logo">
        TechSolutions
    </div>

    <nav class="navegacao">

        <a href="#inicio">
            Início
        </a>

        <a href="#servicos">
            Serviços
        </a>

        <a href="#sobre">
            Sobre
        </a>

        <a href="#contato">
            Contato
        </a>

    </nav>

    <a href="#contato" class="botao">
        Fale Conosco
    </a>

</header>

CSS HEADER

.cabecalho {

    width: 100%;

    padding: 20px 40px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    background: white;

    box-shadow: 0 5px 20px rgba(15,23,42,0.08);

}

.logo {

    color: #2563eb;

    font-size: 22px;

    font-weight: 900;

}

.navegacao {

    display: flex;

    gap: 20px;

}

.navegacao a {

    color: #334155;

    font-weight: 700;

}

.navegacao a:hover {

    color: #2563eb;

}

💡 Observe como combinamos várias propriedades: display:flex, align-items, justify-content, gap, padding, box-shadow e :hover.

COMPONENTES

Criando cards profissionais

Classes reutilizáveis

Cards são componentes muito utilizados em sites modernos.

Podemos utilizar a mesma classe para representar diversos conteúdos.

HTML CARDS

<section class="servicos">

    <article class="card">

        <h3>Desenvolvimento Web</h3>

        <p>
            Criamos sites modernos e responsivos.
        </p>

        <a href="#">
            Saiba mais
        </a>

    </article>


    <article class="card">

        <h3>Sistemas Web</h3>

        <p>
            Sistemas personalizados para empresas.
        </p>

        <a href="#">
            Saiba mais
        </a>

    </article>


    <article class="card">

        <h3>Consultoria</h3>

        <p>
            Orientação para projetos digitais.
        </p>

        <a href="#">
            Saiba mais
        </a>

    </article>

</section>

CSS CARDS

.servicos {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}

.card {

    padding: 25px;

    border: 1px solid #e2e8f0;

    border-radius: 15px;

    background: white;

    box-shadow: 0 10px 30px rgba(15,23,42,0.08);

    transition: all 0.3s ease;

}

.card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(15,23,42,0.14);

}

.card h3 {

    margin-bottom: 10px;

    color: #172033;

}

.card p {

    margin-bottom: 15px;

    color: #64748b;

}

.card a {

    color: #2563eb;

    font-weight: 800;

}

ESTRUTURA

Criando um Footer

Finalizando a estrutura do site

O footer normalmente apresenta informações complementares do site, como copyright, contatos, links, redes sociais e informações institucionais.

HTML FOOTER

<footer class="footer-site">

    <div class="footer-coluna">

        <h3>TechSolutions</h3>

        <p>
            Tecnologia para transformar negócios.
        </p>

    </div>

    <div class="footer-coluna">

        <h3>Links</h3>

        <a href="#">Início</a>

        <a href="#">Serviços</a>

        <a href="#">Contato</a>

    </div>

    <div class="footer-coluna">

        <h3>Contato</h3>

        <p>
            contato@techsolutions.com
        </p>

    </div>

</footer>

CSS FOOTER

.footer-site {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

    padding: 50px 30px;

    color: white;

    background: #0f172a;

}

.footer-coluna {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.footer-coluna h3 {

    color: #67e8f9;

}

.footer-coluna a {

    color: #cbd5e1;

}

RESPONSIVIDADE

Media Queries

Fazendo o site funcionar no celular

Um site moderno precisa funcionar em diferentes tamanhos de tela.

As Media Queries permitem aplicar regras específicas conforme o tamanho da tela.

CSS RESPONSIVO

.cards {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

}


/* ==================================
   TABLET
   ================================== */

@media (max-width: 900px) {

    .cards {

        grid-template-columns: repeat(2, 1fr);

    }

}


/* ==================================
   CELULAR
   ================================== */

@media (max-width: 600px) {

    .cards {

        grid-template-columns: 1fr;

    }

    .cabecalho {

        flex-direction: column;

    }

    .navegacao {

        flex-direction: column;

        text-align: center;

    }

}

📱 Sempre teste seu projeto reduzindo a janela do navegador e também utilizando as ferramentas de desenvolvedor do navegador.

CSS MODERNO

Transparência e efeito de vidro

Criando interfaces modernas

CSS GLASS EFFECT

.vidro {

    padding: 25px;

    border: 1px solid rgba(255,255,255,0.2);

    border-radius: 15px;

    background: rgba(255,255,255,0.15);

    backdrop-filter: blur(10px);

}

O backdrop-filter permite aplicar efeitos ao conteúdo que está atrás do elemento.

Ele pode ser utilizado em menus, modais, cartões e outras sobreposições.

INTEGRAÇÃO

Montando uma página completa

Juntando tudo que aprendemos

Agora vamos juntar os conhecimentos estudados.

A estrutura terá:

Cabeçalho.
Navegação.
Banner.
Seção de serviços.
Cards.
Formulário.
Footer.

ESTRUTURA HTML

<body>

    <header>

        Cabeçalho

    </header>


    <main>

        <section>

            Banner

        </section>


        <section>

            Serviços

        </section>


        <section>

            Contato

        </section>

    </main>


    <footer>

        Rodapé

    </footer>

</body>

🚀 Momento importante: você já possui conhecimento suficiente para começar a construir uma página completa utilizando HTML e CSS.

PROJETO FINAL

TechSolutions

Você deverá desenvolver uma página completa para uma empresa fictícia chamada TechSolutions, especializada em desenvolvimento de sites, sistemas web e consultoria tecnológica.

01 Cabeçalho Logo, menu e botão.

02 Hero Título, descrição e chamada.

03 Serviços Cards utilizando Grid.

04 Sobre Conteúdo institucional.

05 Contato Formulário estilizado.

06 Footer Informações finais.

🎯 Objetivo do projeto: criar uma página profissional utilizando HTML5 e CSS3 puro, aplicando classes, variáveis, Flexbox, Grid, responsividade, efeitos, transições e boas práticas de organização.

PROJETO FINAL

Estrutura inicial do projeto

Comece seu projeto final a partir desta base

O aluno deverá criar uma nova pasta chamada techsolutions.

Dentro dela deverá criar:

index.html Estrutura HTML.

style.css Estilos CSS.

images/ Imagens do projeto.

HTML INDEX.HTML

<!DOCTYPE html>

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="TechSolutions - Tecnologia para transformar negócios">

    <title>
        TechSolutions | Tecnologia para seu negócio
    </title>

    <link rel="stylesheet" href="style.css">

</head>


<body>


    <header class="cabecalho">

        <a href="#" class="logo">
            TechSolutions
        </a>


        <nav class="navegacao">

            <a href="#inicio">
                Início
            </a>

            <a href="#servicos">
                Serviços
            </a>

            <a href="#sobre">
                Sobre
            </a>

            <a href="#contato">
                Contato
            </a>

        </nav>


        <a href="#contato" class="botao">
            Fale Conosco
        </a>

    </header>



    <main>


        <section id="inicio" class="hero-site">

            <div class="hero-conteudo-site">

                <span>
                    TECNOLOGIA PARA EMPRESAS
                </span>

                <h1>
                    Transformamos ideias
                    em soluções digitais.
                </h1>

                <p>
                    Desenvolvemos sites, sistemas web
                    e soluções digitais para empresas
                    que desejam crescer.
                </p>

                <a href="#servicos" class="botao">
                    Conheça nossos serviços
                </a>

            </div>

        </section>



        <section id="servicos" class="secao" >

            <div class="titulo-secao">

                <span>
                    NOSSOS SERVIÇOS
                </span>

                <h2>
                    Soluções para sua empresa
                </h2>

                <p>
                    Tecnologia desenvolvida para
                    resolver problemas reais.
                </p>

            </div>


            <div class="servicos">


                <article class="card">

                    <h3>
                        Desenvolvimento Web
                    </h3>

                    <p>
                        Criamos sites modernos,
                        rápidos e responsivos.
                    </p>

                    <a href="#contato">
                        Saiba mais →
                    </a>

                </article>


                <article class="card">

                    <h3>
                        Sistemas Web
                    </h3>

                    <p>
                        Desenvolvemos sistemas
                        personalizados para empresas.
                    </p>

                    <a href="#contato">
                        Saiba mais →
                    </a>

                </article>


                <article class="card">

                    <h3>
                        Consultoria
                    </h3>

                    <p>
                        Analisamos projetos e
                        indicamos soluções tecnológicas.
                    </p>

                    <a href="#contato">
                        Saiba mais →
                    </a>

                </article>


            </div>

        </section>



        <section id="sobre" class="secao sobre">

            <div>

                <span>
                    SOBRE A EMPRESA
                </span>

                <h2>
                    Tecnologia com propósito
                </h2>

                <p>
                    A TechSolutions nasceu com o objetivo
                    de ajudar empresas a utilizar tecnologia
                    para melhorar processos e resultados.
                </p>

                <p>
                    Nosso trabalho combina desenvolvimento,
                    criatividade e conhecimento técnico.
                </p>

            </div>


            <div class="sobre-card">

                <strong>
                    +100
                </strong>

                <span>
                    Projetos desenvolvidos
                </span>

            </div>

        </section>



        <section id="contato" class="secao contato">

            <div class="titulo-secao">

                <span>
                    CONTATO
                </span>

                <h2>
                    Vamos conversar?
                </h2>

                <p>
                    Envie uma mensagem para nossa equipe.
                </p>

            </div>


            <form class="formulario">

                <label for="nome">
                    Nome
                </label>

                <input type="text" id="nome" name="nome" placeholder="Digite seu nome">


                <label for="email">
                    E-mail
                </label>

                <input type="email" id="email" name="email" placeholder="Digite seu e-mail">


                <label for="mensagem">
                    Mensagem
                </label>

                <textarea id="mensagem" name="mensagem" rows="6" placeholder="Digite sua mensagem"></textarea>


                <button type="submit" class="botao">
                    Enviar mensagem
                </button>

            </form>

        </section>


    </main>



    <footer class="footer-site">

        <div class="footer-coluna">

            <h3>
                TechSolutions
            </h3>

            <p>
                Tecnologia para transformar negócios.
            </p>

        </div>


        <div class="footer-coluna">

            <h3>
                Navegação
            </h3>

            <a href="#inicio">
                Início
            </a>

            <a href="#servicos">
                Serviços
            </a>

            <a href="#sobre">
                Sobre
            </a>

            <a href="#contato">
                Contato
            </a>

        </div>


        <div class="footer-coluna">

            <h3>
                Contato
            </h3>

            <p>
                contato@techsolutions.com
            </p>

            <p>
                (12) 99999-9999
            </p>

        </div>


    </footer>


</body>

</html>

⚠️ O código acima é a estrutura HTML. O aluno deverá utilizar os conhecimentos adquiridos durante as etapas para criar o arquivo style.css.

A ideia é que ele não receba um CSS pronto: ele deverá construir o CSS aplicando os conceitos aprendidos.

REVISÃO

O que você aprendeu?

Reset CSS

Variáveis CSS

Seletores

Classes

IDs

Atributos

Margin

Padding

Border

Box-Sizing

Display

Flexbox

Grid

Position

Z-index

Overflow

Transitions

Animations

Media Queries

Responsividade

🎓

Parabéns! Você concluiu a aula de CSS3.

Agora você já possui uma base para criar layouts modernos utilizando HTML e CSS.

O próximo passo é praticar, modificar os exemplos e construir seus próprios projetos.

Não tenha medo de alterar os códigos. É experimentando que você aprende.

CSS3 Do Básico ao Projeto Completo

O que é CSS3?

Acompanhe sua evolução

Preparando o ambiente

Meu primeiro projeto com CSS

Reset e variáveis CSS

Por que usar reset?

Por que usar variáveis?

ID, Class, Tag e Atributos

Margin, Padding, Border e Box-Sizing

Cores, fontes e textos

DESENVOLVIMENTO WEB

Backgrounds e imagens

Display

Criando menus e layouts com Flexbox

Criando uma grade de cards

Width, Height, Min e Max

Position, Z-index e Overflow

Border, Radius, Shadow e Opacity

Transition e Hover

@keyframes e Animation

Overflow e Cursor

Estilizando formulários

Construindo um cabeçalho completo

Criando cards profissionais

Criando um Footer

Media Queries

Transparência e efeito de vidro

Montando uma página completa

Desafio: construa seu primeiro layout

TechSolutions

Estrutura inicial do projeto

O que você aprendeu?

Parabéns! Você concluiu a aula de CSS3.