Log in

Sign in with your email address and password:

No account? Sign up here.
Forgot your password? Reset it here.
Didn't receive account confirmation email? Request a new one.

CSS Customizations Bloggers Should Know About

You might use HTML to create the structure of your website, but it’s CSS (Cascading Style Sheet) that lets you make the bells and whistles. Want to set a color background? Use CSS! Want to set the margins? Use CSS! Want to specify the size of containers in the website? Use CSS! Want to change the font of the title because it’s ugly? Use CSS! Want a fitter body? Use CSS! Just kidding about that last part.

If you want a fitter body, that’s a change you have to make for yourself. For any changes to your website, however, turn to CSS. 

In this post we’ll cover some useful CSS customizations every blogger should know about.

CSS customizations bloggers should know about

How to Change Background Color

In the mood for a new hue? Before you can change the background of your website, first find what element the background color is attached to. With a lot of non-full width themes it’s just the color under the text body, sometimes it’s built into the frame of the website.

To change colors, just open the text command line of that element and make it look like this:

The complete list of available colors and their corresponding codes can be found at W3Schools HTML color picker.

How to Set an Image as the Background

Have you ever seen those websites that have those awesome photos as backgrounds when you open them? Images that stay static even as you scroll up and down the page? Now you can have them for your website.

First, make sure you have rights to that image, just to avoid possible legal issues. Second, it should be a high resolution image; you want it to look the best way it can.

Upload the photo then copy the URL and check for it in the downloads section of your blog hosting site.

Open the command line and make it look like this:

If you want something different you can also arrange different images into a collage using Photoshop, then make that collage the background image. Let your artistic side see the possibilities.

How to Change the Color of Links

You want the useful links on your page to be easily noticeable. Making them bold is one way, but chances are this will not look so good on the spacing of the text. The best thing to do? Make sure it stands out by making its colors brighter than the rest of your text.

Open the CSS file and change it as follows:

Here’s a tip; have the same color for your links throughout the page. You don’t want to confuse readers with too many colors. Also, having too many different-colored links on your page will make it look like a palette.

How to Round and Flatten Corners

It’s the containers that house the text and visual elements of your page; do you want certain containers to have rounded edges? Others sharp?

Locate that container’s style in the stylesheet. You can do this with you WordPress dashboard or with a plugin if you are using another service provider. Containers are usually under .widget and the post container is usually under “content”.

Open the CSS file (or inline CSS) and make it look like this:

A completely flat corner has a size of 0 while noticeable curves start at 5. It takes a little trial and error to get the corner you want.

Hopefully you’ve learnt something new in this post. Feel free to ask questions in the comments below.

Submit a Comment