Nifty FREE CSS tricks and tips to make your blog shine with sex appeal

Morning!

Ever have an insane urge to stay up to the weeee hours of the night, hacking your site’s CSS code to make it look "just right"?

Or even better yet, have you wanted to improve your sites SEO and SERPs rankings…..did you know that there are quite a number of CSS layouts that will list the critical content in your source AHEAD of your menu listings or category links or the like?

Hmmmm? 

Believe it or not, it’s true!  I’ve been hacking around with CSS since 2004 or so…and the goodies you can uncover simply stagger the mind.  This post will point you in the direction of coolio CSS tricks and tips.  So let’s begin!

---

CSS Tables – SEO optimized!

Let’s say that you want to build a site (not a blog) that has 3 columns – the left one will hold your navigation, the right one will hold your advertisements, and the center one will contain your content.

Ideally, you want your content to appear AHEAD of your navigation links.  And here are some nifty CSS layouts that do just that.

• 3 Columns Fluid Layout
• Lots of other SEO-ized CSS column layouts
• Advanced 3 Column Layout
• Search engine friendly 3 column layouts

Next, let’s jump to:

---

Highlight links to PDF and Word files

Did you know you can use CSS to display links to your Microsoft DOCS or PDFs or whatever file name you want in a different fashion?

1. a[href$="pdf"]:after,
2. a[href$="doc"]:after {
3. margin:0 0 0 5px;
4. font:bold 12px "Lucida Grande";
5. content: " (PDF)";
6. }
7. a[href$=".doc"]:after {content: " (DOC)";}

does this peachy!  The complete guide is found at Reveal new window links and links to non-HTML files with a user stylesheet. 

Next, ever have an insane urge to:

---

Create a Page Break before Comments

This nifty trick lets visitors decide whether to print out your comments ALONG with your content.

#comments {page-break-before:always;

Learn more at Creating a Page Break – Comments.

Okay, what about that cute little Holy Grail of:

---

Border-radius: create rounded corners with CSS!

Lookie here!

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

And lookie at how that displays!

Now….let’s talk about getting the reader’s attention.  Can you say:

---

Pull Quotes!

Ever have an insane urge to direct your readers’ eyes to the Must Read Yesterday Key Critical Point in your 382 page long blog post?  If so, ever see those nifty jumbo huge quote thingees that highlight such goodies….you know, something like the image to your right?

Wish no more!  Simply visit Pullquotes That Really Pull and have a blast.  🙂

Lessee…what other coolio thingees can you do with CSS? 

Hmmmm….how ’bout:

---

Stretching out your text

Here is some text.  Wheee!

Here is some STRETCHED OUT text.  Wheee!

And here’s the code that did that.

<h4 style="letter-spacing: 10pt; font-weight: bold;">Here is some STRETCHED OUT text.&nbsp; Wheee!</h4>

🙂

---

Want more CSS goodies?

There are tons and tons of sites online that walk you thru CSS tricks and tips easily and with great joy!  Check out:

• 101 CSS Techniques Of All Time- Part 1
• 101 CSS Techniques Of All Time- Part 2
• 101 CSS Resources to Add to Your Toolbelt of Awesomeness
• 53 CSS-Techniques You Couldn’t Live Without
• 70 Expert Ideas For Better CSS Coding
• 80 CSS Web Design Resources
• CSS Code Snippets : 15 Wicked Tricks
• Even MORE rounded corners with CSS
• Killer CSS
• Ten CSS tricks you may not know

And don’t forget:

---

What about CSS generators?

Didja know there are sites online that will automagically generate your CSS for you?  Check out:

• CSS Button & Text Field Generator
• CSS Menu Maker
• CSS Sprite Generator
• CSS Template Generator – with Source Code
• Rounded Corner CSS Box Generator

Remember, CSS can really make your blog or site stand out apart from the thundering herd.  Do yourself a favor and see what kinds of goodies YOU can create!

Enjoy,

Barbara

ps – speaking about CSS, have you seen: