Com o avanço da internet, linguagens de programação simples foram se tornando cada vez mais fracas, e foi preciso uma evolução. Isso aconteceu com o CSS. O HTML que conhecemos, não foi projetado para ter tags que ajudam na formatação de páginas. Por isso, se fez necessária a criação de uma forma de mostrar a aparência de um site.
O que é CSS?
CSS é uma sigla para Cascading Style Sheet, ou Folhas de Estilo em Cascata. Como o nome já revela, o CSS separa a estrutura e o conteúdo do site, de sua aparência visual. Conforme já explicamos, o HTML é o esqueleto do seu site, é onde são inseridos os comandos da estrutura de uma página. Já o CSS, é onde serão inseridas todas as informações da aparência do seu site, camada por camada. É o que vai mostrar o estilo do seu site. Alterações de cores de plano de fundo, a fonte de texto, o tamanho dos parágrafos e ajustes em imagens, são apenas algumas das coisas que o CSS pode fazer. Com isso, o código de uma página HTML pode ser reduzido, melhorando assim, a sua organização visual.
Isso é muito importante, já que com um código mais limpo, o site é carregado de maneira mais rápida, melhorando o tempo de resposta junto ao servidor e melhorado a experiência do usuário, que passa a contar com um site visualmente atraente e rápido em suas execuções. Nas hospedagens de sites, o que melhora é que o arquivos são menores. Isso facilita o carregamento, o que melhora a eficiência dos serviços para todos.
Relação com HTML
Muitas pessoas até podem confundir HTML com CSS, mas eles não são a mesma coisa. Inclusive, ao criar um código HTML, o CSS deverá ser criado como outro arquivo. Porém, ambos andam lado a lado.
Certamente você já viu algum site na internet que não carregou direito, não é mesmo? Um plano de fundo todo em branco, com um texto preto, talvez algumas linhas de código soltas… Isso significa que o CSS daquele site não foi implementado corretamente, ou que ocorreu algum erro. E na verdade, é assim que um site somente com HTML se pareceria. Então, é aí que o CSS entra! Ele permite que você crie o estilo do seu site separado do HTML. E aí, dentro do seu arquivo HTML, você só precisará informar um código específico para fazer o arquivo em CSS funcionar. Isso deixará a estrutura muito mais limpa e organizada.
A estrutura da sintaxe do CSS é bem simples. Ela é baseada em comandos em inglês, e possui um seletor e um bloco de declaração. Você informa o elemento a ser selecionado, e então declara o que será feito com ele, como sua cor ou posicionamento dentro da página. Os seletores, nada mais são do que o elemento do HTML que será estilizado. Cada declaração possui um comando do CSS e um valor. Uma declaração sempre termina com um ponto-vírgula e os blocos de declaração são cercados por chaves.
Veja um exemplo abaixo:
/* comentário em css, semelhante aos da linguagem c */
body
{
font-family: Arial, Verdana, sans-serif;
background-color: white;
margin: 5px 10px;
}
O código acima, o elemento é o body, ou seja, o código fará alterações no elemento body declarado em uma página HTML. E o que será declarado?
- font-family define como fonte padrão Arial. Caso o computador que esteja acessando aquela página não tenha a fonte Arial, ela será substituída por Verdana. Caso não exista, qualquer fonte sans-serif será carregada.
- background-color define a cor do plano de fundo da página. A cor é representada pelo seu nome inglês, mas também pode ser representada por um padrão de cor hexadecimal, como #FFFFFF.
- margin define o tamanho da margem externa do seu site.
As especificações do CSS podem ser obtidas no site da W3C “World Wide Web Consortium”, um consórcio de diversas empresas que buscam estabelecer padrões para a usabilidade da internet.
CSS3
A última versão do CSS, foi o CSS3. Essa atualização trouxe uma série de novos estilos, permitindo inserir imagens com cantos arredondados, textos com sombras, cores em efeito degradê, animações, efeitos de transição e uma série de outras novidades.
Conclusão
O CSS pode trazer toda uma cara nova para o seu site! Já pensou em criar o seu? Entre em contato com um WebDesigner parceiro da TargetHost. E para ter seu site rodando na internet, lembre-se que temos planos de hospedagem de sites que cabem no seu orçamento! >
