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.

Comece sua carreira

Guia de CSS
DevMedia
13 Conte�dos
500 Exerc�cios
Iniciante
876 avalia��es

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.

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.

Exemplo de c�digo CSS

Veja abaixo um exemplo de c�digo CSS:


.box-usuarios {
margin: 0 auto;
     text-align: center;
     height: 60px;
	width: 100%;
}
p.texto-usuarios { 
background-color: red; 
color: blue;
font-size: 18px;
}
.texto-destaque {
	color: #000;
	font-weight: 600;
	font-size: 26px;
}

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.

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.

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.

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

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

Saiba mais sobre CSS

O que voc� vai aprender sobre CSS

Introdu��o keyboard_arrow_down
- lock O que � CSS?
- lock Introdu��o pr�tica ao CSS
- lock Introdu��o
- lock Aplicando estilos a elementos de texto
- lock @font-face
- lock Texto
- lock Colors
- lock Background
- lock Unidades
- lock 50 Exerc�cios
Seletores keyboard_arrow_down
- lock Seletores
- lock Conhecendo os seletores do CSS3
- lock 50 Exerc�cios
Caixas (Box Model) keyboard_arrow_down
- lock Box Model
- lock Controlando o tamanho das caixas
- lock Bordas, margem e preenchimento
- lock Trabalhando com bordas em CSS3
- lock border-radius
- lock Como criar elementos arredondados
- lock box-sizing
- lock Exibindo e ocultando caixas
- lock Background
- lock Opacity
- lock text-shadow e box-shadow
- lock 50 Exerc�cios
Posicionamento keyboard_arrow_down
- lock Posicionamento
- lock Posicionamento - Position
- lock Definindo a posi��o de elementos com fixed, relative e absolute
- lock Posicionamento - Float
- lock Z-Index - Entendendo sobre o Eixo Z na web
- lock 50 Exerc�cios
Flexbox keyboard_arrow_down
- lock Display Flex
- lock Conte�do adapt�vel com CSS Flex
- lock Funcionamento e propriedades
- lock Como centralizar divs em HTML e CSS
- lock 50 Exerc�cios
Pseudo classes e elementos keyboard_arrow_down
- lock Curso de Pseudo classes do CSS
- lock Conhe�a os pseudo-elementos
- lock 50 Exerc�cios
Media Queries keyboard_arrow_down
- lock Media Queries
- lock Trabalhando com Design Responsivo em HTML5
- lock Desenvolvimento responsivo: como resetar os estilos com CSS
- lock 50 Exerc�cios
Boas Pr�ticas keyboard_arrow_down
- lock Vale a pena ver CSS de novo
- lock 50 Exerc�cios
CSS na pr�tica keyboard_arrow_down
- lock HTML e CSS: Tela de login com Flexbox e Media Queries
- lock Criando um menu de tela inteira
- lock 50 Exerc�cios

Seja PRO Agora

Tenha acesso ilimitado a todo conte�do.

Comece Agora

Possui uma conta? Login

Por que aprender na DevMedia?

Estudar tecnologia na DevMedia � uma experi�ncia �nica. Nossa metodologia de ensino � baseada nos seguintes pilares:

Orientar

keyboard_arrow_down

Plano de estudo

Apresentar um caminho claro de por onde voc� deve come�ar os estudos e qual a ordem para se aprender cada mat�ria faz total diferen�a no resultado final. Assim voc� n�o vai perder tempo estudando tecnologias desnecess�rias para aquela etapa do aprendizado e poder� se dedicar inteiramente aos temas propostos.

Suporte ao aluno

Temos uma equipe especializada para tirar todas as d�vidas que surgirem durante os estudos. Todas as perguntas s�o respondidas por especialistas e somente voc� e a nossa equipe ter�o acesso as d�vidas postadas.

Orienta��o individual

Sempre que necess�rio fazemos contato individual com cada aluno para auxiliar no uso da plataforma, a fim de agilizar os estudos. Esse servi�o est� incluso no valor da sua assinatura e voc� poder� solicit�-lo quando desejar.

Ensinar

keyboard_arrow_down

A DevMedia ensina programa��o h� 20 anos, por isso conhecemos bem as principais dificuldades que os iniciantes enfrentam, de modo geral, s�o elas: excesso de termos t�cnicos, muitas tecnologias sendo vistas ao mesmo tempo, pouca pr�tica e quase nenhum entendimento do que est�o fazendo.

Baseado nesses problemas montamos uma metodologia de f�cil compreens�o, que possibilita aprender e praticar ao mesmo tempo, priorizando apenas os conte�dos que s�o essenciais para aquela fase do aprendizado. Evitando perdas de tempo e confus�es desnecess�rias.

Todo aprendizado � feito atrav�s de miss�es que simulam o dia a dia de um programador em come�o de carreira. Ao iniciar uma miss�o, voc� tem acesso a todo o material te�rico que deve ser estudado para conseguir conclu�-la com sucesso. Cada miss�o conclu�da � um mini-projeto que voc� poder� anexar em seu portf�lio.

Praticar

keyboard_arrow_down

Programa��o n�o se aprende sem praticar. Por isso nosso foco � incentivar a pr�tica o tempo todo. S�o muitas as formas de praticar na plataforma, entre elas:

Certificados para o Linkedin

Os exerc�cios tamb�m podem garantir um Certificado de Autoridade. Nele a DevMedia afirma para o mercado que, baseado nos exerc�cios realizados, voc� comprovou que tem conhecimentos sobre determinado assunto. Depois � s� publicar no Linkedin e multiplicar as chances de conseguir sua vaga.

Miss�es pr�ticas

Todo nosso ensino � baseado em concluir miss�es. Entre as miss�es iniciais est�o "Construa seu primeiro site", "Desenvolva uma calculadora", "Monte um App simples". Cada miss�o conclu�da � um passo a mais na sua carreira de programador e mais um projeto conclu�do em seu portf�lio. Isso vai te dar um bom empurr�o em suas primeiras entrevistas de emprego com programador!

Suporte em tempo real

keyboard_arrow_down

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

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

star star star star star

Exerc�cios Gamificados

keyboard_arrow_down

Fortale�a o conhecimento com games de exerc�cios

Todos os conte�dos da Plataforma possuem exerc�cios pr�ticos e todos eles s�o gamificados. Isso significa que ao acertar voc� ganha pontos, medalhas, participa do ranking mensal e v� o seu card de programador evoluir a cada dia. A gamifica��o vai te motivar a estudar com frequ�ncia e seguir progredindo.

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:

Certificados de Autoridade

keyboard_arrow_down

Os Certificados de Autoridade s�o a sua nova maneira de certificar seus conhecimentos para o mercado!

Ap�s responder corretamente 30 exerc�cios de um t�pico, voc� desbloqueia o seu certificado.

Este evolui conforme voc� pratica mais exerc�cios e consome mais conte�dos da tecnologia escolhida por voc�.

Seus Certificados de Autoridade podem ser compartilhados diretamente no seu perfil do LinkedIn!

Inicie sua carreira

Seja um Assinante e mude de vida

Comece Agora

Possui uma conta? Login

Casos de sucesso da DevMedia

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

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

star star star star_border star_border

star star star_border star_border star_border

star star_border star_border star_border star_border

H� 15 dias

Katia

star star star star star_border

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

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...

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.