css básico tutorial – Arquitetos da Criatividade

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):

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.

Arquivo para Tag: css básico tutorial