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.