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. Entçao, se você já sabe o que é HTML, não deixe de ler este texto até o fim!
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 HTML 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. Não deixe de aprender o que é CSS e aplicar quando contratar a sua hospedagem de sites
Gostou de nosso post? Compartilhe:
