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

E chegou a hora de começar os nossos estudos do capítulo 12 onde a gente vai começar a falar sobre CSS [Música] [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 e agora chegou a hora que muita gente estava esperando né que a gente vai começar a trabalhar com estilos para começar aplicar tamanhos cores formas aos nossos arquivos HTML que convenhamos são bem sem graça até o momento e aí cabe uma informação Muito importante se por acaso você pulou um monte de vídeo porque você não via a hora de chegar os estilos a entender como funcionam as cores nos tamanhos não tem problema você pode até continuar assistindo aqui mas a qualquer momento se você sentir alguma dificuldade é porque você tornou esses outros vídeos então assim é um conhecimento você precisa ter Tem muita gente que vai pensar assim não vou ver o basicão de html depois vou ver o basicão de CSS depois eu volto se você tiver uma determinada organização não vejo muito problema nisso o que você precisa é que a qualquer momento se você fazem isso Eu não entendi saiba que é porque você pulou o vídeo e aí você volta e assistir na sequência e lá na frente se passa no HTML é difícil acesso é difícil que você tá pulando vídeos você tá dizendo coisas que eu planejei para que você aprenda direito não importam aí você não aprende fala que é difícil Claro você pulou coisas que eu julgava que era importante então assim se você quiser entender como funciona os estilos fora da ordem que não tem grandes problemas mas lembre-se que aquele conhecimento que você pulou vai te fazer falta e você precisa voltar nele Combinado então vamos para o computador e nos entender melhor como funcionam as CSS mas antes de dar continuidade a sua aula eu vim aqui dar um recado especial da Record que é patrocinadora do nosso curso e como eu disse aqui anteriormente em outros vídeos esse curso a Record é uma organização com o objetivo de ensinar tecnologias e ela tá trazendo para você que é aluno do curso em vídeo uma série de cursos que vão te preparar para entrar no mercado de trabalho e eles oferecem cursos desde o mais básico que é conhecendo o ambiente Windows e o pacote Office até alguns outros que eu vou te interessar um pouquinho mais como a eu ti internet das coisas realidade virtual realidade aumentada desenvolvimento de aplicativos móveis um curso de tecnologias pro futuro e muito mais e para fazer parte da plataforma da Record é muito simples a inscrição é grátis e você vai ter todas as instruções pelo código que tá aparecendo aqui na sua tela é só você abrir o aplicativo da sua câmera apontar para o código que tá aparecendo e ver todas as oportunidades que a Record tá trazendo para você voltamos agora a sua aula 1 é bem Estamos aqui e a primeira coisa que pode acontecer eu vou abrir aqui nessa parte de exercícios tá é você sentir alguma estranheza quando eu falo as CSS quando eu falo as CSS é porque essa sigla CSS significa cascading Style sheets ou folhas de estilo em Cascata Então se o termo é folhas na as folhas que feminino no plural então cfs uma tecnologia que são as folhas de estilo em Cascata beleza não ah mas se eu falar o CSS tá errado não tá cara você pode falar ou se é certo não tem problema muitas vezes eu vou falar ou se s s a o código CSS aí é o CSS mas as folhas de estilo em Cascata eu sempre vou me referir em feminino no plural beleza mas é só um detalhezinho tá basicamente aqui ó nós já temos os exercícios os 12 primeiros exercícios que a gente não tô sem estilo nenhum basicamente é fundo branco letra preta e ponto né gente não aplicou cores vamos começar aqui no Rio Casca 103 eu vou começar te mostrando o que é errado tá porque que eu vou te mostrar as coisas erradas deixou de estar aqui com o visual Studio code Ok com o botão direito ou clicar em Open with Cold ele vai abrir o visual Studio code tá aqui já com pasta exercícios 13 por criar um novo arquivo que vai sumiu index. hu ml e provavelmente eu já falei isso é que eu não lembro tá vou criar o código base aqui vamos começar a falar sobre estilos inline existe um jeito antigo de se fazer que até funciona eu vou botar aqui um olá mundo que assim ó Bari BG color red por exemplo você vê que o próprio visual Studio code separar o mouse aqui em cima ele diz assim ó esse método não está em conformidade utilizo CSS background color' a propriedade da economia Colors CSS no elemento no lugar de BG color não usem isso tá isso é antigo Isso é errado ó por exemplo tem um parágrafo e botei fonte ó já ficou vermelho Font color igual a oi oi cara vermelho está errado também tudo que ficar em vermelho aqui ele é um parâmetro propriedade o valor ou qualquer coisa eu pegue antiga tá html4 não é assim que a gente vai fazer nós vamos fazer o seguinte seguindo a orientação do que tá lá no livro nada o que a gente colocou lá no nosso PDF Vamos criar aqui um corpo que é o seguinte ó O criar um H1 vou chamar de Capítulo 1 vou querer um H2 aqui que é o subtítulo DH um a gente já viu isso não tem novamente que é o capítulo 1. 1 e aqui em baixo vou criar um parágrafo e nesse parágrafo botão Glória então só botar a senhora l o r aí que ele tá em Lauren aqui que ele já criou um código basicão para você aqui não precisa ficar digitando textos grandes Vou botar aqui H2 Capítulo 1.

2 que é outro sobre o capítulo do capítulo 1 também vou fazer um Lauren aqui e vou fazer aqui outro H1 capítulo 21 outro H2 Capítulo 2. 1 e um parágrafo também com Lauren e funcionado já tá salvo né na verdade vamos abrir exercício 13 e vamos abrir o windhex nos organizar a tela que vai ficar divididinha organizando tudo pronto Beleza já temos aqui o nosso HTML basicão capítulos e tudo mais a gente viu isso já nos vídeos anteriores se você não viu acompanha porque você precisa dessa base aqui o grande problema Você viu no Capítulo 8 né do nosso gente se você não viu vai lá nos vídeos do capítulo dica muito importante a gente fala sobre semântica a linguagem HTML a partir da versão 5 ela não é focada em estilo ela é focada em semântica em significado em dizer que esse capítulo 1. 1 e o capítulo um ponto dois estão dentro do capítulo 1 Tá vendo você visualmente consegue perceber a gente aprende que pagar um a letra grande H dois era menor que não existe já faz muito tempo né nunca existiu na verdade mas HTML é focado em semente tem conteúdo em fazer o conteúdo fazer sentido as folhas de estilo elas vão te permitir dar estilo Como o próprio nome diz na CSS ela o que você tem um estilo a sua página E aí CSS pode ser aplicada de três formas você deve ter visto isso no nosso Capítulo 12 a primeira forma que a gente vai ver nesse vídeo é o estilo inline são mais fraquinho de todos é o que eu menos recomendo mas é o que vai te dar o primeiro contato até o seguinte você vem aqui em Bari vez de você colocar BG color red você vai fazer isso aqui ó você vai colocar tá eu background-color só botei Beck ele já me sugeriu aqui vai para a escola ele já me deu a opção de selecionar selecionar não redes mas sei lá o botão azul bem fraquinho vou botar Lights Lights Caillou show quando eu atualizar ele já aplicou eficiência de estilo então eu consigo cada tag colocar um estilo e Nesse estilo configurar certas coisas por exemplo que horas o meu Capítulo 1 Capítulo 1 eu vou fazer isso aqui ó tá eu tô aplicando estilos locais color que a cor da letra é Midian Blue falar ele já tá o Capítulo 161 Oi gente vai falar para o Guanabara mas o capítulo um time de um Blue mas o capítulo 2 que também o H1 não ficou é essa é uma grande limitação do estilo inline eu tenho que vir aqui ó no outro H1 e botar tá eu color me deu um Blue aí os dois vão ficar no de um grupo tá então se você vai ter que fazer isso manualmente em todos os seus H1 que sei lá você tem só 50 H1 você vai ter que colocar 50 a uns né formatado na verdade a gente nem recomendo muito Saga uns uma mesma página né na verdade tinha uma regra antigamente que se falava que era só uma dá um mas não tem mais necessidade O próprio Google desses você viu estudante o material de PDF até coloquei um vídeo de um engenheiro do Google dizendo isso mas enfim você tem que aplicar o estilo a cada um deles outra coisa que você pode fazer mudar a letra tá vendo aqui gente vai falar sobre Fontes é daqui a dois capítulos Mas a gente pode mudar a fonte AC para uma fonte Arial Sei lá eu posso ir aqui em Vale aqui no estádio do Vale depois do ponto-e-vírgula eu posso colocar outras por exemplo 1 e ali ó um Family vai ser Arial quando eu boto Isso ele já mudou a fonte paralela você percebe Não tem não existe significado nenhum isso é só uma aparência é só estilo é só Perfumaria e eu não tô desmerecendo os estilos Não entendi errado é que eu tô dizendo o seguinte o sml ele vai funcionar dando significado ao conteúdo significado é algo importante principalmente para quem tá lendo ou para mecanismos de busca mas o estilo ele vai se focar não não Design da coisa e também é importante que só atrai o visitante então site feio Possivelmente o seu visitante vai te abandonar no meio do caminho eu tenho aqui ó O H2 vou fazer também um color Dark Red ó tá vendo é isso aqui ficou vermelho mas eu quero esse aqui também vermelho aí você tem que pegar a mesma coisa e fazer em cada um deles tá então assim isso é meio chato eu vou até criar uma situação aqui vou colocar tudo vermelho aqui beleza imaginar que seja muito mais do que estranho tá tudo bonitinho aqui tudo certo eu quero esse parágrafo aqui ó tá vendo ele deixo selecionar que você vai ver melhor esse lado esquerdo tá linha Dinho esse lado direito tá todo bagunçado tá vendo Então o que eu vou fazer aqui é nesse parágrafo aqui eu vou colocar Style Packs online ajuste fai vamos atualizar e agora olha só ele fez mal reorganização do conteúdo para ele ficar em ambiente também mas esses outros aqui ficaram bagunçado você vai ter que pegar esse negócio aqui para justificar e colocar dentro de cada um dos parágrafos isso é chato e isso é trabalhoso e mais do que isso isso vai poluir o seu HTML Olha isso você começou a botar coisas de estilo junto com o seu conteúdo isso é ruim né Isso é vai poluir o seu código não vai ficar tão coerente com seu código né você me deu saiu se separar o que é estilo do que é a conteúdo mais pior ainda vamos imaginar o seguinte ó tá aqui Capítulo 1 Capítulo E aí beleza aí o cliente chega para você falar assim olha só os seus O site ficou ótimo Na verdade são os cortes ou Péssimo né mas vamos supor que ele tenha gostado a gente vai falar de cores no próximo capítulo não no próximo vídeo no próximo capítulo e ele chegou sozinho tá beleza só que tá ótimo mas quando chegar época de Natal eu vou querer que o fundo fique vermelho e as letras fiquem Verde sei lá por uma loucura do cara lá aí você vai ter que vir aqui e alterar cada um desses aqui é tudo que é vermelho aqui eu vou ter que mudar para verde então assim isso vai dar trabalho isso vai dar bastante trabalho na verdade e imagina que o cliente não tenha só essa página que ele tem as várias páginas e você vai ter que ir dentro de cada página e ficar mudando cada um dos parágrafos cada um dos jogadores cada uma das coisas que você quiser então esse método tem um método em lá então o primeiro que a gente tá vendo ele é usável a gente usa funcionou não tem nada de errado não tem nada antigo não tem nada né esse é mais no caso Ah entendi que esse método ele não vai ser utilizado no seu dia a dia tá ele é um método para configuração de pontuais uma outra configuração muito pequenininha para construir o design do seu site você vai ter que aprender as outras duas técnicas que a gente vai ver os próximos vídeos mas basicamente o slime esse CSS inline ele basicamente online significa o seguinte o estilo é feito na mesma linha que o CSS né E todos os estilos todas as configurações que também são feitas na mesma linha tá vendo aqui ó background color' Font Family se eu quiser por exemplo a font-size eu posso colocar por exemplo quero colocar uma fonte de 20 pixels de altura de vai vir aqui ao font-size gente tem que ser atualizei a fonte ficou maior tá na verdade essa aqui é a fonte base né a font-size fim de pixels é a fonte de base e o meu h1ac de um a dois eles vão aumentando de acordo com a fonte base e foi definida aqui no Vale beleza não eu quero agora diminuir um pouco e no capítulo um Beleza você pode aquela no meu H1 eu venho aqui e bota o som sai e eu vou colocar 16 a fonte de base eu vou colocar 0.

7 MM e a gente vai aprender a utilizar o Ian né que é uma ele é 0. 7 do tamanho normal da fonte que foi gente pics aqui tão entrando aqui sério com sete não vou botar 1 m aqui uma mr16 aqui essa daqui eu vou colocar aqui 2. am é o dobro de 20 botar 1.

5 Esse aqui foi 1. 5 o meu H2 eu vou colocar com o Font size 1. 2 daqui é relativo aos 20 pixels tá vendo pra poder ficar mais organizado Mas beleza organizei esses dois aqui ah não mas eu quero também organizar esses que era organizar isso eu vou ter que ficar pegando cada um desses pontos sai sai eu tenho que pegar as fontes aqui colocar em todos os H1 né no caso só esse outro lugar um para resolver já resolvi agora que resolver esses dois h2s é aquilo também vou ter que botar o Font size 1.

2 é m também em cada um deles se você não entendeu muito bem para que que significa que significa esse PX em cm não tem problema a gente vai falar sobre isso mais para frente nada lá já ficou mais discreto Se você quiser também você pode por exemplo vaga um além do Collor você pode botar um background-color aqui ó é tão cor de fundo Vou colocar aqui um dodgerblue falar certo mas a gente funciona esse mas eu quero também no outro aí você tem que vir aqui andar com um color dot blusa com um ponto e, e colocar também você entende que eu vou ter muito trabalho replicando o código isso não é uma boa técnica isso não é recomendado Mas é uma técnica que funciona e está de acordo com esse SS na sua versão atual que é versão 3.