Esse é o primeiro fio da série #DicasCSS. Quero explicar conceitos do CSS de forma simples e acessível. Achou legal?
🔁 Ajude compartilhando
💁Me segue para ver os próximos
Vamos começar do básico do básico👇
🔁 Ajude compartilhando
💁Me segue para ver os próximos
Vamos começar do básico do básico👇
CSS é a linguagem de MARCAÇÃO DE ESTILOS usados para determinar a aparência dos elementos HTML.
É uma linguagem declarativa, e foi lançada em 1996 pelo World Wide Web Consortium (W3C) - a organização que define os padrões da web.
É uma linguagem declarativa, e foi lançada em 1996 pelo World Wide Web Consortium (W3C) - a organização que define os padrões da web.
Existem 3 formas básicas de inserir CSS no HTML:
✅ Usando um arquivo externo .css linkado no HTML
✅ Dentro da tag <style>, geralmente incluída no <head> do HTML
✅ Ou inline, dentro do próprio elemento HTML em um atributo style=””.
✅ Usando um arquivo externo .css linkado no HTML
✅ Dentro da tag <style>, geralmente incluída no <head> do HTML
✅ Ou inline, dentro do próprio elemento HTML em um atributo style=””.
💡 A maioria dos sites hoje utilizam a folha de estilos externa. Durante um bom tempo, usar estilos incorporados ao HTML era considerado uma gambiarra. Com o surgimento dos frameworks JavaScript modernos isso vem mudando, para facilitar a componentização do código.
Vamos falar sobre a ANATOMIA BÁSICA DO CSS:
⇨ O estilo CSS é composto por várias REGRAS.
⇨ Cada regra, por sua vez é composta pelo SELETOR e as DECLARAÇÕES.
⇨ O seletores podem ser SIMPLES ou COMPOSTOS.
⇨ Cada declaração é composta pela PROPRIEDADE e o VALOR.
⇨ O estilo CSS é composto por várias REGRAS.
⇨ Cada regra, por sua vez é composta pelo SELETOR e as DECLARAÇÕES.
⇨ O seletores podem ser SIMPLES ou COMPOSTOS.
⇨ Cada declaração é composta pela PROPRIEDADE e o VALOR.
Atenção para a sintaxe e formatação do CSS:
🔹Após o seletor, usamos 1 espaço e abrimos a chave.
🔹1 declaração por linha, começando com 1 tab e terminando com ponto e vírgula.
🔹Separamos propriedades e valores com dois pontos e espaço.
🔹A chave é fechada sozinha em uma linha.
🔹Após o seletor, usamos 1 espaço e abrimos a chave.
🔹1 declaração por linha, começando com 1 tab e terminando com ponto e vírgula.
🔹Separamos propriedades e valores com dois pontos e espaço.
🔹A chave é fechada sozinha em uma linha.
Hoje utilizamos o CSS3. Ao contrário de outras linguagens, o CSS não trabalha exatamente com versões, mas com “níveis”. Já tivemos o 1 e o 2, atualmente estamos no nível 3.
A partir do nível 3, o CSS passou também a ser dividido em módulos com propósitos específicos, que são lançados de forma independente.
Alguns módulos que foram lançados no nível 3 são:
✅animações e transições
✅flexbox
✅grid layout
Alguns módulos que foram lançados no nível 3 são:
✅animações e transições
✅flexbox
✅grid layout
Além dos níveis e módulos, também temos SNAPSHOTS, que é basicamente um documento do W3C descrevendo quais recursos do CSS já são considerados padrão / estáveis. Uma snapshot é lançada à cada 2 anos mais ou menos.
Como o CSS está em constante evolução os navegadores tem que se atualizar para adicionar suporte aos novos recursos.
Uma dica de ferramenta é o caniuse.com
Lá você pode consultar os módulos e propriedades para ver a porcentagem de pessoas que já tem acesso à eles
Uma dica de ferramenta é o caniuse.com
Lá você pode consultar os módulos e propriedades para ver a porcentagem de pessoas que já tem acesso à eles
Outra dica: Você pode usar o CodePen.io para praticar seu CSS.
O CodePen é um ambiente de desenvolvimento online e social. Voce cria uma conta gratuita, e pode escrever HTML, CSS e JS direto no navegador e ver o resultado em tempo real. Bem prático!
O CodePen é um ambiente de desenvolvimento online e social. Voce cria uma conta gratuita, e pode escrever HTML, CSS e JS direto no navegador e ver o resultado em tempo real. Bem prático!
Pronto! Essa foi nossa humilde introdução ao CSS, só pra gente alinhar o vocabulário técnico. E aí, o que achou?
Compartilhe essa thread com as mina, os mano, as mona e os menó 🤙
Siga o restante dessa série no meu perfil ou na tag #DicasCSS
Compartilhe essa thread com as mina, os mano, as mona e os menó 🤙
Siga o restante dessa série no meu perfil ou na tag #DicasCSS
