Hostwinds Blog

Search results for:


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 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 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 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 tags in all four of your HTML documents:

1

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

1. Website Homepage:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 My Blogging Website

Blog Home

My Blogging Website

Blog Post 1 Title

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

Read Blog Post

Blog Post 2 Title

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

Read Blog Post

Blog Post 3 Title

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

Read Blog Post

Thank you for visiting this blogging site!

2. Blog Post 1 Web Page:

1234567891011121314151617181920212223242526272829303132333435 My Blogging Website | Blog 1

Blog Home

My Blogging Website

Blog Post 1 Title

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

Thank you for visiting this blogging site!

3. Blog Post 2 Web Page:

123456789101112131415161718192021222324252627282930313233 My Blogging Website | Blog 2

Blog Home

Blog Post 2 Title

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

Read Next Blog Post

Thank you for visiting this blogging site!

4. Blog Post 3 Web Page:

123456789101112131415161718192021222324252627282930313233 My Blogging Website | Blog 3

Blog Home

Blog Post 3 Title

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

Read Next Blog Post

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

CSS 1234567891011121314151617181920212223242526272829303132333435 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 (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 in 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 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 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:

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

CSS 1234567891011121314151617181920212223242526272829303132 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 our buttons on the homepage. In order to center them, we'll use the following properties:

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

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:

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

CSS 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 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! 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:

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

CSS 1234567 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, so we can better understand how

tags work. We are going to 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:

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

CSS 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 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 (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 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 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:

CSS 12345. 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:

CSS 1234 #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 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:

CSS 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 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, 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.

-The Hostwinds Team

Written by Hostwinds Team  /  December 28, 2018

Need help? Chat now!