June 20, 2016

Website Folder Setup, Images, and External Style Sheet

Website Folder Setup with an image folder and CSS external style sheet.

There is a short demonstration video(no sound) below!

Today, we’re going to create a website folder setup/file structure. We will link to a CSS external style sheet, and utilize an image folder for our website images. This is the basic setup for a site that is built with HTML and designed with CSS. Later on, we will work with the background-image property as well. Let’s begin by creating a folder on our desktop. You can put this folder wherever it is convenient for you, but in this lesson, I am putting it right on the desktop for simplicity. Note that when it comes to naming your folder and documents; you can name them any way you want, but I suggest using the same names from this lesson for now. You can always change them later. Right-click on your desktop and select “new“, and then “folder“. Name it “my-website“. Next, open the folder and right-click inside of it. Select “new“, and then “folder” one more time. Name this folder “my-images“. That’s it for the website folder for now.

The next step is to open up the text editor you’re using and create a new HTML file named “index.html“. This is essentially going to be your homepage and it’s the very first thing that a web server will look for when loading your website. We need to save this HTML document into our my-website folder. Now onto our CSS external style sheet. Open up another new document again; name this one “my-styles“, and save it in your my-website folder as well. This is the basic starting point setup for a website built with HTML and CSS. I’ve added a demonstration video(no sound) below to give you a visual of what we just did.

And that’s it. a very basic website folder setup. I saved an image previously onto my desktop to use in this lesson. You can use any image that you want; just make sure to save it into your my-images folder that is inside of your my-website folder. I recommend getting an image that text can clearly be seen on top of because we’ll be using this image as a background for a paragraph. You should also have taken notice of the link tag that was embedded in the head element of the HTML document. This links us to our my-styles.css external style sheet. Now, when we write our CSS code, it will go in our external style sheet; and our HTML document that is linked to it will pull the styles we specify from it. When we run our web page in the browser, we run the index.html page.

Breakdown of the CSS link tag

  • <link This is just an HTML link tag and has many uses.
  • rel=”stylesheet” rel is the relationship attribute. It defines the relationship the linked resource has to our HTML document. (Which is a stylesheet).
  • text=”type/css” defines that the content in our linked resource is CSS.
  • href=”my-styles.css”> The href attribute specifies the link destination. Which in our case is my-styles.css.

Now that we have our website folder setup complete, I want to work a little bit with the background-image property. This is also the first time we will be using an external style sheet in an exercise. If you haven’t put an image in your “my-images” folder yet, you should do that now. See the first example below, and then we’ll discuss what we did.

website folder setup index code

website folder setup CSS code

website folder setup display

Since we are using an external style sheet that is linked to our HTML document, you should know that before you run your code, all of the pages need to be saved, and when you run; you need to run the index.html page. If you try to run the style sheet, the browser will just show your code. So remember, run the index.html and it will pull the CSS styles in from the stylesheet via the link in our HTML head element. I still to this day run the stylesheet on accident from time to time when making alterations to my CSS code. If you plan on working with HTML and CSS often, I think it’s inevitable that you’ll do this a million times.

We’ll start with the index.html page. I wanted to highlight the link in the head element just to point out one more time that this link is what ties our HTML document to our CSS style sheet. Okay, so we have an h1 heading and two p elements. We assign a class of special-paragraph to the first paragraph. In the my-styles.css code, we have one CSS rule created. It’s a class rule, and we specify that with the period before the class name. There are quite a few declarations in this rule, but the one that is important here is the background-image: url(“my-images/bg1.jpg”);. background-image is the property we want to affect, and url(“”); is the value where we will enter the location of our image. Note: The double quotes ( ) are very important; don’t forget to add them. I have named my image bg1. It is a .jpg, and I have it saved into the my-images folder that is inside of the my-website folder. Because we have an image folder created to store all of our images; we have to specify that first with (“my-images/”). Then after the forward slash, we enter our image name and type: bg1.jpg. If you didn’t have an image folder, and just saved images into your my-website folder, this declaration would look like this: background-image: (“bg1.jpg”);. Trust me when I say, if you plan on having multiple images, you want them inside of their own folder. Finally, if you were pulling an image in from somewhere on the internet, you would put an http://www.whateverETC. url inside of the parenthesis instead.

Let’s use the background-image property to add an image to the background of the entire web page. See the example images below.

body bg image css

body bg image display

The first thing you should notice is that we have taken the background-image declaration out of the .special-paragraph rule and created a CSS body rule with a background-image declaration in there. We are using the same image and location as we did in the previous example. When the index.html page is run in a browser now, the entire website has a background image. It is visible wherever there is no other background color or image specified. Behind headings, text, etc. To get a better picture, see the final example below.

blue bg css

blue bg display

All that we added here was a background-color: blue; declaration to our .special-paragraph class. Now the first paragraph has a blue background and the entire web page has our image background. That’s gonna do it for this lesson. I didn’t plan on it being so lengthy. Thanks for reading, I’ll see you next time.

IMPORTANT! There shouldn’t be any more issues with the italicized double quotes(“) in the code now. I found a way to display the HTML and CSS code on a web page without it trying to run it or add any text formatting. If for some reason you still had an issue; it would be because of italicized double quotes in the code that the browser can’t understand. You would have to delete them and re-type them to take away the italics. If you still have this problem with copying and pasting the source code, please let me know down in the comments.

index.html Source Code


<!DOCTYPE html>
<html>
<head>
<title>Website Folder Setup</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>
<h1>Using the background-image property</h1>
<p class="special-paragraph">The background-image property can be used in a few ways.<br />
It can be set as the background of the entire web page, <br />
or it can be used as the background for an element like this paragraph.</p>
<p>This is just another paragraph without a CSS class.</p>
</body>
</html>

my-styles.css Source Code


body{
background-image: url("my-images/bg1.jpg");
}
.special-paragraph{
color: red;
font-size: 25px;
padding: 20px;
line-height: 1.5;
border: 1px solid black;
background-color: blue;
}

Clear Coded Programming

Please Leave a comment