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 seu teste gr�tis

Guia de CSS
DevMedia
39 Conte�dos
450 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.

Teste Gr�tis

Possui uma conta? Login

Por que aprender na DevMedia?

Estudar tecnologia na DevMedia � uma experi�ncia �nica, pelos diferenciais abaixo:

Guias de estudo passo a passo

keyboard_arrow_down

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

keyboard_arrow_down

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

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:

Seja visto por grandes empresas

keyboard_arrow_down

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

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!

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.

Estou Inteiramente satisfeito! J� vim com conhecimento em java de nivel m�dio, mas estou seguindo toda a guia de Java desde o inicio. Muito Bom, parab�ns!

Luis Ferreira

star star star star star

Achei muito top o trabalho que a DevMedia est� fazendo, ensinando passo a passo deste jeito � muito mais facil...Parab�ns pelo �timo trabalho!

Moises

star star star star star_border

Acho que esse tipo de material organizado e em formato de arvore � muito favoravel para o aprendizado! Achei super positivo o conte�do feito desta forma, perincipalmente para os novos programadores! Parab�ns pelo empenho!

Erik

star star star star star

Muito boa a qualidade das aulas online, estou gostando bastante de aprender diversas tecnologias com a Devmedia!

Graciomar Mascarenhas

star star star star star_border

Gostei bastante do primeiro contato. Em seguida assinei por um ano e j� conclui o meu primeiro curso no portal. Gostei muito e espero enquanto esteja buscando me tornar um profissional da �rea de analista e programador de sistemas, ter muita ajuda dos cursos da DevMedia.

Eberton Ferreira

star star star star_border star_border

Tudo o que voc� precisa e mais um pouco. Cheguei no site a pouco tempo como assinante, e j� vi que foi o melhor investimento que poderia ter feito. Conte�do excelente e o que mais me chamou aten��o foram as v�rias formas de aprender. Assistindo, ouvindo, lendo, consertando c�digos. As ferramentas est�o aqui, s� depende de voc� utiliza-las. Recomendo mais do que tudo!

Elen Pires

star star star star star

Parab�ns pelo acompanhamento. Nunca vi um lugar onde o suporte � t�o r�pido.

Gabriel

star star star star star

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.