What You Need To Know About CSS - The Basic

If you're new here, you may want to subscribe to my RSS feed or via Email. Thanks for visiting!

Your blog uses theme and template for layout that depends mostly on the presentation styles within CSS. The thing is you may need to style your theme CSS a little bit more to personalize your blog. Like changing the size of your blog title or the color of your link for instance. Yet many don’t have the skills to go beyond the Admin dashboard.

What Is CSS?

CSS is the acronym for Cascading Style Sheet. It is basically a Style Sheet that formats the visual appearance your blog. Styles are usually saved in an external .css file. Hence, it enables you to alter and modify the appearance and layout of your pages within your blog, just by editing one single CSS element. In short, CSS gives you the power to easily control visual style of your blog.

Where to find your CSS file?

Your theme default CSS file can be found within your WordPress built-in Theme Editor. Go to Design > Theme Editor and on the right side somewhere below, you will see a style.css. That’s your Style Sheet.

Now here comes the interesting part. If you do not allow the permission to alter (write) the file, you will not be able to edit and save any changes to your CSS. Therefore all files within wp-content/themes must be writable. So here’s How to Change Your File Permissions.

Once you allow permission to CSS file, here’s a couple of pointers before you begin editing your CSS file,

1. It is advisable to make a copy of the last working style sheet as a backup.
2. If you are the least bit unsure, make only one change at a time.
3. If you don’t see the change after altering the CSS, refresh your page.

Let’s begin to style your blog a little bit, shall we?

For the sake simplicity, in this tutorial let’s change the color of your site’s hyperlink. The style to it is usually defined by the CSS element below

a:link {
	color : #427D79;
	}

Try changing it to any color of your choice and save your changes by clicking Update File. If you are unsure of what color code to use, I suggest Web-Color Kit for a guide.

Since you are already at it, let's change its color when you hover it.

a:hover {
	color : #000000;
	}

You'll see that by editing one CSS element to hyperlink, the change is reflected sitewide across your blog. That's basic CSS. It's fun, isn't it?

With CSS the possibility to change the presentation and layout of your blog is endless. It just takes a little bit of common sense and creativity. In fact, once you get past the initial fear to do CSS edit, I'm sure you will crave for more. Just don't forget to do it one at a time and please do backup, just in case you mess it up.

I hope you will find this simple tutorial useful and improve your understanding of CSS a little more. Stay updated to this blog as I will be presenting the Little Known Way to CSS Styling Your Blog soon. Till me meet again.