Quem estava com saudades dos posts desse estilo no blog? Ensino para vocês sobre programação, design e dicas para blogueiros. E eu amo! Vocês podem ver alguns aqui. Esses posts estarão presentes por aqui, com maior frequência no blog, na série Eu posso. No caso de programação: #EuProgramo.
O Eu Posso vai ajudar e mostrar para vocês que vocês podem fazer coisas que, à primeira vista, parecem impossíveis. No #EuProgramo, vou ensinar códigos simples, como funciona cada um e oferecer tutoriais também. Se você tiver sugestões, não deixe de comentar aqui!
Falei demais, eu sei. Então vamos para o básico do CSS. Vamos aprender o que é o CSS, seus principais códigos, como ele funciona e entender porque ele é tão maravilhoso.
O que é CSS?
CSS significa Cascading Style Sheets ou em português, folha de estilos em cascata. É utilizado para estilizar o HTML. Digamos que o HTML faz a estrutura e o CSS deixa bonito.
Ele pode ser inserido tanto internamente, quanto externamente. Eu prefiro que seja externamente, fica mais fácil para fazer alterações e o código não fica gigantesco.
Internamente:
<html>
<head>
<style>
p { color:#000000;}
</style>
</head>
</html>
Externamente:
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
</html>
Se você é usuário Blogger, o Blogger utiliza CSS interno, embora tenha uma área no Editor de Modelos para os códigos CSS, que está vinculado ao template completo, então é como se fosse externo já que você não precisa se preocupar sobre onde colocá-lo. Você também deve colocar sem as tags <style>, como se estivesse em um arquivo externo.
WordPress pode se utilizar ambos, mas quando é utilizado externamente, pode ser facilmente encontrado nos arquivos com o final .css.
Para adicionar um estilo externo para seu arquivo HTML, você tem que adicionar a tag “link rel” no começo do seu código para que ele entenda que se trata de um estilo, não um arquivo comum. O “href” representa o link de onde o arquivo se encontra no seu tema.
Os códigos básicos de CSS
- Background
Usado com cor de fundo, imagem ou transparência. Também temos a possibilidade de usar degradê e até mais de um fundo. Use sua criatividade!
Para cor, usamos o # (jogo da velha/hashtag) e possui 3 ou 6 caracteres, podendo ser números e/ou letras. É possível utilizar uma tabela de cores, como essa.
Para deixar transparente basta utilizar: “background: transparent;” (sem as aspas).
E para usar uma imagem, você tem que utilizar: “background: url(‘url_da_imagem’) (sem as aspas). E após o “)”, você pode utilizar “no-repeat” – para nenhuma repetição, “repeat-x” – para repetição horizontal, “repeat-y” – para repetição vertical e “repeat” para repetição completa.
- Altura e Largura
Width: define a largura do elemento.
Height: define a altura do elemento.
Pode ser um valor em px (pixel), porcentagem, em. Além de ter suas variações com max-width e max-height, que são utilizados para definir uma largura ou altura máxima.
- Margin
Representa as 4 margens do elemento, acrescenta um espaçamento fora do conteúdo. Pode ser utilizada como “margin-top” (topo), “margin-right” (direita), “margin-bottom” (abaixo), “margin-left” (esquerda) ou da forma encurtada: margin: 1px 2px 3px 4px, onde cada valor em pixel representa uma posição, nessa mesma ordem.
- Padding
É parecido com o margin, mas dessa vez adiciona um espaço nas 4 margens do elemento. Acrescenta um espaçamento dentro dos limites do conteúdo.
Pode ser utilizada como “padding-top” (topo), “padding-right” (direita), “padding-bottom” (abaixo), “padding-left” (esquerda) ou da forma encurtada: padding: 1px 2px 3px 4px, onde cada valor em pixel representa uma posição, nessa mesma ordem.
- Fontes
- font-size: define o tamanho da fonte;
- font-family: tipo da fonte;
- font-style: adiciona estilo à fonte. Podendo ser negrito (bold) ou itálico (italic).
- font-weight: peso da fonte de claro a negrito, que também pode ser adicionado por esse código. A numeração muda a espessura em negrito da sua fonte, quanto maior, mais negrito.
Claro, não dá para explicar todos os códigos em CSS de uma única vez. Para quem não conhece, é muita informação para ser processada. Mas como eu disse, pretendo vir com mais posts relacionados.
Mas diz aí! O que mais vocês querem aprender aqui no blog? Deixem nos comentários que eu prometo trazer esses conteúdos para vocês. Esse foi o #3 BEDA, beijos.