Changing your Postachio blogs look with CSS
If you ever wanted to change the look of your blogs text, background images, colors, etc this is the post for you.
What is CSS?
CSS stands for cascading style sheets. In the old days of web programming we used to have to define the individual color, style and style attribute of each item on a web page. CSS lets us write style rules for a webpage that get applied to all the pages we are working on.
Where do I edit the CSS?
When you click on the edit site link in the "my sites" section of Postach.io you should see a link on the left hand side that says <>source code. When you click it you'll see the code for the theme you are using. Don't worry if you screw up editing it as there is a reset back to default button at the bottom of the page.
Above is the code for Postach.io's default theme. If you go to line 79 you'll see a tag that says style this is where we'll begin editing our CSS.
Lets change the color of our post's text
The code for this is pretty simple but I'll explain it in detail.
Click here if you want to see what the change looks like on my blog.
style = the opening tag for CSS code, it tells the browser everything after this tag is CSS.
p = paragraph which is the basic text of our blog. Now if you don't code websites regularly I'll show you how to find out what each of the elements on the page are called so you know which ones to change the values for.
color: = defines the color of the element.
red = is the value we chose (btw you can use most common color names instead of hex values like #FF0000 or the RGB decimal value of (255,0,0)
/script = is the closing tag so the web browser knows when the CSS code ends.
Don't worry about the { } characters right now, just know that they go after your element and at the end of your value.
How to find out the names and values of all the elements on a web page using Firefox.

Firefox has a great utility built in called Inspector that shows you how a web page is put together including what each section is called and the values for it.
Step 1
Simply click on each part of the web page and Firefox will tell you what it is called. When I clicked on the post it showed me it was called p.
In the bottom right corner it also showed me what the current color settings were for **p**. Pretty cool huh?
Lets try changing other things
Here is the code to change the background color of your navigation bar from green to black (its highlighted in blue)
Lets use a background image instead of a colour

Background images have to be hosted online somewhere, the easiest way to do it is to put an image into a dropbox folder (the public one) when you right click it you can get the url for it, like the one I got below. It's super easy and free!
This tutorial should have given you a basic idea of how to manipulate CSS. Next week I'll get a bit more advanced but for now I encourage you to play around with it, if you break it just hit the reset to default button and try again.