Enfim, começou o capítulo CSS.

Porque este nome,  Cascading Style Sheets?  Vamos analisar duas partes separadamente, antes o ‘Sytle Sheet’  e depois o ‘Cascading’.

Style sheet quer dizer ‘folha de estilo’. Com estilo entendemos tudo que tem a ver com a apresentação visual da nossa página HTML. Com folha queremos dizer que temos um arquivo separado para guardar estas informações. Porém, o arquivo separado não é o único jeito – apesar de ser o melhor – de lidar com o CSS. Existem também – listando a partir do pior – o atributo ‘style’ inserido direto no nosso HTML ou a tag ‘style’ no cabeçalho da página. Separa num arquivo externo tem a grande vantagem do podera alterar o visual de infinitos números de páginas apenas mexendo num arquivo só.

A palavra ‘Cascading’ representa uma caracteristica muito importante do CSS, o Efeito Cascata, graça ao qual elementos filhos pode ‘herdar’ dos elementos pais algumas propriedades.  o Efeito Cascata também gerencia qual folha de estilo tem a prioridade para ser renderizada. Pode encontrar melhores explicações aqui, aqui e aqui.

Cada declaração em CSS segue esta estrutura:

seletor { propriedade: valor; }

sendo que pode ter múltiplas duplas de propriedade – valor. Começamos a ver algumas propriedades básicas como escolha da fonte, cor da mesma, tamanhos etc. e também introduzimos margin e padding, e já deu para intuir que o Box Model pode gerar um pouco de confusão . Por isso aconselho a leitura deste artigo e deste também: teremos que lidar bastante com este assunto ao longo das próximas aulas, especialmente quando usaremos o CSS não só para estilizar textos mas sobretudo para criar layouts completos.

A aula terminou com o primeiro exercicio que consistia em reproduzir o HTML e o CSS a partir de um layout pronto. Devo dizer que a maioria se saiu bem por ser a primeira aula.