HTML.....................................................................................................................................2 CAPTULO 1: Introduo...................................................................................................2 O que HTML?..............................................................................................................2 O que o CSS?...............................................................................................................2 O que W3C?.................................................................................................................2 Exercicios........................................................................................................................3 CAPTULO 2: Tags............................................................................................................4 O que so TAGS?............................................................................................................4 Estrutura bsica de um HTML........................................................................................4 TAGS de texto.................................................................................................................8 Tags de estrutura...........................................................................................................15 Tags de tabela................................................................................................................18 Propriedades das tabelas...............................................................................................28 Tags de formulrio........................................................................................................32 Linkagem de pginas.....................................................................................................37 Exerccio.......................................................................................................................39 CAPTULO 3: CSS...........................................................................................................40 Seletores........................................................................................................................40 Propriedades do CSS.....................................................................................................48 Exerccio.......................................................................................................................64

HTMLCAPTULO 1: IntroduoO que HTML?HTML, HyperText Markup Language, uma linguagem criada para manipular e formatar a informao de texto na internet, onde atravs de tags conseguirmos organizar e formatar nosso texto, deixando ele justificado, em itlico, alinhado esquerda ou qualquer outra formatao que se queira. Atravs desta formatao conseguimos tambm diagramar nossos sites, dividir o contedo, criar link`s enfim, dar forma e cor ao nosso site, porm para exibir isso ao usurio, precisamos de um software que interprete estas marcaes e desenhe tudo que configuramos na tela, estes software`s so chamados de Browsers, ou navegadores. Os Navegadores mais famosos hoje em dia so FireFox, Internet Explorer e Google Chrome, cada um tem sua maneira de interpretar o HTML, porm todos seguem os padres e especificaes da W3C tornando assim mais fcil o desenvolvimento de sites para diversas plataformas.

O que o CSS?CSS ou Cascading Style Sheets uma forma de organizarmos as formataes de nosso site, organizando toda a estrutura e cores de forma modular, facilitando assim criao de estruturas diversas. O CSS assim como HTML tambm um arquivo de texto, com uma formatao especfica, o CSS interpretado linha por linha, aonde cada linha executada em tempo real e cada configurao aplicada de acordo com os itens expostos na pagina. Bsicamente devemos utiliza-lo para alterar os estilos da pagina, que podem ser, bordas, fontes, margens internas, margens externas e etc..

O que W3C?W3C um consrcio de vrias empresas que tenta estabelecer os padres de como o HTML, CSS e JavaScript devem ser interpretados, fazendo assim que os navegadores tenham parmetros seguir e no implementem os comando da forma como bem entenderem. O consrcio foi formado pois existia uma grande divergncia sobre o que e como as paginas deveriam ser construidas e no havia um padro concreto, na poca de sua criao Netscape e Internet Explorer faziam uma corrida pelas funcionalidades implementadas, como no tinhamos nenhuma especificao cada um implementava as funes e parmetros como bem entendiam, fazendo com que as paginas feitas com funcionalidades especificas de um Navegado no funcionasse no outro e vice-versa.

A guerra vencida e com a sada do Netscape do mercado de Navegadores, sobrou para o Internet Explorer a culpa e a marca de vilo da baguna que a WEB tinha se tornado, aonde era uma prtica herculeana construir sites para diversos navegadores. Desde ento a Microsoft vem trabalhando para se adequar aos padres de forma que as funcionalidades presentes at ento somente no Internet Explorer parassem de funcionar pouco-a-pouco nas verses seguintes, mas ainda no uma tarefa nada fcil construir um site dentro dos padres que funcione perfeitamente em todos os navegadores, mas agora com os padres bem definidos da W3C j possvel construir um site bem estruturado com funcionalidades bsicas.

Exercicios1. Porque o Internet explorer tem uma fama de pssimo navegador para os desenvolvedores?

2. Cite 3 navegadores presentes no mercado atual

3. Porqu devemos desenvolver nossos sites para que funcionem em divesos ambientes?

4. O que W3C?

CAPTULO 2: TagsO que so TAGS?Tag a forma que encotramos para formatar nosso texto de forma que este pudesse ser fcilmente editado e entendido, possibilitando criar tambm tabelas, inserir imagens, vdeos, animaes FLASH e outros itens normais de uma pagina. Todas as tags em HTML iniciaro com um caracter < (menor que) e terminar com > (maior que) e para cada coisa que se deseja fazer existe uma tag correspondente, devendo assim utilizar cada uma de forma adequada.

Estrutura bsica de um HTML

DOCTYPENa poca anode cada empresa criava seu padro de processamento do HTML no havia maneira de identificar em qual verso eu estava escrevendo meu cdigo ento ficava a encargo do Navegador processar o cdigo e identificar qual a melhor forma de trabalhar esta informao, sendo assim foi criado o DOCTYPE, estavamente para especificar o tipo de documento, facilitando na traduo do mesmo. Hoje em dia por padro utiliza-se HTML 4.1 e para identificar este documento utilizaremos o seguinte cdigo:

Como este um cdigo comum em todas as paginas no precisamos decorar ele, basta copiar das paginas j feitas, para consultar quais as restries de utilizar esta verso do HTML acesse o site http://www.w3.org/TR/html401/struct/global.html ele mostra toda a documentao do HTML 4.01

Esta a tag que marca o inicio do HTML, todo o contedo do site dever estar dentro desta TAG, por regra, o que estivesse fora dele no deveria ser processado pelo navegador, o que infelizmente no ocorre na maioria dos navegadores. Cdigo:

Observe que o nico cdigo que dever ter fora do HTML o DOCTYPE, em alguns caso de processamento at um ou aps o trmino da tag HTML () podem atrapalhar no processamento da mesma.

Esta tag demarca o inicio do cabealho HTML, tudo aqui ser processado antes do corpo do da pagina em si e aonde devemos especificar o tipo de caracteres que vamos trabalhar, alm do titulo e outras informaes que devem vir apenas no , como vemos a seguir. Cdigo:

A tag HEAD dever ser utilizada para agrupar algum conjunto de tags que podem ser utilizados ou no, dependendo do contedo desta. - Esta uma tag com diversas funcionalidades, mas servir neste curso bsicamente para especificarmos o charset com o qual a pagina deve ser processado. Durante este curso iremos utilizar o charset UTF-8, mas existem vrios outros que podem ser utilizados, para obter mais informaes sobre charset acesse o seguinte endereo: http://www.w3.org/TR/REC-html40/charset.html Cdigo:

- Como o prprio nome j explica, atravs desta tag podemos definir qual ser o ttulo de nossa pagina, este titulo ser mostrado pelo navegador, como titulo da janela. Cdigo:

Ttulo da pgina

Resultado:

- A tag script serve para indicarmos o nicio de um cdigo JavaScript ou especificarmos um arquivo para ser importado, sendo o mais comum a segunda opo para evitarmos a poluio visual de nossa pgina. Cdigo:

