HTML e CSS visão geral
HTML (Hypertext Markup Language) e CSS (Cascading Style Sheets) são linguagens fundamentais para a construção e estilização de páginas web. Aqui está uma visão geral de como elas funcionam:
HTML
- HTML é uma linguagem de marcação que define a estrutura e o conteúdo de uma página web.
- Ele consiste em uma série de elementos ou tags que são usados para envolver diferentes partes do conteúdo da página.
- Cada tag possui um propósito específico e pode conter atributos para fornecer informações adicionais sobre o elemento.
Exemplo de uma tag HTML básica
<!DOCTYPE html>
<html>
<head>
<title>Título da Página</title>
</head>
<body>
<h1>Meu Título Principal</h1>
<p>Este é um parágrafo de texto.</p>
</body>
</html>
Neste exemplo
• <html>: Define o início e o fim do documento HTML.
• <head>: Contém metadados sobre o documento, como título, links para estilos CSS e scripts.
• <title>:Define o título da página que aparece na aba do navegador.<br />
• <body>: Contém o conteúdo visível da página, como texto, imagens, vídeos, etc.<br />
• <h1> e <p>: São exemplos de elementos que definem cabeçalhos e parágrafos, respectivamente.</p>
CSS
- CSS é uma linguagem de estilo utilizada para definir a aparência e o layout dos elementos HTML em uma página web.
- Ela permite especificar propriedades como cor, tamanho, fonte, margens, espaçamento, etc., para estilizar os elementos da página.
- As regras CSS são aplicadas aos elementos HTML usando seletores.
Exemplo de uma regra CSS básica para estilizar o parágrafo do exemplo HTML acima:
p {
color: blue;
font-size: 16px;
}
Neste exemplo
- p: É o seletor que especifica que a regra se aplica a todos os elementos (parágrafos) na página.
- color e font-size: São propriedades CSS que definem a cor do texto e o tamanho da fonte, respectivamente.
Como dar novos estilos CSS para um projeto HTML
- Seletores CSS: Identifique os elementos HTML aos quais deseja aplicar estilos e use seletores CSS para direcioná-los.
- Propriedades CSS: Escolha as propriedades CSS adequadas para estilizar os elementos, como cor, tamanho da fonte, margens, etc.
- Localização do CSS: Você pode adicionar suas regras CSS em um arquivo separado e vinculá-lo ao seu arquivo HTML usando a tag <link> dentro do <head> ou incluí-las diretamente no <head> do seu arquivo HTML usando a tag <style>.
- Teste e Ajuste: Experimente diferentes estilos e ajuste conforme necessário até alcançar o resultado desejado.
Combinando HTML e CSS, você pode criar páginas web visualmente atraentes e bem estruturadas.
