2. Iniciar com CSS
- Iniciar com CSS
Registro
Lidamos com a estrutura da página na aula anterior. Nossa finalidade agora é alterar a apresentação visual dos textos que temos e vimos apenas uma forma de fazer isso, que é modificando a tag.
A tag do parágrafo possui essa apresentação simplificada, com esse tamanho de fonte, essa configuração. Sabemos que o tamanho da fonte fica maior caso usemos uma tag de título, por exemplo, do h1. Porém as tags têm um valor, um propósito, um significado e para mexer na apresentação visual dos elementos, não são ela que usamos, mas o CSS.
O CSS (traduzindo, seria folha de estilo em cascata) é o modo como mexemos em cada um dos elementos de forma granular, em cada um dos pontos desses elementos para apresentar o nosso site como desejamos.
Etapa por etapa, vamos mexer nessas fontes para compreender o CSS.
A primeira coisa que quero fazer é aumentar o tamanho da fonte na linha onde temos a missão.
Vamos achar o parágrafo que se quer no nosso Sublime Text, no qual ainda temos uma tag do strong e uma tag do em, onde fazemos o negrito e a ênfase e desejo aumentar o tamanho da fonte na tag do parágrafo porque quero que seja aplicado em todo o conteúdo que está ali dentro. É a isto que se refere quando se fala em “folha de estilo em cascata”. Ao ir em um elemento anterior, ele reflete para todos os elementos que estão abaixo.
Vou incluir a propriedade style nesse parágrafo, que é o estilo do nosso elemento. Dentro do style e entre aspas, vou inserir o que desejo mudar que, nesse caso, é o tamanho da fonte. Para fazer isso, tamanho da fonte, font size (sempre em inglês).
Como escrever isso?
O tamanho da fonte padrão no navegador é medido em pixels. O navegador adiciona, às vezes, o tamanho da fonte inicial como 16 pixels. Agora, o que vemos no navegador é que essas fontes possuem 16 pixels. Quero modificar a fonte da nossa missão para 20 pixels, por isso, 20px ali em cima.
Minha fonte já está com outro tamanho na hora da apresentação se salvo isso e retorno ao navegador.
Que tal rememorar? Acrescentei uma propriedade conhecida como style, coloquei um =, que é uma atribuição para esse conteúdo. Font size, tamanho da fonte, 20 pixels. Percebeu que o Sublime Text coloriu de forma totalmente diferente? É por isso que é importante usar um editor de códigos programado para isso ao criarmos algum conteúdo, ao escrevermos códigos de fato. Ele nos auxilia com esses pequenos detalhes e ele alerta quando algo não está certo.
Por exemplo, se eu der um espaço no font size, ele perde a marcação visual da apresentação daquela propriedade. Sabemos, dessa forma, que está incorreto.
Já que isso está funcionando, desejo alinhar todo esse conteúdo ao centro. Mas estou fazendo a divisão de quatro tags, tenho a tag do título e tenho três parágrafos. Utilizo uma propriedade denominada text align a fim de alinhar um elemento ao centro.
Começo fazendo isso com o título. Acrescento nele também a propriedade style com o conteúdo text align e o valor center.
Em outras palavras, o que desejo é alinhar ao centro, centralizar meu conteúdo. Quando recarregamos, meu título está alinhado ao centro.
Agora, quero fazer isso em todos os meus elementos. Vou apenas copiar aquilo, colar na linha do parágrafo, colar na linha do último parágrafo e tenho um conflito neste momento, pois preciso incuir duas informações no meu CSS. A primeira é o tamanho da fonte e a segunda é o alinhamento do texto.
Com o intuito de realizar essa divisão entre duas apresentações, dois itens que estamos apresentando, colocamos um ; e conseguimos, dessa forma, fazer a separação.
Note que todos os meus elementos possuem a propriedade style, o valor text align center e o meu elemento da missão tem o font size 20 pixels. Vamos salvar e ver como ficou isso no navegador.
Essa é a primeira etapa para começar a alterar o CSS, a mexer em cada um dos pequenos pontos e das possibilidades existentes.
Começamos a mexer na apresentação dos textos, no alinhamento deles e no tamanho da fonte nesta aula. Veremos como fazer isso em grandes quantidades de texto e de forma muito mais organizada muito em breve.
