Creating a website is a great way to express yourself. While there are many website building tools out there, writing it yourself is a fun way to learn more about how behind-the-scenes websites work. A good beginner project is to create a website and add a background image with CSS. This project will get you started using both HTML and CSS.
What is CSS?
CSS stands for Cascading Style Sheet. It is a programming language that allows you to apply style to markup languages. One of these markup languages is HTML or Hyper-Text Markup Language. HTML is used to create websites. While it is possible to control some of the website style using HTML, CSS offers many more control and design options.
Creating a basic website with HTML
Since CSS is just a style language, in order to use it, we first need something for styling. A very simple website will be enough to start playing with CSS. Our page will show “Hello World”.
<html>
<head>
</head>
<body>
<p>Hello World</p>
</body>
</html>
In case you’re not familiar with HTML, let’s quickly review what all the elements do. As mentioned, HTML is a markup language, which means it uses tags to mark what text is. Whenever you see a word surrounded by <> it’s a tag. There are two types of tags, a tag that marks the start 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 header information that is not displayed on the page but is required to create the page. All displayed elements are located between the body tags . We have only one element displayed, the p tag . 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 basic right now and there’s not much we can do, but let’s start by highlighting our paragraph 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 other descriptions. We increase the white space, or fill, 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 cluttered with all those descriptions in the paragraph tag. We can move this information into our header. Our header is for the information we need to properly view the website.
<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 had to change a few things. The style tag indicates the web browser’s style information, but also what style. In our example, we used two different ways to tell him what to style. The p in the style tag tells the web browser to apply that style to all paragraph tags. The #ourParagraph section says that only style elements with the id ourParagraph . Notice that the id information has been 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 in the same way, we need to add that text to the top of each page. It might not seem like a lot of work, you can copy and paste it after all, but it creates a lot of work if you want to change an element later.
Instead, we’ll 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 into 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 foundation in HTML and CSS, adding a background image will be a breeze. First, identify the element you want to give a background image to. In our example, we’ll add a background to the entire page. This means we want to change the body style . Remember, body tags contain all 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, use the body keyword first . Then add the curly brackets as we did before {}. All styling information for the body must be enclosed in curly brackets. The style attribute we want to change is background-image . There are many style attributes. Don’t expect to memorize them all. Mark a CSS properties cheat sheet with attributes you want to remember.
Related: 8 Awesome HTML Effects 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 () . indicates that you are using a link to point to the image. Place the path to the file in parentheses in quotation marks. Finally, end the line with a semicolon. While whitespace has no meaning in CSS, use indentation to make the CSS easier to read.
Our example looks like this:
If your image does not display correctly due to the image size, you can edit the image directly. However, there are background style attributes in CSS that you can use to alter the background. Images smaller than the background will automatically repeat on the background. To turn it off, add background-repeat : no-repeat ; to your element.
There are also two ways to make an image cover the entire background. First, you can set the wallpaper size to the screen size with the wallpaper size : 100% 100%; , but this will stretch the image and may distort the image too much. If you don’t want to change the aspect ratio of the image, you can also set the size of the background to cover . Cover will make the background image cover the background, but will not distort the image.
Change the background color
Let’s change one last thing. Now that we have a background, our paragraph is difficult to read. Let’s make the background white. The process is similar. The element we want to change is #ourParagraph. The # indicates that “ourParagraph” is an identifying 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;
}
Much better.
Keep designing your website with CSS
Now that you know how to style different HTML elements, there are no limits! The basic method for modifying style attributes is the same. Identify the element you want to change and describe how to change the attribute. The best way to learn more is to play with different attributes. Challenge yourself to change the color of your text later.
