Guide to CSS for Bloggers

Friday, April 19, 2019

Hello
Hope you are all doing well. I put together another guide that I think would be helpful for anyone who's in the creative field that has their own blog or website. I guess this guide would be the second installment for my previous post on HTML. If you guys haven't seen that post yet, I would recommend looking at that first because a lot of the material covered in this post build off on HTML. Before we get started on the actual coding part, I wanted to give a little background on CSS. If you ever wondered how some websites have nice looking layouts with colors and fancy fonts, well let me tell you, the magic lies within CSS which stands for cascading style sheets. HTML and CSS almost always go together. HTML gives the basic structure of the website such as the text, and CSS is what brings the website to life and gives is the style you want. It allows you to change layouts, colors,  and fonts from your HTML file. I mean technically, you can add style elements from within the HTML file, but having it in another file known as CSS simplifies your workflow, and makes it more organized and clean. Alright, now that we know the basics of CSS, we can get started on coding it. :)

Basic Syntax
To understand CSS, we must first learn the structure in which they are written and the correct syntax that is used when writing CSS. Each CSS rule uses a selector which basically tells us which part of the HTML code we want to edit. For example, if you wanted to change the way the header looks on your website, you would write something like this:

This is what the basic syntax of CSS code should look like. The selector is the header, which is the part you want to change, and in between the brackets is the different style elements that you want to implement. Unlike HTML, you have to put a ";" at the end of each line, unless it's a bracket. Notice how I added the semicolons at the end of each element. Now that we have the basics of syntax down, we can move onto the different levels of selectors. This may sound confusing at first, but I will  do my best walk you through the basics step by step. Trust me, once you understand the concept, writing CSS will be a breeze! :)

Selectors
In CSS, there are 3 levels of selectors. Selectors are basically elements in the HTML file that you want to change. The 3 levels are type, class, and id. Type being the 1st level and id being the 3rd level. The more specific you are with the selectors, the CSS element that you are trying to implement will go to that selector. For example, if you wanted to change the color of the text in a <p> elements which is a type selector, every element that is <p> will change to that color, but if you added a class element which is more specific, the color would only change for that <p> element. I will explain in more detail.

Type
A type selector is the 1st level, and is the least specific. If you wanted to target every element that is <p>, then you would be using the type selector. To call a selector in CSS, all you would need to do is write the type along with brackets and write the style elements inside of the brackets. Any element in an HTML file can be a type selector. Here is an example of using the paragraph element in HTML as a selector in CSS:

Class
A class selector is the 2nd level and is more specific than a type selector. For instance, if you have a certain paragraph element in your website that you want to change, but don't want to affect all the other paragraph elements, then you would use a class to define it. To give a class name to the elements, you would do it in the HTML file. Locate the paragraph element that you want to change, and write class = "input_name". The class name could be anything you want. Here is what it would look like in the HTML file:
<p class = "red_text">The paragraph text goes here</p>
In the CSS file, all class selectors use a period before the class name. It would look something like this:


ID
The id selector is the 3rd level and most specific selector. If you had a class named red_text and an id also named red_text, the styling element would go to the id selector because it is more specific. ID is works the same way as a class selector, except that it is more specific and to declare it, you would use the "#" symbol. In HTML, you would name the id like this:
<p id = "red_text">Paragraph text goes here</p>
In the CSS file, it would look like this:


Styling Text
Now that we know how to structure CSS properly, we can go onto learning the different style elements that can be used. Text is the most important part in any blog/website, so I want to start with learning how to style them so that you can get the desired font, color, and etc. for your website.
Font Family:
Let's start with changing the font for your text. If you want a font like times new roman or Helvetica, then using the font-family property in CSS is how you can get any font you want. You can also use any desired font that you downloaded too. In CSS, this would look like:
font-family: Helvetica;
Font Color:
We all like a little color on our website, so let's get into changing your font's color. You can use any color you desire. The basic colors you can use are red, green, blue, yellow, and etc. But if you want something more specific, like something that you picked from a color wheel, the you can simply just use the HEX code. My favorite place for a color picker is HTML Color Codes. Here's an example:
color: red;
or 
color: #F08080
Font Size:
Next is changing the font size. If you want to change the size of your title or a certain or the subheadings, then that is where the font-size property comes in. If you want to be more flexible with the headings than the standard h1-h6 sizes, then using font-size in CSS is perfect. CSS typically measures the size by using pixels. Here is an example:
font-size: 25px;

I hope this post was helpful, and any feedback would be much appreciated. I will definitely go over more advanced topics of CSS on my next guide. Thanks for stopping by and I will be back soon with another post. Have a wonderful day! :)




2 comments