Five Easy CSS Tricks

Share on Google+Share on LinkedInTweet about this on TwitterShare on StumbleUponShare on Facebook

Often the unsung hero of the development world, CSS is pretty much essential in the world of UX and there’s plenty of tricks you can use to make your website not only more visually appealing, but boost its chances of ranking in the SERPs.
Here’s some of my favourite tricks that you can do just with some simple CSS code.

Resolving IE issues

IE is an interesting thing – sometimes it likes to display content correctly, sometimes it doesn’t.
At the time of writing, there’s still a bug in which background images or text disappear when viewed in IE, but still appear in the source code.

This is usually remedied by a refresh, but a CSS trick can sort it out for the long-term.

Enter ‘position: relative’ into the CSS command within the code for the disappearing element in question. I’ve had some people tell me this doesn’t always work, but it’s sorted plenty of disappearing image issues for me.

CSS Image Borders

Images are great on your site, but sometimes it’s the little finishing touches that can take a look from good to great.

All you need to do this is add this code to the img: CSS:

seo tips

Highlighting internal links

In order to highlight internal links when a user hovers over it, you’ll need to input this code into the CSS:

seo tips

Of course you can change the different elements around and create something really personalised for your site.

Put all article titles into caps

I’ve seen this on plenty of news-style websites (and my own) – this simple CSS command capitalises all the letters within the text of a post title.

seo tips

Also, if for whatever reason you wanted all letter in your titles to be in lower-case, use this code:

seo tips

Block and inline level elements

You can tell a block element in your site CSS because they always begin on a new line, their top and bottom margins and their height and line-height can be changed. As a rule, their width defaults to 100% of their containing element, unless you make a point of specifying your own width.

Inline elements, on the other hand, always begin on the same line and their dimensions cannot be manipulated.

Most commonly used block elements are:

seo tips

… of course our SEO favourite, the h1 tag.

Most commonly used inline elements are:

seo tips

So what if you want to:

Change the dimensions of your inline element? (like an image, or an ordered list)
See your block element start on the same line, or inline element start on the same line?

To do this, simple input ‘display: inline’ or ‘display: block’ prior to your code to swap things up. You’d be surprised how much this trick comes in handy.


Written by Sarah Chalk

Sarah Chalk

Sarah is an SEO Account Manager at 360i and has a keen interest in all things SEO. She has also written for a number of sites, including Vue cinema’s film blog and a number of tech websites.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>