CSS: A Definitive Guide for Bloggers

Undoubtedly, customizable themes have replaced massive and mind-boggling coding tasks. While this is great, there are also limitations to them.

With inbuilt themes, you’re limited to what is provided. You can’t make additions or changes to make it look like what you imagined it to be. Even if the theme is highly flexible, your blog will end up looking similar to many other sites using the same theme.

Above all, if something goes wrong with the theme, it will affect your blog design as well. But, there’s nothing you can do about it as you can’t leap in and fix the theme.

Having a basic understanding of CSS will let you make those changes to your website that the theme doesn’t allow for. 

What is CSS?

CSS stands for Cascading Style Sheets. It is a web document that allows you to control the appearance of your blog. You can control texts, fonts, colors, layout, size, border styles, margins, and many other design elements of your site. You can also use the CSS to position certain elements on your page.

How Does CSS Work?

Web browsers read the style definition from top to bottom in the style sheet. It means the style you define later in the CSS file will override previously defined styles. You can also create a new CSS file, and add it to your HTML files after the file you are trying to override.

You can do this by adding a small piece of code to your HTML file. Depending on which blog platform you use, this can usually be achieved with a plugin: 

<link rel=”stylesheet” href=”style.css”>

• link tells the HTML document that you’re calling another file to be displayed on the page. 
• rel=”stylesheet” tells the browser that the file we are including is a stylesheet.
• href=“style.css” tells the browser which URL to access to find your CSS file. You can change this to point to the correct location of your file.

CSS Code Example

Suppose you want to make a paragraph stand out with a border. This might be useful to highlight your call to action, an important text section or other elements on your page. Let’s say you want to throw a border around it, and then use the following CSS code:

.border {

border-style: solid;

border-width: 8px;

border-color: brown;

}

Here, the class name is “border”, and it will create a solid 8 pixels wide brown border around any desired paragraph or section on your web page. To apply these properties to your paragraph, declare it like this:

<p class=”border”>Your paragraph here.</p>

This CSS code will work regardless of the size of your paragraph. A single line paragraph will get a border the width of the page, one line high.

You can choose many different border styles using CSS such as dotted, double, or any other you like. You can also add width as thin, medium, or thick. CSS even allows you to define the thickness of each border individually using the following code:

border-width: 6px 10px 4px 12px;

It will result in a top border of 6 pixels, a right border of 10 pixels, a bottom of 4 pixels, and a left border size of 12 pixels.

Keeping CSS Code Tidy

As with all coding, it’s good practice to keep your CSS code well organized. This will make it easier to understand what’s going on when you edit it again later. Grouping common CSS rules together is a good practice here.

It’s also a good idea to remove unused CSS rules using a tool like UnusedCSS to help keep your CSS code tidy. Also, themes often come with many unused CSS rules, which slows down your website.

Benefits of Learning CSS for Bloggers

Learning CSS will allow bloggers to fully customize their sites with little effort. Knowing CSS will save you money as you can tackle the small changes yourself instead of hiring an expensive developer. As you practice, you’ll be able to fix even bigger issues.

If you only need a couple of changes, tackling the CSS yourself is often a lot faster than trying to find a new theme which does what you want, or explaining the changes you want to a developer and going through numerous revisions.

Learning and mastering CSS won’t cost you a fortune. There are stacks of free CSS tutorials, books and other resources you can use to learn CSS and control your blog. If you already have a basic understanding of how a web page works, learning a few quick CSS tricks won’t take you long either.