O que é CSS
Aprendemos que HTML é a linguagem que estrutura os documentos web, pode ser considerado a espinha dorsal dos documentos web. Da mesma forma, que o html é considerado a espinha dorsal ou estrutura básica dos sites, CSS (Cascading Style Sheets "Folhas de Estilo em Cascata") é a linguagem responsável por estilizar, colorir e organizar o leiaute da visualização do documento web.
Podemos utilizar uma analogia com o corpo humano para entendermos melhor o papel das CSS em uma página web:
Assim como a estrutura para o nosso corpo é o nosso esqueleto, em um documento web esse "esqueleto" seria o código HTML, por cima desse esqueleto recebemos outras camadas como músculos, tecidos e pele... essas camadas que dão forma ao nosso corpo, podem ser comparadas às folhas de estilo em cascata (CSS) que em nossos códigos nos permitem dentre outras coisas: alterar a cor dos elementos em um documento, alterar a cor de fundo, adicionar imagens ou padrões de fundo, editar o tipo de fonte, tamanho, estilo, bordas, leiaute do documento (número de colunas, fluxo de exibição etc...), permite criar degradês, animações, efeitos e muito mais!
Assim como a estrutura para o nosso corpo é o nosso esqueleto, em um documento web esse "esqueleto" seria o código HTML, por cima desse esqueleto recebemos outras camadas como músculos, tecidos e pele... essas camadas que dão forma ao nosso corpo, podem ser comparadas às folhas de estilo em cascata (CSS) que em nossos códigos nos permitem dentre outras coisas: alterar a cor dos elementos em um documento, alterar a cor de fundo, adicionar imagens ou padrões de fundo, editar o tipo de fonte, tamanho, estilo, bordas, leiaute do documento (número de colunas, fluxo de exibição etc...), permite criar degradês, animações, efeitos e muito mais!
Como utilizar CSS em nosso código?
Para inserir CSS em nosso documento contamos com três maneiras mais usuais:
- usando estilos inline (como visto na postagem anterior)
- utilizando a tag <style></style> dentro do cabeçalho <head></head>
- utilizando folhas de estilo externas utilizando a tag <link>
Estilos inline
São estilos colocados nas próprias tags html como valor do argumento "style" por exemplo: <p style="color:green">Olá Mundo!</p> faria com que o parágrafo aparecesse verde em um documento html. Os estilos inline são a forma mais rápida de estilizar elementos, mas não são uma boa prática, já que misturam linguagens diferentes no código e tornam a escrita, edição e manutenção de código muito complexas. Por exemplo, se em uma página houver 100 botões e todos precisarem do mesmo estilo, usando estilos inline você precisaria repetir o estilo para cada um dos botões e em caso de necessidade de mudança, por qualquer motivo, teria que modificá-los, todos, um por um também.
Utilizando CSS através da tag style
A forma mais simples de utilizar CSS em nossos documentos é inserindo a tag <style></style> dentro da tag <head>. Por exemplo:
<head>
<head>
<style>
/* O estilo CSS vai aqui*/
</style>
</head>
A primeira coisa que veremos sobre CSS é como escrever comentários. Comentários são ignorados pelo navegador no momento da execução do código e servem como anotações ou lembretes para o programador deixados no código para leitura futura, para documentar, explicar parte do código e também para desabilitar parte do código na realização de testes.. Vimos em nossas postagens iniciais como escrever comentários em HTML utilizando os caracteres: <!-- -->, exemplo: <!-- O comentário vai aqui... -->. Para criar comentários em CSS utilizamos os caracteres /* */ tudo escrito entre /* e */ será ignorado pelo navegador e surgirá no código como comentário. No exemplo acima, é fácil perceber que dentro da tag head e da tag style temos um comentário dizendo "O estilo CSS vai aqui", indicando a quem ler o código o que deve ser colocado naquele determinado local, facilitando assim a compreensão do código. *Observação: use comentários com cautela, comentários em excesso tornam o código extenso e de difícil leitura, comente apenas no que for necessário.
Estilizando elementos por CSS
Para estilizar elementos por CSS é necessário primeiro selecionar qual elemento deverá ser estilizando, podemos fazer isso de diversas formas, a mais simples e comum é utilizando seletores de elementos, que são caracteres que casam com os elementos das tags html, por exemplo: em CSS quando queremos selecionar um parágrafo, basta escrevermos a letra "p" (sem aspas), após isso, devemos abrir e fechar chaves para delimitar as regras de estilo que serão executadas na página:
<head>
<style>
<head>
<style>
/*O seletor abaixo aplicará os estilos que estiverem entre chaves { } em todos os elementos parágrafos que existirem no referido documento*/
p {
color: red;
}
</style>
</style>
</head>
Podemos editar diversos atributos dos elementos em nosso documento utilizando CSS, você só precisa saber quais atributos um elemento possui e criar uma regra de estilo para ele. As regras de estilo são formadas pelo seletor, pelas chaves e pelos atributos com seus respectivos valores:
Exemplo de regra de estilo
p {
color: blue;
background-color: gray;
background-color: gray;
}
A regra de estilo acima, altera a cor da fonte para azul e a cor de fundo para cinza em todos os parágrafos.
Há seletores para diversos elementos comumente estilizáveis em nosso documento, por exemplo:
p (parágrafos), a (links "anchor"), h1, h2, h3..., h6, img, body etc... Com esses seletores podemos escrever regras css de forma semelhante como fizemos acima.
Exercício: tente abrir páginas de sites e inspecionar o código pressionando a tecla F12 ou clicando com o botão direito do mouse na página > inspecionar. Ao abrir o modo desenvolvedor com o inspetor de código selecione a aba de estilos, para visualizar os estilos disponíveis na página e veja se você consegue descobrir novas propriedades que estejam sendo estilizadas. Não se preocupe se não entender muita coisa, você está aprendendo e em breve veremos novos marcadores e propriedades.
Como o assunto é muito extenso, veremos como editar outros elementos usando o seletor de elementos junto dos nomes das propriedades que desejamos editar. Até a próxima!
A regra de estilo acima, altera a cor da fonte para azul e a cor de fundo para cinza em todos os parágrafos.
Há seletores para diversos elementos comumente estilizáveis em nosso documento, por exemplo:
p (parágrafos), a (links "anchor"), h1, h2, h3..., h6, img, body etc... Com esses seletores podemos escrever regras css de forma semelhante como fizemos acima.
Exercício: tente abrir páginas de sites e inspecionar o código pressionando a tecla F12 ou clicando com o botão direito do mouse na página > inspecionar. Ao abrir o modo desenvolvedor com o inspetor de código selecione a aba de estilos, para visualizar os estilos disponíveis na página e veja se você consegue descobrir novas propriedades que estejam sendo estilizadas. Não se preocupe se não entender muita coisa, você está aprendendo e em breve veremos novos marcadores e propriedades.
Como o assunto é muito extenso, veremos como editar outros elementos usando o seletor de elementos junto dos nomes das propriedades que desejamos editar. Até a próxima!
Comentários
Postar um comentário