Black november Você e seu amigo por apenas 49,90 por mês! Saiba mais

CSS

CSS é a linguagem que cuida da aparência de uma página web. Nesse guia você encontrará o conteúdo que precisa para iniciar seus estudos em CSS, recurso fundamental para a construção de páginas web.

1

O que é CSS?

O CSS é uma linguagem de estilização, ou seja, ela é utilizada para definir como os documentos escritos na linguagem de marcação (HTML ou XML) devem ser apresentados em termos de formatação e layout. Quando usado junto do HTML, o CSS é a linguagem que utilizamos para customizar as cores, tamanhos, bordas e outros atributos dos elementos da página.

  • Permite customizar graficamente elementos de linguagens de marcação;
  • É essencial para o desenvolvimento web;
  • Não é necessário nada além de um editor de texto para escrever código CSS.
2

Por que aprender CSS?

O CSS nos permite definir como um documento HTML será apresentado para o usuário. O uso do CSS hoje é essencial no desenvolvimento de páginas web, pois é com ele que todo o visual apresentado para o público do seu site será desenvolvido.

  • É com ele que damos um visual bonito a página.
  • Pode ser utilizado tanto no desenvolvimento web para sites, quanto para mobile.
3

Exemplo de código CSS

Veja abaixo um exemplo de código CSS:

  • O CSS permite estilizar elementos HTML através das suas tags ou pelos seus atributos class ou id.
  • O CSS pode ser usado de 3 formas diferentes: inline, com a tag <style> e através de uma arquivo .css.
4

CSS e a Carreira Front-end

Uma página web é a parte visual de um software online. Essa página é criada pelo programador Front-end (web). Um software (uma página web ou aplicativo) é dividido, principalmente, em duas camadas: Front-end e Back-end.

Um programador Front-end/Web cuida da parte visual, ou seja, tudo que o usuário consegue ver e interagir em uma página. A programação Front-end está relacionada com a experiência do usuário final, ou User Experience (UX).

Aplicações Back-end
Figura. Construção de aplicações back-end.

O CSS é essencial para quem deseja seguir carreira na área Front-end web, pois sem essa linguagem você não vai conseguir estilizar suas páginas.

Um ponto importante é que, como um programador profissional você vai utilizar a linguagem CSS em conjunto com um framework ou biblioteca - ferramentas de aceleração do desenvolvimento de aplicação front-end.

Os frameworks/bibliotecas mais utilizados pelos programadores Front-end Web são o Angular e o React.

Ou seja, você não vai trabalhar com a linguagem CSS ‘sozinha’, mas sim com o CSS dentro do Angular ou do React. Aprender CSS é um passo fundamental para a sua carreira Front-end

Características da programação Front-end (web)

  • Envolve conhecimentos referentes a experiência do usuário (UX).
  • Está associado a programação da tela, ou seja, a programar o que aparece para o usuário e como ele vai interagir com a página.
  • Sempre há vagas para programador Front-end já que é quase obrigatório para uma empresa ter uma página web.
  • Envolve programar as ações que o usuário vai fazer na página.
  • Se preocupa com a navegação entre as páginas.
5

CSS e frameworks Front-end

Como vimos, na carreira Front-end você vai, muito provavelmente, trabalhar com as ferramentas mais utilizadas do mercado: Angular e React.

Ou seja, é improvável que você utilize ‘apenas’ a linguagem CSS em um projeto. Em um aplicação front-end profissional, você vai utilizar um framework ou biblioteca, que por sua vez vai utilizar a linguagem CSS para estilização dos elementos.

Angular e React são ferramentas - ou seja, eles são usados para que a programação das páginas Web seja feito da forma mais rápida possível.

O Angular e React são a ferramenta final, é onde você vai encaixar as peças e construir seu software front-end - recebendo dados, estilizando com CSS e exibindo para o usuário final.

Por esse motivo aprender CSS é um pré-requisito para se tornar um programador Front-end completo.

Planos de estudo programador Angular e programador React
Figura. Planos de estudo programador Angular e programador React.

Utilize CSS com Angular ou React para se tornar um programador front-end completo.

O que você vai aprender sobre CSS

timer

Seja PRO Agora

Tenha acesso ilimitado a todo conteúdo.

