Cascading Style Sheets | Real Estate Blog Lab

Posts Tagged ‘Cascading Style Sheets’

Real Estate Blog Lab Archives

Theme CSS Style Sheet

By Dave Smith Thursday July 10, 2008

Where the Magic Happens

CSS Scrabble Learning how to work with CSS (Cascading Style Sheets) is like learning to drive a stick shift. If you can edit and modify CSS style sheets you can drive anything. If I find a theme that has “good bones” I can usually modify it to appear in the browser the way I want it to.

No header image, I can do that
Header size change, I can do that
One sidebar instead of two
Right sidebar instead of left
You name it.

This is where the magic happens in theme design. If you don’t know anything about CSS you will be destined to point and shoot themes.

I’ve never had a computer class. I’ve learned by looking at code and reading books. I can tell CSS style.php files that are well laid out and the ones that aren’t. No matter how much I like a theme, if the CSS file is a mess to interpret, I move on. Recently, I did just that, I tweaked for two days, learned a few things, and in the end moved on.

It is in analyzing the CSS you learn about how the Theme handles everything. The browser’s “View Source” (IE) or “View Page Source” (FF) is the Rosetta Stone to the CSS. Study this on one tab with the CSS open on another and you will break the code. Write down the class divs and what the container structure hierarchy looks like.

Most CSS style.php files are broken down into the basic elements for the theme.

General Formating of Tags
Code to handle Images (this is often left out)
Styling of the various parts of the blog (Header, Footer, Containers, Content, comments, sidebars, etc.)

Here is where the fun begins and a little frustration as well. I’ll tell you right up front I’m not a CSS guru by any step of the imagination. Much of what I do is:

try it,
save it,
switch tabs,
F5,
switch tabs,
undo it.
try something else.

To keep it simple I only work on one part at a time. I’ll make changes to the fonts. Then move on to the Header. Once it looks good I back up the file. Now changes and additions to the Footer, etc. Using this simple procedure and the try it, save it, list above I can move through the process of modifying the CSS to make the blog look the way I want.

I’ve suggested before but will say it again here, when you get a change you really like, back up the style.php and FTP that copy down to your computer. It will save you a lot of frustration if later on you make changes to the CSS that corrupt this file. If you do, you have a backup ready.

All along the way, I back up this file to my computer. I might make as many as 10 backups as I proceed using the method described.

Tags in CSS

I’ve debated about including this here since it is handled in the CSS, but it is important and can greatly help or hinder your blog or web site in the search engines. This is another one of those things where viewing the source in the browers is very important. Note how H1, H2, H3, etc tags are handled. More on this in a separate post to follow.

Learning CSS is Worth the Effort

CSS is one of the most fun and most frustrating parts of theme modification. Pick up a good book or hit some basic websites for an introduction to CSS. It might seem daunting at first, the same way driving a stick shift takes time and a few jerky starts. When it clicks, it clicks and you won’t look back. Great blogs and websites are built with CSS. You don’t just want it to look good in the browser you want it to look good to the search engine bots.

Well structured CSS will be an express lane for search engines. Poorly coded sites using tables or poorly structured CSS is like creating Construction Zones with detours for detours.