Para utilizarmos a tag script corretamente devemos especificar 2 propriedades sendo: type Esta propriedade servir para indicar ao navegador que tipo de arquivo ou contedo se trata este script, neste curso trabalharemos somente com JavaScript que o padro atual em todos os navegadores portanto preencheremos a tag sempre com text/javascript. src Aqui deveremos especificar o caminho fsico do arquivo ou o caminho relativo, recomendo a utilizao de caminho relativo, pois facilita a manuteno do cdigo. - A tag link semelhante a tag porm ela servir para importarmos uma folha de estilo (.CSS), que utilizaremos para especificar as formas e cores das nossas paginas.

Cdigo:

Este cdigo bastante simples, sendo necessrio especificar 3 propriades para a tag sendo: href para especificarmos o endereo do arquivo css, geralmente utiliza-se endereo relativo do arquivo para facilitar no desenvolvimento. rel a propriedade rel bem comum no HTML, serve para relacionarmos determinada tag com algo, sendo assim sempre preencheremos neste caso com stylesheet, para que o navegador consiga relacionar o como uma folha de estilos. type assim como no temos que especificar como este arquivo dever ser interpretado para o navegador e mais uma vez temos o valor padro text/css.

A tag body especifica o inicio do corpo de nosso HTML, portanto tudo que especificarmos dentro desta tag ser interpretado como contedo da pagina, alm disso podemos especificar aqui algumas propriedades de nosso corpo, porm recomendado utilizar o CSS na maioria dos casos, sendo alguns: onload esta uma propriedade que chamamos de trigger html ou podemos chamar de evento, enfim, quando especificamos um onload para o body indica que ao trmino do processo da pagina ser executado o seu contedo, como podemos ver no cdigo a seguir: Cdigo: Ttulo da pgina

Resultado:

TAGS de texto - A tag P indica um paragrafo, toda vez que a iniciarmos, ser dado um espao equivalente ao mesmo, sendo que para indicar o fim do paragrafo devemos utilizar como mostra o exemplo Cdigo:Este um pargrafo Este outro pargrafo

Resultado:

