Guia da linguagem CSS

Independente da página web que você acessa, todas elas, sem excessão, fazem uso do CSS para estilizar os elementos. Inegavelmente a importância dessa ferramenta é gigantesca, principalmente para quem quer ser um desenvolvedor front-end. Nesse guia completo você verá tudo que precisa saber para entender como o CSS funciona.

O que é o CSS?

A sigla CSS vem de “Cascading Style Sheets”, sua tradução literal é, “Folhas de estilo em cascata”. Ele tem o propósito de estilizar elementos do HTML. Portanto, o CSS é responsável por controlar aspectos visuais, como, cores, fontes de texto, espaçamentos e até mesmo posicionamento de elementos.

O CSS foi proposto e desenvolvido por um grupo de trabalho chamado World Wide Web Consortium (W3C), liderado por Håkon Wium Lie e Bert Bos. A primeira versão do CSS, chamada CSS1, foi lançada em dezembro de 1996. Antes do CSS, os estilos e a formatação eram especificados diretamente dentro das tags HTML. Isso tornava o código HTML mais complexo, difícil de manter e atualizar.

No entanto, a formatação visual das páginas da web não possuía uma padronização clara. Com o passar do tempo, o CSS passou por várias atualizações, tornando-se a poderosa ferramenta que é hoje.

Ao longo deste artigo, abordaremos diversos pontos que irão ajudá-lo a compreender melhor o funcionamento do CSS.

Como e quais as formas de criar estilizações com CSS?

Existem diversas formas de criar estilizações com CSS, como usar o estilo inline, inserir o CSS dentro da tag style ou em um arquivo separado. No entanto, a opção mais amplamente adotada é a última, pois permite uma clara separação entre a estrutura (HTML) e o estilo (CSS).

No entanto, é necessário selecionar os elementos que desejamos estilizar. Para isso, utilizamos os seletores, que são abordados de maneira detalhada no artigo Seletores Básicos do CSS. Em resumo, os seletores nos permitem indicar qual elemento receberá o estilo. A forma de seleção mais indicada e amplamente utilizada é por meio das classes, mas também é possível utilizar id ou até mesmo selecionar pelo nome da tag.

Caso você queira se aprofundar ainda mais nesse tópico, temos o artigo Seletores avançados do CSS, onde são abordadas formas mais avançadas de seleção de elementos HTML.

Box model e estilizações com CSS

Curso HTML5 + CSS3 - Propriedades e seletores avançados

Conhecer o curso

O box model é um conceito fundamental para criar estilizações com CSS, é através desse modelo de caixa dos elementos, que o CSS define a estrutura de uma elemento. Permitindo, assim, a motificação de medidas da largura e altura, espaçamento entre os elementos e borda. Tudo isso através das propriedades, width, height, padding, border, e margin. Esse conceito é amplamente abordado no artigo Conhecendo o box model. No nosso canal do YouTube temos um conteúdo aberto que também explica como funciona o box model.

Ainda assim, existem outras possibilidades. O CSS possui uma variedade enorme de opções de estilização. Vou deixar abaixo uma lista de propriedades mais comuns do CSS.

• background-color: usamos para alterar a cor de fundo do elemento;
• color: usada para alterar a cor do texto;
• text-align: alinha o texto, ao centro, esquerda, direita, ou deixa o texto justificado;
• width: definimos a largura dos elementos;
• height: define a altura dos elementos;
• border: usada para alterar forma, espessura e cor das bordas;
• padding: espaçamento entre o limite do elemento até sua borda;
• font-size: alteramos o tamanho da fonte de texto;
• font-family: usada para modificar a família de fontes.
  Curso HTML5 + CSS3 - Dominando o Flexbox

  Conhecer o curso

Posicionando elementos com CSS

Além disso, o CSS nos permite alterar a posição dos elementos. Por exemplo, por padrão, os navegadores definem todos os elementos HTML com a posição static. No entanto, é possível modificar esse comportamento utilizando a propriedade position, que aceita diversos valores. Além do static, temos as opções absolute, relative, fixed e sticky, cada uma com efeitos de posicionamento distintos. No artigo Position, estilizando elementos com CSS, é possível encontrar detalhes sobre o funcionamento de cada um desses valores.

Flexbox e CSS Grid layout

O CSS oferece, além das formas que vimos para posicionar os elementos, duas outras maneiras: o Flexbox e o Grid layout. Utilizando essas duas abordagens, é possível posicionar um grupo de elementos HTML de uma só vez. No geral, ambas as formas são semelhantes, porém possuem algumas características distintas.

Curso HTML5 + CSS3 - Dominando o CSS Grid Layout

Conhecer o curso

O Flexbox é mais indicado para se usar quando queremos definir elementos em um único sentido, já o Grid layout funciona muito bem quando queremos dispor os elementos nos dois sentidos, o horizontal e vertical. Aqui no nosso blog temos conteúdos diversos abordando esses dois temas. O artigo CSS Flexbox - Um Guia Interativo (Parte 1 - Containers) e o CSS Flexbox - Um Guia Interativo (Parte 2 - Itens) entram a fundo nesse tema. Dentro da plataforma temos um curso dedicado a esse assunto, o HTML5 + CSS3 - Dominando o Flexbox. Em uma forma mais resumida, temos contúdo aberto no canal da TreinaWeb no YouTube.

