Hostwinds Blog

Search results for:


Hostwinds CSS Chat

by: Hostwinds Team  /  December 27, 2018


Have you heard about all the Hostwinds HTML Hype? What's that? It's glaringly apparent that I have just purposefully asked you that question to segway into a shameless plug for Hostwinds blog series called "Hostwinds HTML Hype?" OOPS! Here is a link to Part 1 and 2 of that blog series just for you:

Hostwinds HTML Hype

Hostwinds HTML Hype Part 2: Tag Talk

Let's keep the talk going by discussing various components of HTML's complimentary computer language, CSS.

Speaking of HTML and more shameless plugs, Hostwinds also recently debuted our blog series to make a blogging website. This is applicable in terms of HTML Hype because we used HTML to begin building our website. Here is a link to Parts 1 and 2 of that blog series:

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

This blog post is dedicated to learning the CSS stuff to continue building our blogging website with CSS in Part 3 of that blog series. Before we add our CSS, let's make sure we understand many CSS syntax/terms. We'll use this as a cheat sheet when we add CSS to our blogging website.

Cool CSS

CSS stands for Cascading Style Sheet because it is the code that styles or designs one's website. You can change the size, alignment, color, etc., of different things you've got on your website using CSS.

Here is how we'll set up the CSS document we make for our blogging website:

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

Selectors

Allow me to elaborate a bit. The items in this document such as the "h3," the "body," the "p," etc. are called selectors. The ".ReadNext" and "#ThankYou" selectors refer to the "ReadNext" class and the "ThankYou" ID we created in Part 2 of our website building blog series. The period in front of "ReadNext" tells the browser that this selector is a class. The hashtag (#) in front of the "ThankYou" selector tells the browser that this selector is an ID. Between the curly brackets goes the directions explaining how you would like to modify each selector. We'll go ahead and fill all these in and I will then I'll explain what they mean:

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;}

Okay, here it goes! Well, first of all, it is essential to note that the items in this document, such as "background-image," "font," "text-transform," etc., are known as properties. Okay, NOW here it goes!

Properties

B**kground-image:** This is the property you would type within your selector's squiggly brackets if you want the background of your element to be an image.

Sidenote:

The correct format by which you tell the browser to grab an image is the following (see the portion of Part 1 of this blog series for more information regarding file paths):

URL(./FolderName/FileName.png)

In this example, "FileName.png" is the actual file name. The "./FolderName/" preceding the file name tells the browser to go into the same folder that our index.html is in. Then, go into another folder entitled "FolderName" to find the file when it is there. This is called a relative file path.

Background-color: This is the property you would type within your selector's squiggly brackets if you want the background of your element to be a color. Notice that instead of seeing a color name for this property's value, you see a series of numbers and letters following a hashtag. You can easily Google the multitude of codes representing different colors.

Notice the following line of code between the "div" selector's squiggly brackets:

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

This is not referring to an image. This is how you tell the browser that you would like the background to be a color gradient that goes from left to right. The colors you would like to use for your gradient go in order within the parentheses. You can use as many colors as you would like within your color gradient.

Background-size: This is the property you would use to denote how you want the background of your selector to appear on the screen. For example, if you want the image to cover the whole area, use the "cover" property value. Moreover, if you would like the entire image to be shown within the region, use the "contain" property value.

Color: This denotes the font color. Again, notice that instead of seeing a color name for this property's value, you see a series of numbers and letters following a hashtag.

Text-transform: Use this property if you want all the text within the opening and closing tags to be uppercase, lowercase, etc.

Font: The font property handles a lot. For example, between our h4 selector's squiggly brackets, the font property has a value of:

33px 'Cinzel' , serif;

The first part denotes the size of the text. The 'Cinzel' part denotes the font-family name. The "serif" part indicates the generic family that the font-family is a member of.

Text-align: This tells the browser whether you want the text to align toward the left, right, or center. In our case, we want our text to be right in the center of the web pages.

Margin-left: This property tells the browser how far away from the left-hand side of the web page or the element to the selector left you to want such selector to reside.

Margin-right: This property tells the browser how far away from the right-hand side of the web page or the element to the right of the selector you want such selector to reside.

Margin-top: This property tells the browser how far away from the top of the web page or the element on top of the selector you want such selector to reside.

Margin-bottom: This property tells the browser how far away from the bottom of the web page or the element below the selector you want such selector to reside.

If you want the selector to be centered right in the middle of the page, use the following properties and property values:

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

Width: This property is pretty straightforward. It denotes the width you want your element to be.

Display: This one is a little more complex, but it essentially denotes the way your element is displayed on the page. In our example, we have:

display: block;

This means we want the element to fill the entire width of the area.

Border: This property tells the browser that we want a border around the element, whether we want it to be solid, dotted, doubled, etc., the size of the border, and the color of the border, respectively.

Border radius: This property denotes how round we want the border's corners to be.

Opacity: This property tells the browser whether we want the element to be opaque, transparent, or somewhere in between. One means completely opaque, and 0 means completely transparent.

Padding: This denotes the amount of space you want between your element and the area around it. For example, on the buttons we created on our homepage, we want a little space between the words "Read Blog Post" and the border of the buttons. Thus, we gave the buttons 20px of padding on the top and bottom of the words and 30px of padding to the right and left.

Letter-spacing: This tells the browser how much spacing you'd like between each letter of the words you display on your website.

Float: This property tells the browser you want your element to go alongside another element rather than below it by default.

Commenting in CSS

Here is how we add comments to our CSS code:

The syntax for CSS commenting is to type the comments between /* and */.

For example, in our CSS document, I might comment the following to organize my code:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 /* body of the web page */body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} /* navigation bars for all web pages except homepage and blog post 1 web page */nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} /* blog name heading */h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} /* blog post headings */h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} /* images*/img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} /* paragraphs */p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} /* buttons */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;} /* buttons upon hover */button:hover { background-color: #00a1f5; opacity: .5;} /* footer */footer {font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} /*

tag for entire blog post 1 section in index.html page */div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);} /* "ReadNext" class for blog post 2 & 3 web pages */.ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;} /* "ThankYou" ID for thank you paragraph in footer of the homepage only */#ThankYou { text-transform: uppercase; color: #0b053f;}

There are a lot more where those CSS properties come from. However, for now, we'll move on to more coding already! I'm. So. Excited.

Concluding CSS

I know I just mentioned this, but that is truly just the tip of the iceberg as far as CSS goes. I highly recommend checking out certain quickly "google-able" websites containing all the components and pieces of CSS (and HTML, for that matter). The Hostwinds Team is thrilled to begin adding some custom beauty to our blogging website, and we look forward to talking with you when we debut Part 3 of the "Hostwinds Tutorials: How to Build a Blogging Website Without a Site Building Application" blog series soon. (Dad joke to send us off:) "C…SS" You Then!!!

Written by Hostwinds Team  /  December 27, 2018

Need help? Chat now!