Esta tradução está incompleta. Por favor, ajude a traduzir este artigo do Inglês.

CSS (Folhas de Estilo em Cascata) é o código que utiliza para estilizar a sua página da Web. CSS - Elementar guia-o através do que precisa para começar. Nós iremos responder às perguntas, tais como: Como é que eu coloco o meu texto a preto ou vermelho? Como é que eu faço para que o meu conteúdo apareça em tal lugar no ecrã? Como é que eu decoro a minha página da Web, tais como cores e imagens de fundo?

Então, o que realmente é o CSS?

Tal 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 folha de estilo. Isto significa que este permite-lhe aplicar estilos seletivamente para os elementos nos documentos HTML. Por exemplo, para selecionar 'todos' os elementos do parágrafo numa página HTML e transformar o texto dentro deles em vermelho, iria escrever este CSS :

p {
  color: red;

Let's try it out: paste those three lines of CSS into a new file in your text editor, and then save the file as style.css in your styles directory.

But we still need to apply the CSS to your HTML document. Otherwise, the CSS styling won't affect how your browser displays the HTML document. (If you haven't been following on with our project, read Dealing with files and HTML basics to find out what you need to do first.)

  1. Open your index.html file and paste the following line somewhere in the head (that is, between the <head> and </head> tags):
    <link href="styles/style.css" rel="stylesheet" type="text/css">
  2. Save index.html and load it in your browser. You should see something like this:

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.If your paragraph text is now red, congratulations! You've just written your first successful CSS.

Anatomia de um conjunto de regras de CSS

Vejamos o CSS acima em um pouco mais de detalhe:

The whole structure is called a rule set (but often "rule" for short). Note also the names of the individual parts:

The HTML element name at the start of the rule set. It selects the element(s) to be styled (in this case, p elements). To style a different element, just change the selector.
A single rule like color: red; specifying which of the element's properties you want to style.
Ways in which you can style a given HTML element. (In this case, color is a property of the <p> elements.) In CSS, you choose which properties you want to affect in your rule.
Valor da propriedade
To the right of the property after the colon, we have the property value, which chooses one out of many possible appearances for a given property (there are many color values besides red).

Note the other important parts of the syntax:

  • Each rule set (apart from the selector) must be wrapped in curly braces ({}).
  • Within each declaration, you must use a colon (:) to separate the property from its values.
  • Within each rule set, you must use a semicolon (;) to separate each declaration from the next one.

So to modify multiple property values at once, you just need to write them separated by semicolons, like this:

