0:00:00.360,0:00:02.029
Até agora, vimos como você pode

0:00:02.029,0:00:03.588
usar CSS para decorar seu texto,

0:00:04.088,0:00:06.405
mas também podemos usar CSS [br]para mudar o layout.

0:00:06.405,0:00:07.290
da nossa página.

0:00:07.408,0:00:09.148
Podemos mover as coisas,

0:00:09.157,0:00:10.030
mudar o tamanho,

0:00:10.030,0:00:11.983
e até fazer sobreposições.

0:00:12.010,0:00:13.551
Mas o que são as coisas que

0:00:13.551,0:00:14.401
queremos mover?

0:00:14.498,0:00:16.118
Algumas vezes elas são elementos

0:00:16.118,0:00:17.339
que já criamos,

0:00:17.339,0:00:18.812
como um certo parágrafo,

0:00:18.812,0:00:20.672
ou um certo título.

0:00:21.231,0:00:22.380
Mas algumas vezes, elas

0:00:22.380,0:00:23.529
são grupos de elementos

0:00:23.529,0:00:24.679
que já fizemos,

0:00:24.679,0:00:26.889
como um pedaço de texto,

0:00:27.055,0:00:30.065
ou um título e alguns parágrafos.

0:00:31.693,0:00:32.946
Para movê-los juntos

0:00:32.946,0:00:34.225
como uma unidade,

0:00:34.225,0:00:35.404
precisamos introduzir

0:00:35.404,0:00:36.744
duas novas tags HTML.

0:00:36.744,0:00:37.984
Que chamamos de

0:00:37.984,0:00:39.225
elementos de agrupamento.

0:00:39.246,0:00:41.460
Não falamos sobre elas antes de CSS,

0:00:41.460,0:00:42.662
porque são apenas úteis

0:00:42.662,0:00:43.959
quando combinadas com CSS.

0:00:43.959,0:00:47.204
Elas não tem significado semântico[br]para o navegador.

0:00:47.275,0:00:49.176
A primeira tag é a tag ,

0:00:49.596,0:00:51.516
e é a que usamos para agrupar

0:00:51.516,0:00:52.756
um pedaço de um texto.

0:00:52.854,0:00:54.193
Digamos que queremos colorir

0:00:54.193,0:00:56.503
essa palavra "Love" de vermelho.

0:00:56.775,0:00:58.692
E que apenas queremos colorir a palavra

0:00:58.692,0:00:59.952
e não o resto do título.

0:01:00.327,0:01:02.458
Colocamos o cursor antes de "Love",

0:01:02.458,0:01:05.145
digitamos a tag inicial para .

0:01:05.145,0:01:06.936
Colocamos o cursor depois da palavra,

0:01:07.747,0:01:10.365
digitamos a tag final, ok

0:01:10.365,0:01:12.003
Agora vamos estilizar esse

0:01:12.003,0:01:13.642
Poderíamos criar uma regra

0:01:13.642,0:01:15.553
para colorir todos os s da página,

0:01:15.791,0:01:17.279
mas talvez a gente não queira

0:01:17.279,0:01:18.558
que todos sejam vermelhos.

0:01:18.558,0:01:19.980
Vamos dar ao

0:01:20.107,0:01:22.570
uma class "lovey-dovey",

0:01:25.086,0:01:28.353
e criar uma regra apenas para elementos

0:01:28.473,0:01:30.370
que tenham class "lovey-dovey".

0:01:30.388,0:01:34.255
Então, .lovey-dovey, color:red.

0:01:34.613,0:01:37.293
Veja como ficou o texto agora!

0:01:37.763,0:01:39.301
s são bons para agrupar

0:01:39.301,0:01:40.509
pedaços de texto.

0:01:40.509,0:01:41.717
Como agrupamos

0:01:41.727,0:01:43.187
um conjunto de elementos?

0:01:43.507,0:01:45.247
Aí é que surge a tag

0:01:45.310,0:01:46.747
Digamos que queremos agrupar

0:01:46.747,0:01:47.717
essa seção no fim.

0:01:48.195,0:01:49.464
O título "Official Info" e

0:01:49.464,0:01:51.174
o parágrafo depois dele.

0:01:51.743,0:01:52.714
Para fazer isso

0:01:52.714,0:01:56.359
Vou colocar meu cursor antes de h3 e

0:01:56.929,0:01:59.389
colocar a tag inicial de

0:01:59.859,0:02:02.259
E vou até o parágrafo final

0:02:02.690,0:02:04.595
e escrevo a tag final de .

