This post is about 5 useful CSS properties that you should be very familiar with, but will most likely rarely use. Iâ€™m not talking about the new fancy CSS3 properties. Iâ€™m referring to the old CSS2 properties such as:
displaythat are widely supported by all browsers.
Whether you are interested in picking up CSS to create your own website, or merely to tweak your blogâ€™s look and feel a little â€“ itâ€™s always good to start with the fundamentals to gain a stronger foundation. Letâ€™s take a look at some CSS Tips we thought might be useful for beginners.
It may sound stupid to say that, but the ability to link is one of the best features of the web. It is then really important to make your links display as convenient for use as possible. In the following collection youâ€™ll find some tips to make your links better looking and more usable.
As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal.
When styling your website with CSS, in some cases you may lose the correct cursor type for certain elements. Itâ€™s important to retain this indicator as it will inform the user about how the item theyâ€™re hovering over can be used. The solution is easy: if the cursor type is wrong, specify it using the CSS â€œcursorâ€ property.
We are going to use the text-shadow property that is currently supported by Firefox, Opera and Safari to create the appearance of inset text. Inset text being text that has been pushed into the background, almost like a reverse embossed effect.
Bold statement? Perhaps. But recently Iâ€™ve taken this approach to a few designs as Iâ€™m tired of having to use some sort of rounded corner hack to support IE. Itâ€™s a lot easier to just use the CSS 3 declaration.
By default, list item markers have a negative positioning in relationship to the list item itself. This means that zero-ing out margins automatically leads to an overflow if the list is contained inside anything else.
Wouldnâ€™t it be easier to put the list item marker at the same starting point as other elements instead? Lucky for us, thereâ€™s a style to help do just that. Meet the
A few months ago I emphasised the importance of not making things difficult for people who do not use a mouse by removing the outline from links and form controls. If leaving the outline property at its default is not an option for you, perhaps the technique Patrick Lauke describes could work.
Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of Safari, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. Fortunately, Iâ€™ve found an alternative.