Aula 02 – CSS

Aula prática de CSS

Para aplicarmos o CSS utilizamos a tag <style></style>. Os estilos devem ser aplicados dentro da tag. Observe o exemplo:

ANOTE EM SEU CADERNO:

Para alterar a cor do texto utilizamos o código color, e a cor pode ser escrita em inglês ou através de seu código hexadecimal. Podemos utilizar vários códigos de estilo para textos, citarei alguns:

1. font-family: Define a família de fontes a ser usada para o texto. Exemplo: font-family: Arial, sans-serif;
2. font-size: Define o tamanho da fonte. Exemplo: font-size: 16px;
3. font-weight: Define a espessura da fonte (normal, bold, etc.). Exemplo: font-weight: bold;
4. font-style: Define o estilo da fonte (normal, italic, oblique). Exemplo: font-style: italic;
5. text-align: Define o alinhamento do texto (left, right, center, justify). Exemplo: text-align: center;
6. text-decoration: Define a decoração do texto (underline, overline, line-through, none). Exemplo: text-decoration: underline;
7. text-transform: Define a transformação do texto (uppercase, lowercase, capitalize). Exemplo: text-transform: uppercase;
8. line-height: Define a altura da linha do texto. Exemplo: line-height: 1.5;
9. letter-spacing: Define o espaçamento entre as letras. Exemplo: letter-spacing: 1px;
10. word-spacing: Define o espaçamento entre as palavras. Exemplo: word-spacing: 2px;
11. color: Define a cor do texto. Exemplo: color: #333;
12. text-shadow: Adiciona uma sombra ao texto. Exemplo: text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

ATIVIDADE NO NOTEPAD++ OU VISUAL STUDIO

1. Abra um editor de códigos e digite o código abaixo. Salve em sua pasta como estilo1.html

2) Abra um editor de códigos e siga o modelo. Salve em sua pasta como estilo2.html

ATIVIDADE CÓPIA NO CADERNO

3) Escreva no seu caderno:

O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a apresentação de um documento HTML. Ele desempenha um papel crucial no desenvolvimento web, oferecendo uma série de benefícios e funcionalidades importantes:

1. Separação de conteúdo e apresentação: O CSS permite separar o conteúdo do documento HTML da sua apresentação visual. Isso significa que você pode alterar o design de um site sem precisar alterar o conteúdo HTML, facilitando a manutenção e a atualização do site.
2. Consistência visual: Com o CSS, você pode definir estilos que se aplicam a vários elementos em um site, garantindo uma aparência consistente em todas as páginas. Isso é fundamental para criar uma experiência de usuário coesa e profissional.
3. Facilidade de atualização: Como os estilos são definidos em um arquivo separado, é fácil fazer alterações globais em um site. Basta modificar o arquivo CSS e todas as páginas que utilizam esse arquivo serão atualizadas automaticamente.
4. Eficiência: O CSS permite que você defina estilos uma vez e os aplique a múltiplos elementos, economizando tempo e reduzindo a quantidade de código necessária.
5. Responsividade: Com o CSS, você pode criar layouts responsivos que se adaptam a diferentes tamanhos de tela e dispositivos, proporcionando uma experiência de usuário otimizada em smartphones, tablets e desktops.
6. Acessibilidade: O CSS oferece recursos para melhorar a acessibilidade de um site, como a capacidade de controlar o contraste de cores e a legibilidade do texto, tornando o site mais fácil de usar para pessoas com deficiências visuais ou motoras.