Estilos CSS externos - @Curso em Vídeo HTML5 e CSS3

e continuando nossos estudos sobre o capítulo 12 nós vamos falar sobre a última técnica de inserção de CSS nos seus documentos HTML 5 [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do seu curso de html com CSS a gente tá trabalhando com as versões mais atualizadas das linguagens e agora eu vou te mostrar como fazer a intenção da maneira que eu gosto mais que na verdade não é uma coisa sua pessoal minha é a maneira mais versátil que tem que adicionar estilos CSS aos seus projetos e eu não preciso nem dizer que se você não viu os estilos anteriores as formas anteriores que você não vai entender nada dessa então volta lá assistir os dois vídeos anteriores aqui que o capítulo 12 faça os exercícios na sua casa com que na verdade e eu tô simplesmente duplicando os arquivos como eu vou fazer exatamente agora e o recado dessa aula aqui quem vai trazer para você é um estudou na alta e como eu disse um recado anterior traz vários cursos para você mas não pense só que é só curso para quem é muito avançado não aqui não consegui por exemplo nós temos um curso de introdução à programação utilizando a ferramenta aviso áudio e para você que tá se perguntando o que que introdução programação se você tá querendo aprender só a criar sites pois a parte Inicial você não precisa saber programar o problema quando você vai aprender JavaScript PHP Java ser que aí você precisa nos fundamentos de programação e não estudou na alta a gente tem um curso mais atualizado muito mais atualizado do que esse que a gente disponibiliza aqui no curso em vídeo mas não estudou na outra a gente tem cinco módulos de desenvolvimento dentro de princípios básicos os primeiros passos utilizando uma ferramenta Nacional muito mais atualizada que é o Portugal estúdio então se você já teve algum problema em relação à desenvolvimento nos princípios de desenvolvimento Talvez seja uma ótima pedida dá uma olhada nesse curso de cinco módulos cheio de aulas e cheio de exercícios para você e você pode ter maiores informações apontando a câmera do seu celular para esse código que tá aparecendo aqui embaixo ou pegando link na descrição desse vídeo voltamos agora a nossa aula normal entendeu lá já estou aqui na tela tô exatamente com o documento da aula anterior Mas nós vamos Oi gente eu vou fechar aqui fecha tudo nós vamos voltar para pasta de exercícios e vamos fazer a mesma coisa que o vídeo anterior botão direito nele e se 14 vamos selecionar o exercício 14 a pasta cliquei nela control c control V gerei uma cópia dela vamos editar e pode clicar com o botão direito e renomear só clicar e esperar Vamos por partes página 15 né Existe 15 e vamos ver de clicar com o botão direito e editar com o Cláudio beleza já vou abrir também no navegador Ok já tá com projeto aberto exatamente o projeto da aula anterior onde eu tinha aqui a configuração básica e tudo mais o que nós vamos fazer agora é o seguinte Olha só nós vamos trabalhar com estilos externos que seriam os estímulos externos serão os estilos onde essa parte aqui a aplicação dessa parte está em outro arquivo vamos entender com a necessidade de um projeto dele vamos fazer o seguinte ó aqui no capítulo dois no final do capítulo 2 eu vou criar um parágrafo tá vai lá no final do capítulo 2. 1 aqui em baixo vou criar um parágrafo com o link ó então a página 2 página 02. HTML é um chá mais aqui vou botar aqui ir para a página dois ir para a página dois tá então vamos atualizar aqui vou ver lá e a página dois problema quando eu clico aqui no papai não dois ele não vai para o arquivo não foi encontrado vamos ter criar esse arquivo E aí vou te dar a primeira dica importantíssima serve Sempre que você quiser criar um arquivo no visual Studio code se você tiver um código tá é importante dizer você não entendeu como é que funciona isso daqui é porque você como eu disse lá no início deste Capítulo é lá no primeiro vídeo desse Capítulo Você pode ter pulado a aula né ah não preciso muito saber o que que é estilo Beleza você viu você entendeu Você colocou para funcionar se você não entendeu o que eu disse para encerrar guiar você pulou as aulas de link Então volta lá assistir o capítulo sobre ligações sobre o link sobre âncoras e depois você volta aqui tá Então eu queria um link com a própria página posso até botar aqui ó tarde underline céu aprender abrir na própria aba né Então tá lá para você crê de trás segurar a tecla control o seu teclado tá vendo aqui ó control-click Tá passa o mouse em cima do mesmo que tá lá simulink contra o que você seguro contra um clica ele vai dar um erro para dizer assim olha não foi possível abrir o pai já deram dois ovos porque não existe né que eu só tenho aqui ó willex você pode clicar aqui é criar que ele já criou aquilo para você isso é bem legal aqui eu vou criar um HTML padrão pt-br Ou tá aqui segunda página e aqui eu vou criar uma dá um só mandar um segunda não vou querer aqui segunda página porque é um h2ac teste de estilos vou quer um parágrafo que vai ser um lar em lição e depois vou criar um parágrafo vai ser um link para voltar para página anterior a página teria como não existe eu simplesmente aperto contra o espaço tem que tá aqui no meio né Estamos aqui no meio se aperta contra o espaço aí vai dizer aonde eu quero crescer lente para o index daqui voltar certo aí a gente vai fazer vamos atualizar aqui ir para página dois a gente vai página dois lá tá vendo a segunda página normalmente eu quero que tenha o estilo da primeira quando eu voltar e volta já com estilo quando eu vou ajeitar sem estilo porque eu não queria estilo aqui aí o que que o aluno normalmente faz a Guanabara simples você vem aqui e seleciona o Style control c para copiar vem aqui depois do Tarot controle para colar tô colando a mesma estilo a partir de agora quando eu for para página dois ela já está com mesmo estilo lindo maravilhoso funcionou agora imagina seguinte um seu site tem sei lá 15 páginas será tem muitas páginas toda a página que você criar você vai querer o mesmo estilo na grande maioria dos casos e aí o que que você faz você vai ter que copiar isso aqui para cada uma delas Beleza sem problema se deu control c control v 15 vezes está lindo só que nós temos um problema imagina que depois o teu cliente fala assim olha só eu não quero esse Light Steel Blue agora agora eu vou mudar para o Lights Golden Golden Rose Hello rogel tô mudando aqui ó quero esse amarelo aqui percebe que a primeira página ficou amarela a segunda não E aí eu água na boca vai na página dois e coloca também cara isso para 15 páginas vai dar um trabalhão então assim quando você tem várias páginas em todas elas seguem mais ou menos o mesmo estilo vou te ensinar uma dica matadora dá uma olhada aqui ó a minha página dois eu vou tirar o estilo certo e eu também vou tirar o estilo da página não só que eu vou tirar o estilo assim ó eu vou pegar essa parte aqui só os seletores vou dar contra o X para recortar a contra os Finger corta tirei o estilo a partir de agora nenhuma das minhas páginas tem estilo tirei daqui tinha ele aqui sem problema fica tranquilo que eu vou fazer aqui eu vou vindo windex na verdade eu vou ter que ir nos dois né no lugar onde estava o a tag Style eu vou criar um link ó só digitar link quando eu digito Ninguém me dá várias formas de link inclusive o Flávia com que a gente já usou anteriormente Só que eu não quero fazer eu quero CSS quando eu faço o link para CSS ele já me sugere criar um arquivo chamado Style.

Certo eu posso chamar do que eu quiser posso chamar de meu estilo. CSS mas na verdade vou o Style está acontecendo esse vai ser o meu estilo tá o nome que você quiser você vai segurar O contro clicar sobre a palavra Style Vai mandar aquela aqui nesse arquivo style. css você vai dar controle e vai jogar um estilo uma coisa que às vezes dá problema de compatibilidade é com acentuações para você usa esse excesso um pouco mais avançado algumas simbologias aí você mandou tomar regra né Esquece a gente chama isso de regra só botar uma regra do seguinte@cassete a gente vai ver agenda está Existem várias regras inclusive uma chamada fonte fez então usar mais para frente eu vou botar aqui ó@cassete entre aspas eu vou botar utf-8 exatamente onde; no final é exatamente o que eu usei aqui ó utf-8 tá vendo compatibilidade com acentuação que a gente fez em HTML quando a gente usa CSS externo como ele não tá dentro do HTML eu posso criar essa regra linha aqui no início dizendo que ele também vai ser compatível com teq-8 tá não é obrigatório mas de vez em quando você vai olhar para falar com isso que se a roupa não é uma regra tá tudo que começar com arroba aqui a o início do arquivo CSS você pode manter dessa maneira quando eu faço isso eu estou dizendo que o Windows vai usar esse arquivo Style eu vou criar a mesma coisa no página dois lá no meu página dois eu venho aqui e coloco link link de CSS para o arquivo style.

css também vamos atualizar já tá amarelinho Quando eu for para a página dois ela tá com o mesmo estilo e aí eu vou fazer o seguinte anão Amarelo aqui com azul não ficou legal beleza vamos fazer o seguinte no meu bairro ficou Amarelo fundo aqui o meu H1 vou mudar aqui para ir Elo Dark ela tem daqui a Lojistas de sidrac goldenhood atualizei aqui ó Tá beleza tá amarelo aqui eu não quero azul aqui eu quero Branco Não gostei muito não vou botar aqui botar marrom mais um é marrom em inglês tá beleza ficou bom toques beleza Olha só quando eu voltar para página principal o mesmo estilo foi aplicado por que que eu tô utilizando o arquivo se o teu cliente chegar para você falar assim olha só eu quero mudar um pouquinho quero clarear um pouquinho E é só você vir aqui modificado o jeito que você quiser ó botar aqui Golden Globe ó a Ficou bem melhor é esse quando a gente for para a página dois já cá do mesmo Amarelo cara então assim esse método de você utilizar arquivos CSS separado ó eu tenho a página um chamando um link criando um link para o CSS a página dois cria um link processo também se eu quiser uma página três é só botar esse link aqui que ele vai usar esse estilo cara eu coloquei um estilo separado eu creio um arquivo exclusivo para eu colocar os meus estilos Então essa maneira é a mais versátil cara principalmente para construção de sites inclusive deixa anotado aí nas suas ações que eu não coloquei esse um PDF você pode utilizar mais de um link por exemplo você pode fazer isso aqui ó um link de CSS para sei lá né o celular Extra alguns estilos extras só algumas páginas tem ele vai somar ele vai adicionar tudo que tem aqui e tudo que tem aqui tá então aqui no caso eu vou tirar porque não tem essa a mais por favor utilize mais essa técnica aqui na verdade deles a técnica dessa dessa aula e da aula anterior evite ao máximo no final do capítulo eu falo muito sobre isso evite ao máximo usar o estilo inline só faça isso se você for fazer uma configuração bem pontual que só vai funcionar naquele arquivo naquela página e ainda assim de preferência é utilizar um estilo interno uma outra pergunta que geralmente os alunos faz o seguinte eu posso misturar água eu posso fazer uma baguncinha aqui pode sem problema eu trouxe aqui mais um recado muito rápido bem tranquilo e um pedido para você não sei se você sabe mas Além daqui do YouTube Eu também estou bem ativo lá nas minhas redes sociais no Instagram e no Instagram do consegui vídeo então que eu vim te pedir nesse vídeo é bem simples gostou da aula tá gostando do curso segue a gente no Instagram Vamos tornar essa comunidade muito maior e ajudar a divulgar o trabalho de Quem produz conteúdo com tanto carinho e tanta dedicação e a fazer por exemplo esse link para chamar o style.