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

Adicionando CSS para Estilizar HTML

CSS permite controlar a apresentação e o layout dos elementos HTML, incluindo cores, fontes, espaçamento e mais. Veja como aplicar estilos CSS aos elementos HTML:

Estilos Inline

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

index.html

Estilos Internos

Também é possível incluir estilos CSS dentro das tags <style> na seção <head> do documento HTML. Este método é útil para aplicar estilos a vários elementos dentro do mesmo documento.

index.html

Folhas de Estilo Externas

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

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

index.html

index.css

Seletores CSS

Seletores CSS direcionam 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

Aplica-se a todos os elementos de um tipo específico.

p {
  /* styles */
}

Seletor de Classe

Aplica-se a 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.css

Tutorial em Vídeo

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3

Pergunte à IA

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

Suggested prompts:

Can you explain the difference between class and ID selectors in CSS?

What are some best practices for organizing CSS in larger projects?

Can you give more examples of common CSS properties and their uses?

Deslize para mostrar o menu

Adicionando CSS para Estilizar HTML

CSS permite controlar a apresentação e o layout dos elementos HTML, incluindo cores, fontes, espaçamento e mais. Veja como aplicar estilos CSS aos elementos HTML:

Estilos Inline

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

index.html

Estilos Internos

Também é possível incluir estilos CSS dentro das tags <style> na seção <head> do documento HTML. Este método é útil para aplicar estilos a vários elementos dentro do mesmo documento.

index.html

Folhas de Estilo Externas

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

index.html

index.css

Seletores CSS

Seletores CSS direcionam 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

Aplica-se a todos os elementos de um tipo específico.

p {
  /* styles */
}

Seletor de Classe

Aplica-se a 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.css

Tutorial em Vídeo

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3

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

Adicionando CSS para Estilizar HTML

Estilos Inline

Estilos Internos

Folhas de Estilo Externas

Seletores CSS

Seletor de Elemento

Seletor de Classe

Seletor de ID

Propriedades CSS

Exemplo:

Tutorial em Vídeo

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

Adicionando CSS para Estilizar HTML

Estilos Inline

Estilos Internos

Folhas de Estilo Externas

Seletores CSS

Seletor de Elemento

Seletor de Classe

Seletor de ID

Propriedades CSS

Exemplo:

Tutorial em Vídeo