Easy Way to Learn CSS and Customize Your Blog Theme

If you only have IE on your computer, you will need to get Firefox, and then get the add-on for Firefox called Firebug. Once that is installed you will see a little bug icon in the bottom of your browser: 

Open the web site you’d like to edit, and click once on that icon. That should open a pane at the bottom of your screen that looks like this:

One of the things you can do with Firebug is edit the CSS for the page right in that pane, and see the results of the changes you made in the page above immediately. This does not affect the CSS that is saved in your WordPress theme editor at all – this is just temporary in the window/tab you have open in Firefox.

Edit the CSS in Firebug
So, let’s say you’ve downloaded the DIYTheme and you like the header with the water droplet and you want to change the sidebar headings to a blue color to match. You can see what piece of the CSS the headings are styled in by clicking CSS and then click Inspect. Then mouse over the elements in the page – see how they get a blue box around them? Mouse over one of the sidebar headings and then click on it once, to tell Firebug that’s the element you want to inspect. In the right side of the Firebug pane, you’ll see the various pieces of CSS code that affect that heading. If I do this in the DIYTheme demo, I see this:

H5 designates the heading, and below it are the styles applied to that heading. The first line says “color: #000000″ which means the font color is styled with the color code for black. Now we need to go find that piece of CSS and edit it. In the Firebug pane, click CSS then click Edit, and scroll down until you see that section of code- about a quarter of the way down in the DIYTheme. Then you can click on the color code and change the 000000 to something like 003399 for a nice blue color, (check this page out for a list of hexidecimal color codes) and voila, you have blue headings!

Edit the CSS in your theme
If you’ve made changes you like, and would like them to be permanent, then do the following:

• Go into your Admin panel in WordPress, and go to the Presentation tab and click on Theme Editor.
• Make sure you’re in the Stylesheet file, and first make a backup copy of the CSS by selecting all of it and pasting it into a Notepad document on your computer.
• Then make the same change in the CSS as you did using Firebug, and then click the Update File button at the bottom.
• If you make lots of changes and just want to copy over the entire file, you can highlight all the code in Firebug (Cntl-A to select all, Cntl-C to copy it) and paste it over top of your current CSS (Cntl-A to select all, Cntl-V to paste the new code over top), and then save.

I would encourage you to play around with the CSS in Firebug, to get comfortable with making changes. You might want to refer to the CSS Reference Guide to see all the different types of style selectors that are available to you. It’s a great way to learn CSS and to get comfortable making changes with no worries!

source

Sketchcast: The Basics of CSS

Since I first heard of sketchcasting several months ago, I’ve been interested in doing one because it is such an effective way to communicate information quickly. So, when Sketchcast.com came on the scene just recently, I was ready to give it a try, and here is my first effort. I’m sorry about the vague hum in the background. We moved recently, and my nice microphone is buried somewhere, but I did manage to dig out an old one that worked!

This sketchcast explains the basics of CSS. I know there are many out there who would like to understand CSS better, but don’t feel like they’re technical enough, or just don’t know where to start. This is an overview of how CSS works and how it is used in a blog. I hope you find it to be helpful, and I would appreciate any feedback you might have.

source