Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprenda Introdução ao CSS para Estilização de Páginas Web | Anatomia de Sites
Learn
Cursos
Learning Tracks
Popular Topics
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
Desenvolvimento Web com ChatGPT

bookIntrodução ao CSS para Estilização de Páginas Web

CSS (Cascading Style Sheets) é o que define a aparência visual das páginas web. Enquanto o HTML fornece a estrutura, o CSS controla cores, fontes, espaçamento e layout—assim como a decoração e o design de interiores definem o visual de uma casa.

Adicionando CSS para Estilizar HTML

CSS pode ser aplicado de três maneiras principais.

Estilos Inline

Utilize o atributo style para estilizar rapidamente um único elemento.

index.html

index.html

copy

Estilos Internos

Adicione um bloco <style> dentro do <head> para estilizar elementos na mesma página.

index.html

index.html

copy

Folhas de Estilo Externas

Para projetos maiores, mantenha seu CSS em um arquivo separado e faça o vínculo com seu HTML.

Consulte os arquivos index.html e index.css no exemplo.

index.html

index.html

index.css

index.css

copy

Seletores CSS

Seletores definem quais elementos devem receber estilos específicos.

Seletor de Elemento

Seleciona todos os elementos de um tipo específico.

p {
  /* styles */
}

Seletor de Classe

Seleciona elementos com um atributo de classe específico.

.highlight {
  /* styles */
}

Seletor de ID

Seleciona 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.

É possível personalizar a aparência da página web aplicando estilos CSS aos elementos HTML para criar experiências visualmente atraentes e fáceis de usar.

Exemplo:

index.html

index.html

index.css

index.css

copy

Tutorial em Vídeo

question mark

Quais das opções a seguir são formas válidas de aplicar estilos CSS a uma página HTML?

Select the correct answer

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

bookIntrodução ao CSS para Estilização de Páginas Web

Deslize para mostrar o menu

CSS (Cascading Style Sheets) é o que define a aparência visual das páginas web. Enquanto o HTML fornece a estrutura, o CSS controla cores, fontes, espaçamento e layout—assim como a decoração e o design de interiores definem o visual de uma casa.

Adicionando CSS para Estilizar HTML

CSS pode ser aplicado de três maneiras principais.

Estilos Inline

Utilize o atributo style para estilizar rapidamente um único elemento.

index.html

index.html

copy

Estilos Internos

Adicione um bloco <style> dentro do <head> para estilizar elementos na mesma página.

index.html

index.html

copy

Folhas de Estilo Externas

Para projetos maiores, mantenha seu CSS em um arquivo separado e faça o vínculo com seu HTML.

Consulte os arquivos index.html e index.css no exemplo.

index.html

index.html

index.css

index.css

copy

Seletores CSS

Seletores definem quais elementos devem receber estilos específicos.

Seletor de Elemento

Seleciona todos os elementos de um tipo específico.

p {
  /* styles */
}

Seletor de Classe

Seleciona elementos com um atributo de classe específico.

.highlight {
  /* styles */
}

Seletor de ID

Seleciona 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.

É possível personalizar a aparência da página web aplicando estilos CSS aos elementos HTML para criar experiências visualmente atraentes e fáceis de usar.

Exemplo:

index.html

index.html

index.css

index.css

copy

Tutorial em Vídeo

question mark

Quais das opções a seguir são formas válidas de aplicar estilos CSS a uma página HTML?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

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