Customize Your Blog: CSS For Beginners, Pt. 1
By: Guest Post

A Beginners Guide to CSS
Follow on Bloglovin
Pinterest

 

By Stephanie Brown of FAIIINT

A Beginners Guide to CSS
CSS Beginners

CSS is something a lot of people ask my advice on, assuming it is too technical or complex for them to learn themselves, this is absolutely not true. It’s nowhere near as scary as it seems and everyone is capable of learning the basics and using it to customize their blogs. It’s not something that will take months or years to learn, with all the excellent resources available right at your fingertips you can teach yourself the very basics in a few hours.

Layout and design play such a huge role in how your blog is seen and perceived by others, whether they be other bloggers, potential collaborators or future employers, that you should want it to look the best it possibly can. First impressions count and appearance can often make or break future relationships, especially with clients. Not everyone has spare cash lying around to hire a web designer or to buy custom templates, but everyone can, with a little spare time, learn how to do it themselves. So now there is no excuse for a poor or unoriginal design!

I’ve tried to make this as simple as possible, so that even total beginners can alter their themes with ease. Follow the instructions on how to get to the CSS editor for your blogging platform below, then simply copy and paste my CSS code examples into the box and alter the red text to suit your needs. You can go to the bottom to copy the entire code in full, or pick out only the customizations you need from the sections below.

Where

WORDPRESS [SELF HOSTED]
There will be a separate full tutorial next week, stay tuned!

WORDPRESS
To use custom CSS on a free WordPress blog, you need to have purchased the ‘Custom Design’ feature. You can do this by clicking the ‘Store’ button on your dashboard menu and following the instructions. The last time I checked, this was $30 for an entire year (or $0.08 per day) and would require renewing each year. I personally think it’s a great price and a much cheaper option than self hosting!

Log into dashboard → Appearance → Custom Design → Click ‘Edit’ button in the ‘Custom CSS’ box → Scroll to the bottom and make sure ‘Add my CSS to (Your Theme Name) CSS stylesheet’ is selected under ‘CSS Settings’

Note: The first time you customize your CSS, the area at the top for writing your code should be totally blank, if it’s not, completely delete everything inside so that it is.

BLOGGER
For the purposes of this tutorial, the majority of customizations you will be able to make using the Blogger editor and will not need to add the CSS yourself. Go through the various categories listed and make any alterations using the editor. Do not add CSS for any customizations you have already made using the editor, however, if there is something listed below that the editor cannot do simply click the ‘add CSS’ option and add only that customization/s.

Log in to dashboard → Layout → Click ‘Template Designer’ link → Advanced → Add CSS

Tips

• I suggest that you set up a second ‘tester’ blog for which you can try out your customizations first, this way, once you’re happy with it you can just copy & paste the CSS into your real blog, knowing it’s perfect. This saves your readers seeing the unfinished version, and also it’s reassurance for those that are a little scared to try it out, if you mess up the test blog, no big deal!

• All code highlighted in red can be altered to your own preferences. The descriptions also contain red words, these are your options when altering the code.

• Spellings are always North American – so ‘color’ not ‘colour’ – being British this tripped me up no end of times when I was starting out! If something’s not working, check the spelling!

Background

BACKGROUND COLOR
One of the simplest and most requested things I get asked is how to change background colour. It’s a very simple alteration that can make a big impact on your layout and design, however be wise with it – pale colours tend to work best and are the most user friendly. Also note, depending on your theme this may or may not change the colour of the background on your posts and sidebars.

body {
background: #FCF9F8;
}

 

The highlighted hex number can be altered to any colour you wish. See the resources section at the end of the post for a colour picker that will give you the corresponding code for any colour you select. The colour picker tool in Photoshop (or similar) will also give you the relevant code, look for the ‘#’ box.

BACKGROUND IMAGE
To add a background image, first you need to upload an image to your usual image folder and then copy the URL down. Replace my URL with the correct one for your image.