, - A tag Strong nos permite colocar parte de um texto em negrito e para informamos que a parte em negrito acabou devemos utilizar Cdigo:Este um pargrafo Este outro pargrafoResultado:Observe que somente a parte que esta entre a tag foi colocado em negrito, tornando assim mais fcil formatarmos nosso texto. , - A tag I ou EM servir para definirmos um texto como itlico, da mesma forma que o devemos encerrar a tag com , observe que em todas as tags oencerramento o seu nome, porm no nicio colocamos uma / que indica ao navegador que aquela tag em especfico indica o trmino de outra. Cdigo:Este um pargrafo Este outro pargrafoResultado: - A tag U dever ser utilizada para deixar parte do texto com sublinhado, que da mesma forma dos anteriores dever ser encerrado com sua tag porm acrescentando uma barra (/) Cdigo:Este um pargrafo Este outro pargrafoResultado: - Alguns programadores acreditam que as tag`s , , , e deveriam ser substituidas pela tag font pois com esta somada ao CSS possvel fazer as funcionalidades de todas as outras tags, a vantagem da eliminao das outras seria que o estilo estaria focado no CSS e a desvantagem que o estilo estaria focado no CSS, explico, imagine que voc tem um texto enorme e todas as vezes que precisarmos um texto negrito tenhamos o seguinte cdigo a principio parece simples identificar que aquela class em especifico para deixar o texto negrito, mas com o decorrer do textos, surgiram tantas variaes de classes, que ficou algo assim , j fica complicado saber o que a class faz, certo? Ao contrrio de: voc consegue fcilmente saber o que este cdigo esta fazendo. Porm a manuteno deste cdigo horrivel, imagine que tenhamos que mudar todos os textos que esto negrito, itlico e verde para normal, sublinhado e azul, com CSS bastaria mudar o class e estaria modificado em todo o documento, j no outro teriamos que modificar item por item. Por padro utilizaremos o CSS, pois prezamos aqui pela facilidade de manuteno e no pela legibilidade do cdigo, veja um exemplo de cdigo utillizando a tag font. Cdigo: .bold { font-weight: bold; } .italic { font-style: italic; } Este um pargrafo Este outro pargrafoResultado:, , e etc.. As tags listada a esquerda so para identificarmos os titulos do texto, para cada nvel de ttulo podemos ter um estilo diferente, configurado no prprio CSS. Cdigo:Ttulo 1 Sub-Ttulo Este um pargrafo Sub-Ttulo Outro Sub-Ttulo Este outro pargrafoResultado:, , - Estas tags so utilizadas para criao de listas ou de menus de navegao do site, podendo ser facilmente estilizadas com CSS a melhor forma de organizar o contedo do site. Cdigo:Item 1Sub-item 1 Sub-item Sub-item Sub-item Sub-item Sub-item Sub-item 2 Sub-item 3 Sub-item 4 Sub-item 5 Item Item Item Item 2 3 4 51 2 3 4 5Resultado:
- BR uma tag diferente das outras j sitadas, ela no tem nenhum contedo dentro, por isso ela j fechada logo em sua declarao inicial, a tag
bsicamente para gerar uma quebra de linha em um pargrafo. Cdigo:Este um
pargrafo Este outro pargrafoResultado:Tags de estrutura - A div define um bloco aonde podemos ter textos, listas ou imagens ou at mesmo um agrupamento de outras divs, desta forma, ento podemos definir que tudo que estiver dentro deste bloco dever seguir uma determinada regra, veja o exemplo: Cdigo: .redText { color:red; } Este um pargrafo Este outro pargrafo Este um pargrafo Este outro pargrafoResultado:Observe que somente os pargrafos que estavam dentro da DIV mudaram de cor. A div uma das tags mais importantes na formatao do nosso layout, pois utilizaremos ela para construir a estrutura no nosso site, definindo atravs dela as reas de navegao. - O span tem um funcionamento parecido com o da DIV, porm ele utilizado no para formar um bloco e sim uma linha. Cdigo: .redText { color:red; border: 1px solid; } Este um pargrafo Este um pargrafo Este outro pargrafoResultado:Observe que coloquei apenas uma linha dentro do Span, e coloquei uma borda para destacar bem qual rea ele esta ocupando, vejamos agora qual seria o comportamento dele com duas linhas: Cdigo: .redText { color:red; border: 1px solid; } Este um pargrafo
Este um pargrafo
Este um pargrafo Este outro pargrafo Resultado Internet Explorer:Resultado no FirefoxComo o SPAN no feito para ter mais de uma linha, cada navegador tenta resolver o problema de uma forma, no gerando um resultado muito agradvel em nenhum dos casos, sendo que no Firefox gerado o resultado mais correto e que utilizado em outros navegadores como Chrome ou Flock.Tags de tabelaAs tabelas, originalmente concebidas para organizar a informaes no formato de linha e coluna, foram amplamente utilizadas no comeo do HTML para criao das estruturas do site, o que deixava o cdigo bem sujo e desorganizado, em meados de 2003 comearam a surgir varias frentes pelo mundo, doutrinando e evangelizando a utilizao de div`s para a criao da estrutura.Na poca foi considerado uma maluquisse que nunca seria vivel, tudo isso pelas complicaes geradas na utilizao de divs, agora era necessrio utilizar CSS para estruturar o site, um modelo de estruturao to pouco difundido agora era fundamental para os programadores modernos, ento iniciou-se a busca pelo conhecimento de como utilizar de forma correta esta linguagem que aprendemos agora e a tabela voltou a ser somente uma tabela. - Indica o nicio de uma tabela, sendo necessrio encerrar ela com , a tabela apenas agrupa outras tags de tabela na formao de sua estrutura, no podendo ser incluido nenhum contedo nela. Cdigo: Resultado:Como podemos ver, a tag sozinha no representa nada, servindo apenas para estruturar nossa tabela. - Indica que estamos iniciando o cabealho de nossa tabela, tambm sendo obrigatrio encerramos esta tag com e como na tag no possvel inserir contedo servindo apenas para agrupar outras tags, obrigatriamente estar dentro de uma tag Cdigo: Resultado:Mais uma vez s uma imagem em branco - Mais uma tag de agrupamento, esta ser utilizada para agruparmos as linhas e colunas referentes ao contedo da tabela e como a tag dever estar sempre dentro da tag e sempre dever ser encerrada com . Cdigo: Resultado:Como todas as tags de agrupamento o resultado no influencia no visual da pagina. - Esta assim como e uma tag para agruparmos as linhas e colunas referentes ao rodap da pagina e dever sempre ser encerrada como Cdigo: Resultado: - Uma tag no muito utilizada, porm muito til, ela serve para indicarmos um titulo para a nossa tabela, sendo mais fcil centralizar e apresentar do que criar um ou para isso Cdigo: Ttulo Resultado: - O TR servir para criarmos uma linha na tabela, ele tambm uma tag de agrupamento, mas desta vez ele ir agrupar nossas colunas. Cdigo: Ttulo Resultado:Como podemos ver assim como todas as tags de agrupamento ela no representa nada em nossa pagina. - A tag TH uma coluna responsvel por criar uma coluna de cabealho, a diferena desta para as outras colunas que por padro seu contedo ser em negrito e centralizado, ele dever ser encerrado com o e dever sempre estar dentro de uma tag Cdigo: Ttulo Coluna Cab. 1 Coluna Cab. 2 Resultado:A tag th tambm pode ser utilizada no rodap da tabela, dando assim o mesmo efeito do cabealho. Cdigo: Ttulo Coluna Cab. 1 Coluna Cab. 2 1:1 1:2 2:1 2:2 Rodap Col 1 Rodap Col 2 Resultado: - Esta uma coluna padro, seu contedo vir sem nenhuma formatao e sempre dever ser encerrada com , toda dever sempre estar dentro de uma (linha) Cdigo: Ttulo Coluna Cab. 1 Coluna Cab. 2 1:1 1:2 2:1 2:2 Resultado:as TD`s podero ser utilizadas tambm no rodap caso no precisem de destaque Cdigo: Ttulo Coluna Cab. 1 Coluna Cab. 2 1:1 1:2 2:1 2:2 Rodap Col 1 Rodap Col 2 Resultado:Propriedades das tabelasO cellspancing ir atuar com a disncia entre uma celula e outra e ser aplicado a toda a tabela. Cdigo: Ttulo Coluna Cab. 1 Coluna Cab. 2 1:1 1:2 2:1 2:2 Rodap Col 1 Rodap Col 2 Resultado:Com o cellpedding poderemos mudar o espao interno de cada celula (TD), permitindo assim afastar ou aproximar as informaes da borda. Cdigo: Ttulo Coluna Cab. 1 Coluna Cab. 2 1:1 1:2 2:1 2:2 Rodap Col 1 Rodap Col 2 Resultado:Com o colspan poderemos unir duas colunas, de forma que esta se torne uma s, como se a linha tivesse apenas uma coluna. Cdigo: Ttulo Coluna Cab. 1 Coluna Cab. 2 1:1 2:1 2:2 Rodap Col 1 Rodap Col 2 Resultado:O rowspan far o mesmo que o colspan, porm ir unir 1 ou mais colunas entre as linhas. Cdigo: Ttulo Coluna Cab. 1 Coluna Cab. 2 1:1 1:2 2:2 Rodap Col 1 Rodap Col 2 Resultado:Tags de formulrio - A Tag Form um agrupador de campos (fields) e portanto no gera nenhuma interferncia no visual da pagina, todos os campos que corresponderem a um determinado formulrio devem estar entre a tag e e nunca poderemos ter um dentro de outro. O Form tambm responsvel por definir como os dados sero enviados e para onde ele ser enviado devendo passar estas informaes atravs do parmetros method e action respectivamente. Method O atributo method define como os dados sero enviados, podendo ser post ou get, sendo que POST ir enviar os dados atravs do cabealho e o get ir formar uma querystring com os campos sendo: Exemplo 1: Ttulo da pgina Neste primeiro exemplo estamos enviando o campo teste com o valor teste para index.php atravs do mtodo POST. Exemplo 2: Ttulo da pgina J este exemplo estamos enviando o campo teste com o valor teste para index.php via mtodo GET, observe que neste exemplo, ao clicar em submit a pagina ser encaminhada para index.php, porm teremos o campo get especificado no endereo, ento seriamos encaminhados para index.php?teste=teste&enviar=Enviar - Input o principal tipo de campo que ns temos e ser utilizado na maior parte das vezes sendo sua sintax bem simples e contando com algumas poucas propriedades. Id a propriedade ID nica em cada campo, sendo que ao decidirmos que o campo X ter o id txtCampoX no poder haver outro id igual na pagina, seu preenchimento deve seguir o padro que no permite caracteres especiais nem espao e o primeiro caracter no pode ser numrico. name Name serve para definirmos o nome do campo dentro daquele formulrio, desta forma poderemos identificar quando tivermos que processar as informaes no PHP. Este pode ser preenchido com qualquer coisa, e para decidir seu nome seguimos as mesmas regras do campo id.value aqui ser armazenado o valor do inserido no campo, ele pode iniciar j com algum valor ou, caso o usurio digite algo no campo este valor poder ser recuperado atravs desta propriedade. Type Existem vrios tipos de de input`s, sendo cada um para uma utilidade, sendo que por padro o input ser do tipo text que permite a insero de texto livre, veja abaixo outros tipos: Text como j citado o campo com type igual a text permite a digitao de texto livre.radio Este tipo do tipo de seleo, ele permite que voc relacione outros inputs deixando assim que somente um seja selecionado pelo usurio.checkbox Semelhante ao radio, porm permite que vrias opes sejam selecionas.file Esta tag nos permite selecionar um arquivo para ser enviado junto com a pagina, como na maioria dos portais aonde enviamos nossas fotos, porm para ele funcionar devemos informar uma outra propriedade na tag form sendo esta enctype='multipart/form-data' assim informamos ao navegador que o form esta enviando arquivos tambm. Cdigo: Ttulo da pgina Resultado: - O campo Select, comumente chamado de combobox ele permite crier uma lista de opes permitindo que o usurio selecione uma ou mais opes, como este campo tambm tratado como um input ele possui as mesmas propriedades do input, tendo tambm como propriedades obrigatrias o Id e o Name. Cdigo: Ttulo da pgina Carro Moto Barco Resultado:Observe que para cada opo que apresentamos no select tambm utilizamos a tag a tag option formada apenas da proidade value e seu contedo. - Agora com o nosso ltimo tipo de input, assim como os outros ele tem como propriedade obrigatria o name e o id seguindo as regras de nomeclatura, alm destas propriedades tambm podemos especificar as rows ou seja, o nmero de linhas que sero apresentadas em tela e as cols que so o nmero de colunas apresentadas, determinando assim o tamanho do input. Cdigo: Ttulo da pgina Resultado:Linkagem de pginasO grande avano na internet foi a criao de hyperlinks que com um clique nos permitia abrir uma nova pagina, os hyperlinks podem estar em textos, palavras ou imagens e para criarmos eles precisamos utililizar a tag Esta tag pode ser utilizada para links para outra pagina ou dentro da prpria pagina, as chamadas ncoras.Link para outra paginaAo linkar um contedo de outra pagina que esta no mesmo site, no precisamos necessriamente informar o caminho completo do arquivo, podemos apenas indicar a posio deste arquivo em relao ao atual, mas sempre que tivermos que linkar um arquivo de outra pagina obrigatrio informamos o endereo completo, por exemplo, um link para o site do terra seria para o endereo http://www.terra.com.br Cdigo: Ttulo da pgina Pgina do Terra Resultado:ncoraAs ncoras muito til para navegao dentro do texto, ou dentro de uma pagina pequena, aonde no se justifica a criao de um novo arquivo para aquele contedo em especifico, para criarmos uma ncora devemos ter duas tags sendo que uma o link e a outra o destino do link, veja o exemplo a seguir. Cdigo: Ttulo da pgina Ttulo 1




























