How to use an external style sheet to display a rounded corner background image.

Web pages can be styled using 3 different CSS methods: External Style Sheets, Internal Style Sheets, and Inline Styles. In this tutorial we will look at how to display a rounded corner background image using an external style sheet. External style sheets are usually the best method for styling web pages. When used effectively, the styles on several or every web page can be updated by modifying a single external css file.

For this tutorial we created a web page background image using the Free Rounded Corner Maker on this site. We used these settings:
Background Width: 800
Background Height: 800
Corner Radius: 30
Fill Color: ffffff
Border Color: f89900
Border Size: 20
Rounded Edge: 8

We saved it to our computer as background.gif.

Here is the CSS code snippet we placed in the CSS body tag to display the rounded corner background in the web page:

Next we created a new file, and named it styles.css. (The name really doesn't matter, as long as you use the .css ending on the filename.) Here is that file. It contains the snippet above as well as the rest of the code for this example.

We then created an example web page to display the background. Here is the source code for the example web page.

Notice we linked to the External Style Sheet from the head of the web page with this code:

Go ahead and do the steps above. Upload the web page, the CSS file, and the image and you are all set.