Vai na Web
``` Outra forma, é adicionar na header do documento a marcação style: ```markupVai na Web
``` A última forma e mais comum e recomendada é importar a folha de estilos. Basta criar o arquivo estilos.css, e importa-lo na `` do html. Ah! chamamos nosso arquivo de estilos.css, mas você pode criar um arquivo com o nome que quiser e utilizá-lo. Lembre-se de colocar junto ao nome do arquivo a extensão dele, ou seja, .css, no final. ```markupVai na Web
``` ### Sintaxe Precisamos compreender a sintaxe que a linguagem usa. Pensar na sintaxe de uma linguagem significa pensar nas relações formais que unem as partes constituintes da sentença, criando uma estrutura. Ou seja, trata-se de pensar na estrutura através da qual ela é escrita. ```css seletor { propriedade: valor; } ``` Assim podemos fazer com que nossa página fique muito legal. Podemos alterar as cores, tamanhos, formas e até adicionar animações! Nas próximas aulas, vamos conhecer melhor essas e outras propriedades e valores. ### Principais seletores Acontece mais ou menos assim: selecionamos os elementos do HTML que queremos estilizar e, então, o CSS define como, onde e quando colocar esses estilos. Vamos começar a entender sobre os [seletores](https://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net-16048). Podemos dar estilo diretamente ao próprio elemento do HTML. ```markupOlá mundo
``` ```css p { color: #f05a20; } ``` Ou podemos adicionar um ID ao elemento. É legal de ser usado em elementos que não se repetem na página. ```markupOlá mundo
``` ```css #sobre { color: #f05a20; } ``` Podemos, ainda, adicionar uma classe ao elemento. Muito útil para as que se repetem ao longo da página. ```markupOlá mundo
``` ```css .sobre { color: #f05a20; } ``` ### Entenda a cascata Dependendo da posição em que o CSS esteja sendo chamado na página o código tem uma certa prioridade na hora de ser exibido pelo navegador. Como nas pedras da cachoeira, a água flui melhor em alguns lugares do que em outros. Esse é um conceito que vai ser muito importante futuramente. O navegador lê nossa página de baixo para cima, no exemplo a seguir, ambos elementos estão sendo selecionados usando mesmo tipo de seletor, nesse caso as classes, mas a propriedade do bloco de baixo consegue sobrescrever a de cima. ```css .paragrafo { background-color: red; } .paragrafo { background-color: gray; } ``` Quando as propriedades forem diferentes, elas simplesmente ficam combinadas. Ambas são mostradas. Exemplo: ```css .paragrafo { background-color: red; } .paragrafo { padding: 20px; margin: 20px; } ``` O navegador entende assim: ```css .paragrafo { background-color: red; padding: 20px; margin: 20px; } ``` Os seletores também têm prioridades diferentes. A classe que tiver important! tem maior prioridade, seguida dela, o ID tem maior prioridade, depois a classe, e por último o próprio elemento. Exemplo: ```css #vermelho { background-color: red; } .cinza { background-color: gray; } p { background-color: blue !important; color: white; padding: 5px; } ``` Faça alguns testes! O que acontece se você apagar o !important do elemento parágrafo? ### Referências [CSS Reference, by Codrops](https://tympanus.net/codrops/css_reference/) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://vainaweb.gitbook.io/construcao-de-paginas-web/capitulos/comecando-com-css/aula.md?ask=