Ttulo 1 texto texto texto Resultado:Aps o click:Exerccio1) Defina para que serve as seguintes tags: a. b. c. d. , e. f. , g. h. 2) Monte um arquivo HTML com uma lista de itens presentes na sala de aula separados em sub-itens por: Informtica, papelaria e outros. 3) Monte em outro arquivo HTML uma tabela com 4 colunas e 10 linhas que contenham, os nomes, sobrenome, idade e email das pessoas da sala. 4) Crie um novo arquivo e monte um formulrio que solicite os dados de cliente de uma loja, tente utilizar todos os tipos de input`s. 5) Agora vamos definir a estrutura inicial de nosso site, aonde teremos na index a seguinte estrutura que ser seguida em todas as pginas: #Cabealho#Outras ofertas #Categorias e sub-categorias #Destaques e promooes #Formulrio de login #Lanamentos#Rodap Esta estrutura dever ser criada atravs de e outras tags, a formatao ser feita num prximo captuloEsta a viso final que ser data, d um id para cada DIV e preencha pelo menos com um com o ttulo de cada rea.CAPTULO 3: CSSSeletoresO CSS bsicamente modela a estrutura do site atravs das propriedades das tags, sendo estas geralmente as id e class, cada uma com seu devido proposito sendo o id utilizado quando queremos mudar o estilo de um nico item na pgina e o class de um conjunto de itens. Alm das propriedades, podemos usar tambm a tag para agrupar diversos itens com a mesma tag em um grupo. Nos exemplos a seguir utilizaremos um cdigo padro (que foi baseado no ltimo exerccio do captulo 2) para acompanharmos a mudana no layout e suas implicaes. Cdigo: Ttulo da pgina Header Menu Body Texto de exemplo Texto de exemplo Texto de exemplo Texto de exemplo Texto de exemplo Texto de exemplo Texto de exemplo Texto de exemplo Texto de exemplo
Texto de exemplo Texto de exemplo Texto de exemplo Texto de exemplo Texto de exemplo Ofertas Rodap Resultado:O primeiro seletor que utilizaremos ser o seletor que modifica o layout atravs da tag, neste exemplos modificaremos todos os itens que utilizam da tag . Para facilitar a leitura o cdigo padro s ser modificado dentro da tag e s esta ser mostrada nos exemplos. Cdigo h1 { font-family: Verdana; text-decoration: underline; } Resultados:Veja que apenas utilizando o selector h1, conseguimos mudar a fonte e sublinhar o texto. Vejamos agora alguns detalhes da sintax utilizada. h1 { font-family: Verdana; text-decoration: underline; } na primeira linha declaramos qual tag queremos modificar, no caso h1, em seguida abrimos as chaves ({) demos um enter e inserimos as propriedades que queriamos mudar naquela tag e logo fechamos com uma outra chave (}). A sintax bem simples e nos permite entender bem o que aquelas 4 linhas fazem com o cdigo, lembrando que podemos aplicar as mesmas propriedades a outras tags que ficaria da seguinte forma: h1, p { font-family: Verdana; text-decoration: underline; }e o resultado seria:Mas por enquanto vamos manter a modificao apenas no H1 e vamos modificar outras divs, para formatarmos melhor nossa pagina. Cdigo: h1 { font-family: Verdana; text-decoration: underline; } div { float:left; width: 100%; } Resultado:Observe que mandamos que todas as div`s flutuassem a esquerda e logo em seguida pedimos que elas tivessem 100% de largura, fizemos isso pois o float a nica forma de conseguirmos que uma div fique do lado de outra e colocamos 100% de largura, pois no todas que queremos que fiquem desta forma, agora vamos fazer com que algumas especificas fiquem uma do lado da outras, faremos isto utilizando o mtodo seletor pelo id. Cdigo: h1 { font-family: Verdana; text-decoration: underline; } div { float:left; width: 100%; } #nav { width: 20% }#body { width: 60% } #offer { width: 20% } Veja que colocamos uma tralha (#) ao lado do ID de cada div que queriamos modificar, desta forma o navegador ao interpretar sabe que estamos especificando uma div e em seguida modificamos a largura delas, especificando que as laterais ocupariam 20% do espao e o body ocuparia 60%, totalizando 100% do espao da pagina. Resultado:Agora sim conseguimos posicionar cada div da forma que queriamos, deixando ela do lado uma da outra. Agora no prximo exemplo veremos como selecionar uma tag especifica dentro de um id, neste caso modificaremos o texto () que esta dentro da id body. Cdigo: h1 { font-family: Verdana; text-decoration: underline; } div { float:left; width: 100%; } #nav { width: 20% } #body { width: 60% } #offer { width: 20% } #body p { font-weight: bold; } aqui especifcamos os nveis que queremos acessar, primeiro o navegador ir procurar pelo id body e logo aps ira selecionar todos as tags dentro dele e efetuar o que estamos pedindo de forma bem prtica e organizada. Resultado:e assim podemos proceder de diversmas maneiras e formas at chegarmos ao resultado esperado.Propriedades do CSSComo explicado as propriedades do CSS devem ficar entre chaves ({ }) aps especificarmos quais itens eles devem modificar e agora vamos especificar as principais propriedades do CSS, para que possamos elaborar nossa estrutura. Float Esta a propriedade faz com que o item da pagina comece a flutuar, desta forma podemos posicionalo com maior facilitade, porm ao especificar float para um elemento da pagina devemos ter em mente que todos os outros elementos tambm tero que ter um float definido para que os itens no fiquem desalinhados. Cdigo: Ttulo da pgina div { float: left; } Menu Body Antes de definirmos o float:Depois de definirmos o float:Observe que antes do float as divs quebravam a linha automticamente, e aps definirmos o float ele foi para o lado. Existem dois valores possveis para o float, sendo que acima definimos como left e podemos definir como right que ficaria desta forma:Observe que alm de mudar o lado em que os itens estavam, isto ocorre pois menu foi definido antes de body, portanto jogado para a direita antes, ficando assim, mais a direita. border Com esta propriedade podemos especificar a borda de diversas formas, sendo a mais comum, ao definirmos esta propriedade devemos especificar sua largura em pixels e seu modelo, no cdigo abaixo utilizamos o tipo solid mas tambm podem ser utilizadas dotted, dashed, double, groove, ridge, inset, outset, cada uma forma a borda, que pode ser testada por voc a partir do exemplo a seguir. Alm de border podemos definir da mesma forma as seguintes propriedades. border-left: define apenas a borda da esquerda. border-right: define apenas a borda da direita.border-top: define apenas a borda de cima. border-bottom: define apenas a borda de baixo. Cdigo: Ttulo da pgina div { float: left; border: 1px solid; } Menu Body Resultado:border-color Aqui podemos definir a cor da borda, a cor pode ser definida em hexadecimal. Cdigo: Ttulo da pgina div { float: left; border: 1px solid; border-color: #C5C5C5; } Menu Body Resultado:E da mesma forma que podemos definir somente a borda que desejar, a sintax ser Border-lado-color: #c5c5c5;Exemplo: border-left-color: #c5c5c5; Resultado:margin A propriedade margin especifica uma distncia entre um item e outro do html, sendo que podemos especificar a disncia da margem que quisermos, para isto basta especificar como por exemplo margin-left, assim especificamos somente a margem esquerda. Cdigo: Ttulo da pgina div { float: left; border: 1px solid; border-left-color: #C5C5C5; margin: 5px; } Menu Body Resultado:Neste exemplo veja que a borda de todos as divs da pagina se afastaram, inclusive a borda mais externa da pagina ficou mais afastado da borda do navegador. Outro elemento importante que podemos especificar a margin o body, ficando assim: Cdigo: Ttulo da pgina body { margin: 0px; } div { float: left; border: 1px solid; border-left-color: #C5C5C5; margin: 5px; } Menu Body Resultado:Assim todos os itens da pagina ficaro mais prximos a borda do navegador. padding esta propriedade especifica a disncia interna entre os itens, sendo que podemos por exemplo estabelecer que as bordas estaro sempre a distncia N dos textos, da mesma forma das outras propriedades podemos especificar qual dos lados iremos aplicar o padding, bastando especificar da seguinte forma padding-left. Cdigo: Ttulo da pgina body { margin: 0px; } div { float: left; border: 1px solid;border-left-color: #C5C5C5; margin: 5px; padding: 5px; } Menu Body Resultado:display com esta propriedade podemos configurar se queremos que nosto item seja exibido ou no Para sumir com um item basta setar ele como hidden. Cdigo: Ttulo da pgina body { margin: 0px; } div {float: left; border: 1px solid; border-left-color: #C5C5C5; margin: 5px; padding: 5px; } .allDiv { display: none; } Menu Body Resultado:font-family Atravs desta propriedade podemos especificar qual fonte ser utilizada nos itens daquela pagina. Cdigo: Ttulo da pgina body { margin: 0px; font-family: Tahoma; } div { float: left; border: 1px solid; border-left-color: #C5C5C5; margin: 5px; padding: 5px; } .allDiv { display: none; } Menu Body Resultado:font-size Atravs desta propriedade podemos especificar o tamanho da fonte, este tamanho pode ser especificado em porcentagem (%) ou em pixels (px).Cdigo: Ttulo da pgina body { margin: 0px; font-family: Tahoma; } h1 { font-size: 12px; } div { float: left; border: 1px solid; border-left-color: #C5C5C5; margin: 5px; padding: 5px; } .allDiv { display: none; } Menu Body Resultado:width Nesta propriedades devemos especificar a largura do elemento. Cdigo: Ttulo da pgina body { margin: 0px; font-family: Tahoma; } h1 { font-size: 12px; } div { width: 300px; float: left; border: 1px solid; border-left-color: #C5C5C5; margin: 5px; padding: 5px; } .allDiv { display: none; } Menu Body Resultado:Observe que todos os itens da div pegaram a propriedade, como a div interna obedece a regra de padding da outra div ela acaba saindo da div me, isso no correto acontecer podendo ser corrigido de vrias maneiras, dependendo do navegador, o ideal que as divs ocupem a largura mxima da div me. height neste podemos especificar a altura dos itens, esta especificao no comum nos elementos de estrutura, pois nem sempre interpretado da forma correta. Cdigo Ttulo da pgina body { margin: 0px; font-family: Tahoma; } h1 { font-size: 12px; } div { width: 300px;height: 100px; float: left; border: 1px solid; border-left-color: #C5C5C5; margin: 5px; padding: 5px; } .allDiv { display: none; } Menu Body Resultado:background-color aqui devemos especificar a cor do fundo do elemento esta pode ser especificada em hexadecimal. Cdigo: Ttulo da pgina body { margin: 0px; font-family: Tahoma; } h1 { font-size: 12px; } div { width: 300px; height: 100px; float: left; border: 1px solid; border-left-color: #C5C5C5; background-color:#c5c5c5; margin: 5px; padding: 5px; } .allDiv { display: none; } Menu Body ResultadoExerccio1) Especifique para que serve os seguintes elementos a. font-family b. font-size c. text-align d. background-color e. border f. padding 2) Crie um formulrio HTML e especifique todos os elementos input com a largura igual a 200 pixels. 3) Crie uma pgina HTML com cabealho, menu esquerdo e contedo direita. 4) Crie uma lista de forma que cada item fiquem 4 pixels afastados um do outro. Tabela de cores: CorSnow GhostWhite WhiteSmoke Gainsboro FloralWhiteValor RGB Hexadecimal255 250 250 248 248 255 245 245 245 220 220 220 255 250 240 #FFFAFA #F8F8FF #F5F5F5 #DCDCDC #FFFAF0OldLace Linen AntiqueWhite PapayaWhip BlanchedAlmond Bisque PeachPuff253 245 230 250 240 230 250 235 215 255 239 213 255 235 205 255 228 196 255 218 185#FDF5E6 #FAF0E6 #FAEBD7 #FFEFD5 #FFEBCD #FFE4C4 #FFDAB9NavajoWhite Moccasin Cornsilk Ivory LemonChiffon Seashell Honeydew MintCream Azure AliceBlue lavender LavenderBlush MistyRose White Black DarkSlateGray DimGrey SlateGrey LightSlateGray Grey LightGray MidnightBlue NavyBlue (Navy) CornflowerBlue DarkSlateBlue SlateBlue MediumSlateBlue LightSlateBlue MediumBlue RoyalBlue Blue DodgerBlue DeepSkyBlue SkyBlue LightSkyBlue SteelBlue LightSteelBlue LightBlue PowderBlue PaleTurquoise DarkTurquoise MediumTurquoise Turquoise Cyan LightCyan CadetBlue MediumAquamarine Aquamarine DarkGreen DarkOliveGreen DarkSeaGreen SeaGreen255 222 173 255 228 181 255 248 220 255 255 240 255 250 205 255 245 238 240 255 240 245 255 250 240 255 255 240 248 255 230 230 250 255 240 245 255 228 225 255 255 255 000 47 79 79 105 105 105 112 128 144 119 136 153 190 190 190 211 211 211 25 25 112 0 0 128 100 149 237 72 61 139 106 90 205 123 104 238 132 112 255 0 0 205 65 105 225 0 0 255 30 144 255 0 191 255 135 206 235 135 206 250 70 130 180 176 196 222 173 216 230 176 224 230 175 238 238 0 206 209 72 209 204 64 224 208 0 255 255 224 255 255 95 158 160 102 205 170 127 255 212 0 100 0 85 107 47 143 188 143 46 139 87#FFDEAD #FFE4B5 #FFF8DC #FFFFF0 #FFFACD #FFF5EE #F0FFF0 #F5FFFA #F0FFFF #F0F8FF #E6E6FA #FFF0F5 #FFE4E1 #FFFFFF #000000 #2F4F4F #696969 #708090 #778899 #BEBEBE #D3D3D3 #191970 #000080 #6495ED #483D8B #6A5ACD #7B68EE #8470FF #0000CD #4169E1 #0000FF #1E90FF #00BFFF #87CEEB #87CEFA #4682B4 #B0C4DE #ADD8E6 #B0E0E6 #AFEEEE #00CED1 #48D1CC #40E0D0 #00FFFF #E0FFFF #5F9EA0 #66CDAA #7FFFD4 #006400 #556B2F #8FBC8F #2E8B57MediumSeaGreen LightSeaGreen PaleGreen SpringGreen LawnGreen Green Chartreuse MediumSpringGreen GreenYellow LimeGreen YellowGreen ForestGreen OliveDrab DarkKhaki Khaki PaleGoldenrod LightGoldenrodYellow LightYellow Yellow Gold LightGoldenrod goldenrod DarkGoldenrod RosyBrown IndianRed SaddleBrown Sienna Peru Burlywood Beige Wheat SandyBrown Tan Chocolate Firebrick Brown DarkSalmon Salmon LightSalmon Orange DarkOrange Coral LightCoral Tomato OrangeRed Red HotPink DeepPink Pink LightPink PaleVioletRed Maroon60 179 113 32 178 170 152 251 152 0 255 127 124 252 0 0 255 0 127 255 0 0 250 154 173 255 47 50 205 50 154 205 50 34 139 34 107 142 35 189 183 107 240 230 140 238 232 170 250 250 210 255 255 224 255 255 0 255 215 0 238 221 130 218 165 32 184 134 11 188 143 143 205 92 92 139 69 19 160 82 45 205 133 63 222 184 135 245 245 220 245 222 179 244 164 96 210 180 140 210 105 30 178 34 34 165 42 42 233 150 122 250 128 114 255 160 122 255 165 0 255 140 0 255 127 80 240 128 128 255 99 71 255 69 0 255 0 0 255 105 180 255 20 147 255 192 203 255 182 193 219 112 147 176 48 96#3CB371 #20B2AA #98FB98 #00FF7F #7CFC00 #00FF00 #7FFF00 #00FA9A #ADFF2F #32CD32 #9ACD32 #228B22 #6B8E23 #BDB76B #F0E68C #EEE8AA #FAFAD2 #FFFFE0 #FFFF00 #FFD700 #EEDD82 #DAA520 #B8860B #BC8F8F #CD5C5C #8B4513 #A0522D #CD853F #DEB887 #F5F5DC #F5DEB3 #F4A460 #D2B48C #D2691E #B22222 #A52A2A #E9967A #FA8072 #FFA07A #FFA500 #FF8C00 #FF7F50 #F08080 #FF6347 #FF4500 #FF0000 #FF69B4 #FF1493 #FFC0CB #FFB6C1 #DB7093 #B03060MediumVioletRed VioletRed Magenta Violet Plum Orchid MediumOrchid DarkOrchid DarkViolet BlueViolet Purple MediumPurple Thistle Snow1 Snow2 Snow3 Snow4 Seashell1 Seashell2 Seashell3 Seashell4 AntiqueWhite1 AntiqueWhite2 AntiqueWhite3 AntiqueWhite4 Bisque1 Bisque2 Bisque3 Bisque4 PeachPuff1 PeachPuff2 PeachPuff3 PeachPuff4 NavajoWhite1 NavajoWhite2 NavajoWhite3 NavajoWhite4 LemonChiffon1 LemonChiffon2 LemonChiffon3 LemonChiffon4 Cornsilk1 Cornsilk2 Cornsilk3 Cornsilk4 Ivory1 Ivory2 Ivory3 Ivory4 Honeydew1 Honeydew2 Honeydew3199 21 133 208 32 144 255 0 255 238 130 238 221 160 221 218 112 214 186 85 211 153 50 204 148 0 211 138 43 226 160 32 240 147 112 219 216 191 216 255 250 250 238 233 233 205 201 201 139 137 137 255 245 238 238 229 222 205 197 191 139 134 130 255 239 219 238 223 204 205 192 176 139 131 120 255 228 196 238 213 183 205 183 158 139 125 107 255 218 185 238 203 173 205 175 149 139 119 101 255 222 173 238 207 161 205 179 139 139 121 94 255 250 205 238 233 191 205 201 165 139 137 112 255 248 220 238 232 205 205 200 177 139 136 120 255 255 240 238 238 224 205 205 193 139 139 131 240 255 240 224 238 224 193 205 193#C71585 #D02090 #FF00FF #EE82EE #DDA0DD #DA70D6 #BA55D3 #9932CC #9400D3 #8A2BE2 #A020F0 #9370DB #D8BFD8 #FFFAFA #EEE9E9 #CDC9C9 #8B8989 #FFF5EE #EEE5DE #CDC5BF #8B8682 #FFEFDB #EEDFCC #CDC0B0 #8B8378 #FFE4C4 #EED5B7 #CDB79E #8B7D6B #FFDAB9 #EECBAD #CDAF95 #8B7765 #FFDEAD #EECFA1 #CDB38B #8B795E #FFFACD #EEE9BF #CDC9A5 #8B8970 #FFF8DC #EEE8CD #CDC8B1 #8B8878 #FFFFF0 #EEEEE0 #CDCDC1 #8B8B83 #F0FFF0 #E0EEE0 #C1CDC1Honeydew4 LavenderBlush1 LavenderBlush2 LavenderBlush3 LavenderBlush4 MistyRose1 MistyRose2 MistyRose3 MistyRose4 Azure1 Azure2 Azure3 Azure4 SlateBlue1 SlateBlue2 SlateBlue3 SlateBlue4 RoyalBlue1 RoyalBlue2 RoyalBlue3 RoyalBlue4 Blue1 Blue2 Blue3 Blue4 DodgerBlue1 DodgerBlue2 DodgerBlue3 DodgerBlue4 SteelBlue1 SteelBlue2 SteelBlue3 SteelBlue4 DeepSkyBlue1 DeepSkyBlue2 DeepSkyBlue3 DeepSkyBlue4 SkyBlue1 SkyBlue2 SkyBlue3 SkyBlue4 LightSkyBlue1 LightSkyBlue2 LightSkyBlue3 LightSkyBlue4 SlateGray1 SlateGray2 SlateGray3 SlateGray4 LightSteelBlue1 LightSteelBlue2 LightSteelBlue3131 139 131 255 240 245 238 224 229 205 193 197 139 131 134 255 228 225 238 213 210 205 183 181 139 125 123 240 255 255 224 238 238 193 205 205 131 139 139 131 111 255 122 103 238 105 89 205 71 60 139 72 118 255 67 110 238 58 95 205 39 64 139 0 0 255 0 0 238 0 0 205 0 0 139 30 144 255 28 134 238 24 116 205 16 78 139 99 184 255 92 172 238 79 148 205 54 100 139 0 191 255 0 178 238 0 154 205 0 104 139 135 206 255 126 192 238 108 166 205 74 112 139 176 226 255 164 211 238 141 182 205 96 123 139 198 226 255 185 211 238 159 182 205 108 123 139 202 225 255 188 210 238 162 181 205#838B83 #FFF0F5 #EEE0E5 #CDC1C5 #8B8386 #FFE4E1 #EED5D2 #CDB7B5 #8B7D7B #F0FFFF #E0EEEE #C1CDCD #838B8B #836FFF #7A67EE #6959CD #473C8B #4876FF #436EEE #3A5FCD #27408B #0000FF #0000EE #0000CD #00008B #1E90FF #1C86EE #1874CD #104E8B #63B8FF #5CACEE #4F94CD #36648B #00BFFF #00B2EE #009ACD #00688B #87CEFF #7EC0EE #6CA6CD #4A708B #B0E2FF #A4D3EE #8DB6CD #607B8B #C6E2FF #B9D3EE #9FB6CD #6C7B8B #CAE1FF #BCD2EE #A2B5CDLightSteelBlue4 LightBlue1 LightBlue2 LightBlue3 LightBlue4 LightCyan1 LightCyan2 LightCyan3 LightCyan4 PaleTurquoise1 PaleTurquoise2 PaleTurquoise3 PaleTurquoise4 CadetBlue1 CadetBlue2 CadetBlue3 CadetBlue4 Turquoise1 Turquoise2 Turquoise3 Turquoise4 Cyan1 Cyan2 Cyan3 Cyan4 DarkSlateGray1 DarkSlateGray2 DarkSlateGray3 DarkSlateGray4 Aquamarine1 Aquamarine2 Aquamarine3 Aquamarine4 DarkSeaGreen1 DarkSeaGreen2 DarkSeaGreen3 DarkSeaGreen4 SeaGreen1 SeaGreen2 SeaGreen3 SeaGreen4 PaleGreen1 PaleGreen2 PaleGreen3 PaleGreen4 SpringGreen1 SpringGreen2 SpringGreen3 SpringGreen4 Green1 Green2 Green3110 123 139 191 239 255 178 223 238 154 192 205 104 131 139 224 255 255 209 238 238 180 205 205 122 139 139 187 255 255 174 238 238 150 205 205 102 139 139 152 245 255 142 229 238 122 197 205 83 134 139 0 245 255 0 229 238 0 197 205 0 134 139 0 255 255 0 238 238 0 205 205 0 139 139 151 255 255 141 238 238 121 205 205 82 139 139 127 255 212 118 238 198 102 205 170 69 139 116 193 255 193 180 238 180 155 205 155 105 139 105 84 255 159 78 238 148 67 205 128 46 139 87 154 255 154 144 238 144 124 205 124 84 139 84 0 255 127 0 238 118 0 205 102 0 139 69 0 255 0 0 238 0 0 205 0#6E7B8B #BFEFFF #B2DFEE #9AC0CD #68838B #E0FFFF #D1EEEE #B4CDCD #7A8B8B #BBFFFF #AEEEEE #96CDCD #668B8B #98F5FF #8EE5EE #7AC5CD #53868B #00F5FF #00E5EE #00C5CD #00868B #00FFFF #00EEEE #00CDCD #008B8B #97FFFF #8DEEEE #79CDCD #528B8B #7FFFD4 #76EEC6 #66CDAA #458B74 #C1FFC1 #B4EEB4 #9BCD9B #698B69 #54FF9F #4EEE94 #43CD80 #2E8B57 #9AFF9A #90EE90 #7CCD7C #548B54 #00FF7F #00EE76 #00CD66 #008B45 #00FF00 #00EE00 #00CD00Green4 Chartreuse1 Chartreuse2 Chartreuse3 Chartreuse4 OliveDrab1 OliveDrab2 OliveDrab3 OliveDrab4 DarkOliveGreen1 DarkOliveGreen2 DarkOliveGreen3 DarkOliveGreen4 Khaki1 Khaki2 Khaki3 Khaki4 LightGoldenrod1 LightGoldenrod2 LightGoldenrod3 LightGoldenrod4 LightYellow1 LightYellow2 LightYellow3 LightYellow4 Yellow1 Yellow2 Yellow3 Yellow4 Gold1 Gold2 Gold3 Gold4 Goldenrod1 Goldenrod2 Goldenrod3 Goldenrod4 DarkGoldenrod1 DarkGoldenrod2 DarkGoldenrod3 DarkGoldenrod4 RosyBrown1 RosyBrown2 RosyBrown3 RosyBrown4 IndianRed1 IndianRed2 IndianRed3 IndianRed4 Sienna1 Sienna2 Sienna30 139 0 127 255 0 118 238 0 102 205 0 69 139 0 192 255 62 179 238 58 154 205 50 105 139 34 202 255 112 188 238 104 162 205 90 110 139 61 255 246 143 238 230 133 205 198 115 139 134 78 255 236 139 238 220 130 205 190 112 139 129 76 255 255 224 238 238 209 205 205 180 139 139 122 255 255 0 238 238 0 205 205 0 139 139 0 255 215 0 238 201 0 205 173 0 139 117 0 255 193 37 238 180 34 205 155 29 139 105 20 255 185 15 238 173 14 205 149 12 139 101 8 255 193 193 238 180 180 205 155 155 139 105 105 255 106 106 238 99 99 205 85 85 139 58 58 255 130 71 238 121 66 205 104 57#008B00 #7FFF00 #76EE00 #66CD00 #458B00 #C0FF3E #B3EE3A #9ACD32 #698B22 #CAFF70 #BCEE68 #A2CD5A #6E8B3D #FFF68F #EEE685 #CDC673 #8B864E #FFEC8B #EEDC82 #CDBE70 #8B814C #FFFFE0 #EEEED1 #CDCDB4 #8B8B7A #FFFF00 #EEEE00 #CDCD00 #8B8B00 #FFD700 #EEC900 #CDAD00 #8B7500 #FFC125 #EEB422 #CD9B1D #8B6914 #FFB90F #EEAD0E #CD950C #8B658B #FFC1C1 #EEB4B4 #CD9B9B #8B6969 #FF6A6A #EE6363 #CD5555 #8B3A3A #FF8247 #EE7942 #CD6839Sienna4 Burlywood1 Burlywood2 Burlywood3 Burlywood4 Wheat1 Wheat2 Wheat3 Wheat4 Tan1 Tan2 Tan3 Tan4 Chocolate1 Chocolate2 Chocolate3 Chocolate4 Firebrick1 Firebrick2 Firebrick3 Firebrick4 Brown1 Brown2 Brown3 Brown4 Salmon1 Salmon2 Salmon3 Salmon4 LightSalmon1 LightSalmon2 LightSalmon3 LightSalmon4 Orange1 Orange2 Orange3 Orange4 DarkOrange1 DarkOrange2 DarkOrange3 DarkOrange4 Coral1 Coral2 Coral3 Coral4 Tomato1 Tomato2 Tomato3 Tomato4 OrangeRed1 OrangeRed2 OrangeRed3139 71 38 255 211 155 238 197 145 205 170 125 139 115 85 255 231 186 238 216 174 205 186 150 139 126 102 255 165 79 238 154 73 205 133 63 139 90 43 255 127 36 238 118 33 205 102 29 139 69 19 255 48 48 238 44 44 205 38 38 139 26 26 255 64 64 238 59 59 205 51 51 139 35 35 255 140 105 238 130 98 205 112 84 139 76 57 255 160 122 238 149 114 205 129 98 139 87 66 255 165 0 238 154 0 205 133 0 139 90 0 255 127 0 238 118 0 205 102 0 139 69 0 255 114 86 238 106 80 205 91 69 139 62 47 255 99 71 238 92 66 205 79 57 139 54 38 255 69 0 238 64 0 205 55 0#8B4726 #FFD39B #EEC591 #CDAA7D #8B7355 #FFE7BA #EED8AE #CDBA96 #8B7E66 #FFA54F #EE9A49 #CD853F #8B5A2B #FF7F24 #EE7621 #CD661D #8B4513 #FF3030 #EE2C2C #CD2626 #8B1A1A #FF4040 #EE3B3B #CD3333 #8B2323 #FF8C69 #EE8262 #CD7054 #8B4C39 #FFA07A #EE9572 #CD8162 #8B5742 #FFA500 #EE9A00 #CD8500 #8B5A00 #FF7F00 #EE7600 #CD6600 #8B4500 #FF7256 #EE6A50 #CD5B45 #8B3E2F #FF6347 #EE5C42 #CD4F39 #8B3626 #FF4500 #EE4000 #CD3700OrangeRed4 Red1 Red2 Red3 Red4 DeepPink1 DeepPink2 DeepPink3 DeepPink4 HotPink1 HotPink2 HotPink3 HotPink4 Pink1 Pink2 Pink3 Pink4 LightPink1 LightPink2 LightPink3 LightPink4 PaleVioletRed1 PaleVioletRed2 PaleVioletRed3 PaleVioletRed4 Maroon1 Maroon2 Maroon3 Maroon4 VioletRed1 VioletRed2 VioletRed3 VioletRed4 Magenta1 Magenta2 Magenta3 Magenta4 Orchid1 Orchid2 Orchid3 Orchid4 Plum1 Plum2 Plum3 Plum4 MediumOrchid1 MediumOrchid2 MediumOrchid3 MediumOrchid4 DarkOrchid1 DarkOrchid2 DarkOrchid3139 37 0 255 0 0 238 0 0 205 0 0 139 0 0 255 20 147 238 18 137 205 16 118 139 10 80 255 110 180 238 106 167 205 96 144 139 58 98 255 181 197 238 169 184 205 145 158 139 99 108 255 174 185 238 162 173 205 140 149 139 95 101 255 130 171 238 121 159 205 104 137 139 71 93 255 52 179 238 48 167 205 41 144 139 28 98 255 62 150 238 58 140 205 50 120 139 34 82 255 0 255 238 0 238 205 0 205 139 0 139 255 131 250 238 122 233 205 105 201 139 71 137 255 187 255 238 174 238 205 150 205 139 102 139 224 102 255 209 95 238 180 82 205 122 55 139 191 62 255 178 58 238 154 50 205#8B2500 #FF0000 #EE0000 #CD0000 #8B0000 #FF1493 #EE1289 #CD1076 #8B0A50 #FF6EB4 #EE6AA7 #CD6090 #8B3A62 #FFB5C5 #EEA9B8 #CD919E #8B636C #FFAEB9 #EEA2AD #CD8C95 #8B5F65 #FF82AB #EE799F #CD6889 #8B475D #FF34B3 #EE30A7 #CD2990 #8B1C62 #FF3E96 #EE3A8C #CD3278 #8B2252 #FF00FF #EE00EE #CD00CD #8B008B #FF83FA #EE7AE9 #CD69C9 #8B4789 #FFBBFF #EEAEEE #CD96CD #8B668B #E066FF #D15FEE #B452CD #7A378B #BF3EFF #B23AEE #9A32CDDarkOrchid4 Purple1 Purple2 Purple3 Purple4 MediumPurple1 MediumPurple2 MediumPurple3 MediumPurple4 Thistle1 Thistle2 Thistle3 Thistle4 grey11 grey21 grey31 grey41 grey51 grey61 grey71 gray81 gray91 DarkGrey DarkBlue DarkCyan DarkMagenta DarkRed LightGreen104 34 139 155 48 255 145 44 238 125 38 205 85 26 139 171 130 255 159 121 238 137 104 205 93 71 139 255 225 255 238 210 238 205 181 205 139 123 139 28 28 28 54 54 54 79 79 79 105 105 105 130 130 130 156 156 156 181 181 181 207 207 207 232 232 232 169 169 169 0 0 139 0 139 139 139 0 139 139 0 0 144 238 144#68228B #9B30FF #912CEE #7D26CD #551A8B #AB82FF #9F79EE #8968CD #5D478B #FFE1FF #EED2EE #CDB5CD #8B7B8B #1C1C1C #363636 #4F4F4F #696969 #828282 #9C9C9C #B5B5B5 #CFCFCF #E8E8E8 #A9A9A9 #00008B #008B8B #8B008B #8B0000 #90EE90