Backgrounds, Padding, Margins

As you may remember from two pages ago, the html and body elements always exist, whether you explicitly write them or not, and you can control the style of these elements. The html and body elements basically represent the entire page, so if you want to control what the page looks like, these elements are where you should start.

Here, we're setting the html element's background to a deep blue color. This is how to set the background of the page. Take note of the symbols in the CSS code. The curly braces { }, colon : and semicolon ; are all important. You'll gradually get used to writing these with practice. I also recommend putting the settings on separate indented lines, like this:

This style controls the body element, which is just inside the html element and contains all the text. Notice how the body forms kind of a big, light blue rectangle around all the text on the page. Most elements are basically just rectangles with stuff in them, and you can see the shape and size of these rectangles by giving them a background color that stands out. Try changing this background color to something else, like "pink" or "lightgreen".

There's also a couple font settings here. These are for the body element, but they actually affect most of the text on the page, including the heading and paragraphs, because elements usually keep using the same font as their container. I'll talk more about fonts soon.

We can control the style of other elements in the script the same way. For example, here we set the style of paragraphs:

Elements usually have no background color, letting their container show through from behind instead. However, I've decided to give paragraphs a white background on this page so you can clearly see their boundaries.

The last two settings, padding and margin, control the space in and around paragraphs. Padding adds space inside the border and around the text, while margin adds a gap between the paragraphs. The "px" after the numbers — short for "pixels" — is a way to measure distance on the screen. Let's try some experiments with these settings:

When you're done, go to the next page to continue.