How to Rearrange or change HTML CSS code

We desperately want to rearrange or change the background or performance of our template to make it cool or to make it better from our eyes and to our visitors. I was exploring to change my webpage background and changing a little bit like widen the space background, changing the color and transferring my sidebar. Here is the following I did:
I want to switch the position of my sidebar from left to right to make it ease and better, so if you see this code in your CSS section
#sidebar {
Width: 250px;
Float: left;
Padding: 8px 0;
Margin: 0;
Word-wrap: break-word; /* fix for long text breaking sidebar float in IE */overflow: hidden; /* fix for long non-text content breaking IE sidebar float */}
Just replace the left with right, like float: right;
Then I want to change my existing background since my background is a form of image so this is the code you need to locate on your CSS
#main-bot {
Width: 1150px;
Height: 50px;
Background: #FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg) no-repeat top left;
Margin: 0;
Padding: 0;
Display: block ;}
I remove the url of the image and I replace it with color background like background: #CCCCCC or if your background is not a form of image, you can do the same.
Finally I want to widen my background space to make it not too narrow, so I need to find the #header-wrapper, #outer-wrapper, #main-wrapper and #sidebar-wrapper, you just simply change the width size of it, like width:660px; to width:700px. That was I've learned.
.