Curso CSS Completo: Aula 01 - O que é CSS e CSS Inline

Olá seja muito bem-vindo seja muito bem-vinda o curso de CSS aqui do canal programação web o CSS é o que define um estilo as cores as fontes enfim a parte estética de páginas na web aprender CSS é fundamental para ter um site bonito para você ter tudo de forma estética com design elegante Então esse curso vai ser essencial para você conseguir fazer sites maravilhosos usando a programação web caso você ainda não tem assistido eu te indico que você clica aqui no card e que você Assista o vídeo que eu ensino Qual é o programa para

a gente aprender a programar qual o programa que a gente usa para digitar os as linhas de Cole vai estar aqui no card e também se você tá chegando direto nesse curso de CSS mas não tenho fundamento de html que é linguagem de programação que você precisa aprender antes do CSS é totalmente recomendo clicar aqui no card e começar a assistir a Playlist de html primeiro aí depois você vem aqui para o nosso curso de CSS porque um vai complementar o outro beleza esse conteúdo é um conteúdo 100% gratuito mais com o material que seria

de curso pago então com certeza você vai tirar o proveito maravilhoso mesmo sendo gratuito de ao que seria de curso pago com qualidade não desde já deixa o seu gostei para mostrar sua gratidão para mostrar que você realmente está gostando desse conteúdo que está sendo entregue para vocês hein por cento de forma gratuita que isso me ajuda muito beleza então vamos lá vamos para o nosso curso vamos começar CSS é uma sigla de um termo inglês que significa cascading Style sheets ou traduzido para o português significa na folha de estilo em Cascata o CSS eu

gosto de falar que é o casamento perfeito com HTML e como a gente já estudou aqui no módulo Pas a CML ele forma o conteúdo já o CSS ele vai determinar os comportamentos estéticos da sua página então por exemplo a cor do fundo a cor do texto tamanho da fonte os espaçamentos o layout no geral né ajustar as imagens enfim o CSS ele foi desenvolvido pelo órgão que regulamenta a internet que a w3c em 1996 por um motivo bem simples o HTML ele não foi criado para ser estiloso para trazer uma experiência para o usuário

de forma visual era simplesmente para colocar as informações ali na tela né para colocar o texto para colocar os parágrafos é assim por diante assim como a gente ver o módulo passado mas se viu a necessidade de fazer algo muito mais utilizado né você poder mudar Fontes mudar cores still só fazer uma coisa bem interessante para pessoa que tá vendo já que a internet ela é muito visual e por isso foi criado o CSS para complementar o html e depois né um pouco mais tarde o CSS ele funciona através de arquivos do tipo. CSS né

que é um arquivo que vai determinar com alguns eleitores o comportamento daquele elemento HTML específico então aqui na tela a gente tem um exemplo bem básico para você entender imagina que a gente tem uma tag de parágrafo e aqui do lado a gente mostra como que a gente quer que esse parágrafo se comporte no arquivo CSS tá indicando ali por exemplo que esse parágrafo vai ter a cor vermelha ou Red em inglês é importante conhecer bem as propriedades do CSS cada uma delas e como elas funcionam para gente conseguir ter a capacidade de estilizar o

nosso código HTML da maneira como a gente deseja na maneira como a gente quer que ele se comporta agora então para gente fazer na prática o nosso projeto utilizando CSS a gente vai fazer o seguinte a gente tava aqui com as nossas aulas de html a gente tem até e no nosso a pasta de sites aqui no seu: sites a gente fez uma pasta chamada aula HTML nós vamos fazer o seguinte agora nós vamos fechar essa pasta vim aqui fa you close folder para a gente fechar esse projetinho aqui no nosso vs code né deixar

ele zerar pode até fechar S um título que aparece aqui para ficar assim com o símbolo do vs code e a gente vai lá na nossa pasta aqui dos nossos projetos a gente vai criar um novo projetinho aqui para a gente poder a trabalhar com CSS separado aqui nas nossas aulas pra gente tem os módulos bem definidos aqui do que a gente está trabalhando certo pessoal então vou chamar essa parte de aula traço CSS já que a gente aprendeu que não é bom a gente dar esses passos e tudo mais nem caracteres especiais eu vou

colocar o traço aqui e eu vou fazer o seguinte como eu vs code aqui ó vou restaurar ele deixar ele menorzinho vou pegar essa pasta aula é não aula HTML aula CSS e vou arrastar aqui para dentro do vs code Então vou arrastar para cá para ele eu abrir a minha faixinha aqui do projeto outra maneira que eu tenho para fazer aqui é vim do ensaio ou bem poder né para gente abrir a pastinha aulas essa que a gente acabou de criar certo aqui dentro do nosso projeto aula CSS a gente vai criar um novo

arquivo clicando aqui no botão para criar um arquivo chamado index.ph TML Vamos fazer uma página HTML simples e aqui nós vamos colocar um HTML5 básico padrão pt-br Brasil aqui eu vou colocar o título do site de aprendendo CSS certo muito bem nessa aula pessoal nós vamos aprender a primeira maneira da gente colocar CSS nos nossos documentos que é o CSS chamado de CSS inline ou seja CSS em linha quando a gente coloca o CSS dentro do próprio componente HTML dentro do próprio elemento HTML que a gente está trabalhando bom então para sempre ficar isso a

