Minha jornada com a bolsa de estudos em desenvolvimento web do Instituto Nu e Descomplica - CSS: propriedades e dicas.
E aí, galera! Tudo bem? Hoje vou contar um pouco sobre a minha nova aventura: ganhei uma bolsa de estudos de desenvolvimento web pelo Instituto Nu e pela plataforma Tech do Descomplica. É muita emoção, né?
Bom, na plataforma vamos estudar sobre Projeto de Vida, que aborda questões sociais do nosso país, Introdução ao desenvolvimento Web e Técnicas e Ferramentas para Gestão de Projetos. Mas, no post de hoje, vou focar no assunto da Introdução ao desenvolvimento Web, mais especificamente, sobre o CSS. Bora aprender um pouco mais sobre isso?
O que é CSS e como ele funciona?
CSS é uma sigla para Cascading Style Sheets, que é usado para formatar o layout de uma página da web. Com CSS, você pode controlar a cor, a fonte, o tamanho do texto, o espaçamento entre os elementos, como os elementos são posicionados e dispostos, quais imagens de plano de fundo ou cores de plano de fundo devem ser usadas, exibições diferentes para diferentes dispositivos e tamanhos de tela e muito mais.
Efeito Cascata Cascading? Que é isso?
Ah, o efeito cascata cascading... parece complicado, né? Mas na verdade é bem simples. Ele funciona como uma cascata mesmo, em que a folha de estilo mais próxima do elemento é a que tem maior prioridade. Ou seja, se você definir um estilo específico para um elemento e outro para um elemento filho, o estilo do elemento filho terá mais prioridade.
Como aplicar o CSS?
Podemos aplicar o CSS de 3 formas:
- In-line, diretamente pelo próprio elemento HTML.
- Externo, criando um arquivo .CSS separado.
- Importando ou interno, quando utilizamos a tag style.
Mas é importante ressaltar que o ideal é utilizar arquivos CSS separados e seguir boas práticas de programação.
Seletores, valores e propriedades
Outro ponto importante são os seletores, valores e propriedades. Os seletores são usados para selecionar os elementos HTML que desejamos estilizar. Já os valores definem o que queremos que o estilo faça com o elemento selecionado. E, por fim, as propriedades definem o que queremos que aconteça com o valor escolhido.
Classes e IDs
Além dos seletores, é possível utilizar classes e IDs para aplicar estilos em elementos específicos. As classes são usadas para agrupar elementos com estilos semelhantes, enquanto os IDs são usados para elementos únicos.
Cores, posicionamento, tamanho e outras
Com CSS, é possível definir diversas propriedades para os elementos HTML. É possível controlar cores, posicionamento, tamanho, fontes, efeitos de transição, animações e muito mais. As possibilidades são infinitas!
Margin, Padding e Border Box - Box Sizing
Esses conceitos também são muito importantes para a formatação dos elementos na página. O margin define o espaço entre os elementos e a borda da página, o padding define o espaço entre o conteúdo do elemento e a sua borda, e o border box - box sizing define como o tamanho do elemento é calculado.
Agora que você já sabe o que é CSS e como ele pode transformar o visual do seu site, é hora de colocar em prática tudo o que aprendemos. Mas calma lá, não precisa se preocupar se ainda está um pouco confuso sobre como usar todas essas propriedades e valores.
Uma dica valiosa é treinar bastante. Conhece o CSS Diner? É um jogo online que te ajuda a praticar seletores CSS de forma divertida e interativa. E se você prefere jogos de tabuleiro, pode experimentar o Grid Garden, um jogo que ensina sobre layouts de página usando CSS Grid.
Além disso, é importante lembrar que existem bibliotecas e frameworks de CSS que podem ajudar muito no desenvolvimento do seu site. O Bootstrap e o Tailwind são exemplos de ferramentas que oferecem uma grande variedade de estilos pré-definidos, o que pode agilizar muito o processo de desenvolvimento.
Mas atenção: é fundamental que você domine bem o CSS antes de se aventurar em bibliotecas e frameworks. Caso contrário, pode acabar criando sites com uma aparência genérica e sem personalidade.
E aí, pronto para mergulhar de cabeça no mundo do CSS? Lembre-se que o conhecimento é a chave para o sucesso na carreira de desenvolvedor web. E se você está interessado em aprender mais sobre outras áreas do desenvolvimento web, não perca a oportunidade de se juntar a nós no Instituto Nu e na plataforma Tech do Descomplica.
E não se esqueça, é possível transformar o aprendizado em algo divertido e prazeroso. Então vamos lá, solte sua criatividade e transforme seu site em uma verdadeira obra de arte. Acesse agora mesmo o link https://parceiros.descomplica.com.br/nubank/nuvem e comece sua jornada rumo ao sucesso!