CSS (Cascading Style Sheets) // Dicionário do Programador

e contextualizando css abreviação para casqueiro em style x também conhecida como folhas de estilo em cascata em inglês sua melhor né vamos manter o estádio chip então você nunca ouviu falar em css podemos dizer que ele é o melhor amigo do html e surgiu para mudar literalmente a cara da web para sempre fique com a gente nesse vídeo pois vamos dar um passeio na história e tudo o que aconteceu com a css durante todos esses anos até agora acredito na cadeira aí se inscreva no canal e vamos juntos nessa esse vídeo vai entrar para história

do dicionário do programador temos muito que conversar sobre css para começar ele surgiu para revolucionar e foi exatamente isso que ele fez não é tão te chamar hoje webdesigner os especialistas em html css e javascript agora se tornaram desenvolvedores front-end e isso tem muito a ver com o momento do surgimento das ss são paulo vamos perceber que no finalzinho de 1995 e a w3c trouxe a primeira versão da css a ideia era de deixar o css a responsabilidade de dar o estilo e formatação as páginas de html até então fazia isso e não era muito

produtivo cada vez que era preciso usar um determinado tipo de estilo era preciso repetir o usando tags e mais tags e mais tag era impossível criar layouts eficientes e aí dessa ideia de dar sentido semântico nas tags html for um sonho distante a w3c responsável pela css e pelo html tão bem criou uma primeira versão bem interessante e fez o desenvolvimento mudar para sempre o dom foi construído justamente no modelo em nós nada mais justo então que as ss pudesse selecionar esses nós de forma rápida por isso o cascais em da css um modelo de

seleção das ss foi muito bem pensado e desenvolveu quer um exemplo é sobre essa página web com uma roupagem lá no fim da década de 90 ou seja usando as tendo os web designers da época é um verdadeiro e conseguiu com poucos recursos criar site gigante usando tabelas e tabelas e mais tabelas ainda bem que veio a css para nos ajudar e tornar o desenvolvimento da página web tempo prazeroso coisa aqui é um na época não achava que seria não viu mas essa não chegou em todos os navegadores ao mesmo tempo durante um bom tempo

que foi preciso fazer muita gambiarra nelas usando hack e escrevendo literalmente duas ou três vezes o código css para navegadores específicos tem já ouviu falar em com esses moldes vou standard mold on august sander world sábado que nós estamos falando se tiver um calafrio aqui lembrando essas coisas vamos seguir que a gambiarra no css é coisa no passado pelo menos deveria ser né esse modelo em cascata do poder aos eleitores que foram divididos de quatro formas principais classes for identificador por tags e por atributos olha só esse micro exemplo classes os danos um ponto e

não html as telas que usaram através do ato eu fui identificadores usamos o tralha identificando elas não html pela tributo a indico tags não precisa de nada na html nesse exemplo todas as tag a serão estilizadas de uma vez só e finalmente com o seletor por atributos que é possível definir os estilos para todas as tags de uma só vez que contém um determinado valor e um determinado atributo nesse caso todas as tags atos que contém o atributo target igual a um descobre que já deu para perceber que há muitas vantagens em utilizar o css

não é mesmo conseguindo manter consistência em propagar os estilos em várias páginas diferentes sem falar na compatibilidade entre navegadores acs tem muito mais recursos para incrementar a aparência das páginas web e a manutenção fica muito mais simplificado uma mudança em um arquivo css já dá o poder de propagar as melhorias em todo o projeto isso poupa tempo da muito mais flexibilidade e rapidez para manter os projetos sempre atualizados agora nada demais não é mesmo espera que tem muita coisa legal para te não tem nada melhor que complementar nosso conteúdo que uma nova parceira aqui no

canal estamos falando com muito orgulho da loira uma das melhores escolas de tecnologia do país que estamos dentro do momento a lua onde eles vão rechear com mais informações e conhecimento o nosso vídeo e vamos começar a resolver o grande desafio que todos enfrentam quando começam a aprender css o que é alinhar elementos no centro se você viu o vídeo até agora você sabe qual é proibida em somente para trabalhar com documentos é o display padrão de muitas coisas é para gente trabalhar com essas coisas fossem textão por padrão as leis steembock que tá aparecendo

aqui é como se as coisas estivessem o display online não é só que o problema de tayline é que você perde a capacidade de poder trabalhar com largura perde a capacidade de poder trabalhar com pede com margem porque as palavras você não definir largura outra ela se porém se a gente quiser trabalhar com esse recurso aqui ó que é o text-align-center centraliza os textos quem quiser trabalhar com elemento de bloco você só precisa colocar online block no seu evento que você quer controlar largura pede margem de altura e colocar text-align-center não entre o pai dele

