Need help? Chat now!

Hostwinds Blog

Search results for:


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

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

by: Hostwinds Team  /  December 28, 2018


Part 3 of the Hostwinds coding blog series is here, folks! In Parts 1 and 2, we built a homepage for our blogging website with HTML and three web pages for three hypothetical blog posts using HTML. Onto CSS! CSS is a programming language that works in conjunction with your HTML code 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 below 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

Hostwinds CSS Chat

P.S. to reiterate this, the blogging website we are creating is 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 tags in all four of your HTML documents:

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

1. Website Homepage:

My Blogging Website

My Blogging Website

Blog Post 1 Title

Here is where you can place a short synopsis of your blog post if you like

Blog Post 2 Title

Here is where you can place a short synopsis of your blog post if you like

Blog Post 3 Title

Here is where you can place a short synopsis of your blog post if you like

Thank you for visiting this blogging site!

2. Blog Post 1 Web Page:

My Blogging Website | Blog 1

My Blogging Website

Blog Post 1 Title

Here is where you can place all the text you want to add to your blog post for the day.

Thank you for visiting this blogging site!

3. Blog Post 2 Web Page:

My Blogging Website | Blog 2

Blog Post 2 Title

Here is where you can place all the text you want to add to your blog post for the day.

Thank you for visiting this blogging site!

4. Blog Post 3 Web Page:

My Blogging Website | Blog 3

Blog Post 3 Title

Here is where you can place all the text you want to add to your blog post for the day.

Thank you for visiting this blogging site!

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 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:

body {} nav {} h4 {} h3 {} img {} p {} button {} button: hover { } footer {} div {} .ReadNext {} #ThankYou {}

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.

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 in our background. 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 are 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. 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:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;}

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:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;}

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 the buttons on the homepage. To center them, we'll use the following properties:

display: block;margin-left: auto;margin-right: auto;

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:

background-color: #bee5eb;text-transform: uppercase;font: 27px 'Cinzel', serif;text-align: center;padding: 20px 30px;border: 3px solid black;border-radius: 25px;

The document should now appear like so:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;}

Step 6: This part is cool! 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:

button:hover { background-color: #00a1f5; opacity: .5;}

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:

footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;}

We'll also modify the one tag we created in Part 1 to understand better how tags work. We will make the background of the content between the opening and closing 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 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:

div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

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

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

Step 8: You may recall this from Part 2 of this blog series, but the only difference (except for 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 one 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 one does not need this link, as it is the most current blog post). In Part 2, we added the "ReadMe" class to the tag within the footer of our blog posts 2 and 3 HTML documents. We will now target that class in this CSS document 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).

To achieve these modifications, we'll add the following chunk of code to the bottom of our CSS document:

#ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;}

Step 9: Remember when we added that ID to the tag nested between our opening and closing 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:

#ThankYou { text-transform: uppercase; color: #0b053f;}

Now, I'll explain. First of all, the hashtag in front of "ThankYou" tells the browser this is an ID. By giving only the

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, we ensure 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:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);} .ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;} #ThankYou { text-transform: uppercase; color: #0b053f;}

Onto step 10!

Oh, wait! First, a "P.S."

P.S. I can't stress this enough: In more complex websites, classes, 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, please 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.

Homepage

Blog Post 1 Web Page

Blog Post 2 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.

Written by Hostwinds Team  /  December 28, 2018