[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.36,0:00:02.03,Default,,0000,0000,0000,,Até agora, vimos como você pode
Dialogue: 0,0:00:02.03,0:00:03.59,Default,,0000,0000,0000,,usar CSS para decorar seu texto,
Dialogue: 0,0:00:04.09,0:00:06.40,Default,,0000,0000,0000,,mas também podemos usar CSS \Npara mudar o layout.
Dialogue: 0,0:00:06.40,0:00:07.29,Default,,0000,0000,0000,,da nossa página.
Dialogue: 0,0:00:07.41,0:00:09.15,Default,,0000,0000,0000,,Podemos mover as coisas,
Dialogue: 0,0:00:09.16,0:00:10.03,Default,,0000,0000,0000,,mudar o tamanho,
Dialogue: 0,0:00:10.03,0:00:11.98,Default,,0000,0000,0000,,e até fazer sobreposições.
Dialogue: 0,0:00:12.01,0:00:13.55,Default,,0000,0000,0000,,Mas o que são as coisas que
Dialogue: 0,0:00:13.55,0:00:14.40,Default,,0000,0000,0000,,queremos mover?
Dialogue: 0,0:00:14.50,0:00:16.12,Default,,0000,0000,0000,,Algumas vezes elas são elementos
Dialogue: 0,0:00:16.12,0:00:17.34,Default,,0000,0000,0000,,que já criamos,
Dialogue: 0,0:00:17.34,0:00:18.81,Default,,0000,0000,0000,,como um certo parágrafo,
Dialogue: 0,0:00:18.81,0:00:20.67,Default,,0000,0000,0000,,ou um certo título.
Dialogue: 0,0:00:21.23,0:00:22.38,Default,,0000,0000,0000,,Mas algumas vezes, elas
Dialogue: 0,0:00:22.38,0:00:23.53,Default,,0000,0000,0000,,são grupos de elementos
Dialogue: 0,0:00:23.53,0:00:24.68,Default,,0000,0000,0000,,que já fizemos,
Dialogue: 0,0:00:24.68,0:00:26.89,Default,,0000,0000,0000,,como um pedaço de texto,
Dialogue: 0,0:00:27.06,0:00:30.06,Default,,0000,0000,0000,,ou um título e alguns parágrafos.
Dialogue: 0,0:00:31.69,0:00:32.95,Default,,0000,0000,0000,,Para movê-los juntos
Dialogue: 0,0:00:32.95,0:00:34.22,Default,,0000,0000,0000,,como uma unidade,
Dialogue: 0,0:00:34.22,0:00:35.40,Default,,0000,0000,0000,,precisamos introduzir
Dialogue: 0,0:00:35.40,0:00:36.74,Default,,0000,0000,0000,,duas novas tags HTML.
Dialogue: 0,0:00:36.74,0:00:37.98,Default,,0000,0000,0000,,Que chamamos de
Dialogue: 0,0:00:37.98,0:00:39.22,Default,,0000,0000,0000,,elementos de agrupamento.
Dialogue: 0,0:00:39.25,0:00:41.46,Default,,0000,0000,0000,,Não falamos sobre elas antes de CSS,
Dialogue: 0,0:00:41.46,0:00:42.66,Default,,0000,0000,0000,,porque são apenas úteis
Dialogue: 0,0:00:42.66,0:00:43.96,Default,,0000,0000,0000,,quando combinadas com CSS.
Dialogue: 0,0:00:43.96,0:00:47.20,Default,,0000,0000,0000,,Elas não tem significado semântico\Npara o navegador.
Dialogue: 0,0:00:47.28,0:00:49.18,Default,,0000,0000,0000,,A primeira tag é a tag ,
Dialogue: 0,0:00:49.60,0:00:51.52,Default,,0000,0000,0000,,e é a que usamos para agrupar
Dialogue: 0,0:00:51.52,0:00:52.76,Default,,0000,0000,0000,,um pedaço de um texto.
Dialogue: 0,0:00:52.85,0:00:54.19,Default,,0000,0000,0000,,Digamos que queremos colorir
Dialogue: 0,0:00:54.19,0:00:56.50,Default,,0000,0000,0000,,essa palavra "Love" de vermelho.
Dialogue: 0,0:00:56.78,0:00:58.69,Default,,0000,0000,0000,,E que apenas queremos colorir a palavra
Dialogue: 0,0:00:58.69,0:00:59.95,Default,,0000,0000,0000,,e não o resto do título.
Dialogue: 0,0:01:00.33,0:01:02.46,Default,,0000,0000,0000,,Colocamos o cursor antes de "Love",
Dialogue: 0,0:01:02.46,0:01:05.14,Default,,0000,0000,0000,,digitamos a tag inicial para .
Dialogue: 0,0:01:05.14,0:01:06.94,Default,,0000,0000,0000,,Colocamos o cursor depois da palavra,
Dialogue: 0,0:01:07.75,0:01:10.36,Default,,0000,0000,0000,,digitamos a tag final, ok
Dialogue: 0,0:01:10.36,0:01:12.00,Default,,0000,0000,0000,,Agora vamos estilizar esse 
Dialogue: 0,0:01:12.00,0:01:13.64,Default,,0000,0000,0000,,Poderíamos criar uma regra
Dialogue: 0,0:01:13.64,0:01:15.55,Default,,0000,0000,0000,,para colorir todos os s da página,
Dialogue: 0,0:01:15.79,0:01:17.28,Default,,0000,0000,0000,,mas talvez a gente não queira
Dialogue: 0,0:01:17.28,0:01:18.56,Default,,0000,0000,0000,,que todos sejam vermelhos.
Dialogue: 0,0:01:18.56,0:01:19.98,Default,,0000,0000,0000,,Vamos dar ao 
Dialogue: 0,0:01:20.11,0:01:22.57,Default,,0000,0000,0000,,uma class "lovey-dovey",
Dialogue: 0,0:01:25.09,0:01:28.35,Default,,0000,0000,0000,,e criar uma regra apenas para elementos
Dialogue: 0,0:01:28.47,0:01:30.37,Default,,0000,0000,0000,,que tenham class "lovey-dovey".
Dialogue: 0,0:01:30.39,0:01:34.26,Default,,0000,0000,0000,,Então, .lovey-dovey, color:red.
Dialogue: 0,0:01:34.61,0:01:37.29,Default,,0000,0000,0000,,Veja como ficou o texto agora!
Dialogue: 0,0:01:37.76,0:01:39.30,Default,,0000,0000,0000,,s são bons para agrupar
Dialogue: 0,0:01:39.30,0:01:40.51,Default,,0000,0000,0000,,pedaços de texto.
Dialogue: 0,0:01:40.51,0:01:41.72,Default,,0000,0000,0000,,Como agrupamos
Dialogue: 0,0:01:41.73,0:01:43.19,Default,,0000,0000,0000,,um conjunto de elementos?
Dialogue: 0,0:01:43.51,0:01:45.25,Default,,0000,0000,0000,,Aí é que surge a tag 
Dialogue: 0,0:01:45.31,0:01:46.75,Default,,0000,0000,0000,,Digamos que queremos agrupar
Dialogue: 0,0:01:46.75,0:01:47.72,Default,,0000,0000,0000,,essa seção no fim.
Dialogue: 0,0:01:48.20,0:01:49.46,Default,,0000,0000,0000,,O título "Official Info" e
Dialogue: 0,0:01:49.46,0:01:51.17,Default,,0000,0000,0000,,o parágrafo depois dele.
Dialogue: 0,0:01:51.74,0:01:52.71,Default,,0000,0000,0000,,Para fazer isso
Dialogue: 0,0:01:52.71,0:01:56.36,Default,,0000,0000,0000,,Vou colocar meu cursor antes de h3 e
Dialogue: 0,0:01:56.93,0:01:59.39,Default,,0000,0000,0000,,colocar a tag inicial de 
Dialogue: 0,0:01:59.86,0:02:02.26,Default,,0000,0000,0000,,E vou até o parágrafo final
Dialogue: 0,0:02:02.69,0:02:04.60,Default,,0000,0000,0000,,e escrevo a tag final de .
Dialogue: 0,0:02:04.60,0:02:06.10,Default,,0000,0000,0000,,Temos um .
Dialogue: 0,0:02:06.10,0:02:08.03,Default,,0000,0000,0000,,Agora precisamos estilizá-lo.
Dialogue: 0,0:02:08.19,0:02:09.55,Default,,0000,0000,0000,,Para estilizar um 
Dialogue: 0,0:02:09.57,0:02:11.43,Default,,0000,0000,0000,,Eu vou dar um ID para ele
Dialogue: 0,0:02:11.43,0:02:13.09,Default,,0000,0000,0000,,"official-info".
Dialogue: 0,0:02:13.09,0:02:15.98,Default,,0000,0000,0000,,E adiciono uma regra para ele
Dialogue: 0,0:02:15.98,0:02:17.06,Default,,0000,0000,0000,,aqui em cima.
Dialogue: 0,0:02:17.09,0:02:21.60,Default,,0000,0000,0000,,Então #official-info e background.
Dialogue: 0,0:02:21.68,0:02:23.72,Default,,0000,0000,0000,,Vamos torná-lo um bonito cinza.
Dialogue: 0,0:02:23.88,0:02:26.93,Default,,0000,0000,0000,,Vamos escolher... este.. Está ótimo.
Dialogue: 0,0:02:27.13,0:02:28.37,Default,,0000,0000,0000,,Agora veja que o  se
Dialogue: 0,0:02:28.37,0:02:29.60,Default,,0000,0000,0000,,tornou uma caixa cinza
Dialogue: 0,0:02:29.60,0:02:31.65,Default,,0000,0000,0000,,contendo todos elementos\Ndentro dela.
Dialogue: 0,0:02:31.73,0:02:34.52,Default,,0000,0000,0000,,E é diferente de dar a cada um \Nseparadamente
Dialogue: 0,0:02:34.55,0:02:35.78,Default,,0000,0000,0000,,um background cinza.
Dialogue: 0,0:02:35.78,0:02:38.16,Default,,0000,0000,0000,,Se tivéssemos feito assim,\Nhaveria um espaço entre
Dialogue: 0,0:02:38.16,0:02:39.51,Default,,0000,0000,0000,,eles que não ficaria cinza.
Dialogue: 0,0:02:39.52,0:02:41.12,Default,,0000,0000,0000,,Precisamos fazer um ,
Dialogue: 0,0:02:41.13,0:02:43.90,Default,,0000,0000,0000,,se quisermos uma caixa ao redor de tudo.
Dialogue: 0,0:02:44.71,0:02:46.18,Default,,0000,0000,0000,,Você pode pensar em 
Dialogue: 0,0:02:46.18,0:02:47.74,Default,,0000,0000,0000,,como sendo para agrupar texto.
Dialogue: 0,0:02:48.30,0:02:50.76,Default,,0000,0000,0000,,E pode pensar em 
Dialogue: 0,0:02:50.76,0:02:52.27,Default,,0000,0000,0000,,para agrupar elementos.
Dialogue: 0,0:02:52.48,0:02:55.38,Default,,0000,0000,0000,,Mas há outra forma de distingui-los.
Dialogue: 0,0:02:55.45,0:02:56.85,Default,,0000,0000,0000,,Veja que há dois tipos de
Dialogue: 0,0:02:56.85,0:02:58.10,Default,,0000,0000,0000,,elementos no mundo CSS:
Dialogue: 0,0:02:58.41,0:03:00.08,Default,,0000,0000,0000,,Inline e block.
Dialogue: 0,0:03:00.08,0:03:01.74,Default,,0000,0000,0000,,Um elemento inline não tem
Dialogue: 0,0:03:01.74,0:03:03.40,Default,,0000,0000,0000,,uma linha nova depois dele.
Dialogue: 0,0:03:03.40,0:03:05.06,Default,,0000,0000,0000,,Se fizer vários deles,
Dialogue: 0,0:03:05.06,0:03:06.73,Default,,0000,0000,0000,,ficarão na mesma linha.
Dialogue: 0,0:03:06.73,0:03:08.75,Default,,0000,0000,0000,,Alguns exemplos sobre os quais já falamos
Dialogue: 0,0:03:08.75,0:03:11.65,Default,,0000,0000,0000,,são  e .
Dialogue: 0,0:03:11.83,0:03:13.43,Default,,0000,0000,0000,,E você pode ver nesta imagem,
Dialogue: 0,0:03:13.45,0:03:16.43,Default,,0000,0000,0000,,como o texto flui depois dela.
Dialogue: 0,0:03:16.62,0:03:18.37,Default,,0000,0000,0000,,Não há uma linha nova depois dela.
Dialogue: 0,0:03:18.37,0:03:20.13,Default,,0000,0000,0000,,Um elemento block
Dialogue: 0,0:03:20.13,0:03:21.62,Default,,0000,0000,0000,,tem uma linha nova depois
Dialogue: 0,0:03:21.62,0:03:23.11,Default,,0000,0000,0000,,e isso é o que a maioria
Dialogue: 0,0:03:23.11,0:03:24.60,Default,,0000,0000,0000,,das tags HTML criam.
Dialogue: 0,0:03:24.82,0:03:26.98,Default,,0000,0000,0000,,Veja todos os exemplos nesta página.
Dialogue: 0,0:03:27.04,0:03:29.85,Default,,0000,0000,0000,,Os títulos, os parágrafos, a lista.
Dialogue: 0,0:03:29.85,0:03:31.89,Default,,0000,0000,0000,,O navegador coloca linha nova
Dialogue: 0,0:03:31.89,0:03:33.70,Default,,0000,0000,0000,,depois de todos eles,
Dialogue: 0,0:03:33.73,0:03:36.15,Default,,0000,0000,0000,,sem que você precise de uma tag \N.
Dialogue: 0,0:03:36.87,0:03:38.78,Default,,0000,0000,0000,,O que isso tem a ver com 
Dialogue: 0,0:03:38.78,0:03:39.80,Default,,0000,0000,0000,,e ?
Dialogue: 0,0:03:39.84,0:03:43.20,Default,,0000,0000,0000,,Bom, um  cria um elemento inline
Dialogue: 0,0:03:43.20,0:03:47.12,Default,,0000,0000,0000,,e um  cria um elemento block
Dialogue: 0,0:03:47.25,0:03:49.49,Default,,0000,0000,0000,,Isto significa, que se você põe um 
Dialogue: 0,0:03:49.49,0:03:53.43,Default,,0000,0000,0000,,e não adiciona outro estilo,
Dialogue: 0,0:03:53.94,0:03:56.27,Default,,0000,0000,0000,,o navegador irá tornar essa parte
Dialogue: 0,0:03:56.27,0:03:57.69,Default,,0000,0000,0000,,da página em um bloco.
Dialogue: 0,0:03:57.69,0:03:59.11,Default,,0000,0000,0000,,Como aquele texto que
Dialogue: 0,0:03:59.11,0:04:00.53,Default,,0000,0000,0000,,está envolto em um ,
Dialogue: 0,0:04:00.53,0:04:02.98,Default,,0000,0000,0000,,agora têm linhas novas antes e depois.
Dialogue: 0,0:04:02.100,0:04:05.50,Default,,0000,0000,0000,,E talvez isso seja o que você quer.
Dialogue: 0,0:04:05.50,0:04:07.52,Default,,0000,0000,0000,,Apenas lembre-se da diferença.
Dialogue: 0,0:04:07.55,0:04:09.38,Default,,0000,0000,0000,,E continue.. porque há muito mais que
Dialogue: 0,0:04:09.40,0:04:10.88,Default,,0000,0000,0000,,podemos fazer com essas tags.
Dialogue: 0,0:04:10.88,0:04:12.76,Default,,0000,0000,0000,,Especialmente o poderoso !
Dialogue: 0,0:04:12.80,0:04:14.00,Default,,0000,0000,0000,,Legendado por [Fred Guth]\NRevisado por [Cainã Perri]