O QUE É CSS? (SELETORES, PROPRIEDADES E VALORES)

oi oi gente sejam bem-vindos a mais um vídeo aqui no canal eu só Rafaella ballerini e hoje o assunto vai ser CSS e E aí no Casqueiro stylesheets mais conhecido como CSS é uma linguagem de estilos e ela serve para estilizar elementos de uma página Web eu também vi um aplicativo mobile então como eu falei no vídeo passado sobre HTML ele é o esqueleto da página né o HTML simplesmente mostra onde cada elemento verificar ele forma a estrutura da página que os terciários ele vai entrar com uma pele com uma maquiagem ou como a roupa

do nosso corpo humano de página web se você ainda não assistiu o vídeo da semana passada eu vou deixar ele aqui em cima eu só você parava e assistir porque assim eu fiz um código né semana passada do HTML e agora vou fazer implementando CSS nesse mesmo código no final do vídeo então assim só uma dica do CSS ele vai ser quem vai utilizar cor tamanho do texto que a gente vai escrever a fonte do texto de Faria ao Italo romano e várias outras coisas super e para deixar a página Web muito mais bonita para

os vários lá assim táxi do CSS Ela é bem simples e bem fácil de entender então estrutura vai ser a seguinte a gente vai ter o seletor que nada mais é do que o elemento HTML que a gente vai utilizar para poderes utilizar E aí dentro dele a gente vai ter o bloco de declarações o espaço que a gente vai colocar todas as mudanças que a gente quer fazer nesse elemento e para cada declaração a gente sempre vai ter uma propriedade e o valor dela separados por dois pontos a propriedade ela vai ser o atributo

que vai estar aplicado então por exemplo a gente pode pegar a cor a escolha de pegar o plano de fundo a fonte o tamanho da fonte EA valor ele vai ser essa característica ou seja para cor a gente pode colocar o azul para o tamanho da fonte de pode colocar 24 pixels etc Então essa estrutura é bem simples você gente quiser a gente vai poder colocar várias declarações nesse mesmo bloco Então a gente vai colocar um ponto e, para separar cada uma delas inicialmente existem três formas a gente colocar o CSS dentro do nosso do

é a primeira delas é a gente já colocar ele dentro do próprio elemento Então pegando como exemplo o elemento pq é de parágrafo do HTML a gente vai colocar o Style que indica já que ele vai começar o nosso código CSS E dentro dele a gente vai colocar todas as outras propriedades e os valores de cada uma delas nesse caso eu coloquei duas propriedades que estão a cor eo tamanho da fonte agora eu vou parece-me um palavrão de hashtag não sei o quê mas aquela mistura de vermelho verde e azul né o famoso RGB e

para você pesquisar Tem vários sites que mostram Qual é o código da cor que você quer e eu vou fazer também um post no Instagram se você ainda não me segue os seguir aqui que eu vou fazer esse post ainda e eu só vendo a fonte vai ser de 20 pixels Então essa forma de escrever o CSS no HTML não tem erro você vai colocar ali dentro do elemento que você quer mudar mas também tem outras duas formas a segunda também receber dentro do nosso documento HTML mas agora ela não vai ser dentro da própria

técnica a gente vai querer alterar ela vai ficar dentro de uma terna o Style e o tipo vai ser tsss porque a gente vai usar o CSS para poder fazer isso a partir daí não que a gente colocar dentro desta tag que vai estar abertura e fechamento que nem eu já expliquei no último vídeo na como funciona tudo ali vai ser documento CSS que por exemplo eu coloquei o nosso seletor ter né o elemento peso HTML com as suas propriedades e os seus atributos nesse caso tudo que for P no nosso documento HTML vai receber

se CSS e a terceira forma da gente usar o CSS é criando um próprio arquivo pros CSS da página Então você vai criar esse arquivo pontos ss e lá dentro você vai colocar todos os seletores com todas as propriedades de todos os valores que eles tiverem e assim como de outra forma que eu falei todos os elementos ter que tiverem nesta página vão receber o CSS faz como que acontece o link e entrou HTML né a página HTML que a gente tem e o outra o outro arquivo CSS que a gente vai ter né como

que ela se interligam html o link essa tarde link ela nada mais é do que a ligação entre outros documentos e o HTML Então a gente vai colocar ela dentro do Red e vai especificar que vai ser um HTML com a gente vai colocar o réu Direction e vai ser stylesheet e também a gente vai colocar o hrs q Vc é referência com o nome do nosso documentos SL então o que você colocar minha página. CSS você vai escrever ali no a garrafa simples assim gente porém ainda tenho mais uma coisa para falar para vocês

que essa está os do seu leitores Sim esse seletor que eu falei que é um peixe é o h u pode ser de várias outras formas que a gente vai descrevê-los Como assim o que eu falei de seletora Até agora foram dos próprios alimentos que a gente usa então se eu falei o p é porque aplicar os parágrafos nosso documento HTML ou seja coloca ali direto no elemento mas a gente tem várias outras formas de selecionar seletores para gente poder descrever em qual deles é do nosso CSA e eu vou listar alguns deles aqui que