gente tem aqui a nossa tag Body né que é a tag principal do corpo do nosso site tudo que a gente coloca dentro do bar e o que vai aparecer para o usuário certo eu vou rodar aqui o meu site no live-server vou clicar com o botão direito ou em live-server vou fazer dessa forma aqui Oi e aí ele vai startar o meu site Zinho aqui deixa eu restaurar deixar ele aqui no canto isso aqui também vou restaurar aqui para a gente conseguir ver assim certo beleza bom então quando a gente trabalha com CSS inline

quer dizer o CSS que a gente vai colocar os comandos no próprio elemento a gente sempre faz a seguinte forma no elemento que a gente quer trabalhar no caso aqui que vai ser a tag Body que a tag aqui responsável pelo corpo do meu site eu vou colocar uma propriedade ou atributo chamado Style assim estilo ó até que explica contém uma declaração de CSS para ser aplicada no elemento então eu coloco aqui Style do um igual as suas duplas e aqui dentro eu passo as propriedades CSS do tipo de comportamento que eu quero que ele

tem quando eu coloco Style assim dentro de um uma tag HTML eu tô determinando que este estilo CSS só vai funcionar para esse elemento que eu estou selecionando no caso aqui só vai funcionar para TAG Bari certo então assim eu colocasse aqui uma propriedade a gente vai ver nas próximas aulas tá E essas propriedades que a gente mais trabalha certo mas para você entender como funciona o CSS que é inline CSS na própria tag HTML eu poderia colocar aqui ó background background que quer dizer fundo e eu vou colocar que o fundo é Yellow que

é amarelo em inglês coloquei com estilo o fundo eu quero que seja amarelo se eu der um control S Olha o que que vai acontecer a minha página que o meu Bari ficou com o corpo dele aqui com fundo amarelo certo porque eu determinei através desse estilo desse Style que eu coloquei dentro da própria tag HTML que eu queria que o comportamento dessa tag fosse assim o mundo fosse Amarelo outro exemplo Vou colocar aqui um título 1 o meu primeiro site com CSS eu determinei aqui um título normal HTML básico mas eu poderia colocar uma

propriedade CSS diretamente aqui nesse meu elemento nesse meu nessa minha tag eu colocaria Style igual "duplas e aqui eu posso determinar por exemplo que eu quero que a cor desse texto color uma propriedade CSS seja azul Vou Colocar assim Blue don't control s para salvar olha lá o que que aconteceu eu determinei que esse meu título vai ser azul certo ah mas eu acho que essa fonte tá muito pequena então eu poderia colocar mais um atributo aqui eu colocaria ponto-e-vírgula para separar um atributo de outro e aqui eu vou colocar outra propriedade CSS que é

o Font traço size o Font size eu vou colocar o tamanho da fonte eu vou colocar é 88 PX que é 88 pixels Quando eu der um contra o Oeste Olha só fiquei com a fonte gigantona aqui na minha página certo então é assim que funciona o CSS chamado inline quer dizer que você vai colocar aqui os atributos CSS diretamente no componente que você quer que seja alterado Isso é uma maneira de a gente fazer o CSS certo mas nem sempre isso é prático pessoal nem sempre isso aqui é prático porque porque isso vai funcionar

só nesse componente aqui por exemplo determinei que a cor azul do título um e a cena esse componente aqui agora é só aqui embaixo fizesse mais um componente ó se eu colocasse aqui deixa eu só por aquela linha E se eu colocasse aqui mais um H1 e falar se escrevesse assim outro componente certo eu fizesse dessa forma Olha que que acontecer ele não ia ter aquela estilização desse primeiro porque eu coloquei que esse estilo só vai funcionar para essa primeira pegue aqui que eu coloquei certo então existem outros recursos que a gente pode trabalhar com

CSS para que o um determinado comportamento funcione para todas as tags do nosso documento por exemplo todos os H um certo a gente vai ver como fazer esse tipo de declaração de CSS na próxima aula CSS que é na própria página que a gente coloca as instruções e não na tag especificamente mas a gente vai ver isso na próxima aula né sol então que eu quero que você grave é o CSS inline ou em linha o TSE sem linha é quando a gente coloca a o atributo Style numa tag específica e "duplas e aqui dentro

Opa e aqui dentro a gente passa a instrução que a gente quer exemplo fundo amarelo que cor vai ser azul tamanho da fonte etc na próxima aula nós vamos aprender o CSS incorporado Vejo você na próxima ao Espero que você tenha gostado dessa aula que tenha te ajudado se você quiser continuar assistindo o curso pode continuar clicando no nesses cards que estão aparecendo aqui deixa o seu gostei se inscreve no canal para não perder nenhum conteúdo sobre programação web e a gente se vê no próximo vídeo valeu