Over the past couple of years, I have grown to love CSS so much. It’s a very exciting feeling to completely style a website or blog only using codes. It’s like learning another language. A really nerdy (but fun) language. If you’re not too familiar with CSS yet, read on!

CSS? It’s like HTML right?
CSS and HTML are not the same thing, but they are definitely besties. HTML (Hyper-text Markup Language) is what creates the structure of a website while CSS is how we style the website. CSS stands for Cascading Style Sheet. The “cascading” part comes from the fact that you can build on your stylesheet and override old codes. HTML knowledge is valuable but isn’t enough when it comes to really customizing your blog or website. Adding CSS is wonderful because you can just add little codes to a stylesheet without messing up the framework of the site.

How do I add CSS to my blog?
CSS can be added to a blog a couple different ways. On Blogger, the “Add CSS” option is in the Template Designer under the Advanced tab. Many WordPress themes come with a Style Editor that lets you add CSS, or you can install Jetpack which gives you the option to add to the stylesheet. If you’re dealing with plain old HTML files, you have a few options. I recommend having an external style sheet because it keeps your codes more organized. You can learn more about that here.

What are selectors and how do I use them?
A selector refers to the element you are stylizing. Maybe it’s your entire header or just your navigation bar. A selector can be an id, a class, or a whole section of your page. An id always begins with a hashtag and a class begins with a period. The class selector styles many elements within that class while the id selector only styles one main element.

The cheat sheet above shows some properties you can use in your CSS to style your blog or website. Every property must be followed by a colon, a value, a semi-colon, and a closing bracket at the end of the last property. Here’s an example of what my CSS might look like if I were styling my navigation bar:

A few trickier properties defined + examples
Display – how the element is placed on the page (display:block; display:none;)
Float – allows elements to be placed side by side (float:left; float:right;)
Clear – decides where the element on the next row will be in relation to the previous row (clear:both; clear:left;)
Z-index – sets the order in which elements are layered/stacked (z-index:1; z-index:9999;)
Overflow – decides what will happen if the content overflows the element’s box (overflow:hidden; overflow:scroll;)
List-style-type – sets the marker at the front of each list item (list-style-type:none;)

There are so many more CSS properties that you can add to your stylesheet. These are just the ones I happen to use most often. Specific definitions of each CSS property can be found here.

Thank you for letting me be nerdy today. Happy coding!