For this post, I’ll be using the same HTML file as in the previous post. We’ll change our CSS file a little to play with the background and we’ll also experiment adding borders to our HTML elements. To make things simple, I am just going to use the names of the colors we’ll be using. No hex or RGB notation.
Background is a CSS property that lets you change the background color or background image of an HTML element. Let’s start by giving our entire page a background color. The visible page starts at the <body> tag so to give it a background color of yellow we do this:
Opening the HTML file in a browser gives us a pretty ugly page, but notice the background color did change to yellow.
What if we wanted just to change the background color of a particular element and not the whole page? Let’s try changing the background color of our <h1> tag to green, and the background color of our <h4> tag to blue. Our CSS now looks like this:
Note that we don’t have to put this code in a new selector rule. We already have h1 and h4 selectors so we just have to add the background: line in the selectors that we already have. The output just got even uglier.
We can use an image for the background of our page by replacing the background: color with background: url(). We then place the path or url to our image between the parenthesis. Below, I used an image file named ‘back5.png’.
The browser takes the background image and tiles it across the page.
What if we didn’t want our background image to tile? For that we use a ‘background-repeat’ property and set it to ‘no-repeat’ like this:
We could also tile the image only horizontally with ‘background-repeat: repeat-x;’ or vertically with ‘background-repeat: repeat-y;’. But what if we didn’t want the image to repeat and still take up the full screen? We can do that with another property called background-size. Setting the background-size to ‘cover’ will make our image cover the full screen.
In my example, I didn’t pick a good image to use. You just see the top of the knight’s helmet.
There are two ways to place a border around an html element, the easy way and an even easier way. Just for fun, we’ll look at the less easy way first.
To place a border around an element we need to give the border three properties: width, style, and color. You set these properties in CSS using border-width, border-style, and border-color.
Let’s remove our background image and give our page a light gray background color. Then we’ll place a black border around our <li> tags. We’ll use ‘2px’ (2 pixels) for the width, and a style of ‘solid”.
Which statement you write first isn’t important. You could do border-width, border-style, border-color or border-color, border-width, border-style. The order isn’t important. You don’t even need to set all three. If you set a border-style the other properties will be set to a default value.
An even easier way to set a border is simply to use border: width style color. Let’s change our <li> borders to 1 px red, and just for something different we’ll use a style of ‘dashed’.
Again, order isn’t important. You can write border: 1px dashed red; or border: red 1px dashed; and the output will be the same. Also, if you just give it a style like border: dashed; the width and color will be set to a default value.
There is so much more you can do with borders, but that is it for this post. Next post we’ll take a look at CSS selectors.