trabalhando conseguir com documento só que aplica não isso para outros lugares as páginas você quiser também aplicar o text-align justify fire eu consegui pegar o teste when he did last é super aberta aqui e colocando text-align-center aqui a gente consegue trabalhar com uma semente fazer ficar sentadinho bonitinho espero que essa dica te ajude que você tenha aprendido mais uma forma ainda mais fácil que tem um dia que usa no flex e na verdade eu acho que essa que até mais fácil e vejo você e o próximo então eu vou lá no meu canal com os

vídeos que tem as outras três formas centralizar com css valeu tchau tchau agora sim nunca mais ninguém vai sofrer centralizando na css para conhecer mais sobre a plataforma online em cima da loira e os mais de 1000 cursos super atualizados que ele dispõe aconselhamos fortemente você acessar e fica aqui na descrição do vídeo logo depois ter nesse vídeo é claro combinado u e já deu pra perceber então que html e css se combinam perfeitamente mas ss não está necessariamente casada com html é possível também aplicar css em um documento xml se for necessário e atualmente

está na versão trouxe muitas novidades e conseguiu melhorar ainda mais a experiência dos usuários nesse nosso mundo cada vez mais novo e fomos eleger a melhor dupla até agora sem dúvida o html5 eo css3 estão dando banho de produtividade e eficiência aliás é uma boa oportunidade para gente mostrar agora o que é css3 trouxe de melhorias e como a coisa toda foi se desenvolvendo ao longo do tempo a primeira versão conhecida como o css leva o ano ou css um ela correntinha coisas mais básicas como adicionar estilos em fonte cor de fundo e outras coisas

vão ser acs21 lançado em 1998 mas que continua até hoje recebendo revisões e aperfeiçoamento houve um grande avanço foi preciso trabalhar com mídia type-c usar para desenvolver hoje layout da página conhecida como o box model agency o lamento das essa vem o confuso de entender de início viu como uma versão criada em 98 ainda está ativa nesse momento quiser assim mesmo depois da revisão um conhecida como os ss 2.1 a coisa engrenou de verdade o que importa para nós aqui junto com as ss dois foram criadas muitas técnicas de design das páginas usando técnicas como

flor disposição e clear mas elas eram inconsistências e estão bem complicado de manter veio então a especificação própria da w3c para colocar ordem na casa chamada css grid layout de acordo com a própria w3c no grid layout os elementos filhos do container que divide a grade podem ser posicionados livremente em espaços criados na grade que ela tenha sido definida como suas dimensões flexíveis ou fixas estava ali a luz no fim do túnel e finalmente seria possível criar layouts muito melhor de com css fechando finalmente o caminho livre para que o html exercício seu papel semântico

chegando finalmente na css 3 olá tudo as especificações foram divididas em módulos que cada um tem a sua aprovação independente com ela vieram mais animações como o controle de rotação movimento e transição uso de variáveis e funções e muitas soluções para os problemas mais comuns como o css flexboxlayout móvel ou simplesmente flex-box aliás durante todo esse tempo de desenvolvimento e maturação da css até hoje temos aqui no brasil o privilégio de poder contar com um mês estamos falando do maujor grande divulgador das ss que tivemos o prazer de conhecer pessoalmente entrevista ele merece todo o

reconhecimento por sua contribuição com certeza é uma referência e um exemplo para todos nós obrigado major vamos de box model grid-layout flex-box mas afinal de contas já ou é melhor para se usar o box model ainda é muito utilizado que relevante apesar de sua idade já avançada o grid layout chegou chegando e sem dúvida ou xbox tornou o trabalho de desenhar é algo mais simples e prazeroso tal ver um pouquinho disso na prática box-model cada elemento é representado como um boxe retangular definindo propriedades como o eset rede mas impede engorda e se ainda um modelo

muito utilizado gerava muitas dores de cabeça que não era muito produtivo e nem tuitivo mas ainda assim está sendo aperfeiçoado pela w3c que atualizou o rascunho do box model level three agorinha me abriu de 2020 problema do box model no início é que é o definir um elemento com uma largura de 500 fixas por exemplo ao adicionar um pezinho borda o tamanho dele era alterado automaticamente melhorou depois da adoção da propriedade box-size que determina como calcular a largura ea altura de um elemento e como ela se ajusta aos outros elementos usando border-size em border-box em

