Rails Blog Makes Several CSS Theme Stylesheet Changes

I'll say this much.. A few hours plugging away at CSS can go a long way for improving readability and ease of "surfing" a blog. I hope the readers here agree that the modifications made are improvements.

Using header tags appropriately

Previously, I'd been carelessly mixing H2 and H3 tags throughout the blog articles. I realized that this caused a lot of eye-sores and also, the h2 and h3 css settings were pretty poor to begin with! I spent time with trial and error working to make h2 a bit larger and stand out more and h3 easier to read..

Lines of CSS

-sh-3.1$ cat iamrice.css |wc -l 487 Looks like that file has grown a few lines but the improvements are worth it! I bet I could cut several unused pieces from there also. I've seen some CSS files a mile long so I think i'm doing ok!

Controlling borders around ids and classes

I noticed that carelessness and especially using other peoples pre-made css files can cause a lot of strange borders to popup on several classes in css. I had to remove some strange things to get the headers and images to look right.

Padding Images

It used to be called hspace but now in css, it's done like this:

.post img {
        border: none;
        padding-right: 10px;
}

Header settings

Here's how my header settings look now:

h1, h2, h3, h4, .comment-num, .comment-content cite, label, input.button {
 font-family: "lucidamac bold", "lucida grande", arial, sans-serif;
}

h1 {
  font-weight: normal;
  font-size: 4.5em;
}

h2 {
        color: #ad0008;
        font-size: 22px;
        margin: 1.2em 0 0.3em;
        border-bottom: 1px dotted #bbb;
}

h3 {
  font-size: 1.4em;
  font-weight: normal;
  margin-top: 1em;
  margin-bottom: 0.4em;
}


#content h4 {
        font-size: 18px;
        margin: 1.2em 0 0.3em;
        border-bottom: 1px dotted #bbb;
}

#content h5 {
        font-size: 18px;
        background: #ffd;
        margin: 1.2em 0 0.3em;
        border-bottom: 1px dotted #aaa;
}

#header h1 a {  
  color: #fff;
  text-decoration: none;
  border: none;
}

#header h2 {   
  color: #ad0008;
  padding-top: 0.2em;
  font-size: 1.2em;
  text-decoration: underline;
}