Curso Rápido de CSS
Curso rápido sobre CSS
[click here for English]
O que é?
O CSS, ou folha de estilo em cascata, nada mais é que uma linguagem que permite estilizar os elementos HTML de nossas páginas. Praticamente todos os elementos visuais da nossa página são editados através do CSS. Com ele podemos manipular, posições, cores, fontes, e muitos outros recursos.
História do CSS
O CSS foi desenvolvido pelo W3C (World Wide Web Consortium) em 1996, pois o HTML não foi projetado para ter tags que ajudariam a formatar a página. Você deveria apenas escrever a marcação para o site.
Como os sites tinham diferentes fontes, cores e estilos, era um processo longo, doloroso e caro para reescrever o código. Assim, o CSS foi criado pelo W3C para resolver este problema.
Ferramentas
Navegadores:
Editores:
Online Tools:
Sintaxe
Para escrever CSS, primeiro temos o selector, do qual pode ser o elemento html, classe ou id, após o seletor é seguido da declaração dentro de chaves {}, dentro das chaves adicionamos a propriedade e o valor, como o exemplo abaixo:
Usando o CSS
O CSS pode ser utilizado de 3 maneiras, inline, externa ou interna.
CSS Inline
Essa forma é a menos recomendada, mas muitas vezes necessária. Basta utilizar o atributo style no elemento HTML como no exemplo abaixo:
<p style="color: red;">Meu texto rosa</p>CSS Interno
Basta declarar a tag <style> no head e assim aplicar todo o estilos desejado, como no exemplo abaixo:
<!DOCTYPE html><html> <head> <style> p { color: red; text-align: center; } </style> </head> <body> <p>Este parágrafo serão estilizados com css</p> </body></html>
CSS Externo
Geralmente, a maioria das páginas opta por este estilo de trabalho. Dessa forma, basta criar um arquivos com extensão .css e utilizar o link no head da página:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <p>Este parágrafo serão estilizados com css</p> </body></html>p { color: red; text-align: center;}
Seletores
Os seletores CSS são usados para “encontrar” (ou selecionar) os elementos HTML que você deseja estilizar.
Comentários
Os comentários são usados para explicar o código e podem ajudar quando você editar o código-fonte em uma data posterior.
Os comentários são ignorados pelos navegadores.
Um comentário CSS é colocado dentro do elemento <style> e começa com / * e termina com * /:
/* Este é um comentário */p { color: red; }
Especificidade
Se houver duas ou mais regras CSS conflitantes que apontam para o mesmo elemento, o navegador segue algumas regras para determinar qual é a mais específica.
O seletor universal (*) tem baixa especificidade, enquanto os seletores de ID são altamente específicos!
Hierarquia de especificidade
Cada seletor tem seu lugar na hierarquia de especificidade. Existem quatro categorias que definem o nível de especificidade de um seletor:
- Estilos embutidos — Um estilo embutido é anexado diretamente ao elemento a ser estilizado. Exemplo: <h1 style = “color: #ffffff;”>.
- IDs — um ID é um identificador exclusivo para os elementos da página, como #navbar.
- Classes, atributos e pseudo-classes — Esta categoria inclui .classes, [atributos] e pseudo-classes, como: hover,: focus etc.
- Elementos e pseudo elementos — Esta categoria inclui nomes de elementos e pseudo elementos, como h1, div,: before e: after.
/* Esta regra é mais específica, por tanto é aplicada */
div#a {background-color: green;}#a {background-color: yellow;}div[id=a] {background-color: blue;}
Especificidade iguais
Especificidade igual: a regra mais recente conta — Se a mesma regra for escrita duas vezes na folha de estilo externa, então a regra inferior na folha de estilo está mais próxima do elemento a ser estilizado e, portanto, será aplicada:
/* Por estar em cima, este é ignorado */
h1 {background-color: yellow;}/* Por estar em baixo, este é aplicado */
h1 {background-color: red;}
Propriedades
O CSS tem diversas propriedades, aqui será listado algumas
Charset
A regra @charset especifica a codificação de caracteres usada na folha de estilo, a regra @charset deve ser o primeiro elemento na folha de estilo e não deve ser precedida por nenhum caractere. Se várias regras @charset forem definidas, apenas a primeira será usada.
@charset "UTF-8";Cores
Para trabalhar com cores em CSS, podemos usar os nomes das cores em inglês(red, green, blue e etc), e também podemos usar em RGB, HEX, HSL, RGBA, HSLA.
color: red;color: #00FFFF;color: rgba(255,0,0,0.3);...
Unidades
Outro valor muito importante são as unidades, CSS tem várias unidades diferentes para expressar um comprimento.
Variáveis CSS
O CSS possui uma funcionalidade que nos permite criar variáveis dentro do css, assim escrevendo menos e tornando mais simples de dar manutenção;
:root { --main-color: red; --main-border: 2px solid blue; --main-color-text: rgb(125, 255, 0);}div { border: var( --main-border ); color: var ( --main-color-text); background-color: var(--main-color);}
Propriedades mais comuns no CSS
Existem diversas propriedades no CSS, porém as mais comuns são as propriedades abaixo:
- font-family: 'Open Sans',sans-serif;
- margin: 0;
- padding: 0;
- color: #fcfdff;
- background-color: blue;
- text-align: center;
- border: 0.5px solid #c8c8c8;
- border-radius: 5px;
Para uma pesquisa mais aprofundada visite o site
Importando CSS
O import é bastante usado quando queremos importa uma font direto no css, exemplo:
@import url(“https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");Mas também pode ser usada para inserir um arquivo de CSS, exemplo:
@import “menu.css”;Validador
Sempre verifique se seu código CSS está válido.
Removedor de CSS
Caso tenha um CSS muito grande é sempre bom verificar se tudo está sendo realmente usado.
Padrão de Codificação
Toda linguagem deixa uma gama de possibilidades de trabalhar com ela, o CSS não é diferente.
Para deixar a escrita de forma mais compatível o ideal é ter um padrão de codificação, segue abaixo um exemplo:
Documentação
Toda Linguagem tem documentação e o CSS não seria diferente, uma ferramenta que gosto bastante para ler documentação é o DevDocs.
caso precise de alguma dica de forma mais rápida use o devhints
Obrigado por ler!
Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!
😊😊 Até mais! 😊😊
