CSS – a few neat tricks

CSS – a few neat tricks

Stuart Holmes

Long gone are the days where only top programmers and developers could make even the smallest changes to our sites. Thanks to CSS and its flexibility, changes can be implemented and styles adjusted, away from the scary depths of back-end code.

All you need is a basic understanding of CSS and a little bit of know-how to get started. We are going to give you both.

Without a doubt, CSS is a quick and easy way to edit how elements will be displayed on screen, but if not managed properly, it can get a little overwhelming. That’s why we are going to kick things off with some neat tricks for keeping your code clean and organised.

Keeping Your CSS Codes Clean

If you’ve dabbled in CSS you will be familiar with the inconvenience of trying to find a piece of code you implemented some time ago. For this, and many other reasons regarding ease of use and limiting stress, it’s really helpful to use proper formatting techniques such as indentation, titling, and ordering.

Check out the post ’12 Principles For Keeping Your Code Clean, Format CSS Codes Online’ for more.

Understanding Class and ID

Class and ID—two of the fundamental rules of CSS— are easy to get mixed up. You can identify ‘class’ by it’s characteristic dot ‘.’, and ‘ID’ by the hash ‘#’. There are too many details to go into here, but simply ID is used when a style is unique and doesn’t repeat itself, while class can be re-used.

Find out more in ‘The Difference Between ID and Class’ on CSS Tricks.

Using the !important Declaration

The name may give it away, but the !important declaration is used to force a style into use, regardless of any other overwriting rules.

Here’s an example of it in action:

.page { background-color:blue!important; background-color:red; }

As you can see, even though there is a background style marked with red, using the !important tag on the blue style will force it into play. It is important to note however, the !important declaration may not work in Internet Explorer.

Mastering Typography Measurements px vs em

Once of the most frustrating aspects of CSS can be not knowing when to use certain measurement units. Pixels or px are fixed-size units used in screen media—1 pixel is the size of one dot on a computer screen—whereas ems are scalable units used in web document media—with one em being the size of the current font. The best way of understanding how to use them is by seeing them in action.

Here’s a great article that does just that and further explains their uses.

Replacing Text with an Image

A neat trick you can implement with CSS is changing a <h1>title</h1>, from a text based title to an image. Here’s the code to do it:

h1 {<br>


background:url(“title.jpg”) no-repeat;<br>




By using text-indent:-9999px; you can throw your title off screen, and replace it with an image declared by background:url(“title.jpg”), with a height and width of your choice.

Knowing CSS Browser Compatibilities

Ever make an adjustment in CSS only to hear from someone that nothing has changed? Usually it’s down to a browser compatibility issue. The fact is, all browsers are different, and the only way to ensure this doesn’t happen is to find out more about each browser’s capabilities.

Check out this resource which offers a comprehensive table on the compatibility of certain browsers like Firefox, Safari, and Chrome with CSS.