0:02:04.595,0:02:06.100
Temos um .

0:02:06.100,0:02:08.027
Agora precisamos estilizá-lo.

0:02:08.190,0:02:09.548
Para estilizar um

0:02:09.568,0:02:11.426
Eu vou dar um ID para ele

0:02:11.426,0:02:13.089
"official-info".

0:02:13.089,0:02:15.982
E adiciono uma regra para ele

0:02:15.982,0:02:17.057
aqui em cima.

0:02:17.092,0:02:21.602
Então #official-info e background.

0:02:21.685,0:02:23.715
Vamos torná-lo um bonito cinza.

0:02:23.884,0:02:26.934
Vamos escolher... este.. Está ótimo.

0:02:27.133,0:02:28.369
Agora veja que o  se

0:02:28.369,0:02:29.605
tornou uma caixa cinza

0:02:29.605,0:02:31.651
contendo todos elementos[br]dentro dela.

0:02:31.731,0:02:34.523
E é diferente de dar a cada um [br]separadamente

0:02:34.554,0:02:35.778
um background cinza.

0:02:35.778,0:02:38.162
Se tivéssemos feito assim,[br]haveria um espaço entre

0:02:38.162,0:02:39.508
eles que não ficaria cinza.

0:02:39.520,0:02:41.120
Precisamos fazer um ,

0:02:41.129,0:02:43.899
se quisermos uma caixa ao redor de tudo.

0:02:44.708,0:02:46.185
Você pode pensar em

0:02:46.185,0:02:47.735
como sendo para agrupar texto.

0:02:48.303,0:02:50.759
E pode pensar em

0:02:50.759,0:02:52.269
para agrupar elementos.

0:02:52.478,0:02:55.378
Mas há outra forma de distingui-los.

0:02:55.451,0:02:56.854
Veja que há dois tipos de

0:02:56.854,0:02:58.104
elementos no mundo CSS:

0:02:58.412,0:03:00.077
Inline e block.

0:03:00.077,0:03:01.742
Um elemento inline não tem

0:03:01.742,0:03:03.403
uma linha nova depois dele.

0:03:03.403,0:03:05.064
Se fizer vários deles,

0:03:05.064,0:03:06.726
ficarão na mesma linha.

0:03:06.726,0:03:08.751
Alguns exemplos sobre os quais já falamos

0:03:08.751,0:03:11.651
são  e .

0:03:11.832,0:03:13.432
E você pode ver nesta imagem,

0:03:13.451,0:03:16.431
como o texto flui depois dela.

0:03:16.616,0:03:18.373
Não há uma linha nova depois dela.

0:03:18.373,0:03:20.130
Um elemento block

0:03:20.130,0:03:21.620
tem uma linha nova depois

0:03:21.620,0:03:23.110
e isso é o que a maioria

0:03:23.110,0:03:24.602
das tags HTML criam.

0:03:24.818,0:03:26.978
Veja todos os exemplos nesta página.

0:03:27.041,0:03:29.850
Os títulos, os parágrafos, a lista.

0:03:29.850,0:03:31.889
O navegador coloca linha nova

0:03:31.889,0:03:33.699
depois de todos eles,

0:03:33.732,0:03:36.152
sem que você precise de uma tag [br].

0:03:36.867,0:03:38.779
O que isso tem a ver com

0:03:38.779,0:03:39.797
e ?

0:03:39.835,0:03:43.203
Bom, um  cria um elemento inline

0:03:43.203,0:03:47.123
e um  cria um elemento block

0:03:47.252,0:03:49.492
Isto significa, que se você põe um

0:03:49.492,0:03:53.432
e não adiciona outro estilo,

0:03:53.940,0:03:56.270
o navegador irá tornar essa parte

0:03:56.270,0:03:57.691
da página em um bloco.

0:03:57.691,0:03:59.112
Como aquele texto que

0:03:59.112,0:04:00.534
está envolto em um ,

0:04:00.534,0:04:02.984
agora têm linhas novas antes e depois.

0:04:02.998,0:04:05.495
E talvez isso seja o que você quer.

0:04:05.495,0:04:07.525
Apenas lembre-se da diferença.

0:04:07.553,0:04:09.383
E continue.. porque há muito mais que

0:04:09.395,0:04:10.885
podemos fazer com essas tags.

0:04:10.885,0:04:12.763
Especialmente o poderoso !

0:04:12.803,0:04:14.000
Legendado por [Fred Guth][br]Revisado por [Cainã Perri]