CSS Backgrounds, Spacing and Borders

Now we'll explore how to add backgrounds to our elements, adjust spacing between them and add borders. These properties allow you to create distinct sections with unique backgrounds, structure elements well with spacing and borders.

Backgrounds

CSS provides a variety of options to style the background of an element. You can use background colors or even add background images to various sections of your web pages.

Background Color

To set a background color for an element, we use the background-color property. You can specify the color using color names, hexadecimal codes, RGB, or HSL values as we learnt previously. Here’s an example:

This is what we get:

Background Images

To add a background image, use the background-image property. You can use an image URL somewhere on the web or use relative paths to local images.

Here’s what we have:

You can further control this background image behavior using properties like background-repeat, background-size and background-position. These properties allow you to specify if the image should repeat (for example the image above is smaller than the screen, so it repeats), how it should be sized (stretch and crop or display full image etc), and where it should be positioned within the element (center / top / left).

I encourage you to explore these on your own.

Spacing

To create space around elements, CSS provides two properties - padding and margin. Let's understand how they work.

Padding

The padding property adds space within an element, between the element's content and its border (or the edges). Try this out

You can see how the space is added “within” the paragraph element.

You can set padding on all sides using the padding property like above, or set individually using the padding-top, padding-right, padding-bottom and padding-left properties. For example:

You can also use the padding property itself to set different padding values for different directions like so:

Now you get this:

Margin

The margin property is used to create space around elements, outside their borders. They affect the positioning of elements relative to other elements. Consider this HTML:

And here’s how to add space around the second paragraph (creating space between the two paragraphs):

You can see that a 30px of margin is added on all sides of the second paragraph.

Similar to padding, you can set margin on all sides or individually.

This adds margin only on the top of the element.

Padding and margin can be a little confusing at first. A little practice will help you differentiate between the two.

Borders

CSS border properties allow you to define borders around elements. You can control the border width, style, and color.

Border Style

The property border-style is used to specify if we want a solid border, a dotted one or a dashed one and so on. Consider this HTML.

Let’s add a border to the section element.

This border-style property alone is sufficient to display a border with default color and thickness. Here’s what you’ll see.

You can try out the other border style values like dotted and dashed too.

Border Width

The border-width property is used to control the thickness of this border.

You’ll now see a thin and much neater border.

Notice that if you remove the rule border-style:solid; you won’t get any border. So border width and color are optional properties, but border-style has to be specified.

Border Color

The property border-color is used to change the color of this border

Now this looks like a border on modern web pages. Finally you’re able to create something that resembles today’s websites.

Border Shorthand Property

The way we could use the shorthand properties margin and padding to specify different margins and padding values for all 4 directions in the same rule, we can use the border shorthand property to combine the border style, width and color in a single rule.

The above rule gives you the same result.

Borders on different edges

Also, you can have differently styled borders on different edges

This gives us only top and bottom borders as specified.

You can further use individual properties like border-top-style, border-left-width for more control.

Rounded Corners

We can use the property border-radius to achieve rounded corners.

You now see this.

Interestingly, even if you don’t have a border, but instead have a background color or image, this still works.

Isn’t this amazing now?

So, by combining backgrounds, padding, margin, and borders you can add personality and structure to your web page. This covers a huge portion of what developers do with CSS. SO it’s highly recommended that you experiment with different color combinations, images, padding, margins and border styles to create designs as per your imagination.