Introdução ao CSS - os princípios básicos
- 1. INTRODUÇÃO AO CSS Programação para web Aula sobre CSS
- 2. O que é CSS ◦ Cascading Style Sheets (Folhas de Estilo em Cascata), assim como a HTML, não é uma linguagem de programação. CSS é uma linguagem de folha de estilos usada amplamente na web e criada com o propósito principal de estilizar páginas HTML. ◦ Apesar de termos diferentes versões da CSS, há menos conflitos que com a linguagem HTML. A versão 2.1 tem suporte amplo nos navegadores de hoje, enquanto a versão 3 está sendo regulamentada pela W3C e implementada aos poucos pelos navegadores (com alguns recursos que podemos usar hoje e outros ainda em definição, assim como a HTML5). Podemos misturar recursos das duas versões em documentos CSS sem problemas. 16/05/2025
- 3. REGRAS ◦ A linguagem CSS funciona através de regras com o principal objetivo de estilizar visualmente o conteúdo HTML da página. Com regras, podemos selecionar um ou mais elementos em uma página e aplicar estilos de acordo. Uma regra é formada de: • Um ou mais seletores; • Chaves: “{” e “}”; • Declarações, cada uma com propriedade e valor (terminando a linha com ";"). 16/05/2025
- 4. INSERINDO CSS EM UMA PÁGINA ◦ Para que as regras tenham efeito na página, há três maneiras de inseri-las: 1) Arquivo externo “.css” ligado à página HTML através da tag <link> (melhor método); 2) Dentro da tag <head> de uma página, utilizando a tag “<style>” 3) Dentro de um elemento, utilizando o atributo style Vamos ver mais a fundo como funciona a inserção de regras CSS em um documento HTML com mais detalhes. 16/05/2025
- 5. CASCATA E HERANÇA ◦ A letra “C” em CSS significa “Cascata”. Isso significa que algumas das propriedades aplicadas a elementos HTML são “herdadas” por seus elementos internos (também chamados de "filhos"). Ex: um <p> que estiver dentro de uma <div> irá herdar propriedades como cor e tamanho de texto aplicadas à div. O uso inteligente da cascata diminui o código necessário e deixa o arquivo CSS mais fácil de ser mantido. 16/05/2025
- 6. Como Inseris CSS em nosso Site? ◦ Como já foi dito existem 3 métodos: ◦ MÉTODO 1: ARQUIVO EXTERNO CSS ◦ MÉTODO 2: TAG STYLE MÉTODO 3: ATRIBUTO STYLE 16/05/2025 <link href="css/arquivo.css" rel="stylesheet"> <style> p { color: red; } </style> <p style="color: red;">Texto</p>
- 7. Montando a Base do Website ◦ Vamos começar criando a estrutura de pastas e arquivos. Utilizando o seu gerenciador de arquivos, crie uma pasta "website". Dentro desta pasta, iremos criar mais duas: "css" e "imagens", para conter os estilos do site e suas imagens, respectivamente. A estrutura de pastas deve ficar assim. 16/05/2025
- 8. Montando a Base do Website ◦ Dentro da pasta "website", vamos criar agora a página que será a Home do nosso website. Utilizando seu editor de texto, crie um arquivo chamado "index.html". Neste arquivo, vamos colocar o nosso código de página HTML básica. Exemplo abaixo: 16/05/2025 <!DOCTYPE HTML> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title> Home - Site da Empresa </title> <link href="css/estilos.css" rel="stylesheet"> </head> <body> </body> </html>
- 9. Montando a Base do Website ◦ Agora, vamos criar o arquivo CSS que irá conter todos os estilos das páginas do site. Usando o editor de texto novamente, crie um arquivo chamado "estilos.css". Neste arquivo, por enquanto apenas colocaremos um breve comentário CSS (iniciado com /* e terminado com */) ◦ Com isso, a estrutura de pastas e arquivos do site deve ficar como a do exemplo abaixo: 16/05/2025 /* -- Estilos CSS - Website da Empresa */
- 10. Montando a Base do Website 16/05/2025 <!DOCTYPE HTML> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title> Home - Site da Empresa </title> <link href="css/estilos.css" rel="stylesheet"> </head> <body> <p> <i> Método 1 - Inserindo css na página </i> </p> </body> </html>
- 11. Sintaxe e Seletores CSS 16/05/2025 ◦ A linguagem CSS é simples de ser aprendida, mas leva tempo para ser dominada. Iremos ver os principais conceitos desta linguagem, conhecimento necessário para a construção de websites eficientes. Para começar, vamos ver como funcionam as regras, classes, ids, seletores e o funcionamento da cascata CSS.
- 12. REGRAS 16/05/2025 ◦ Para utilizarmos estilos CSS em um elemento, fazemos uso das regras CSS. Uma regra é escrita como o exemplo abaixo: ◦ No exemplo acima, definimos como cor de fundo da tag body a cor branca. Uma regra é feita dos seguintes componentes: a) Seletor(es): um dos mais poderosos aspectos CSS, permite que selecionemos qualquer elemento na página. No exemplo acima, estamos selecionando a tag body. b) Chaves ("{" e "}"): contém as declarações CSS. c) Declaração: cada declaração aplica um estilo específico para o elemento ou elementos selecionados. Uma declaração é composta de: Propriedade: no exemplo acima, background-color. Sempre a propriedade é seguida de dois pontos ":". Valor: no exemplo acima, white, o que aplica um fundo branco para a tag body. Todas as declarações são terminadas por ponto-e-vírgula ";". body { background-color: white; }
- 13. CLASSES E IDS 16/05/2025 ◦ Para possibilitar uma organização melhor da página e da seleção de elementos por CSS, podemos utilizar classes e/ou ids para identificar tags. ◦ Uma id, como o nome diz, é uma identificação única: só pode ser utilizada uma vez no documento inteiro. Normalmente é utilizada para identificar elementos estruturais da página. ◦ Uma classe é reutilizável: pode se repetir na página e também combinar-se com outras (podemos pôr mais de uma classe em um elemento). ◦ É perfeitamente possível fazer um site apenas com ids, apenas com classes, com uma combinação das duas, ou sem nenhuma das duas. Tudo irá depender do seu estilo de fazer o código das páginas. O importante é definir um padrão e segui-lo.
- 14. CLASSES E IDS 16/05/2025 ◦ Como Exemplo de identificadores, vamos imaginar um site com três blocos de conteúdo que aparecem em todas as páginas do site: ◦ Como estes elementos sempre aparecem nas páginas e aparecem apenas uma vez em cada página, podemos utilizar uma id para cada um, através do atributo id, da seguinte forma: <div> Aqui vai o cabeçalho do site </div> <div> Aqui vai o conteúdo do site </div> <div> Aqui vai o rodapé do site </div> <div id="cabecalho"> Aqui vai o cabeçalho do site </div> <div id="conteudo"> Aqui vai o conteúdo do site </div> <div id="rodape"> Aqui vai o rodapé do site </div>
- 15. CLASSES E IDS 16/05/2025 ◦ Como exemplo de classes, podemos imaginar um site onde temos vários parágrafos de texto: ◦ Se utilizarmos o seletor p para aplicar estilos, estes serão aplicados a todos os parágrafos. Se quisermos, por exemplo, destacar um ou mais parágrafos, podemos criar uma classe com o nome "destaque" e colocá-la apenas nos parágrafos que desejamos, através do atributo class como no código abaixo: <p> ... </p> <p> ... </p> <p> ... </p> <p class="destaque"> ... </p> <p> ... </p> <p class="destaque"> ... </p>
- 16. SELETORES 16/05/2025 Muito do poder da linguagem CSS está nos seletores. Com os seletores, conseguimos escolher qualquer elemento (ou elementos) na página para aplicar estilos. Vejamos primeiro os principais tipos de seletores: ◦ Seletor de tipo: este é o tipo de seletor que utilizamos nos exemplos até agora. Com este seletor, selecionamos todas as tags de um mesmo tipo. Por exemplo, se digitamos a estaremos selecionando todas as tags a (links) da página e poderemos aplicar estilos a elas. Útil para estilos gerais, mas para maior especificidade utilizamos outros seletores. ◦ Seletor descendente: com este seletor, podemos escolher um ou mais elementos que estão dentro de outro, ou seja, que são descendentes do elemento principal. Exemplo: p strong. Com isso, selecionamos apenas tags strong que estão dentro de parágrafos. Podemos selecionar com ainda mais especificidade, escrevendo mais elementos, como: div p strong a. Neste exemplo, selecionamos links que estão dentro de tags strong que estão dentro de parágrafos que estão dentro de tags div. ◦ Seletor de classe: seleciona elementos com uma classe específica aplicada. Exemplo: .destaque seleciona todos os elementos com a classe "destaque". ◦ Seletor de id: seleciona o elemento com a id especificada. Exemplo: #cabecalho irá selecionar o elemento com a id "cabecalho". Cada id é única e não pode ser repetida no mesmo documento.
- 17. SELETORES 16/05/2025 ◦ Se utilizarmos o seletor p para aplicar estilos, estes serão aplicados a todos os parágrafos. Se quisermos, por exemplo, destacar um ou mais parágrafos, podemos criar uma classe com o nome "destaque" e colocá-la apenas nos parágrafos que desejamos, através do atributo class como no exemplo:
- 18. COMBINANDO SELETORES 16/05/2025 Podemos também combinar os seletores que aprendemos acima, para conseguir diferentes elementos e partes mais específicas de nossos sites. Alguns exemplos: a) p.destaque seleciona apenas os parágrafos que possuem a classe "destaque". b) div#cabecalho h1 seleciona tags h1 que estejam dentro da div com a id "cabecalho". c) #conteudo ul li a seleciona links (tag a) dentro de itens de lista dentro de tags ul que estejam dentro de um elemento com a id "conteudo". d) #conteudo p.destaque strong seleciona elementos strong dentro de parágrafos com a classe "destaque" que estejam dentro de um elemento com a id "conteudo". e) .mensagem.destaque seleciona apenas elementos que tenham a classe "mensagem" e a classe "destaque". f) Separando itens por vírgulas, como p.destaque, h1, a.saiba-mais seleciona todos os respectivos elementos para as regras. Muito útil para diminuir a repetição de regras no arquivo CSS.
- 19. PSEUDO-CLASSES 16/05/2025 Pseudo-classes são tipos de classes especiais que não são definidas pelo desenvolvedor (já são pré-definidas). A sua maior utilização é com links (tags a) para definir estilos diversos para quando o link é novo, visitado, etc. O seletor de pseudo-classe é escrito com o nome do elemento + dois pontos + nome da pseudo-classe. Para começar, vamos nos familiarizar com as pseudo-classes de links: a) Com o seletor a:link, estilizamos apenas os links não-visitados, ou seja, links no seu estado normal. b) Com o seletor a:visited, estilizamos apenas links visitados, ou seja, que já foram clicados. c) Com o seletor a:hover, estilizamos links quando o mouse está em cima do mesmo. Com esta pseudo-classe podemos fazer diversos efeitos interessantes. Esta pseudo-classe pode ser aplicada a qualquer elemento, não apenas links, o que a torna ainda mais útil. d) Com o seletor a:focus, estilizamos links quando os selecionamos com o teclado, através da tecla Tab. Esta pseudo-classe é útil para estilizar links para pessoas que possuem habilidade limitada e não conseguem utilizar o mouse, por exemplo. e) Com o seletor a:active, estilizamos um link quando o mouse está sendo clicado ou pressionamos Enter, ativando o link.
- 20. CASCATA (E HERANÇA) 16/05/2025 A cascata é outra das características importantes das CSS. Tão importante, que está até no nome: Cascading Style Sheets. O que "Cascading" quer dizer é que a maioria das propriedades que aplicamos a um elemento, irá passar aos seus "herdeiros", ou seja, os elementos que estão contidos naquele. <!-- HTML --> <div class="texto"> <p> Texto exemplo <strong>com um destaque</strong>. </p> </div> /* CSS */ .texto { color: #F00; }
- 21. ESPECIFICIDADE E PRECEDÊNCIA 16/05/2025 As CSS também obedecem algumas regras de precedência. Quando várias regras se aplicam a um mesmo elemento, o navegador precisa decidir qual delas tem precedência. Vamos criar uma div: Vamos supor que temos duas regras aplicadas à div: <div id="sidebar"> <p class="descricao"> Texto exemplo. </p> </div> #sidebar { color: #F00; } div#sidebar p { color: #F0F; } Qual delas será aplicada? Se você pensou a "mais específica", acertou.
- 22. ESPECIFICIDADE E PRECEDÊNCIA 16/05/2025 O seletor div.sidebar p tem precedência. Por que ele é mais específico? Para termos uma ideia melhor de especificidade, há algumas regras gerais: 1) Regras em tags style tem precedência sobre regras em arquivos externos CSS; 2) Regras em linha (atributo style) tem precedência sobre regras em tags style ou arquivos externos CSS; 3) Seletores de elemento (por exemplo, p) tem a menor precedência (podemos dizer que, numa escala, este tipo de seletor vale "1"); 4) Seletores de classe (por exemplo, .destaque) tem mais precedência (vale "10"); 5) Seletores de id (por exemplo, #conteudo) tem maior precedência (vale "100").