Já para o CSS Grid layout, temos os artigos CSS Grid – Um Guia Interativo (Parte 1 – Containers) e o CSS Grid – Um Guia Interativo (Parte 2 – Itens). Também temos na nossa plataforma o curso HTML5 + CSS3 - Dominando o CSS Grid Layout, e o vídeo no YouTube.

Animações e efeitos com CSS

Estilizações com CSS oferecem diversas propriedades voltadas para animações e efeitos em elementos. Por meio do CSS, é possível aplicar diferentes filtros utilizando a propriedade filter. Com ela, é possível alterar a opacidade da imagem, ajustar a saturação e realizar outras modificações. Todas essas possibilidades são abordadas detalhadamente no artigo CSS Filters - Tratamento de imagens em sua página

Além disso, no curso HTML5 + CSS3 - Trabalhando com filtros de imagem e elementos, você terá uma abordagem mais visual sobre como utilizar os filtros de imagens, oferecendo uma compreensão mais prática desses recursos.

Ainda assim, podemos explorar diversos outros tipos de efeitos e animações usando CSS. Gostaria de sugerir alguns artigos que abordam esses temas: Efeito Parallax apenas com CSS, Como fazer animação infinita de fundo com CSS e CSS: Aprenda a Criar o Efeito de Flip Cards. Através desses artigos, você terá uma ideia do poder do CSS e aprenderá a criar efeitos impressionantes.

Responsividade

Um mesmo site é acessado por diversos dispositivos diferentes, desde TVs até celulares. A adaptação a essa variedade de dispositivos é possibilitada pela responsividade. O CSS desempenha um papel fundamental nesse aspecto, permitindo alterar o posicionamento do texto, a disposição dos elementos e até mesmo remover itens HTML, de acordo com o tamanho da tela que acessa a página. Todas essas ações têm o objetivo de tornar a página responsiva.

A responsividade é um dos temas mais importantes no desenvolvimento front-end, como você pode imaginar. Por esse motivo, temos um curso dedicado aqui na plataforma chamado HTML5 + CSS3 - Web design responsivo. Caso você prefira conteúdo escrito, temos os artigos Media queries, o que são e como usar no CSS? e Media Query. Colocando em prática seu uso. que abordam em detalhes a importância e o uso das media queries. Em nosso canal do YouTube, também temos vídeos que resumem esse tema.

Curso HTML5 + CSS3 - Web design responsivo

Conhecer o curso

Frameworks CSS

Os frameworks CSS foram criados com o objetivo de simplificar a estilização, permitindo a importação de uma série de estilos pré-definidos. Com eles, é possível adicionar classes aos elementos HTML e o estilo correspondente a essa classe é aplicado automaticamente. Muitos desenvolvedores utilizam esses frameworks em conjunto com seus próprios estilos para agilizar o processo de desenvolvimento.

O Bootstrap e o Tailwind são os dois frameworks CSS mais populares. Em nossa plataforma, oferecemos a formação completa Desenvolvedor Bootstrap que aborda todos os aspectos necessários para utilizar essa ferramenta em seus projetos. Caso ainda não esteja familiarizado com o Bootstrap, o artigo O que é Bootstrap? pode fornecer uma base sólida.

O segundo framework, o Tailwind, também é amplamente utilizado, mas requer uma maior familiaridade com JavaScript para ser utilizado. O artigo O que é Tailwind CSS e como instalar via CDN? explica detalhadamente essa questão.

Pré-processadores CSS

Além disso, o CSS conta com uma ferramenta adicional que amplia ainda mais o seu poder: os pré-processadores. Essas ferramentas adotam uma sintaxe distinta da convencional e permitem a criação de funções e declarações de estilos aninhadas, entre outras possibilidades.

Atualmente, existem vários pré-processadores diferentes, cada um com sua própria sintaxe. Os mais populares são o Sass, Less e Stylus. No artigo Os Pré-Processadores CSS, é descrito o que é um pré-processador e explicados em detalhes cada um deles.

Conclusão

Em resumo, podemos concluir que as estilizações com CSS desempenham um papel fundamental no desenvolvimento front-end, sendo uma das ferramentas mais importantes para garantir a estética das páginas. No entanto, é comum que muitas pessoas não deem a devida importância ao estudo aprofundado dessa ferramenta, devido à sua curva de aprendizado ser relativamente rápida. Após um período de estudo adequado, é possível criar páginas com estilos bem elaborados. No entanto, é crucial destacar que o CSS é extremamente poderoso e exige dedicação daqueles que desejam se tornar desenvolvedores front-end.

É importante ressaltar que, aqui na Treinaweb, oferecemos conteúdos dedicados a essa ferramenta essencial presente em toda a web. Vale resaltar também que nossa formação Desenvolvedor Especialista Front-end conta com mais de 75 horas de vídeo aulas e 477 exercícios de fixação de conteúdo. Aqui estão alguns dos cursos que fazem parte dessa formação:

• HTML5 + CSS3 - Primeiros passos;
• HTML5 + CSS3 - Fundamentos;
• HTML5 + CSS3 - Apresentação de Dados;
• HTML5 + CSS3 - Formulários;
• HTML5 + CSS3 - Box model e Posicionamento de Elementos;
• Google Chrome Developer Tools;
• JavaScript - Fundamentos;
• JavaScript - Trabalhando com strings;
• HTML5 + CSS3 - Criação de site de catálogo de professores.