Se o texto do seu parágrafo estiver vermelho, parabéns! Você acabou de escrever seu primeiro CSS de sucesso.CSS (Folha de Estilo em Cascata) é o código que você usa para dar estilo à sua página Web. CSS básico apresenta tudo que você precisa para começar. Responderemos a perguntas do tipo: Como mudo meu texto para preto ou vermelho? Como faço para que meu conteúdo apareça em determinados lugares na tela? Como decoro minha página com imagens e cores de fundo?
Assim como o HTML, o CSS não é realmente uma linguagem de programação. Também não é uma linguagem de marcação — é uma linguagem de folhas de estilos. Isso significa que o CSS permite aplicar estilos seletivamente a elementos em documentos HTML. Por exemplo, para selecionar todos os elementos parágrafo de uma página HTML e tornar o texto dentro deles vermelho, você escreveria este CSS:
p {
color: red;
}
Vamos tentar: cole as três linhas de CSS acima em um novo arquivo, no seu editor de texto, e salve o arquivo como estilo.css na sua pasta estilos.
Ainda assim, precisamos aplicar o CSS ao seu documento HTML. Do contrário, o estilo CSS não irá afetar a maneira como o seu navegador mostra seu documento HTML (se você não estiver acompanhando o nosso projeto, leia Lidando com arquivos e HTML básico para descobrir o que você precisa fazer primeiro).
index.html e cole o seguinte código em algum lugar no cabeçalho, ou seja, entre as tags {{HTMLElement("head")}} e </head>:
<link href="estilos/estilo.css" rel="stylesheet">
index.html e abra ele no seu navegador. Você deve ver uma página como essa:Se o texto do seu parágrafo estiver vermelho, parabéns! Você acabou de escrever seu primeiro CSS de sucesso.
Vamos dar uma olhada no CSS acima com mais detalhes:
Toda essa estrutura é chamada de conjunto de regras (mas geralmente usamos o termo "regra", por ser mais curto). Note os nomes das partes individuais:
color: red; especificando quais das propriedades do elemento você quer estilizar.color é uma propriedade dos elementos {{HTMLElement("p")}}.) Em CSS, você escolhe quais propriedades você deseja afetar com sua regra.color(cor) além do red(vermelho)).Note outras partes importantes da sintaxe:
{}).:) para separar a propriedade de seus valores.;) para separar cada declaração da próxima.Então para modificar múltiplos valores de propriedades de uma vez, você deve escrevê-los separados por ponto e vírgula, desse modo:
p {
color: red;
width: 500px;
border: 1px solid black;
}
Você também pode selecionar vários tipos de elementos e aplicar um único conjunto de regras a todos eles. Inclua múltiplos seletores separados por vírgulas. Por exemplo:
p, li, h1 {
color: red;
}
Há muitos tipos diferentes de seletores. Abaixo, nós mostramos apenas os seletores de elementos, que selecionam todos os elementos de um determinado tipo nos documentos HTML. Mas nós podemos fazer seleções mais específicas que essas. Aqui estão alguns dos tipos mais comuns de seletores:
| Nome do seletor | O que ele seleciona | Exemplo |
|---|---|---|
| Seletor de elemento (às vezes, chamado tag ou seletor de tipo) | Todos os elementos HTML de determinado tipo. | pSeleciona <p> |
| Seletor de ID | O elemento na página com o ID específicado. Em uma determinada página HTML, é uma boa prática usar um elemento por ID (e claro, um ID por elemento) mesmo que seja permitido usar o mesmo ID para vários elementos. | #my-idSeleciona <p id="my-id"> ou <a id="my-id"> |
| Seletor de classe | O(s) elemento(s) na página com a classe específicada (várias instâncias de classe podem aparecer em uma página). | .my-classSeleciona <p class="my-class"> e <a class="my-class"> |
| Seletor de atributo | O(s) elemento(s) na página com o atributo especificado. | img[src]Seleciona <img src="myimage.png"> mas não <img> |
| Seletor de pseudo-classe | O(s) elemento(s) específicado(s), mas somente quando estiver no estado especificado. Ex.: com o mouse sobre ele. | a:hoverSeleciona <a>, mas somente quando o mouse está em cima do link. |
Há muito mais seletores para explorar e você pode achar uma lista mais detalhada em nosso Guia de seletores.
Agora que exploramos algumas noções básicas de CSS, vamos começar a adicionar mais regras e informações no nosso arquivo estilo.css para deixar nosso exemplo bonito. Vamos começar fazendo nossas fontes e textos parecerem um pouco melhores.
index.html (novamente, em qualquer lugar entre as tags {{HTMLElement ("head")}} e </ head>). Será algo parecido com isto:
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">Esse código vincula sua página a uma folha de estilo que baixa a família de fontes Open Sans junto com sua página web e permite que você a defina em seus elementos HTML usando sua própria folha de estilos.
estilo.css. Foi um bom teste, mas o texto vermelho não parece muito bom.font-family que você obteve do Google Fonts. (font-family significa apenas a(s) fonte(s) que você deseja usar para o seu texto.) Esta regra primeiro define uma fonte base global e o tamanho da fonte para a página inteira (já que {{HTMLElement ("html")}} é o elemento pai de toda a página, e todos os elementos dentro dele herdam o mesmo font-size e font-family):
html {font-size: 10px; /* px significa "pixels": o tamanho da fonte base é agora de 10 pixels */
font-family: "Open Sans", sans-serif; /* este deve ser o nome da fonte que você obteve no Google Fonts */
}
Nota: Qualquer coisa em um documento CSS entre /* e */ é um comentário CSS, que o navegador ignora quando renderiza o código. Este é um lugar para você escrever notas úteis sobre o que você está fazendo.
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
Você pode ajustar esses valores de px para o que você desejar, para deixar seu design com a aparência que quiser, mas no geral seu design deve parecer com isso:
Uma coisa que você notará sobre escrever CSS é que muito disso é sobre caixas — indicar seu tamanho, cor, posição, etc. Muitos dos elementos HTML da sua página podem ser pensados como caixas umas em cima das outras.
Como esperado, o layout CSS é baseado principalmente no modelo de caixas. Cada um dos blocks que ocupam espaço na sua página tem propriedades como essas:
padding, o espaço ao redor do conteúdo (ex.: ao redor do texto de um parágrafo).border, a linha sólida do lado de fora do padding.margin, o espaço externo a um elemento.
Nessa seção nós também vamos usar:
width (largura de um elemento).background-color, a cor atrás do conteúdo de um elemento e do padding.color, a cor do conteúdo de um elemento (geralmente texto).text-shadow: cria uma sombra no texto dentro de um elemento.display: define a maneira de dispor um elemento (não se preocupe com isso ainda).Então, vamos começar e adicionar mais CSS à nossa página! Continue adicionando essas novas regras à parte inferior da página e não tenha medo de experimentar alterações nos valores para ver o que aparece.
html {
background-color: #00539F;
}
Essa regra define uma cor de fundo para toda a página. Mude a cor acima para a cor que você escolheu ao planejar seu site.
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
Agora para o elemento {{htmlelement ("body")}}. Há algumas declarações aqui, então vamos passar por elas uma a uma:
width: 600px; — Isso força o corpo a ter 600 pixels de largura.margin: 0 auto; — Quando você define dois valores em uma propriedade como margin ou padding, o primeiro valor afeta a parte superior do elemento e a parte inferior (tornando-os 0 nesse caso), e no segundo valor os lados esquerdo e direito (aqui, auto é um valor especial que divide o espaço horizontal uniformemente entre esquerda e direita). Você também pode utilizar um, três ou quatro valores, como documentado aqui.background-color: #FF9500; — como antes, isso define a cor de fundo do elemento. Usamos um tipo de laranja avermelhado no corpo, para opor ao azul escuro no elemento {{htmlelement ("html")}}, mas fique à vontade para ir em frente e experimentar.padding: 0 20px 20px 20px; — temos quatro valores definidos no padding, para criar um pouco de espaço em torno do nosso conteúdo. Dessa vez, estamos definindo sem padding na parte superior do corpo, e 20 pixels no lado esquerdo, na parte inferior e no lado direito. Os valores definem a parte superior, o lado direito, a parte inferior e o lado esquerdo, nessa ordem. Como com a margin, você também pode usar um, dois, ou três valores, conforme documentado na sintaxe do padding.border: 5px solid black; — isso simplesmente define uma borda preta sólida de 5 pixels de largura em todos os lados do corpo.h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
Você deve ter notado que há um espaço horrível no topo do corpo. Isso acontece porque os browsers aplicam algumas estilizações padrão ao {{htmlelement("h1")}} (entre outros), mesmo quando você não aplicou nenhum CSS! Isso pode soar como uma má ideia, mas queremos ter uma legibilidade básica, mesmo em uma página sem estilos. Para nos livrarmos desse espaço, sobrescrevemos o estilo padrão, definindo margin: 0;.
Em seguida, definimos o padding das partes superior e inferior do cabeçalho para 20 pixels e fizemos o texto do cabeçalho da mesma cor que a cor de fundo do HTML.
Uma propriedade bastante interessante que usaremos aqui é o text-shadow, que aplica uma sombra ao conteúdo de texto do elemento. Seus quatro valores são os seguintes:
De novo, tente experimentar com diferentes valores para ver o que você pode criar!
img {
display: block;
margin: 0 auto;
}
Finalmente, centralizaremos a imagem para melhorar a aparência. Nós poderiamos usar novamente o truque margin: 0 auto que aprendemos anteriormente para o corpo, mas também precisamos fazer outra coisa. O elemento {{htmlelement ("body")}} é em nível de bloco, o que significa que ocupa espaço na página e pode ter margens e outros valores de espaçamento aplicados a ele. Imagens, por outro lado, são elementos em linha, o que significa que não podem ter margens. Então, para aplicar margens a uma imagem, temos que dar o comportamento de nível de bloco a imagem usando display: block;.
Nota: As instruções acima assumem que você está usando uma imagem menor que a largura definida no corpo (600 pixels). Se sua imagem for maior, ela irá transbordar o corpo e vazar para o restante da página. Para corrigir isso, você pode 1) reduzir a largura da imagem usando um editor gráfico (em inglês) ou 2) dimensionar a imagem usando CSS definindo a propriedade {{cssxref ("width")}} no elemento <img> com um valor menor (por exemplo, 400 px;).
Nota: Não se preocupe se você ainda não entender display: block; ou a distinção entre em nível de bloco / em linha. Você entenderá ao estudar CSS com mais profundidade. Você pode descobrir mais sobre os diferentes valores de exibição disponíveis em nossa página de referência sobre display.
Se você seguiu todas as instruções desse artigo, você deve terminar com uma página parecida com essa (você também pode ver nossa versão aqui):
Se você emperrar, sempre poderá comparar seu trabalho com nosso código de exemplo finalizado no Github.
Aqui, nós só arranhamos na superfície do CSS. Para descobrir mais, vá ao nosso tópico de aprendizado CSS.
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}