são os mais usados mais simples de usar para vocês conhecerem um pouco do nosso HTML a gente vai ter lá novamente o elemento pedir parágrafo Porém esse elemento parágrafo daí seu principal da página que eu quero que ele fique mais bonito mas visualmente legal então eu vou selecionar uma classe para esse elemento ter para ele ficar diferente de todos os outros presos que foram lá embaixo pra isso eu vou colocar dentro dele a classe que vai ser a classe escolher um nome de classe para ele pode ser principal por exemplo e vai ficar dessa maneira

mas agora no CSS como que a gente faz para chamar apenas este elemento que tem essa classe principal agente usar o ter que ele vai ser geral para todos os outros parágrafos a gente vai colocar o te ponto principal Então a gente vai especificar que vai ser esse exato parágrafo a gente quer se não sociais a gente colocar apenas ponto principal é só chamando a classe beleza daí a gente vai chamar o mesmo elemento gente pode simplesmente colocar essa mesma classe em outros elementos que são diferentes de ter por exemplo H1 Se eu colocar a

mesma classe droga ou então vou colocar dentro do elemento do órgão a classe principal ele vai receber essa mesma propriedade em si mesmo atributo que o ter principal vai ter Então acho muito legal é muito divertido de usar isso outra forma de seletor que a gente pode usar agora é o a Índia é o ID a diferença do Egito classe que a gente usou no exemplo anterior é que o Agile só vai ser usado para um elemento então aquilo que eu contei que a gente pode usar a mesma classe para a diferença elementos não vai

acontecer na verdade a gente só vai poder colocar para um desses elementos Então a gente vai escolher um H1 que vai ser o órgão principal da página e a gente vai colocar o ar dia lá dele eu posso escolher um nome por exemplo título E aí eu não vou poder colocar esse título para nenhum outro elemento que tiver ali que no CSS eu vou chá a sede de outra forma não vai ser mais com o ponto da classe e vencer com hashtag meu funcionário da forma igual como eu já expliquei das outras vezes entra colocar

nossa sociedade o valor se vê se aplicada apenas para esse elemento que tiver o Edi selecionado outra coisa que a gente pode usar os nossos eleitores são as pseudo classes e elas são palavras chaves que elas não especificaram estado dos elementos que a gente vai usar como assim eu vou usar como exemplo clássico a opção do classe Rover e ela vai indicar agora a gente colocar ela ali no nosso seletor que aquele estilo só vai ser aplicado quando os olhos passar o mouse por cima daquele elemento então por exemplo o botão que ele é preto

normalmente a gente vai colocar o Butantã Rover Blue e na hora que o usuário passar o mouse por cima desse botão ele vai ficar azul agora eu vou colocar para vocês a imagem de como ficou a página HTML que eu mostrei no vídeo passado para você só tem HTML e agora mostrar para vocês um código CSS que eu montei para colocar nesta página a atriz a gente vai acontecer com cada um desses elementos como vocês acho que vai ficar essa página Se quiser pode dar uma causado assim eu espero fico aqui esperando eu vou explicar

rapidinho para vocês Antes de mostrar o resultado só para vocês acompanharem o raciocínio então não pode eu coloquei uma cor de plano de fundo rosa então ele vai ficar voz atrás de mim inteira no fundo da classe título eu coloquei uma cor mais vermelho escura eu coloquei também o alinhamento do texto Central então ele vai ficar Centralizado o texto e as famílias de fontes na fonte da letra vai ser Verdana por fim o indicador parágrafo ele também vai ser Centralizado ele vai ter uma cor um pouco mais claro e com vermelho escuro que eu tinha

colocado ali em cima e não olhei vocês vocês vão saber que geram vermelho tá isso daí é só jogar na internet que você descobre o tamanho da letra V ser de 20 pixels e a Fonte também vai ser Verdana Então esse resultado da página vou mostrar agora um antes e depois que vocês terem noção do que que mudou só com CSS e ele é que tá E aí é doido né gente como faz uma mudança muito grande nesse licitação da nossa tela e também deixar um detalhe que eu vou colocar Esses códigos da minha página

asinha fofa que todas em vão nos vídeos no desse ramo então vou deixar aqui na descrição o link do depositório de o repositório e se você não sabe o que a gente sabe não tem problema Futuramente eu vou fazer um vídeo aqui explicando aqui que é mas é só clicar ali no link que seja vão entender fiquem ligados no Instagram que eu vou postar bastante dica essa semana de CSS na coisas para salvar e usar no próximo vídeo a gente vai botar a mão na massa no código e fazer uma página com muito mais coisas

HTML do que apenas isso que eu mostrei pra vocês e já juntando com CSS que eu expliquei para vocês hoje muito obrigado por assistirem o vídeo até aqui e vejo vocês semana que vem um de