Web Design Articles

In recent years, as an off-shoot of the “web 2.0” movement, typography has really taken off and now plays a major role in web design. And font usage is also quite an important factor in CSS development — despite that it has not gotten to the point where any font can be used freely without some tricky, sometimes complex workarounds.

Font declarations and related properties in CSS are fairly straightforward to write in longhand. But there is a shorthand CSS property for declaring certain typographical properties that is well-supported across all common browsers, but a little quirky to work with. In this article I’ll describe how the css font shorthand property is used, how it can be misused, and what potential drawbacks there might be to including it in your CSS code.

Most CSS properties that a web developer deals with regularly are instantaneous in their application to elements on the page. For example, when you add the background-color or font-size property to an element on your page, in most cases you will see the results immediately upon page refresh. But other CSS properties are not quite as “plug and play” as we would like.

The z-index property is one example of the latter. I would venture to guess that z-index is probably the CSS property that is more speedily abandoned than any other. Very often — when I previously didn’t understand z-index — I would try to apply it to an element, hoping that the element would automatically “jump” to the top in the page’s stacking order. But that didn’t happen, so I would abandon that method and try some other way to solve the problem. Maybe you’ve had the same experience. Hopefully this article will clear up some misunderstandings regarding z-index.

Recently I came across a few articles that mentioned CSS !important declarations, and there was a little bit of confusion over what they actually did, and how they could be used, as expressed in the user comments on those articles.

So I thought I would research this unique CSS property/value appendage and do a comprehensive write-up on it that would go through essentially all the information developers should have before considering its use in their style sheets.

This article will discuss what !important is, how it’s used, some practical uses for it, and drawbacks that need to be considered before implementing it.

In a previous article I described 10 useful, cross-browser, CSS properties that might often be forgotten, but can really come in handy in specific situations where a solution is needed.

But not all CSS property names are that friendly. In this post, I’ll describe 10 properties that can be quite useful but have little or no support in Internet Explorer.

(NOTE: This list does not take into consideration IE8, which I have not yet used or studied for its capabilities.)

Humans are creatures of habit, and web developers are naturally no different. We develop certain techniques that work, and we stick with them — because, well, they work. But once in a while it’s good to refresh our minds and recall some aspects of development that we’ve probably forgotten. In this article I’ll go through 10 CSS properties that accomplish very specific, practical tasks, that are often overlooked.