um elemento um pede e o border não irão mais alterar as dimensões do elemento isso trouxe paz e harmonia aos desenvolvedores de qualquer forma esse modelo na minha opinião já é ultrapassado o motivo e nem um pouco intuitivo grid-layout o processo de construção melhorou demais tornando layout verdadeiramente responsivo e dando muito mais controle em como os elementos filhos devem se comportar em diferentes tipos de células olha só esse código html com esses elementos sem aplicação grid-layout que podemos ter o resultado dessa forma agora aplicando display grid nadir principal dessa forma e definindo como será o

template das colunas elas o seguinte resultado deu para perceber como tudo vai ficar muito mais fácil de controlar as principais vantagens que o verde layout trouxe foi a facilidade de trabalhar com dimensões fixas e flexíveis melhor precisão no posicionamento dos elementos que possibilidade de criação de grids adicionais fora do grid para melhor com 2 um alinhamento do grid e também dos seus elementos e também o melhor uso dos reindex para controlar conteúdo e sobrepostos esse é o poder do grid layout pelo frio não menos importante aliás muito importante o flex-box foi pensado justamente para o

modelo unidimensional quando de vez o desenho de páginas web em outro patamar flex gostam não é possível criar layout que eram praticamente impossíveis de inclusive dá para trabalhar com flexbox grid layout juntos eles não são concorrentes entre si com flex-box trabalha por eixos que é definido pela propriedade flex-direction naquele exemplo lá no início definirmos a nossa diva principal nosso lá por com um display flex o resultado de cada será esse agora você definimos que os elementos quebraram-se a janela for redimensionada conforme esse código aqui o resultado será esse parece mágico não é mesmo a gente

sabe que os nossos exemplos foram muito básicos e que foram só um aperitivo do que é possível fazer com cada modelo criado na css não existe melhor ou pior abordagem apesar do box model ser um pouco mais antigo ele ainda está sendo atualizado e utilizado ainda assim vale a pena aprender todos esses modelos e escolher o que se encaixa melhor do seu projeto falantes essa é um mundo pessoal acesse evoluiu tanto que já há quem diga que ela a linguagem do que o próprio html já é possível por exemplo definir variáveis olha só exemplo definimos

duas variáveis globais chamadas de largura e valor dessa forma dá para utilizar elas em qualquer lugar que precisa desse valor e teremos apenas um ponto de alteração caso seja necessário além também do uso de funções para efetuar cálculos e dimensões retornar o valor de um atributo e muito mais nem falamos nas animações com css é muito fraco criar transições é até animações complexas no nosso exemplo de flex-box a gente poderia fazer uma animação simples desse jeito dessa forma estamos criando uma animação chamada animação onde a cada etapa em percentual a cor de fundo do elemento

muda adicionamos essa animação em cada um dos blocos e informamos que animação terá uma duração total de quatro segundos então acabamos de criar uma mini discoteca bem simples não é mesmo podemos deixar de falarmos um pouco também sobre pré-processadores css estamos falando aqui de sais lá existe luz entre o já temos vídeo inclusive sobre sais aqui no dicionário e vá é uma espiadinha pré-processadores são interpretadores de código mas não com suas regras acabam criando um código css com eles é possível alinhavar a criação das essa outro nível ainda mais quando se trata de projetos mais

complexos principal vantagem dos para processadores são a criação de variáveis que a já é possível no próprio ss além de criar condicionais laços de repetição importação de arquivos funções e até herança que falar meus pés no ar justamente por essa quantidade de gigante de ferramentas e utilitários existentes é possível criar framework css e facilitam deveras o desenvolvimento dos projetos web sem dúvida dificilmente a criar um projeto novo você precisará criar toda a estrutura do zero por isso é importante conhecer alguns dos melhores foi morto atualmente como o bootstrap materialize-css qual deixam e também o semantic

e o largo que só citamos os mais badalados existem outras dezenas de freio outros muito bons igual contar a história e de tudo que acesse trouxe tu é da internet em apenas um vídeo é tarefa impossível espero que a gente tenha conseguido te mostrar o quanto ela é importante essencial para todo e qualquer desenvolvedor que queira trabalhar com projetos vai certeza que quando você for dividir meu tá o arquivo css do seu site favorito você vai pensar nossa que coisa incrível esse desenvolvedor front-end fez aqui é por hoje é só pessoal tchau tchau falamos do

site o link está aqui na descrição mas eu sei que você esquecido então a gente colocou ele aqui do lado para você ir lá as essa vale a pena conhecer um bocadinho baixo desse pré-processador até a próxima tchau