p {
  color: red;
  width: 500px;
  border: 1px solid black;

Selecionar múltiplos elementos

Também pode selecionar vários tipos de elementos e aplicar um conjunto de regras único para todos eles. Inclua múltiplos seletores separados por vírgulas. Por exemplo :

p,li,h1 {
  color: red;

Diferentes tipos de seletor

There are many different types of selector. Above, we only looked at element selectors, which select all elements of a given type in the given HTML documents. But we can make more specific selections than that. Here are some of the more common types of selector:

Nome do seletor O que é que este seleciona Exemplo
Element selector (sometimes called a tag or type selector) All HTML element(s) of the specified type. p
Selects <p>
ID selector The element on the page with the specified ID (on a given HTML page, you're only allowed one element per ID). #my-id
Selects <p id="my-id"> or <a id="my-id">
Class selector The element(s) on the page with the specified class (multiple class instances can appear on a page). .my-class
Selects <p class="my-class"> and <a class="my-class">
Attribute selector The element(s) on the page with the specified attribute. img[src]
Selects <img src="myimage.png"> but not <img>
Pseudo-class selector The specified element(s), but only when in the specified state, e.g. being hovered over. a:hover
Selects <a>, but only when the mouse pointer is hovering over the link.

Existem muitos mais seletores para explorar, e pode encontrar uma lista mais detalhada no nosso guia de 'Seletores'.

Tipos de letra e texto

Now that we've explored some CSS basics, let's start adding some more rules and information to our style.css file to make our example look nice. Let's start by getting our fonts and text to look a little better.

  1. First of all, go back and find the output from Google Fonts that you stored somewhere safe. Add the <link> element somewhere inside your index.html's head (again, anywhere between the <head> and </head> tags). It'll look something like this:
    <link href='' rel='stylesheet' type='text/css'>
  2. Next, delete the existing rule you have in your style.css file. It was a good test, but red text doesn't actually look very good.
  3. Add the following lines in its place, replacing the placeholder line with the actual font-family line you got from Google Fonts. (font-family just means the font(s) you want to use for your text.) This rule first sets a global base font and font size for the whole page (since <html> is the parent element of the whole page, and all elements inside it inherit the same font-size and font-family):
    html {
      font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
      font-family: placeholder: this should be the rest of the output you got from Google fonts

    Nota: qualquer coisa num documento CSS entre /* e */ é um comentário de CSS, que o navegador ignora quando este renderiza o código. É um local para escrever notas úteis sobre o que está a fazer.

  4. Now we'll set font sizes for text-containing elements inside the HTML body (<h1>, <li>, and <p>). We'll also center the text of our heading and set some line height and letter spacing on the body content to make it a bit more readable:
    h1 {
      font-size: 60px;
      text-align: center;
    p, li {
      font-size: 16px;    
      line-height: 2;
      letter-spacing: 1px;

You can adjust these px values to whatever you like to get your design looking how you want, but in general your design should look like this:

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

Caixa, caixas, é tudo sobre caixas

Uma coisa que irá notar sobre a escrita de CSS é que muita coisa é sobre caixas - configurar o seu tamanho, cor, posição, etc. A maioria dos elementos de HTML na sua página pode ser pensada como caixas colocadas uma sobre a outr .

a big stack of boxes or crates sat on top of one another

Not surprisingly, CSS layout is based principally on the box model. Each of the blocks taking up space on your page has properties like this:

  • padding, the space just around the content (e.g., around paragraph text)
  • border, the solid line that sits just outside the padding
  • margin, the space around the outside of the element

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

In this section we also use:

  • width (of an element)
  • background-color, the color behind an element's content and padding
  • color, the color of an element's content (usually text)
  • text-shadow: sets a drop shadow on the text inside an element
  • display: sets the display mode of an element (don't worry about this yet)

So, let's get started and add some more CSS to our page! Keep adding these new rules to the bottom of the page, and don't be afraid to experiment with changing values to see how it turns out.

Alterar a cor da página

html {
  background-color: #00539F;

This rule sets a background color for the whole page. Change the color code above to whatever color you chose when planning your site.

Ordenar o corpo

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;

Now for the <body> element. There are quite a few declarations here, so let's go through them all one by one:

  • width: 600px; — this forces the body to always be 600 pixels wide.
  • margin: 0 auto; — When you set two values on a property like margin or padding, the first value affects the element's top and bottom side (make it 0 in this case), and the second value the left and right side (here, auto is a special value that divides the available horizontal space evenly between left and right). You can also use one, three, or four values, as documented here.
  • background-color: #FF9500; — as before, this sets the element's background color. We've used a sort of reddish orange for the body as opposed to dark blue for the <html> element, but feel free to go ahead and experiment.
  • padding: 0 20px 20px 20px; — we have four values set on the padding, to make a bit of space around our content. This time we are setting no padding on the top of the body, and 20 pixels on the left, bottom and right. The values set top, right, bottom, left, in that order.
  • border: 5px solid black; — this simply sets a 5-pixel–wide, solid black border on all sides of the body.

Posicionar e estilizar o título da nossa página principal

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;

You may have noticed there's a horrible gap at the top of the body. That happens because browsers apply some default styling to the <h1> element (among others), even when you haven't applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting margin: 0;.

Next up, we've set the heading's top and bottom padding to 20 pixels, and made the heading text the same color as the html background color.

One rather interesting property we've used here is text-shadow, which applies a text shadow to the text content of the element. Its four values are as follows:

  • The first pixel value sets the horizontal offset of the shadow from the text — how far it moves across: a negative value should move it to the left.
  • The second pixel value sets the vertical offset of the shadow from the text — how far it moves down, in this example; a negative value should move it up.
  • The third pixel value sets the blur radius of the shadow — a bigger value will mean a more blurry shadow.
  • The fourth value sets the base color of the shadow.

Again, try experimenting with different values to see what you can come up with!

Centrar a imagem

img {
  display: block;
  margin: 0 auto;

Finally, we'll center the image to make it look better. We could use the margin: 0 auto trick again as we did earlier for the body, but we also need to do something else. The <body> element is block level, meaning it takes up space on the page and can have margin and other spacing values applied to it. Images, on the other hand, are inline elements, meaning they can't. So to apply margins to the image, we have to give the image block-level behavior using display: block;.

Nota: The instructions above assume that you're using an image smaller than the width set on the body (600 pixels). If your image is larger, then it will overflow the body and spill out to the rest of the page. To rectify this, you can either 1) reduce the image's width using a graphics editor, or 2) size the image using CSS by setting the width property on the <img> element with a smaller value, e.g. 400 px;.

Nota: não se preocupe se ainda não entende display: block; e a distinção de block-level/inline. Irá preceber à medida que estuda o CSS em maior profundidade. Pode descobrir mais sobre os diferentes valores de display disponíveis na nossa página de referência de display.


If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

If you get stuck, you can always compare your work with our finished example code on GitHub.

Here, we have only really scratched the surface of CSS. To find out more, go to our CSS Learning topic.


Neste módulo


Etiquetas do documento e contribuidores

Contribuidores para esta página: mdnwebdocs-bot, mansil
Última atualização por: mdnwebdocs-bot,