Hostwinds Tutorials: How to Build a Basic Blogging Website Without a Site-Building Application Pt. 3

Part 3 of Coding Blog Series - CSS

Part 3 of Hostwinds coding blog series is heeeeereeeeee, folks! In Parts 1 and 2, we built a homepage for our blogging website with HTML as well as 3 web pages for 3 hypothetical blog posts using HTML. Onto CSS! CSS is a programming language that works in conjunction with your HTML code in order to make your website look nicer and more customized. We’ve got so much to cover here, so hang on tight! Before we begin creating our first CSS document, we’ll go over how to link our CSS document to our HTML documents. It is easy!

Oh, and before we begin linking our CSS document to our HTML documents, check out THESE LINKS to Part 1 of this blog series, Part 2 of this blog series, and our cheat sheets in the form of the previous blog posts entitled “Hostwinds HTML Hype Part 2: Tag Talk” and “Hostwinds CSS Chat”:

Hostwinds Tutorials: How to Build a Basic Blogging Website Without a Site-Building Application Pt.1

Hostwinds Tutorials: How to Build a Basic Blogging Website Without a Site-Building Application Pt. 2

Hostwinds HTML Hype Part 2: Tag Talk

https://www.hostwinds.com/blog/news/hostwinds-css-chat/

P.S. Just to reiterate this, the blogging website we are creating is very basic. The hope is that we will be able to continuously expand upon our website and slowly make it more beautiful/dynamic/magical blog post by blog post. For all intents and purposes, this blog series was designed to provide you with the fundamentals of website building. Okay, now let’s dive in!

 

First Thing’s First: Linking Your CSS Document to Your HTML Document

Add this line of code within your opening and closing <head> tags in all four of your HTML documents:

Remember to push save! Just to review, our four HTML documents look like so at this moment:

1. Website Homepage:

2. Blog Post 1 Web Page:

3. Blog Post 2 Web Page:

4. Blog Post 3 Web Page:

IMPORTANT NOTIFICATION: When the chunk of code I insert into these blog posts is too long to fit into the window, a little scroll bar will appear at the very bottom of such code when you hover your mouse over that area. You can slide the scroll bar to the right to view the entire chunk of code.

Now, we’ll take this whole CSS situation step by step.

 

How To Initially Set Up The CSS Document

Step 1: Create a new folder within the same folder and text editor you are in now (the same folder and text editor in which you put your index.html in Part 1). Name the folder “css.” Next, create a new file within that folder and name the file “style.css” Your style.css document will be modifying all your HTML documents.

Step 2: Now we can reference (, or “target,”) all the tags we’d like to modify like so:

