Conteúdo do Curso
Essenciais de Desenvolvimento Web com IA
Essenciais de Desenvolvimento Web com IA
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
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
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.css
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.css
Tutorial em Vídeo
Obrigado pelo seu feedback!