Creating a website is a great way to express yourself. Although there are many website building tools, writing it yourself is a fun fashion to larn more than 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 upwards and running with both HTML and CSS.

What is CSS?

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

Creating a Basic Website With HTML

Since CSS is just a mode linguistic communication, to utilize information technology, we offset need something to style. A very basic website volition exist enough for united states to begin playing with CSS. Our page volition display "Hullo Earth."

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

In case you are non familiar with HTML, let's speedily go over what all of the elements do. As mentioned, HTML is a markup linguistic communication, which ways that information technology uses tags to mark what the text is. Whenever you see a word surrounded past <> it is a tag. In that location are two types of tags, a tag that marks the starting time of a section using <> and one that marks the cease of a section using </>. The text within a section is too intended to make this stardom easier to see.

In our case, we have iv 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 folio. All of the displayed elements are between the body tags. Nosotros only have one displayed element, the p tag. It tells the web browser that the text is a paragraph.

Calculation CSS to HTML

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

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

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

                      <html>            
            <caput>            
            </head>            
            <body>            
            <p way="border-fashion: solid; padding: 30px; text-align: center"            >Hello Earth</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 tin can motility this data to our header. Our header is for information that we need to display the website correctly.

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

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

Importing a CSS File to Your Website

Adding the mode data to the header makes our lawmaking much easier to read. However, if we want to mode many different pages the aforementioned way, nosotros accept to add that text to the pinnacle of every page. That might not seem like much work, you tin copy and by it afterwards all, merely it creates a lot of work if you want to change an chemical element subsequently.

Instead, we are going to proceed the CSS information in a dissever file and import the file to style the folio. Copy and paste the data between the manner tags into a new CSS file ourCSSfile.css.

          p {
            text-marshal: heart
}
            #ourParagraph {            
            border-style: solid;            
            padding: 30px;
}

Then, import the file to the HTML file.

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

Adding a Background Prototype With CSS

At present that you have a solid base of operations in HTML and CSS, adding a background image volition be a piece of block. Offset, identify what chemical element you want to give a background image to. In our example, nosotros will add a background to the entire page. This means that we desire to change the mode of the body. Remember, the body tags comprise all the visible elements.

          body{
            background-prototype: url("sky.jpg");
}
p {
            text-align: centre
}
            #ourParagraph {            
            edge-manner: solid;            
            padding: 30px;
}

To change the body fashion in CSS, first use the torso keyword. Then add together curly brackets every bit 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 await to memorize them all. Bookmark a CSS properties cheat-sheet with attributes that you lot want to remember.

Afterward the aspect, utilize a colon to signal how you will change the aspect. To import an image, utilise url(). it indicates that you are using a link to indicate to the image. Place the file location in the brackets betwixt quotation marks. Finally, end the line with a semicolon. Although white infinite does not have meaning in CSS, utilise indentation to make the CSS easier to read.

Our example looks like this:

CSS Background Image

If your paradigm is not displaying correctly because of the size of the image, you lot can modify the paradigm directly. Withal, 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 plough that off, add background-repeat : no-repeat; to your element.

There is also two ways to brand an image cover the entire background. Offset, you tin can ready the background-size to the size of the screen with background-size: 100% 100%;, but this will stretch the epitome and may distort the image too much. If yous do not desire the proportions of the prototype changed, you can also ready the background-size to cover. Embrace volition make the groundwork prototype encompass the background, just not distort the prototype.

Changing the Groundwork Color

Let'due south modify i last thing. At present that we accept a background, our paragraph is hard to read. Let'south make its groundwork white. The process is similar. The element we want to modify is #ourParagraph. The # indicates that "ourParagraph" is an id name. Next, nosotros want to set the background-colour attribute to white.

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

Much better.

Continuing to Pattern Your Website With CSS

Now that y'all know how to alter the way of unlike HTML elements, the heaven is the limit! The bones method to change way attributes is the same. Identify the element that you want to change, and describe how to change the aspect. The all-time way to acquire more is to play around with different attributes. Challenge yourself to change the colour of your text next.

The viii Best Sites for Quality HTML Coding Examples

Read Side by side

Virtually The Author

Jennifer Seaton (21 Manufactures Published)

J. Seaton is a Science Author that specializes in breaking down complex topics. She has a PhD from the Academy of Saskatchewan; her research focused on utilizing game-based learning to increase student date online. When she is not working, you lot will detect her with her reading, playing video games, or gardening.

More From Jennifer Seaton