Introdução ao CSS
Seguindo a série de “Introdução à Desenvolvimento Web”, hoje nos focamos na introdução ao CSS, que é essencial para a criação de um site visualmente agradável e com recursos especiais. Confira quais serão os próximos posts e leia os anteriores:
- HTML
- CSS
- PHP
- MySQL
- Javascript
Introdução ao CSS – o que é?
CSS é, literalmente, “Cascading Style Sheets”. Ou seja, são folhas de estilo em cascata. Essa linguagem define a parte visual (a aparência) dos elementos que compõem um site.
Qual a importância do CSS?
Antes de sua criação, era necessário criar o estilo de cada página individualmente. Era um trabalho cansativo que devia ser feito com muito cuidado para todas terem a mesma aparência (caso fosse isso o desejado).
Isso acabou quando o CSS foi criado em 1996 para facilitar a edição de estilo de todo um documento web. Assim, o CSS existe em um documento diferente do HTML, para manter esse limpo. Por isso, caso queira mudar alguma parte de aparência do seu site, basta ir até o arquivo com terminação .css. Essa linguagem é importante para proporcionar cada vez mais uma experiência melhor para o usuário.
Como funciona?
Como esse post foca-se em uma introdução ao CSS, vamos tentar deixar o código simples e didático. Lembre-se que, para fazer o CSS funcionar corretamente, você deve colocá-lo em algum lugar. A primeira forma (e menos recomendada por desenvolvedores) é colocar o CSS entre as tags <style></style>, no mesmo arquivo que o HTML. Essas tags vão dentro das tags <head></head> da sua página. Abaixo, quero deixar o parágrafo da cor roxa.
O código ficaria:
<head>
<style>
p {
color: purple;
}
</style>
</head>
A segunda forma, mais usual e mais recomendada, é linkar seu arquivo CSS com o HTML a partir da tag <link> que ficará localizada entre as tags <head></head> da sua página HTML. Essa tag <link> precisa de três atributos, que são type, sempre igual a “text/css” rel, sempre igual a “stylesheet”, e href, que deve apontar para o endereço do seu arquivo CSS (que geralmente é stylesheet.css, mas pode ter outros nomes).
O código fica (no arquivo HTML):
<head>
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css”>
</head>
Estrutura do CSS
A sintaxe do CSS baseia-se em:
- Seletor, que é qualquer elemento em HTML sem as <>, como p, img ou table. Veja outras tags na matéria de HTML.
- Propriedade, que é um aspecto que você deseja mudar do seletor. Existem diversas propriedades, dentre as quais color (cor do texto) e font-size (tamanho da fonte), por exemplo.
- Valor, que é a atribuição da propriedade. Por exemplo, se você deseja mudar uma propriedade definida anteriormente, que é cor, você vai definir o valor, que é azul. Esse valor (de cor do texto) pode ser hexadecimal, RGBA ou o nome da cor em extenso.
Exemplo: quero usar o CSS para deixar a cor do meu parágrafo verde. Logo, o seletor é o p, a propriedade é color e o valor é green. Veja o código abaixo de como ficaria o CSS para esse caso.
p {
color: green;
}
Mãos na massa
Para facilitar o processo de aprendizagem de forma mais intuitiva e prática durante essa introdução ao CSS, recomendo essa aula super curta do CodeCademy (o link não funciona muito bem em celular) que vai te ajudar a visualizar o CSS e o HTML facilmente no site e praticar o que foi ensinado rapidamente nesse post. Eu recomendo esse mesmo curso mais abaixo para se aprofundar mais ainda no tema. Caso esteja no celular, dê preferência à apps como Khan Academy ou Coursera para conseguir praticar.
Aprenda mais!
Alguns cursos e materiais legais para aprender ainda mais do que somente uma introdução ao CSS e, futuramente, tornar-se um profissional de desenvolvimento web! Não limite-se às referências abaixo, busque sempre atualizar-se com as novas regras de CSS lançadas para produzir melhores estilos.
- PDF do escritório da W3C no Brasil em português, que pode ser encontrado aqui;
- Curso do CodeAcademy aqui sobre HTML e CSS;
- Curso do site DevMedia aqui sobre o CSS3;
- App da Khan Academy e da Coursera.
E você? Já sabia algo sobre CSS? O que achou desse artigo? Comente e vamos conversar!
Para orçamentos de sites, informações e só dizer um olá, clique abaixo.
