O que é CSS?

O que é CSS?

O CSS compõe a tríade da qual toda a parte que vemos de um site é feita (HTML, CSS e Javascript) e é a parte que faz com que a tela fique com uma aparência mais amigável e que posiciona cada parte do conteúdo em seu lugar.

Mas como falei no começo “NÃO SE ASSUSTE”, nessa tabela de preços e mesmo em todo o nosso site, não escrevemos uma única linha de CSS, tudo foi gerado automaticamente e organizado corretamente pelos nossos editores e tema.

Mas para você que quer aprender um pouco mais sobre o funcionamento dessas folhas de estilo em cascata e entender como melhorar ainda mais seus sites. Vamos aprender um pouco mais sobre.

O que fazer com o CSS?

Tudo bem, o CSS é o que faz um site moderno virar um site, mas o que ele consegue fazer?

• Animações:
  Animações de entrada e saída de elementos das mais diversas, várias vezes alinhamos essas animações com javascript e alterações no html para tornar seu site mais dinâmico, se está vendo o blog por um celular, pode ver uma dessas animações na abertura do menu do topo da página.
• Efeitos Visuais:
  Efeitos de mudança de cor, formato, tamanho dos mais diversos, se vc passa o mouse por cima ou clica e algo muda na tela, pode ter certeza que tem algum CSS no meio, se está vendo nosso blog de um computador, pode ver um pouco disso com o sublinhado que aparece no menu do topo quando passa o mouse por cima de um link.
• Posicionamento de elementos:
  Objetos que ficam um do lado do outro, com uma margem maior ou menor, se sobrepõe outro elemento, se fica fixo na tela, se não aparece na tela e por ai vai. Aqui vemos bastante a questão de responsividade e como fazer o site ficar bonito tanto de um celular quanto de um computador.
• Estilização de elementos:
  Cores, bordas, tipos de fontes, tamanhos de letras, imagens no fundo de elementos, sombras, tamanhos… Se você ver um botão em um site, pode ter certeza que tem CSS nele.

Como usar CSS?

O CSS funciona por meio de identificadores, podendo ser usadas as tags de HTML, IDs – identificadores únicos de elementos – e mais comumente classes – identificadores que servem para vários elementos que devem pertencer a um mesmo tipo (como botões azuis por exemplo). Outras formas de identificar elementos podem ser usadas mas em casos mais específicos.

Um exemplo simples para adicionar o fundo azul em um botão pode ser visto abaixo, utilizando a tag “button” que é usada para adicionar botões em html e o ID “meubotao” que estamos criando nesse exemplo:

Vamos ver primeiro o html desse botão que vai ter o escrito “Adoro CSS”:

<button id="meubotao">
  Adoro CSS
</button>

E agora o CSS, para adicionar ele diretamente em uma página html, devemos colocar ele em volta de uma tag “style”:

<style>
  button#meubotao {
    background: blue;
  }
</style>

Isso adicionará um botão como esse na sua página (no nosso blog ele terá outros estilos aplicados pelo restante do nosso código):

Como pode ver na parte do CSS, o nosso ID é identificada por meio de uma hashtag na frente, enquanto a tag “button” é colocada diretamente e como estamos falando do mesmo elemento nos dois identificadores, não colocamos espaço entre esses identificadores, logo se uma tag for adicionada como identificador ela deve vir em primeiro lugar sempre (como estamos usando um identificador único, em um código real seria desnecessário usar a tag).

Caso queiramos mudar a cor desse botão para vermelho podemos adicionar no html a classe “alert” e criando essa classe em nosso CSS, uma curiosidade no CSS é que pelo modelo em “cascata” do código, se dois identificadores se referem a um mesmo elemento, aquele colocado por ultimo é que vale, mas o CSS também leva em conta o identificador usado, logo se um identificador mais específico for colocado antes, ele é que vai alterar o elemento, logo para alterar a cor desse botão adicionando uma classe, devemos utilizar o ID do elemento junto com a classe para poder ser mais específico, já que o ID especifica exatamente de qual elemento estamos falando. O código final desse botão que era azul e agora é vermelho fica assim:

<style>
  button#meubotao {
    background: blue;
  }
  #meubotao.alert {
    background: red;
  }
</style>
<button id="meubotao" class="alert">
  Adoro CSS
</button>

Como pode ver pelo resultado, não foi preciso usar a tag para conseguir a alteração, apenas o ID para resolver o problema da especificidade, já que uma classe é mais específica que uma tag nesse caso, inclusive se alterarmos a ordem do CSS não iriamos alterar o resultado, mas no caso de usarmos duas classes no mesmo elemento e cada identificador no CSS falasse de uma delas (uma classe para azul e uma para vermelho) a classe que estivesse por ultimo na cascata é que alteraria a cor.

Nesse exemplo usamos o CSS em linha, que significa que ele está junto com o CSS. Também é possível adicionar ele por meio de arquivos e é bem comum sites complexos utilizarem vários arquivos e modelos em linha como esse que fizemos nessa amostra.

Em nosso sistema, quando você adicionar um código CSS pelo editor visual ou pelas configurações do tema, irá gerar um arquivo com o seu código nele que será baixado assim que carregar a página, tornando os carregamentos mais rápidos por conta das configurações de cache que temos em nosso sistema.

Sugestões de leitura

Caso queira aprender mais sobre e entender as possibilidades do css, segue alguns links interessantes a respeito:

• CSS Tricks – Além de um layout sensacional, é um dos melhores sites para aprender CSS, com várias dicas, tutoriais e matérias sobre (em inglês)
• Rede de Desenvolvedores da Mozilla (MDN na sigla em inglês) – A plataforma de aprendizagem de desenvolvimento web da Mozilla. Esse link já aponta para a definição de CSS em português, com uma explicação mais técnica, tutoriais e referências da linguagem.
• W3 Schools – Um ótimo site para quem quer aprender desenvolvimento web e possivelmente o maior. O link já direciona para a página relativa ao CSS (em inglês), por ai você pode encontrar referências, exemplos, exercícios e explicações detalhadas sobre cada opção existente no CSS.