!DOCTYPE html

!-- Esse documento HTML será usado para aplicar o CSS exemplo (basico_css3.css). Dessa forma, ele está comentado apenas nas partes que dizem respeito ao CSS.

Se você não está familiarizado com HTML5, talvez seja interessante que você veja o seguinte documento antes httpsgithub.comthiagobottoniExemplosblobmasterHTML5B%C3%A1sico%20de%20HTML5.html --

html
	head
		meta charset=UTF-8
		
		!-- Use a tag link para relacionar código externo com o seu HTML. Com a linha abaixo, estamos associando um CSS ao nosso HTML. --
		link type=textcss rel=stylesheet href=basico_css3.css 
		
		!-- Ao invés de link, pode ser utilizada a tag style. Com ela, o CSS pode ser usado na própria página HTML, sem o uso de código externo. Exemplo
		
		style
		p {
		colorblue;
		} 
		style --

		titleBásico de HTML5 + CSS3title
	head
	body
	
		h1Básico de HTML5 + CSS3h1
	
		h2#### Parágrafo Formatado ####h2
		
		pEste é um HTML exemplo para ser formatado usando CSS. Até aqui é azul. span Agora é verde.spanp
		
		h2#### ID ####h2
		
		p id=sou-unicoNenhum outro parágrafo terá essa formatação.p
		
		h2#### Classe ####h2
		
		ol class=listas
			liSou uma lista ordenada.li
			liSou uma lista ordenada.li
		ol
		
		ul class=listas
			liSou uma lista não ordenada formatada da mesma forma que a lista anterior.li
			liSou uma lista não ordenada formatada da mesma forma que a spanlista anteriorspan, exceto pelo tamanho das palavras lista anterior deste item.li
		ul
		
		h2#### DIV ####h2
		
		div class=primeira-div
			pIsso é uma div.p
		div
		
		h2#### Bordas ####h2
			
		p class=bordaEste parágrafo tem uma borda pontilhada.p
		
		h2#### Link Formatado + Pseudo-Classes ####h2
		
		a href=httpscafetiria.wordpress.com id=link-principalEste é um link formatadoa
		
		h2#### Botão ####h2
		
		div class=botao-twitter
			a href=httpstwitter.comthiagobottoni class=link-twitterMe siga no span class=span-twitterTwitterspana
		div
		
		h2#### Vários seletores ####h2
		
		ol
			liEste item não deve estar formatado.
				ul
					liEste item deve estar formatado com a cor roxa.li
					liEste item deve estar formatado com a cor roxa.li
				ul
			li
		ol
			
		h2#### Descendentes ####h2
		
		div class=filho
			pSou o filho número 1.p
			pSou o filho número 2.p
			pSou o filho número 3.p
		div
		
		h2#### Posicionamento - displayblock ####h2
		
		!-- É possível usar ID e classe na mesma tag. --
		div id=posicao1 class=posicao-blockdiv
		div id=posicao2 class=posicao-blockdiv
		div id=posicao3 class=posicao-blockdiv
		
		h2#### Posicionamento - displayinline-block ####h2
		
		div id=posicao4 class=posicao-iblockdiv
		div id=posicao5 class=posicao-iblockdiv
		div id=posicao6 class=posicao-iblockdiv
		
		h2#### Posicionamento - displayinline ####h2
		
		div id=posicao7 class=posicao-inlinediv
		div id=posicao8 class=posicao-inlinediv
		div id=posicao9 class=posicao-inlinediv
		
		h2#### Margens ####h2
		
		div id=margem1div
		
		h2#### Preenchimento ####h2
		
		div id=preenc1div
		
		h2#### Valores negativos ####h2
		
		div id=margem2div
		
		h2#### Float - Direita ####h2
		
		div class=fixo
			div id=flutuando1div
		div
		
		h2#### Float - Esquerda ####h2
			
		div class=fixo
			div id=flutuando2div
		div
		
		h2#### Float - Esquerda e Direita ####h2
		
		div class=fixo
			div id=flutuando3div
			div id=flutuando4div
		div
		
		h2#### Float + Clear ####h2
		
		div class=fixo
			div id=flutuando5div
			div id=flutuando6div
			div id=clear1div
		div
		
		h2#### Position - RelativeAbsolute ####h2
		
		div id=relative-position1
			div id=absolute-position1div
		div		
		
	body
html