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:
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:
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.
Also, if for whatever reason you wanted all letter in your titles to be in lower-case, use this code:
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:
… of course our SEO favourite, the h1 tag.
Most commonly used inline elements are:
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.