Creating a website is a great way to express yourself. Although there are many website building tools, writing it yourself is a fun way to learn more about how websites work behind the scenes. A good beginner project is to create a website and add a background image with CSS. This project will get you up and running with both HTML and CSS.

What is CSS?

CSS stands for Cascading Style Sheet. It is a programming language that allows you to style markup languages. One such markup language is HTML or Hyper-Text Markup Language. HTML is used to create websites. Although you can control some of the website's style using HTML, CSS offers much more control and design options.

Creating a Basic Website With HTML

Since CSS is just a style language, to use it, we first need something to style. A very basic website will be enough for us to begin playing with CSS. Our page will display "Hello World."

            <html>
   <head>
   </head>
   <body>
       <p>Hello World</p>
   </body>
</html>
    

In case you are not familiar with HTML, let's quickly go over what all of the elements do. As mentioned, HTML is a markup language, which means that it uses tags to mark what the text is. Whenever you see a word surrounded by <> it is a tag. There are two types of tags, a tag that marks the beginning of a section using <> and one that marks the end of a section using </>. The text within a section is also intended to make this distinction easier to see.

In our example, we have four tags. The html tag indicates which elements are part of the website. The head tag contains the header information that is not displayed on the page but is needed to create the page. All of the displayed elements are between the body tags. We only have one displayed element, the p tag. It tells the web browser that the text is a paragraph.

Related: 10 Simple CSS Code Examples You Can Learn in 10 Minutes

Adding CSS to HTML

Now that we have a simple page, we can customize the style with CSS. Our page is pretty simple right now, and there is not much we can do, but let's begin by making our paragraph stand out so we can distinguish it from the background by adding a border.

            <html>
   <head>
   </head>
   <body>
       <p style="border-style: solid;" >Hello World</p>
   </body>
</html>

    

Now, our paragraph will be surrounded by a black border. Adding a style description in CSS to our paragraph tag told the website how to style the paragraph. We can add more descriptions. Let's increase the white-space, or padding, around our paragraph and center our text.

            <html>
   <head>
   </head>
   <body>
       <p style="border-style: solid; padding: 30px; text-align: center" >Hello World</p>
   </body>
</html>

    

Our website looks better, but our HTML is starting to look messy with all of those descriptions in the paragraph tag. We can move this information to our header. Our header is for information that we need to display the website correctly.

            <html>
   <head>
       <style>
           p {
               text-align: center
           }
           #ourParagraph {
               border-style: solid; 
               padding: 30px;
           }
       </style>
   </head>
   <body>
       <p id="ourParagraph" >Hello World</p>
   </body>
</html>
    

Now our HTML is easier to read. You will notice that we did have to change some things around. The style tag tells the web browser style information, but also what to style too. In our example, we have used two different ways to tell it what to style. The p in the style tag is telling the web browser to apply that style to all paragraph tags. The #ourParagraph section tells it to only style elements with the id ourParagraph. Notice that id information was added to the p tag in our body.

Importing a CSS File to Your Website

Adding the style information to the header makes our code much easier to read. However, if we want to style many different pages the same way, we have to add that text to the top of every page. That might not seem like much work, you can copy and past it after all, but it creates a lot of work if you want to change an element later.

Instead, we are going to keep the CSS information in a separate file and import the file to style the page. Copy and paste the information between the style tags into a new CSS file ourCSSfile.css.

            p {
   text-align: center
}
#ourParagraph {
   border-style: solid; 
   padding: 30px;
}
    

Then, import the file to the HTML file.

            <html>
   <head>
       <link rel="stylesheet" href="ourCSSfile.css">
   </head>
   <body>
       <p id="ourParagraph" >Hello World</p>
   </body>
</html>
    

Adding a Background Image With CSS

Now that you have a solid base in HTML and CSS, adding a background image will be a piece of cake. First, identify what element you want to give a background image to. In our example, we will add a background to the entire page. This means that we want to change the style of the body. Remember, the body tags contain all the visible elements.

            body{
   background-image: url("sky.jpg");
}
p {
   text-align: center
}
#ourParagraph {
   border-style: solid; 
   padding: 30px;
}
    

To change the body style in CSS, first use the body keyword. Then add curly brackets as we did before {}. All of the style information for the body must be between the curly brackets. The style attribute we want to change is background-image. There are many style attributes. Don't expect to memorize them all. Bookmark a CSS properties cheat-sheet with attributes that you want to remember.

Related: 8 Cool HTML Effects That Anyone Can Add to Their Website

After the attribute, use a colon to indicate how you will change the attribute. To import an image, use url(). it indicates that you are using a link to point to the image. Place the file location in the brackets between quotation marks. Finally, end the line with a semicolon. Although white space does not have meaning in CSS, use indentation to make the CSS easier to read.

Our example looks like this:

CSS Background Image

If your image is not displaying correctly because of the size of the image, you can alter the image directly. However, there are background style attributes in CSS that you can use to alter the background. Images that are smaller than the background will automatically be repeated in the background. To turn that off, add background-repeat: no-repeat; to your element.

There is also two ways to make an image cover the entire background. First, you can set the background-size to the size of the screen with background-size: 100% 100%;, but this will stretch the image and may distort the image too much. If you do not want the proportions of the image changed, you can also set the background-size to cover. Cover will make the background image cover the background, but not distort the image.

Changing the Background Color

Let's change one last thing. Now that we have a background, our paragraph is hard to read. Let's make its background white. The process is similar. The element we want to modify is #ourParagraph. The # indicates that "ourParagraph" is an id name. Next, we want to set the background-color attribute to white.

            body{
   background-image: url("sky.jpg");
}
p {
   text-align: center
}
#ourParagraph {
   background-color: white;
   border-style: solid; 
   padding: 30px;
}
    
CSS Background Color

Much better.

Continuing to Design Your Website With CSS

Now that you know how to change the style of different HTML elements, the sky is the limit! The basic method to change style attributes is the same. Identify the element that you want to change, and describe how to change the attribute. The best way to learn more is to play around with different attributes. Challenge yourself to change the color of your text next.