diff --git a/pt-br/css.pt.html.markdown b/pt-br/css.pt.html.markdown
new file mode 100644
index 00000000..8ffd8d62
--- /dev/null
+++ b/pt-br/css.pt.html.markdown
@@ -0,0 +1,257 @@
+---
+language: css
+filename: learncss.css
+contributors:
+ - ["Mohammad Valipour", "https://github.com/mvalipour"]
+ - ["Marco Scannadinari", "https://github.com/marcoms"]
+ - ["Geoffrey Liu", "https://github.com/g-liu"]
+ - ["Connor Shea", "https://github.com/connorshea"]
+ - ["Deepanshu Utkarsh", "https://github.com/duci9y"]
+translators:
+ - ["Gabriel Gomes", "https://github.com/gabrielgomesferraz"]
+lang: pt-br
+---
+
+Nos primeiros dias da web não havia elementos visuais, apenas texto puro. Mas com maior desenvolvimento de navegadores da web, páginas web totalmente visuais também se tornou comum.
+
+CSS ajuda a manter a separação entre o conteúdo (HTML) e o look-and-feel de uma página web.
+
+CSS permite atingir diferentes elementos em uma página HTML e atribuir diferentes propriedades visuais para eles.
+
+Este guia foi escrito para CSS2, embora CSS3 está rapidamente se tornando popular.
+
+**NOTA:** Porque CSS produz resultados visuais, a fim de aprender, você precisa tentar de tudo em um playground CSS como [dabblet](http://dabblet.com/).
+O foco principal deste artigo é sobre a sintaxe e algumas dicas gerais.
+
+```css
+/* Comentários aparecem dentro do slash-asterisk, tal como esta linha!
+ não há "comentários de uma linha"; este é o único estilo de comentário * /
+
+/* ####################
+ ## SELETORES
+ #################### */
+
+/* O seletor é usado para direcionar um elemento em uma página.
+ seletor { propriedade: valor; / * Mais propriedades ... * / }
+
+/*
+Abaixo um elemento de exemplo:
+
+
+*/
+
+/* Você pode direciona-lo usando uma das suas classes CSS */
+.class1 { }
+
+/* ou ambas as classes! */
+.class1.class2 { }
+
+/* ou o seu nome */
+div { }
+
+/* ou o seu id */
+#anID { }
+
+/* ou utilizando o fator de que tem um atributo!*/
+[attr] { font-size:smaller; }
+
+/* ou que o atributo tem um valor específico */
+[attr='value'] { font-size:smaller; }
+
+/* começa com um valor (CSS 3) */
+[attr^='val'] { font-size:smaller; }
+
+/* ou terminando com um valor (CSS 3) */
+[attr$='ue'] { font-size:smaller; }
+
+
+/* Ou contém um valor em uma lista separada por espaços */
+[otherAttr ~ = 'foo'] {}
+[otherAttr ~ = 'bar'] {}
+
+/* Ou contém um valor em uma lista separada por hífen, ou seja, "-" (U + 002D) */
+[otherAttr | = 'en'] {font-size: smaller; }
+
+
+/* Você pode concatenar diferentes seletores para criar um seletor mais estreito. Não
+ colocar espaços entre eles. */
+classe div.some [attr $ = 'ue'] {}
+
+/* Você pode selecionar um elemento que é filho de outro elemento */
+div.some-parent> .class-name {}
+
+/* Ou um descendente de um outro elemento. As crianças são os descendentes diretos de
+ seu elemento pai, apenas um nível abaixo da árvore. Pode ser qualquer descendentes
+ nivelar por baixo da árvore. */
+div.some-parent class-name {}
+
+/* Atenção: o mesmo seletor sem espaço tem um outro significado.
+ Você consegue adivinhar o que? */
+div.some-parent.class-name {}
+
+/* Você também pode selecionar um elemento com base em seu irmão adjacente */
+.i am just-antes + .Este elemento {}
+
+/* Ou qualquer irmão que o precede */
+.i am-qualquer-elemento antes ~ .Este elemento {}
+
+/* Existem alguns selectores chamado pseudo classes que podem ser usados para selecionar um
+ elemento quando ele está em um determinado estado */
+
+/* Por exemplo, quando o cursor passa sobre um elemento */
+seletor:hover {}
+
+/* Ou um link foi visitado */
+seletor:visited {}
+
+/* Ou não tenha sido visitado */
+seletor:link {}
+
+/* Ou um elemento em foco */
+seletor:focus {}
+
+/* Qualquer elemento que é o primeiro filho de seu pai */
+seletor:first-child {}
+
+/* Qualquer elemento que é o último filho de seu pai */
+seletor:last-child {}
+
+/* Assim como pseudo classes, pseudo elementos permitem que você estilo certas partes de um documento */
+
+/* Corresponde a um primeiro filho virtual do elemento selecionado */
+seletor::before {}
+
+/* Corresponde a um último filho virtual do elemento selecionado */
+seletor::after {}
+
+/* Nos locais apropriados, um asterisco pode ser utilizado como um curinga para selecionar todos
+ elemento */
+* {} /* */ Todos os elementos
+.parent * {} /* */ todos os descendentes
+.parent> * {} /* */ todas as crianças
+
+/* ####################
+ ## PROPRIEDADES
+ #################### */
+
+seletor {
+
+ /* Unidades de comprimento pode ser absoluta ou relativa. */
+
+ /* Unidades relativas */
+ width: 50%; /* Percentagem de largura elemento pai */
+ font-size: 2em; /* Múltiplos de font-size original de elemento */
+ font-size: 2rem; /* Ou do elemento raiz font-size */
+ font-size: 2vw; /* Múltiplos de 1% da largura da janela de exibição (CSS 3) */
+ font-size: 2vh; /* Ou a sua altura */
+ font-size: 2vmin; /* Qualquer um de VH ou um VW é menor */
+ font-size: 2vmax; /* Ou superior */
+
+ /* Unidades absolutas */
+ width: 200px; /* píxeis */
+ font-size: 20pt; /* Pontos */
+ width: 5cm; /* Centímetros */
+ min-width: 50mm; /* Milímetros */
+ max-width: 5 polegadas; /* Polegadas */
+
+ /* Cores */
+ color: # F6E; /* Formato hexadecimal curto */
+ color: # FF66EE; /* Formato hexadecimal longo */
+ color: tomato; /* Uma cor nomeada */
+ color: rgb (255, 255, 255); /* Como valores rgb */
+ cor: RGB (10%, 20%, 50%); /* Como porcentagens rgb */
+ cor: rgba (255, 0, 0, 0,3); /* Como valores RGBA (CSS 3) NOTA: 0 . Isto é o
+ método recomendado. Consulte http://stackoverflow.com/questions/8284365 -->
+
+
+
+
+
+
+