Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda CSS (Folhas de Estilo em Cascata) | Anatomia do Site
Essenciais de Desenvolvimento Web com IA
course content

Conteúdo do Curso

Essenciais de Desenvolvimento Web com IA

Essenciais de Desenvolvimento Web com IA

1. Visão Geral do Curso & IA na Codificação
Introdução ao CursoA Evolução da Programação com IACompreendendo a IA no Desenvolvimento
2. Anatomia do Site
Componentes do SiteHTML (Linguagem de Marcação de Hipertexto)CSS (Folhas de Estilo em Cascata)JavaScript (Linguagem de Programação)Reunindo HTML, CSS e JS
3. Introdução ao ChatGPT
Compreendendo o ChatGPTComo Usar o ChatGPTCriando um PromptTrabalhando com Código via ChatGPTDesafio: Codificação via ChatGPT
4. Construindo o Site do Blog
Visão Geral do ProjetoEstrutura do Documento HTMLEstilização de SitesAdicionando ConteúdoImagensFuncionalidade de FiltragemConclusão e Próximos Passos

book
CSS (Folhas de Estilo em Cascata)

CSS (Cascading Style Sheets) é uma linguagem usada para adicionar estilo e melhorar o apelo visual dos elementos HTML em uma página da web. Ele desempenha um papel crucial na melhoria da estética de um site, assim como a decoração, cor das paredes, móveis, material do sofá e forma das janelas e portas contribuem para a aparência geral de uma casa.

Adicionando CSS para Estilizar HTML

CSS nos permite controlar a apresentação e o layout dos elementos HTML, incluindo cores, fontes, espaçamento e mais. Aqui está como podemos aplicar estilos CSS aos nossos elementos HTML:

Estilos Inline

Usando o atributo style, podemos aplicar estilos CSS diretamente a elementos HTML individuais. Este método é útil para adicionar estilos rápidos e pontuais.

index.html

index.html

copy

Estilos Internos

Também podemos incluir estilos CSS dentro das tags <style> na seção <head> do documento HTML. Este método é útil para aplicar estilos a múltiplos elementos dentro do mesmo documento.

index.html

index.html

copy

Folhas de Estilo Externas

Para projetos maiores ou quando queremos reutilizar estilos em várias páginas, é comum usar folhas de estilo externas. Crie um arquivo CSS separado (por exemplo, index.css) e vincule-o ao documento HTML usando a tag <link>.

Por favor, verifique os arquivos index.html e index.css no exemplo.

index.html

index.html

index.css

index.css

copy

Seletores CSS

Os seletores CSS têm como alvo elementos HTML com base em critérios como tipo de elemento, classe ou ID. Um seletor especifica o elemento exato ao qual estilos específicos devem ser aplicados.

Seletor de Elemento

Alvo todos os elementos de um tipo específico.

p {
  /* styles */
}

Seletor de Classe

Alvo elementos com um atributo de classe específico.

.highlight {
  /* styles */
}

Seletor de ID

Alvo um elemento específico com um atributo ID único.

#header {
  /* styles */
}

Propriedades CSS

As propriedades CSS definem como os elementos selecionados devem ser estilizados. Aqui estão algumas propriedades CSS comuns:

  • color define a cor do texto;
  • background-color define a cor de fundo de um elemento;
  • font-size define o tamanho do texto;
  • margin adiciona espaçamento ao redor de um elemento.

Podemos personalizar a aparência da página da web aplicando estilos CSS aos elementos HTML para criar experiências visualmente atraentes e amigáveis ao usuário.

Exemplo:

index.html

index.html

index.css

index.css

copy

Tutorial em Vídeo

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

course content

Conteúdo do Curso

Essenciais de Desenvolvimento Web com IA

Essenciais de Desenvolvimento Web com IA

1. Visão Geral do Curso & IA na Codificação
Introdução ao CursoA Evolução da Programação com IACompreendendo a IA no Desenvolvimento
2. Anatomia do Site
Componentes do SiteHTML (Linguagem de Marcação de Hipertexto)CSS (Folhas de Estilo em Cascata)JavaScript (Linguagem de Programação)Reunindo HTML, CSS e JS
3. Introdução ao ChatGPT
Compreendendo o ChatGPTComo Usar o ChatGPTCriando um PromptTrabalhando com Código via ChatGPTDesafio: Codificação via ChatGPT
4. Construindo o Site do Blog
Visão Geral do ProjetoEstrutura do Documento HTMLEstilização de SitesAdicionando ConteúdoImagensFuncionalidade de FiltragemConclusão e Próximos Passos

book
CSS (Folhas de Estilo em Cascata)

CSS (Cascading Style Sheets) é uma linguagem usada para adicionar estilo e melhorar o apelo visual dos elementos HTML em uma página da web. Ele desempenha um papel crucial na melhoria da estética de um site, assim como a decoração, cor das paredes, móveis, material do sofá e forma das janelas e portas contribuem para a aparência geral de uma casa.

Adicionando CSS para Estilizar HTML

CSS nos permite controlar a apresentação e o layout dos elementos HTML, incluindo cores, fontes, espaçamento e mais. Aqui está como podemos aplicar estilos CSS aos nossos elementos HTML:

Estilos Inline

Usando o atributo style, podemos aplicar estilos CSS diretamente a elementos HTML individuais. Este método é útil para adicionar estilos rápidos e pontuais.

index.html

index.html

copy

Estilos Internos

Também podemos incluir estilos CSS dentro das tags <style> na seção <head> do documento HTML. Este método é útil para aplicar estilos a múltiplos elementos dentro do mesmo documento.

index.html

index.html

copy

Folhas de Estilo Externas

Para projetos maiores ou quando queremos reutilizar estilos em várias páginas, é comum usar folhas de estilo externas. Crie um arquivo CSS separado (por exemplo, index.css) e vincule-o ao documento HTML usando a tag <link>.

Por favor, verifique os arquivos index.html e index.css no exemplo.

index.html

index.html

index.css

index.css

copy

Seletores CSS

Os seletores CSS têm como alvo elementos HTML com base em critérios como tipo de elemento, classe ou ID. Um seletor especifica o elemento exato ao qual estilos específicos devem ser aplicados.

Seletor de Elemento

Alvo todos os elementos de um tipo específico.

p {
  /* styles */
}

Seletor de Classe

Alvo elementos com um atributo de classe específico.

.highlight {
  /* styles */
}

Seletor de ID

Alvo um elemento específico com um atributo ID único.

#header {
  /* styles */
}

Propriedades CSS

As propriedades CSS definem como os elementos selecionados devem ser estilizados. Aqui estão algumas propriedades CSS comuns:

  • color define a cor do texto;
  • background-color define a cor de fundo de um elemento;
  • font-size define o tamanho do texto;
  • margin adiciona espaçamento ao redor de um elemento.

Podemos personalizar a aparência da página da web aplicando estilos CSS aos elementos HTML para criar experiências visualmente atraentes e amigáveis ao usuário.

Exemplo:

index.html

index.html

index.css

index.css

copy

Tutorial em Vídeo

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3
some-alt