Just a reminder: Before moving on to Step 3, please review the blog post regarding CSS selectors, properties, property values, and general syntax if you aren’t yet well-versed in that arena (https://www.hostwinds.com/blog/news/hostwinds-css-chat/).

Step 3: We want the background of our homepage and web pages to be an image that takes up the entire page. You may choose any image of your liking to be your background, but we’ll name our background image “your_background_image.png” for this tutorial. Moreover, we’ll make a beautiful image of clouds our background. In order to make this image our web pages’ backgrounds and make it take up the whole page in each of our web pages, we’ll insert the “background-image” and “background-size” properties within the “body” selector at the very top of the document.

Note: Your CSS (and HTML, for that matter) should be in order from which element occurs on the page first, then second, and so on.

Another Note: You may be asking yourself, “Why is there two periods in front of the “/images/your_background_image.jpg?” Good catch! You may remember the discussion we had regarding relative file paths in Part 1 of this blogging series. We used only one period in front of our “/css/style.css” reference when we used a relative file path to call on our CSS at the beginning of this blog post. This is because the “css” folder is within the same folder that our index.html file is in. There are two periods in front of  “/images/your_background_image.jpg” because we are telling the browser to start in our “css” folder where our style.css document is, then go out of that “css” folder, then go into a different folder named “images,” then grab the image file named “your_background_image.jpg.”

Next, we want to change the font of the link text (“Blog Home”) in our navigation bar and make the link text all uppercase. Therefore, the document thus far should appear like so:

Step 4: We want to change the fonts of all our headings, make their texts all uppercase, center the heading text, and change the text color to a dark blue.

Next, we’ll ensure the images are all centered, change their widths, put borders around them, and make their borders rounded on the sides. With these additions included, the document looks like this:

Step 5: Moving right along! Let’s change the font and color of our paragraphs while also centering the paragraphs of text.

After that, we are going to modify our buttons on the homepage. In order to center them, we’ll use the following properties:

In order to change the background color, to make the text uppercase, to change the font family and font size, to center the text within the buttons, to add space between the sides of the buttons and the text within the buttons, to give the buttons a solid black border, and to round the corners of the buttons, we’ll generate the following code:

The document should now appear like so:

Step 6: This part is cool! In order to change the homepage buttons’ colors and make them almost appear a little bit see-through when someone hovers over them with their mouse, we’ll type the following code:

Now let’s modify our footer and final div tag. We’ll change the footer’s text (aka change the font family, font size,  font color, and text alignment), the footer’s background color, and add some space between the footer and the area above it by typing in this CSS code:

We’ll also modify the one <div> tag we created in Part 1 so we can better understand how <div> tags work. We are going to make the background of the content between the opening and closing <div> tags in our index.html page a gradient of three colors. This will allow us to see what nesting our chunk of code between the opening and closing <div> tags does. Bear with me here folks because this won’t actually look super aesthetically pleasing on our homepage. We will be adding the following CSS code to the bottom of our style.css document so we can create this gradient background:

Step 7: Take a look at the whole CSS document and make sure it looks loverly:

Step 8: You may recall this from Part 2 of this blog series, but the only difference (with the exception of the headings and the part of the text between the opening and closing tags saying “Blog Post 1” rather than “Blog Post 2” or “Blog Post 3”) between the blog post 1 web page and the web pages for both blog post 2 and 3 is that the latter web pages contain a link that allows users to view the next blog post (the web page for blog post 1 does not need this link, as it is the most current blog post). In Part 2, we added the “ReadMe” class to the <a> tag within the footer of our blog post 2 and 3 HTML documents. We will now target that class in this CSS document in order to make their text uppercase, add space between the letters of the “Read Next Blog Post” link, and make the “Thank you for visiting this blogging site!” float beside the “Read Next Blog Post” link rather than under it (by default).

In order to achieve these modifications, we’ll add the following chunk of code to the bottom of our CSS document:

Step 9: Remember when we added that ID to the <p> tag nested between our opening and closing <footer> tags in our index.html document in Part 1? We did this so we could better understand how IDs work and how to target them in CSS. Here we go! First, let’s type the following code at the very bottom of our style.css document:

Now, I’ll explain. First of all, the hashtag in front of “ThankYou” tells the browser this is an ID. By giving only the <p> tag in the index.html the ID “ThankYou” and targeting that ID in CSS to make the text of that specific paragraph all uppercase and a navy blue color, we are ensuring that only the paragraph in the homepage’s footer will be changed in that way. The same paragraphs in the footers of the web pages for blog posts 1, 2, and 3 will not be uppercase and will not be that navy blue color. Go ahead and check your web pages to see this distinction for yourself after adding the code above to your style.css page.

Our CSS document will now look like this:

Onto step 10!

Oh wait! First a “P.S.”

P.S. I can’t stress this enough: In more complex websites, classes, <div> tags, and IDs are critical and are used very often.

Okay, NOW onto step 10!

Step 10: Test out your updated website and web pages! Go to your file explorer, right-click the “index.html” file, and click “Open With.” Next, select your preferred internet browser (I recommend Google Chrome). Click the “Read Blog Post” buttons and notice the changes we made to our web pages with CSS.

Screenshot of Homepage
Homepage

 

Blog Post 1 Web Page
Blog Post 1 Web Page

 

Blog Post 2 Web Page
Blog Post 2 Web Page

 

Blog Post 3 Web Page
Blog Post 3 Web Page

CSS Colorful Canvas

In closing, CSS makes websites more aesthetically pleasing and dynamic. We hope you were able to profit from this tutorial blog series thus far and we hope to continue to develop this website in future blog posts. The plan is to make our website more interactive and more classy-looking as we move forward. Spoiler Alert: We may even throw a little JavaScript into the mix at some point. We hope you enjoy the remainder of your week.

-The Hostwinds Team

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.