fabricioifc/intro.md

## intro.md

      
    Raw
  

              intro.md
            
          
    Introdução ao CSS

CSS (Cascading Style Sheets) é uma linguagem de estilo usada para descrever a apresentação de documentos HTML. Com CSS, você pode controlar o layout, cores, fontes, espaçamento e muitos outros aspectos visuais de uma página web.
Material Complementar

Assista ao vídeo abaixo para reforçar o aprendizado sobre CSS:


Neste guia, você aprenderá os conceitos básicos do CSS, incluindo a estrutura básica, seletores, propriedades comuns e exemplos práticos.
Estrutura Básica do CSS

Um arquivo CSS é composto por seletores e declarações. A estrutura básica é a seguinte:
seletor {
    propriedade: valor;
}
Exemplo:

h1 {
    color: blue;
    font-size: 24px;
}
Neste exemplo, todos os elementos <h1> na página terão texto azul e tamanho de fonte de 24 pixels.
Seletores CSS

Os seletores são usados para selecionar os elementos HTML que você deseja estilizar. Existem vários tipos de seletores:


Seletor de tipo: Seleciona todos os elementos de um determinado tipo.
p {
    color: green;
}


Seletor de classe: Seleciona elementos com uma classe específica. Use um ponto (.) antes do nome da classe.
.destaque {
    background-color: yellow;
}


Seletor de ID: Seleciona um elemento com um ID específico. Use um # antes do nome do ID.
#cabecalho {
    font-weight: bold;
}


Seletor de atributo: Seleciona elementos com um atributo específico.
a[target="_blank"] {
    color: red;
}


Seletor de descendente: Seleciona elementos que são descendentes de outro elemento.
 div p {
      font-style: italic;
 }


Seletor de grupo: Seleciona vários seletores ao mesmo tempo.
h1, h2, h3, h4, h5, h6 {
     color: blue;
}


Seletor universal: Seleciona todos os elementos na página.
* {
     margin: 0;
     padding: 0;
}


Nota: O seletor universal é útil para redefinir as margens e preenchimentos padrão do navegador no início de um arquivo CSS.


Seletor de pseudo-classe: Seleciona elementos em um estado específico.
a:hover {
     text-decoration: underline;
     color: red;
}


Seletor de pseudo-elemento: Seleciona partes específicas de um elemento.
p::first-line {
     font-weight: bold;
}


Seletor de filho direto: Seleciona elementos que são filhos diretos de outro elemento.
div > p {
     color: red;
}


Propriedades CSS Comuns

Aqui estão algumas propriedades CSS comuns que você pode usar:


Cor e fundo

color: Define a cor do texto.
background-color: Define a cor de fundo.


Fonte

font-family: Define a família da fonte.
font-size: Define o tamanho da fonte.
font-weight: Define a espessura da fonte.


Espaçamento

margin: Define a margem externa.
padding: Define o preenchimento interno.


Bordas

border: Define a borda do elemento.
border-radius: Define o raio da borda.


Exemplo Prático

Aqui está um exemplo prático que utiliza várias propriedades CSS:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        #cabecalho {
            text-align: center;
            background-color: #4CAF50;
            color: white;
            padding: 20px;
        }

        .destaque {
            background-color: yellow;
            padding: 10px;
        }

        footer {
            text-align: center;
            margin-top: 20px;
            color: #555;
        }
    </style>
</head>
<body>
    <header id="cabecalho">
        <h1>Bem-vindo ao Meu Site</h1>
    </header>
    <main>
        <p class="destaque">Este é um parágrafo destacado.</p>
        <p>Este é um parágrafo normal.</p>
    </main>
    <footer>
        <p>© 2025 Meu Site</p>
    </footer>
</body>
</html>
No exemplo acima, o CSS é incorporado diretamente no arquivo HTML usando a tag <style>. O ideal é separar o CSS em um arquivo externo. Para fazer isso, você pode criar um arquivo estilos.css e vinculá-lo ao seu arquivo HTML usando a tag <link>:
<head>
    <!-- ... -->
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <!-- ... -->