5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand Out

Changing Background Color

To change the background of your website, you first have to get familiar with the styling of the theme. Is the background color simply under body, or is it built into its own frame?

Some themes are not as intuitive as others, so if the one you are currently using is intelligible, you might want to change to a different theme before you start editing. (The one I'm using in the example is the free Catchbox Theme and a very common starting theme is twentyeleven.)

With most non full-width themes, the background color is simply under body. And overruling it is quite simple.

1 2 3

body {   background-color: #477C67; }

You can use the W3Schools HTML color picker to get your colors, or install a Chrome extension, aFirefox plugin, or a WordPress plugin to speed things along when you're editing on the go.

I chose a deep teal background color: #477C67:

If this code snippet does not change the background color of your blog, it is likely that it utilizes stylized empty containers to fill the background.

If you want to set an image as the background, first upload the picture. Make sure it is high resolution otherwise it won't look very good.  Then copy the URL. You only need the part after the blog, so if you uploaded the file via WordPress, then the path should look something like this: "wp-content/uploads/2014/01/IMAGE.jpg"

1 2 3 4 5 6 7

body {   background: url(location/img.jpg) no-repeat center center fixed;   -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover; }

The finished result should look something like this:

The cool thing is that the picture remains static even when you scroll down through the page. For great photos that you are free to use without giving credit (although it is probably welcome), you can visit unsplash.com.

Improving Readability

Sometimes you stumble across a great theme. It looks awesome, but there's just one problem. The font is small and grey so it's almost unreadable. But don't worry, you can change this in one simple step.

1 2 3 4

body {   font-size: 16px;   color:#000 }

Add this short snippet of code to the custom CSS, and it will fix the problem. (Put it after the code about the background if you changed yours.)

A good size for the standard font of your website or blog is 14-16 pixels. Avoid the 12 pixels that were mandatory on, say, school reports, as your main goal isn't to save paper. You want your content to breathe, and to make it more readable. If you feel like the standard font of your theme looks  unprofessional, you can add this line:

1 2 3

body {   font-family: Arial, Helvetica, sans-serif; }

Making the whole thing look like this:

1 2 3 4 5

body {   font-family: Arial, Helvetica, sans-serif;   font-size: 16px;   color:#000 }

Changing the Look of Links

If you want to change the color of the links, you can do this quite easily. All you have to do is to use the parameter for links in css "a" and then change the color to what you want.

1 2 3

a {     color: #BA2323; }

I decided to go for a red (#BA2323) and it ended up looking like this.

There are a couple of more options for how you want to style your links. For example, you can decide how you want the link to react when someone hovers over it. The most common is underline, but you could make it change its primary color or background color.

1 2 3 4

a:hover {   color: #222;   background-color:#BA2323; }

For example, changing the text into gray, and changing the background color into the usual text color. Then you can change the style of visited links. Most commonly there's a change of color, but you can use any of the previous changes as well.

1 2 3

a:visited {   color: #004A4A; }

Changing the Look of Headlines

The headline of a post is typically in an h1 element, and the sub-headline used within posts is typically in an h2 element (although this is something you choose yourself when creating a post). But if your theme specifically styles the color of post titles, changing the style of h1 tags won't help. So you have to find out whether or not the theme you use does this.

You can check whether or not your theme uses a specific style for post titles by opening the page source and searching (press Control-F) for "post title".  If the results show "<h1 style="some-style"></h1>" then you don't style h1, you have to provide styling in the "some-style" attribute.

Alternatively, if you're going to be making several changes, you could install a browser extension that shows you the CSS style of the selected text. It will typically be "entry-title" as that is the standard for WordPress development.

To do this, go to the Editor under the Appearance menu. and search for "some-style". As I mentioned, that style is usually "entry-title". Then see which lines you need to override. Sometimes, there is a style specifically for the linked title so you might have to change that as well. This shows up as "h1 a {" or "some-style a {".

To edit the color and size of my headline, I would have to add these lines:

1 2 3 4 5 6 7 8

.entry-title {     color: #WANTEDCOLOR;     font-size: WANTEDSIZEpx; }   .entry-title a {     color: #WANTEDCOLOR; }

I chose a light blue (#5CBDBD).

Please note that I'm using quite glaring colors to make it obvious what changes I've made to the theme. You probably want to be a little more subtle and find a better color scheme.

If you want to edit the style of headlines that you use in your content, then instead of .some-style, you open with h1{} or h2{} or h3{}.

Rounding and Flattening Corners

If there are any pesky corners that you feel that should be rounded, or some that have been rounded off too much, here's a quick fix.

Locate the container in question's style in the original stylesheet. (Open the original stylesheet inside the WordPress dashboard, or in a text file and then search for some text that is unique to the container you want to edit. Or you can use a plugin.) Widgets are usually under .widget, and the post container is usually under content.

The code to use here is:

1 2	-moz-border-radius: SIZEpx; border-radius: SIZEpx;

If you want to override a current curved corner and turn it flat, simply set the size to 0. If you want to see how curves look for a particular container, start out with 5 and see how that looks.

Generally, you could search the page if you want to edit the corners of the entire page. You can generally find the content container by searching for .hentry if you want to edit the corners of the content. You might have to edit the header and the footer separately. Or find the widget by searching for widget.

Changing the Color Scheme of Widgets

One of the easiest ways to set up a cool color scheme for your widgets is to have a different background color for the widget itself that the widget title. You do this by identifying the style class of the widget title. (If you don't remember how, copy the title of a widget and search for it in the page source. In the h1caption around the title, the class is revealed.)

It tends to be simply widget-title. And if you want to change the background color of the widget itself, find the style for the widget, which is usually under .widget.  Then you pick a color and add this code to your custom css or child theme:

1 2 3 4 5 6

.widget {   background: #COLOR; } .widget-title {   background-color: #COLOR; }

I chose orange and teal for no particular reason. As you can see, if there is no title, it doesn't include the title part of the color scheme, so if you want consistency you should add titles to all of your widgets.