There are several ways that CSS will allow you to make elements on your page stand out. Without some creative styling, most of your page will simply be text and images. While this can be OK in simple situations, most sites will require a bit more flavor. Today we’ll see how to make our page elements stand out by using the CSS background-color property along with the border property. Let’s jump in and see how it works.

STEP ONE:

The HTML

We’ll start with a very simple HTML page that contains nothing but a Div element with some placeholder text inside of it. Here’s what the HTML file should look like initially:

STEP TWO:

The CSS

Now, in our CSS file we’ll want to target the Div with the ID of “demo”. Therefore, we’ll use a regular old CSS ID selector like so:

This is, of course, where we’ll be writing all of the CSS declarations to make our Div stand out. Let’s start by adding some padding and a width declaration so that the text on our page has some sort of dimensional restraints:

Excellent, now if you load up the page in your browser, you’ll see nothing but a fairly large, 800 pixel wide paragraph. Now, let’s go ahead and put a border around our Div. The CSS border property takes 3 values:

  1. The width of the border in pixels.
  2. The type of border (solid, dashed, transparent, etc…)
  3. The color of the border

So, to add a 2 pixel, light-blue border to our Div, we simply need to do this:

Notice that we’ve used a hex value color property for our border. You could just as easily use the real word for most colors like “blue”. Now if you check out our paragraph, it’s starting to look a little bit nicer. Next, we’ll add a background color and change the font size to make our paragraph a bit easier to read.

The background-color in CSS is just as easy to use as the border property, and all you have to do is tell it what color you’d like the background of the element to be. I’ll also add a new font-size declaration to make the font a bit bigger. Here’s what the CSS looks like now:

Now, if you take a look at the page, you’ll see that the text has far more contrast and just plain looks better than the plain black on white version.

Before:
Before Adding Style

After:
After Adding Style

CSS borders and background colors are essential to creating outstanding looking web pages. These fundamentals will have you styling up elements in no time. Join us in our next beginner CSS tutorial where we’ll be talking about how to comment your code to make your life with CSS easier and more organized. See you then!

Download Source Files