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 Pages
Before 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.
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 Color
The 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.
- 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.
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.
Above 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 Connection
If 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
