Friday, September 25, 2009

CSS Code Lesson 1 - Changing Your Blog Background Color

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 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.
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 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.
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 Pictures

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


Thursday, September 24, 2009

What Are CSS Style Sheets?

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used to describe the the look and formatting of a document written on a web page.

Blogs And CSS

CSS is especially handy to know when you want to edit or personalize the template of your blog or WCMS web page. You will notice that my blog has a custom feel to it and the CSS code I have used to do this is not very complicated and luckily a lot of the CSS code is pretty easy to figure out. Most of the CSS code in a blog is named so you can understand what you are looking at.

Getting Started

I recommend that you start with learning what each part of the components and/or syntax used in CSS are. I have included them below for you to review. Once you have reviewed these I recommend you continue learning CSS by learning how to edit background color and background images on your blog or WCMS CSS code. This post from my blog will allow you to learn the basics of how to change color and background images in your blogs CSS code. I will be posting in the next few days how to edit your banner, size of your blog template, and create a menu area on your blog. So stay tuned for more!

CSS Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
  • The Selector
    The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value.
  • The Property & Value
    The property and value are separated by a colon, and surrounded by curly braces.
  • For Example
    The following CSS code changes the color of the body of your page.
    body {color: black}Body is the selector, color is the property and black is the value or in this case the color you will see.

CSS Is A Bit Technical

CSS can be a bit technical but for those of you who are blogging away and creating some amazing blogs on WordPress or Blogger, this might something you might want to experiment with. Once you get the hang of it the code will start to make sense to you.

I love questions!

Be sure to ask away if you run into any problems when editing your CSS code on your blogs or web pages. Plus you can always tweet or email me any questions.

Saturday, September 12, 2009

A Day Of Discovery & Digital Learning


I just attended a wonderful workshop given by Discovery Education and GPB Education at Georgia Public Broadcasting. I thought I would share some video that I captured with my phone and laptop webcam of our day.

It was a fun and very educational day! Plus, the best part of the day was when my colleague, a new teacher, told me that she had been going about her lesson plans all wrong. She was going home to change them and to include digital tools as part of her lessons from now on. HA! I love when I see that light bulb turn on.


Hungry? Then Get Fed With An RSS feed

What is an RSS Feed?

I hope you weren't really hungry because an RSS feed is not something you eat it is an aggregator. Wikipedia explains that an "aggregator...reduce(s) the time and effort needed to regularly check websites for updates, creating a unique information space or "personal newspaper." Once subscribed to a feed, an aggregator is able to check for new content at user-determined intervals and retrieve the update. The content is sometimes described as being "pulled" to the subscriber, as opposed to "pushed" with email or IM. Unlike recipients of some "pushed" information, the aggregator user can easily unsubscribe from a feed."

Examples of Aggregators

An example of an aggregator is the RSS feed on my page. If you subscribe you will need a program that will let you read the feeds. That means it will send you my newest posts directly into your aggregator or reader. When I post something the program will post a link to the new post I have added on my blog on your reader page.

Anyone Know How They Feed the Readers?

To read RSS feeds you need a RSS reader or aggregator. Below I will explain two different kinds of Readers you can use to start receiving feeds.

Using An Online RSS Reader

I use Google's RSS reader on my igoogle.com account. This is a free service to Gmail account users. You can get a Gmail account for free at mail.google.com. If you have already signed up for Gmail all you have to do is go to your igoogle.com page and click on Add Stuff. It will then prompt you to add a gadget. Do a search for the gadget called Google Reader. Be sure it is the one made by Google. I really like this kind of reader since you can use it online and that meants I can see my feeds from any computer I log onto.

Can I install an RSS Reader On My Computer?

Yes, you just need to find a one that you enjoy using. There are many aggregate readers out there an you can do a search on Google for them. I recommend starting out with one of these two free ones: RSSOwl for Windows and NewsWire for MAC.

Using aggregate feeds is a great way to keep up with news and all sorts of information that is posted online, like my blog. Instead of you going out and looking for the information, the information comes to you. I highly recommend using one if you aren't already doing so.
There was an error in this gadget