O que é CSS?

O que é CSS?

Categoria: Hospedagem de Sites

30/06/2016 às 15:06

O que é CSS?

 

Essa belíssima linguagem de folha de estilo é como os ingredientes para a sua feijoada ficar perfeita.

Exatamente, Cascading Style Sheets ou abreviado CSS é a linguagem que estiliza a página web, sem ele o site não tem vida, o site não tem harmonia, o site não é um site.

 

CSS é uma linguagem de programação?

Não, assim como HTML, ele não é uma linguagem de programação, é uma folha de estilo que estiliza sites escritos em linguagem de marcação.

Mas o que é uma folha de estilo? E porque ele é tão importante?

Bom, provavelmente você já viu aquele site com um botão chamativo na cor vermelha e bordas arredondas que ao passar o mouse ele mudava de cor e ainda dizia quantos anos você tem (Se ele disser realmente quantos anos você tem, corra!) e que fazia você ficar perdendo um bom tempo passando a seta do mouse por cima do botão ou lhe fazia clicar.

Isso tudo é feito com CSS, ele dá vida ao HTML, sem ele os sites não passariam de textos com fundos brancos e fonte padrão do SO utilizado.

 

O que pode ser feito com CSS?

Com a vinda do CSS3 a folha de estilo tem se tornado cada vez mais poderoso, pois foram acrescentados estilos que só se faziam com Java Script, como animação, função de cálculo, variáveis e etc...

Hoje consegue facilmente criar um botão com bordas arredondadas e sombras que de 360 ao passar o mouse ou que o texto muda ao clicar, isso tudo e sem programação alguma.

 

Como usar no meu site?
Existe duas formas de começar a estilizar sua página pelo próprio arquivo HTML ou criando um arquivo com extensão  .css.
Para criar no próprio arquivo HTML basta em qualquer parte do código você abrir a TAG e dentro dela você escreverá seu CSS. Obs: Não é aconselhável colocar CSS junto com HTML, isso deixa o código sujo e bagunçado mas caso queira por junto, ao menos deixe organizado e de preferência acima do fechamento da .
Para criar em um arquivo separado do tipo  meuestilo.css, é preciso apenas além de criar o arquivo, chamar ele em seu código HTML acima do fechamento da irá acrescentar o seguinte código supondo que seus arquivos estejam, na mesma pasta:

 

caso esteja em uma pasta, basta especificar ela no href, exemplo  href=”css/meuestilo.css”.

 

Começando a estilizar seu HTML


Agora que já sabe o que é o CSS a importância dele e como implementar ele no código deve estar se perguntando, e agora? Como faço meu botão dar uma risada e falar com quem irei casar? Bom, para isso traga o sal, água purificada e faça um círculo no meio do chão (Brincadeira a parte).

CSS não pode dizer com quem você vai casar mas caso queira fazer uma borda arredondada é preciso antes definir como o CSS irá identificar aquele botão.

Existem 3 formas, ou chamando direto pela Tag ou criando um ID ou Class para a sua Tag, o aconselhável é utilizar ID e Class.


ID é utilizado para identificação única, um ID só pode ser utilizado em uma única Tag é que será criado um estilo apenas para aquela Tag. Para definir um ID utiliza  id=”identificador”,


Class é utilizado para você reaproveitar o código em outra Tag, vamos supor que você tenha um botão de Enviar no seu formulário e um botão de Apagar, os botões serão iguais porem com funções diferentes, basta definir a mesma classe para os 2 e ao modificar futuramente aquela classe pegará nos 2 objetos. Para definir uma Class utiliza  class=”identificador”,

 


Para chamar um ID ou Class na sua folha de estilo baste acrescentar ‘ # ‘ para ID e ‘ . ‘ para Class, veja o exemplo:

 



#identificador {
         font-size: 26px;
}
.identificador {
         color: #666;
}

 

Sintaxe do CSS


A sintaxe do CSS é bem simples, é preciso apenas digitar o seletor da da Tag, ID ou Class  mais o nome  seguindo de chaves, exemplo: input { color: #fff } aqui eu estilizo que todos os campos input tenha o texto da cor branca. Para chamar por ID use tralha ‘ # ‘, exemplo:   #container-titulo {width: 100%} e pela Class usa ponto ‘ . ‘, exemplo:    .titulo-h1 { font-size: 24px }.
Mas digamos que você quer estilizar apenas os parágrafos de uma div com o ID “container”, ficaria:   #container p {text-transform: lowercase}, repare que podemos concatenar uma Tag, Class ou ID em uma ordem de herança, sendo o primeiro o pai e os outros filhos, essa prática não é muito aconselhável pois pode prejudicar o desempenho do CSS, o máximo que aconselhamos a colocar é até 2 seletores e utilizar pouco a chamada direta pela Tag.

 

 

Comentário e organização


Imagine que você tenha 5000 linhas de código e esteja em um editor de texto sem Find para pesquisar aquele seletor, você teria que descer um por um para saber onde está. Seria bem cansativo e tomaria muito tempo da sua preciosa vida, mas para não ficar tão demorado você pode comentar seu código e separamos por etapa da sua página e indo mais além separar cada etapa colocando ID primeiro e depois as Class.
Para comentar você utiliza /* Aqui vai seu comentário */.
Outra forma que utilizam também para organizar é separando em vários CSS e chamando ele em uma principal com   @import url("/css/style.css"), mas isso não é aconselhável pois aumenta o número de REQUEST do seu site pecando no desempenho.

Então é possível eu ter desempenho e organização juntas ? Sim, existe outras ferramentas que auxiliam nisso como Less & Sass, mas isso é um assunto para outro tópico sobre Pré-Processadores e WorkFlow.


Conclusão


Todos os sites utilizam CSS ele é a ponte para um lindo Layout, mas não basta sair escrevendo de qualquer jeito, fique atento a performance do seu código além da legibilidade do mesmo, escreva seu código pensando na outra pessoa que possa vir modificar, organize, pense em nomes apropriados para Class e ID e comente o seu código.

 

Talvez você goste

Top