[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.27,0:00:03.90,Default,,0000,0000,0000,,Estamos de volta com nossa página sobre\Nrosquinhas e os perigos de comê-las.
Dialogue: 0,0:00:03.90,0:00:08.15,Default,,0000,0000,0000,,Gostei da classe {\i1}warning{\i0} que adicionamos\Nàs {\i1}tags {\i0} e {\i1}{\i0}{\i1}{\i0} .
Dialogue: 0,0:00:08.15,0:00:12.67,Default,,0000,0000,0000,,Mas quero que o aviso se \Ndestaque ainda mais.
Dialogue: 0,0:00:12.67,0:00:16.89,Default,,0000,0000,0000,,Conseguimos essa borda cinza,\Nda classe CSS {\i1}"fact"{\i0}.
Dialogue: 0,0:00:16.89,0:00:20.92,Default,,0000,0000,0000,,Mas ficaria melhor com uma\Nborda laranja mais larga.
Dialogue: 0,0:00:20.92,0:00:25.80,Default,,0000,0000,0000,,Vamos tentar colocar isso na\Nclasse CSS {\i1}"warning"{\i0}.
Dialogue: 0,0:00:25.80,0:00:29.58,Default,,0000,0000,0000,,Então: {\i1}border, 5 px, solid, orange{\i0}.
Dialogue: 0,0:00:29.68,0:00:34.20,Default,,0000,0000,0000,,Adorei! Mas apareceu \Ntambém na {\i1}tag {\i0}
Dialogue: 0,0:00:34.22,0:00:37.32,Default,,0000,0000,0000,,e não ficou tão bem junto com o texto.
Dialogue: 0,0:00:37.32,0:00:39.98,Default,,0000,0000,0000,,Quero que apareça apenas no\Nparágrafo que usa {\i1}"warning"{\i0},
Dialogue: 0,0:00:39.98,0:00:43.74,Default,,0000,0000,0000,,e não em avisos dentro do texto.
Dialogue: 0,0:00:43.74,0:00:46.51,Default,,0000,0000,0000,,Como posso tornar as regras\NCSS mais específicas?
Dialogue: 0,0:00:46.51,0:00:50.53,Default,,0000,0000,0000,,Uma maneira é fazer uma nova\Nclasse {\i1}"warning-paragraph"{\i0}
Dialogue: 0,0:00:50.53,0:00:55.15,Default,,0000,0000,0000,,e mover as propriedades para ela.\NMas não temos que fazer isso.
Dialogue: 0,0:00:55.15,0:01:01.22,Default,,0000,0000,0000,,Podemos dizer ao navegador para aplicar a \Nborda só em parágrafos que usam {\i1}"warning"{\i0},
Dialogue: 0,0:01:01.22,0:01:04.58,Default,,0000,0000,0000,,mas não em outras tags que usam "warning".
Dialogue: 0,0:01:04.58,0:01:09.12,Default,,0000,0000,0000,,Para fazer isso, primeiro escrevemos\No elemento escolhido "p"
Dialogue: 0,0:01:09.12,0:01:14.17,Default,,0000,0000,0000,,então colocamos um ponto,\Nseguido do nome da classe.
Dialogue: 0,0:01:14.17,0:01:18.67,Default,,0000,0000,0000,,Isso faz o navegador encontrar todos\Nos  que usam a classe "warning"
Dialogue: 0,0:01:18.67,0:01:21.38,Default,,0000,0000,0000,,e aplicar as propriedades\Ndessa classe neles.
Dialogue: 0,0:01:21.38,0:01:26.45,Default,,0000,0000,0000,,Então vamos colar a propriedade\Nda borda aqui...
Dialogue: 0,0:01:26.45,0:01:34.32,Default,,0000,0000,0000,,e voila! Temos a borda na classe {\i1}fact{\i0}\Nmas não em {\i1}{\i0}.
Dialogue: 0,0:01:34.32,0:01:37.60,Default,,0000,0000,0000,,Podemos fazer qualquer combinação\Nde elementos e classes,
Dialogue: 0,0:01:37.60,0:01:42.60,Default,,0000,0000,0000,,para forçar o navegador a aplicar o estilo\Nsó em {\i1}tags{\i0} que usem uma classe.
Dialogue: 0,0:01:42.60,0:01:45.23,Default,,0000,0000,0000,,Certifique-se de seguir\Nexatamente a sequência:
Dialogue: 0,0:01:45.23,0:01:50.71,Default,,0000,0000,0000,,nome da {\i1}tag{\i0}, o ponto,\Ne então o nome da classe.
Dialogue: 0,0:01:50.71,0:01:56.45,Default,,0000,0000,0000,,Se colocar acidentalmente, um espaço entre\Na {\i1}tag{\i0} e o ponto, não funcionará mais.
Dialogue: 0,0:01:56.45,0:01:59.94,Default,,0000,0000,0000,,Porque espaço significa outra coisa em CSS
Dialogue: 0,0:01:59.94,0:02:02.80,Default,,0000,0000,0000,,e o navegador interpretará essa\Nregra de forma diferente.
Dialogue: 0,0:02:02.80,0:02:06.88,Default,,0000,0000,0000,,Fique ligado, para descobrir mais\Nsobre o significado do espaço.