CSS: Interior Decorating for Websites
Submitted by Dylan on 07/24/2010
I recently got this site up and running. I landed on the Chrysalis theme and I love it! It exudes simplicity and function. I'm a huge fan of function dictating form.
There were only a couple problems once I unboxed the theme.The links on my main pages didn't change color when I put the mouse over them. They just stayed the same color. This creates confusion for a split second. The user might think, "Is it a link or not?" The problem is that the user shouldn't have to think. The interface should be quick and easy to use. It should follow standards. Look at the majority of sites, when you hover over a link, the text changes colors and puts a line under the text.
Well, this will not do. I had to figure it out. While I'm not a CSS expert I am familiar with it. I decided to review some CSS tutorials. After going through the basics, I was ready to jump in.
Link Styles
The first thing I changed in my Cascading Style Sheet was the Title a:hover link state. It turns out that this piece of CSS was missing. Here is what I added:
.node .title a:hover {color: gray;text-decoration: underline;}
This will only work for links that are classified as "title". This bit of code changed the link color to gray and underlined when the mouse hovered over the link.
| Before CSS Tweak | After CSS Tweak |
|
|
|
Blockquotes
The next problem came with blockquotes. I had some personal responses that I wanted to call out. As you can see below, my indented responses get lost rather easily. The regular blockquote wasn't cutting it. My responses were lost in all the text.
Back to CSS! Again, there was no CSS for the blockquote, so I added this bit of code:
blockquote {background-color: #C7FFB7;-webkit-border-radius: 6px;-khtml-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;padding:7px 10px;}
| Before | After |
 |
 |
As you can see above, it added a light green background, rounded corners, and a bit of padding to cushion the text. Doesn't that look much better?
I really enjoyed diving into CSS. I've found it to be very straight forward and fun to tweak. I look forward to working in CSS more.
Now I've got figure out how to use CSS to make my pictures look better...
Post new comment