Hostwinds CSS Chat

CSS Chat

Have you been hearing about all the Hostwinds HTML Hype? What’s that? It’s glaringly obvious 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 the 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 now discussing various components of HTML’s complimentary computer language, CSS.

Speaking of HTML and more shameless plugs, Hostwinds also recently debuted our blog series in which we make a blogging website. This is applicable in terms of the 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 so we can 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 a bunch of the 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:

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:

Okay, here it goes! Well, first of all, it is important 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

background-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 and then, when it is there, to go into another folder entitled “FolderName” in order to find the file. 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:

This is not actually referring to an image. This is the way 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 area, 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 denotes the generic-family that the font-family of which the font-family is a member.

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 left of the selector you 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:

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. 1 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 of the words.

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:

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 easily “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!!!

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.