Este é um texto traduzido automaticamente que pode conter erros!
Sobre CSS
HTML são os blocos de construção de como uma página web deve ser estruturada, mas HTML não diz nada sobre como uma página web deve parecer. É aqui que o CSS entra.
CSS significa “Cascading Style Sheets”, o que provavelmente não diz muito, mas o mais importante a saber é que é uma “folha de estilo”. Em outras palavras, dá um “estilo” a uma página web. É muito fácil de ler e, na verdade, fácil de escrever, mas você precisa ser preciso ao escrevê-lo.
A primeira coisa que vamos ver é algo chamado “CSS Interno”.
CSS Interno
Este é um tipo de “CSS” que se encontra em um arquivo HTML. É possível ter CSS em um arquivo separado, mas veremos isso mais tarde.
Para começar com CSS, vamos começar indo na nossa tag <head> no HTML.
Tarefa 1.1
Adicione esta tag <style> em algum lugar entre <head> e </head>:
<style>
</style>
Isso define uma área onde podemos escrever código CSS.
Estrutura
O código CSS tem uma estrutura muito diferente do HTML, mas é relativamente simples de entender:
element {
property: value; // Este é um exemplo de comentário.
}
O código CSS consiste em três partes:
elemento:- Determina o que vamos estilizar.
- Exemplos aqui são
h1,p,body,a, ou seja, qualquer tag.
propriedade:- Determina o que deve ser alterado neste elemento.
- Exemplos:
color- altera a cor do textobackground-color- altera a cor de fundo.
valor:- Determina para o que a propriedade deve ser alterada.
- Um exemplo é a cor do texto para
red, que cria texto vermelho.
Important
Cada linha em CSS deve terminar com ponto e vírgula ;
Caso contrário, seu código CSS não funcionará corretamente.
Tarefa 1.2a
Dentro da tag <style>. Adicione o seguinte código CSS:
p {
color: red; // Cor do texto
}
h1 {
background-color: blue; // Cor de fundo
color: black; // Cor do texto
}
Tarefa 1.2b
O que você acha que este código vai fazer?
Tarefa 1.2c
O que você faria se fosse mudar o texto para azul? E para amarelo? E para verde? Experimente um pouco e veja o que acontece!
Tarefa 1.2d
Tente adicionar mais linhas a um elemento, por exemplo: adicione uma cor de fundo aos parágrafos (p elementos). Dica: Lembre-se que cada linha deve terminar com um ponto e vírgula ;.
Tarefa 1.2e
Use font-size para alterar o tamanho do texto. Exemplo de como isso pode ser feito:
p {
color: red;
font-size: 18px;
// Dette er en kommentar om fargen.
// Esta é uma observação sobre a cor.
}
Info
px é a abreviação de pixel e indica que o tamanho do texto deve estar em pixels.
Seletores
O que em estrutura foi mencionado como elemento, é o que chamamos de “seletor”. Existem muitos tipos:
| Seletor | Descrição |
|---|---|
h1, p, div, a | Seleciona tags HTML. Por exemplo, todos os elementos <h1>. |
* | Seleciona todos os elementos na página. Este é raramente usado. |
.class | Este vamos ver, mas ele seleciona todos os elementos com uma dada “classe”. Que é mais específico que todos os elementos de um dado tipo. |
#id | Seleciona elementos com um ID específico. Este é ainda mais específico que classes. |
Classes
One of the most useful selectors is the “class” selector. It allows you to select more specific elements. Let’s look at an example.
We have this HTML code:
<p>Este é um parágrafo!</p>
<p>Realmente, este é mais um parágrafo!</p>
<p>Este parágrafo poderia ter sido azul.</p>
Como podemos, com a ajuda de CSS, fazer com que apenas o terceiro parágrafo tenha texto azul? Sim, aqui podemos usar classes!
Tarefa 1.3a
Use uma classe CSS como a seguinte para tornar o parágrafo azul:
<p>Este é um parágrafo!</p>
<p>Realmente, este é mais um parágrafo!</p>
<p class="blue-paragraph">Este parágrafo poderia ter sido azul.</p>
Assim, com o seguinte código CSS em <style>:
.blue-paragraph {
color: blue;
}
O resultado disso deverá ser o seguinte:
Tarefa 1.3b
Tente então tornar os dois outros parágrafos vermelhos usando apenas uma classe chamada red-paragraph.
Tarefa 1.3c
Tente usar um seletor p agora, com alguma outra estilização. O que acontece? É como esperado?
Info
O que acontece no CSS depende do quão específico algo é. Um seletor de classe é mais específico que um seletor de “tag”. Isso significa que, independentemente do que você colocar no estilo p, será na classe que o que realmente acontece.
Tip
Você também pode ter várias classes no mesmo elemento. Tudo o que você precisa fazer é separar as classes com um espaço:
<p class="blue-text epic-background">Isto parece incrível!</p>
Tarefa 1.4
Tente você mesmo! Tente usar classes no seguinte código HTML para tornar o hino nacional muito legal! (Sinta-se à vontade para apenas copiar o código e modificá-lo)
Se você quiser saber mais sobre o que pode fazer com CSS, vá para w3schools!
<span>Sim, nós amamos esta terra</span><br>
<span>Enquanto ela se eleva</span><br>
<span>Enrugada e desgastada sobre a água</span><br>
<span>Com os mil lares</span><br>
<span>Amamos, amamos isso e pensamos</span><br>
<span>Em nosso pai e mãe</span><br>
<span>E aquela noite de contos que desce</span><br>
<span>Sonhos em nossa terra</span><br>
<br>
<span>Esta terra Harald protegeu</span><br>
<span>Com seu gigante companheiro</span><br>
<span>Esta terra Håkon defendeu</span><br>
<span>Enquanto Øyvind cantava</span><br>
<span>Olav nesta terra pintou</span><br>
<span>A cruz com seu sangue</span><br>
<span>De suas alturas Sverre falou</span><br>
<span>Roma diretamente contra</span><br>
Info
Você também pode usar <span> em torno de palavras individuais se quiser fazer algo divertido com elas.
Seletor de ID
Bem semelhante a como funciona com classes, existe também outra maneira de selecionar algo em CSS, usando uma “ID”. Esta é ainda mais específica que uma classe. Talvez seja um pouco difícil entender por que isso deve ser usado no momento, mas se vocês trabalharem muito com HTML, CSS e JavaScript, a utilidade da ID ficará mais clara.
Um elemento pode ter uma ID, e a intenção é que ela seja única. Apenas um elemento deve ter uma determinada ID. Isso a torna super específica ao selecionar algo. Aqui vamos apenas mostrar um exemplo de como isso se parece em relação ao CSS:
<h1 id="main-header">Velkommen til min nettside!</h1>
<!-- Bem-vindo ao meu site! -->
O código CSS para selecionar este cabeçalho:
#main-header {
font-weight: bold;
}