Changing the background color or picture in your blog account is actually a simple fix in your CSS code. It is important to note that you can edit the color of you blog or
WCMS (web content management system) without going into the manual CSS Code of your site. However, the purpose of this post is not only to learn how to change the background color of you blog but to also to learn how to change CSS code on your blog. Doing this lesson will help you learn the basics of CSS and then you can try some more advanced CSS coding like how to change the width of your blog, create a custom banner, and change images. So take a deep breath you are about to learn the basics of CSS or Cascading Style Sheets.
What is CSS?CSS dictates the color scheme, navigation and overall look and feel of your blog.
If you are a beginner to CSS you might want to review this previous post:
What are CSS style sheets? This way you get a better understanding of what you are about to learn.
Understanding Color and Web PagesBefore I get started on CSS code it is important to learn a little about
how color works on the computer and webpages.
Color on webpages can be specified by any of the following formats. Each of these can tell your webpage what color to display when your page is viewed.
- name - a color name, like "red"
- RGB - an RGB value, like "rgb(255,0,0)"
- HEX - a HEX value, like "#ff0000"
- Colors are displayed combining RED, GREEN, and BLUE light.
Now that you understand how color works on your computer
you should also take a look at a HEX color chart so you can pick the new color's you want to use on your blog.Before You Get Started!Before you start changing the CSS code of your blog, I strongly suggest you
save or copy your original CSS code into a text editor. This way if you make a mistake you can always restore the original CSS code of your blog by copying it back into your site's editor. I like to use NotePad for Windows or TextEdit on my Macintosh to back up CSS code from my blog. Both programs allow you to simply copy and paste the code from the editor to your blog.
Steps To Changing Your CSS Background ColorThe following are the steps you need to change the background color of your blog.
1. Find the HTML editor in your blog
- Blogger you can locate it in the Layout Tab> Edit HTML
- Word Press you will need to go to Appearance> Edit CSS. You should also be aware that some Word Press blogs' templates do not allow you to change the CSS code unless you purchase that feature.
2. Next locate the area you want to change your background color on. It could be a header, side bar, main background etc.
- The easiest way to navigate through your code to find the area you are looking for is to use Edit>Find in your browser.
- I like to use the shortcut CTRL F to find and then CTRL G to continue to find the next instance of background
- You will have to experiment with your CSS code to learn what the creator of your blog has called each of your areas common names are: sidebar, main, footer, body. Each of these indicates where the CSS code is being applied to.
3. Once you find the word background and the area you want to change the color on you type the color you wish it to display. For example:
body {background-color: black}. You will change the word black to the word red or use the
HEX color number you want displayed.
More CSS Color Examples!
Below are
some more examples and explanations of what you might find. Understanding these will help you locate the area you want to change and teach you the basics of CSS. Remember you have made a backup of your CSS code so if you make a mistake you can just copy and paste the code back into your site. This means you can play and learn without having to worry.
- body {background-color: black}
- This CSS code tells the blog that the Body (the main area of your page where you post your information) is black.
- footer {background: #f3f3f3;}
- this CSS code tells the blog to post the color #f3f3f3 to the footer area.
- the ; semicolon indicates that this line of code in my CSS is completed
- { } the curly brackets open & close the properties.
- You can have multiple lines of code for the footer or other areas of your blog they will be seperated by the ;
- You will know you are at the end of the footer code when you see a "}"
- sidebar { background-color: #f3f3f3; background-image:url('paper.gif'); }
- This CSS code tells the blog to post the background color #f3f3f3 into the sidebar (this number is a color in HEX)
- The sidebar in this example also has a graphic in the background called 'paper.gif'
More Color Please!The interesting thing about the background color code for CSS is that you can add color to just about everything. Here are some more examples.
- h1 {background-color:#6495ed}
- This adds color to anything that has the h1 tag on it.
- h1 stand for header and it is the biggest header you can add. h3 is smaller and h5 is even smaller.
- p {background-color:#e0ffff}
-This adds color to just a paragraph (p).
- div {background-color:#b0c4de}
-This adds color to an area (div) or a section on your web page.
CSS For Background PicturesAbove I talked about making changes to the color of your background but you can also change or add pictures using the CSS background tag. These are some examples of the code you would use to change pictures in CSS.
- background-image: Sets the background image for an element
Example: body { background-image:url('paper.gif'); }
- background- attachment: Sets whether a background image is fixed or scrolls with the rest of the page
Example (note all this is the code for the body tag):
body{ background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed; }
- background-position: Sets the starting position of a background image
Example (note all this is the code for the body tag):
body{background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; }
- background-repeat: Sets how a background image will be repeated
Example:
body {background-image:url('paper.gif');
background-repeat:repeat-y;}
Did It Work?I hope you have fun trying to change some of your background colors or images on your blog.
Email me if you have any problems or questions. It can be a little overwhelming when you first start CSS but if you stick to it the code will start to make sense.
Classroom ConnectionIf you are teaching this to students these examples might be a great way to introduce CSS to them. You could also use blogs to help students understand how learning CSS might help them in the future with
WCMS.
Enjoy!
Alex
Avatar? District 9? Those Hollywood blockbusters don’t even compare. The Fantastic Digital Video Toolkit session will showcase a variety of free online video tools, tips and resources that will unleash your students’ inner director and might just land them that first Oscar.