I personally suggest an image which is small and can be tiled to repeat across the entire background.

 

body {
background:#FCF9F8 url(‘http://www.yourdomain.com/yourbgimage.png‘) repeat right top;
}

 

I’ve also included a background colour here, if your background image takes a while to load, or is broken, the colour will be displayed until the image loads over the top, so make this a similar colour to your image.

The repeat right top command tells the image to tile from the top right corner. This can be altered, but I would suggest leaving it as it is. Possibilities are repeat right top and no-repeat.

Font

Font customization is another simple, but very effective way to add personality and style to your blog. Again, keep in mind your background colour, dark fonts work best on light backgrounds and vice versa, users need to be able to read your blog easily, don’t make it hard for them!

 

body {
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
color:#1a1a1a;
text-align:left;
}
Special note regarding WordPress: If the above does not change all of your text to the colour you want, use the below instead. This varies with themes, so try the above first and only use this alternative if it doesn’t work for your theme.

* {
font-family:Helvetica, Arial, sans-serif !important;
font-size:12px;
color:#1a1a1a !important;
text-align:left;
}

 

FONT-FAMILY
This is the font itself, such as Arial, Times New Roman, or Verdana. Unfortunately, you cannot just use any font you like. The font must be one that all computers have installed as standard, otherwise it will not be displayed and a standard font will be used instead. This can really affect your overall design, so it is always best to use one of the fonts which are considered ‘web safe’. Click here  for a list and examples of web safe fonts and their families.

FONT-SIZE
This can be any number you want, the smaller the number the smaller the text and vice versa. 12px is the most common size, as it’s easily readable, but clearly smaller than headings and titles. If you do decide to change this, I strongly suggest choosing either 10px, 12px, or 14px.

COLOR
The same as for background, this can be changed to any hex colour code you like. Always make sure to have included the # at the beginning.

TEXT-ALIGN
This tells the text which side to align against, left is the default, but it can also be changed to right, center or justify.

Links

When styling links, a:link, a:visted and a:active should all be styled exactly the same for a clean, uniform look. I suggest customizing a:link and then copy and pasting the styling between the curly brackets into the other ones to be sure. Those 3 are all how the link appears on the page (when it’s unvisited, when it’s visited & when it’s selected), a:hover is how the link looks when the user hovers their mouse over it. It’s common to style this differently to the others, whether you want it to change colour, underline, become bold or it can be styled exactly the same as the others for no change.

 

a:link {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}a:visited {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}a:hover {
color: #B7ABA3;
text-decoration:underline;
font-weight:bold;
}a:active {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}
Special note regarding WordPress: If you used the alternative second option above for text colour, please follow all colours for links with !important- Otherwise the colour for the text will override your chosen colour!

For example – color:#1A1A1A !important;

 

COLOR
Again, choose any hex code you like to alter the colour. I think it’s nice to have the a:active colour different to the rest.

TEXT-DECORATION
This is used to add or remove decoration, most commonly to remove the underline from links. The default is underline, but setting it to none will remove the underline from your links. If doing this, I suggest making the link a different colour to the text, or making it bold, so that it stands out as a link and doesn’t just appear as ordinary text, which is confusing for visitors.

You can also use underline just on a:hover, with the rest set to none, this will make the line appear only when the users mouse hovers over it. Slightly more interesting is overline, this is the same as underline, but the line goes over the text instead of under it, line-through puts a line through the middle of text.

FONT-WEIGHT
This can work nicely if you don’t want your links to be underlined, making them bold works equally well for showing the user that it’s a clickable link. The default is normal, change it to bold for bold text , bolder for extra bold or lighter for skinnier text.

All Together Now

All together, this would look like:

 

body {
background:#FCF9F8 url(‘http://www.yourdomain.com/yourbgimage.png‘) repeat right top;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
color:#1a1a1a;
text-align:left;
}a:link {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}a:visited {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}a:hover {
color: #B7ABA3;
text-decoration:underline;
font-weight:bold;
}a:active {
color:#1A1A1A;
text-decoration:none;
font-weight:bold;
}
Or alternatively for certain WordPress themes:

body {
background:#FCF9F8 url(‘http://www.yourdomain.com/yourbgimage.png‘) repeat right top;
}* {
font-family:Helvetica, Arial, sans-serif !important;
font-size:12px;
color:#1a1a1a !important;
text-align:left;
}a:link {
color:#1A1A1A !important;
text-decoration:none;
font-weight:bold;
}a:visited {
color:#1A1A1A !important;
text-decoration:none;
font-weight:bold;
}a:hover {
color: #B7ABA3 !important;
text-decoration:underline;
font-weight:bold;
}

a:active {
color:#1A1A1A !important;
text-decoration:none;
font-weight:bold;
}

 

References

 

http://www.w3schools.com/css/default.asp – for CSS help and tutorials

http://www.colorpicker.com/ – Hex colour picker

Comments

  1. Regan says:

    This is really useful for someone with basic HTML knowledge!
    However if you’re like I was a few weeks ago, and have no clue what HTML or CSS even mean, I would recommend checking out codeacademy.com. I found this website and it has been so helpful! They have lots of tutorials in which they walk you through step by step.. a life-saver!

  2. if someone needs help with HTML I’ll be happy to help!

  3. Emma says:

    This is such a useful article and I’m a huge fan of IFB but why is typepad always overlooked?

  4. HautePinkPretty says:

    I love this! Looking forward to the WordPress self hosted version. I just switched over and ALMOST changed the CSS around until.. oh, well, you know, I realized I had no idea what I was doing ;P lol

    Xox

  5. AMAZING!! All the little things I’ve never tackled thinking I wasn’t able to do it and now they’re done! THANK YOU!!

  6. Casa e Cose says:

    OOOOOOOOOOOOOOOOO THIS IS JUST SO GREAT! yOU ARE AMAZING! THANK YOU – THIS WILL HELP ME FROM BUGGING MY HUSBAND ALL THE TIME :)

  7. travis says:

    nice post i always wanted too learn how too change my blog appearance

  8. Heims verden says:

    Thank you so much for this post.

    Do you know if it is possible to change the fonts in all posts in a blog? I want to change the size and font and I don´t really want to open 500 posts and do it on each one….

    I would truly appreciate the information if you know if it is possible:-)

  9. Romande says:

    So useful and hard to find!! Thank you so much!

  10. amber mason says:

    i’m so stuck, i cant even find the option to add css, infact i can not see anything to do with css. please help! im on bloodspot .

  11. techboy says:

    there are some unwanted things- such as the contact box, ads, etc. in my template x10 masonry transperant…can i remove these using css??

  12. Chase says:

    Nice post. I think it’s easier than it looks to customize your blog. How do find the names of the items, tables, div’s, etc.. that I want to change?

  13. Henri says:

    Nice article. I guess it’d be worth mentioning the FireBug extension which makes it very easy to experiment with CSS. And since it can autocomplete what you write you do not need to know all properties and their values. When it looks the way you want, you can just copy the CSS changes to your style file.

  14. Carolina says:

    Great post! I am just starting up with a small blog for mothers and kids. Will write about health and good night stories (as I am a writer) and this tips are very useful. Not every time I can afford to hire someone to do it all, so it is good to learn css at least)) Thank you!

  15. Ivy says:

    Thank you for sharing this article. I am a beginner coder. I always rely on css generators like http://www.w3schools.com/css/css_boxmodel.asp, http://www.generatecss.com/css3/box-resize/ Forget about the generators. lols

Trackbacks for this post

  1. Customize Your Blog! CSS For BEGINNERS Part 2 | Independent Fashion Bloggers
  2. Customize Your Blog! CSS For BEGINNERS Part 2 | | onewordpressonewordpress

What do you think?