Teste Grátis

Possui uma conta? Login

Por que aprender na DevMedia?

Estudar tecnologia na DevMedia é uma experiência única, pelos diferenciais abaixo:

Estudo orientado com Guias

Na nossa experiência no ensino de programação ao longo dos anos, vimos que uma das maiores dificuldades dos alunos é ter um ‘plano de estudos’, ou seja, não se perder no meio do caminho.

Para resolver esse problema a plataforma DevMedia é dividida em Guias passo a passo.

Guia de Algoritmo
Figura. Estude através de guias e nunca se perca.
40 tecnologias para você

Estudar programação sempre envolve o aprendizado de mais de uma tecnologia. Na plataforma DevMedia você conta com 40 tecnologia disponíveis - e a melhor notícia, estamos sempre publicando novos conteúdos e exercícios. :)

Guia de Estudo
Figura. 40 tecnologias disponíveis.
Suporte a dúvidas em tempo real

Outro ponto muito importante durante seus estudo é conseguir tirar dúvidas rapidamente. Na DevMedia temos um time de programadores que tem a missão de tirar sua dúvida em tempo real.

Veja o que nossos usuários dizem sobre o Suporte em tempo real :)

Agradeço e venho aqui reconhecer o trabalho de vocês, pois eu nunca fico sem solucionar uma dúvida, seja pelas respostas aos outros usuários ou a mim.
Vocês se dedicam muito ao suporte e fico feliz por ter escolhido a DevMedia tendo em vista este quesito. Acho importante esse feedback pois é o mínimo que posso fazer.

Ismael Lima

Ismael Lima

star star star star star_border

Muito obrigada! Super claro e objetivo, adorei a atenção que vocês dão aos alunos... Parabéns!!! Até a próxima...

Tainá Rocha

Tainá Rocha

star star star star star
Fortaleça o conhecimento com games de exercícios

Para te manter motivado e fortalecer os conhecimentos adquiridos na memória, a plataforma DevMedia também é um game de exercícios de programação.

Cada tópico de estudos contém um game de exercícios! Ao acertar os exercícios você ganha pontos, medalhas e também sobe sua posição ranking da plataforma.

Além disso toda vez que você acerta exercícios de programação você evolui o seu card! Veja abaixo:

Card DevMedia
Figura. Seu Card DevMedia.
Acerte exercícios e chame atenção de grandes empresas

Aqui na Plataforma temos várias empresas parceiras que buscam seus novos programadores conosco!

Quanto mais exercícios você acertar, maior será sua chance de ser convidado a participar do processo seletivo dessas empresas!

Evolua e chame atenção das empresas na plataforma
Notificação de Vaga
Figura. Notificação de Vaga.
timer

Curta 7 dias PRO grátis

Vem testar nossa Plataforma gratuitamente.

Iniciar Teste

Possui uma conta? Login

O que dizem

Confira o que andam dizendo sobre nós após concluírem seus objetivos em nossa Plataforma.

Feedback dos Alunos

4.6
star star star star star_border

876 avaliações

star star star star star
85% close
star star star star star_border

7%

star star star star_border star_border

6%

star star star_border star_border star_border

2%

star star_border star_border star_border star_border

0%

Katia

Há 15 dias

Katia

star star star star star_border

Curso simples e rápido, mas demais! Muito explicativo.

Carina Ramires

Há 22 dias

Carina Ramires

star star star star star

Perfeita esta apresentação. Essa série, para quem está começando cm vários conceitos ao mesmo tempo, fica bem mais seguro do caminho a ser seguido. Parabéns! Muito preciso e didático...

Avatar

Há 39 dias

Flavio Burgardt

star star star star star

Ótimas respostas. Faz tempo que tento encaixar esta pergunta. Na verdade já tentei, mas não consegui respostas completas assim. Perfeito. Muito obrigado mesmo.

Jose Nunes

Há 45 dias

Jose Nunes

star star star star star_border

Ótimo, estou aprendendo muito com os cursos da DevMedia. Parabéns pessoal!!

Confira outros conteúdos

Veja todos os conteúdos

Seja PRO Agora

Tenha acesso ilimitado a todo conteúdo.

Teste Grátis

Possui uma conta? Login

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar