Web design articles, tutorials, and more.
To make the web impressive.
Markup & Style
CSS Font Shorthand Property Cheat Sheet
By Louis Lazaris on March 17th, 2010
Categories: Markup & Style, Web Design Articles | No Comments >
In the past I’ve displayed some serious animosity towards the CSS font shorthand property, so I feel I should make up for it. After all, the font shorthand property was just minding its own business, trying to save developers some lines of code, and I come along and declare it an outcast. So, although I still don’t agree with ever using font shorthand, I do think it’s important that CSS developers understand how it works.
So to make up for my former font shorthand hostilities, I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project. Enjoy!
CSS3 Click Chart
By Louis Lazaris on February 3rd, 2010
Categories: Markup & Style, Web Design Articles | 15 Comments >
Since my knowledge of CSS3 is fairly shoddy, I decided to create and release a CSS3 “click chart” or “help chart” (for lack of a better term) that displays examples of some of the newest features in CSS.
The initial release only has 8 examples, with more to be added in the future. Each example visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.
The box that opens gives a description along with browser support, an external link (usually W3C info), and some example syntax taken from the CSS of the page itself.
A Primer on the CSS Font Shorthand Property
By Louis Lazaris on June 25th, 2009
Categories: Markup & Style, Web Design Articles | 8 Comments >
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.
A Detailed Look at the Z-Index CSS Property
By Louis Lazaris on June 17th, 2009
Categories: Markup & Style, Web Design Articles | 17 Comments >
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.
Everything You Need to Know About the !important CSS Declaration
By Louis Lazaris on June 1st, 2009
Categories: Markup & Style, Web Design Articles, Web Standards & Best Practices | 17 Comments >
Recently I came across a few articles that mentioned the CSS !important declaration, and there was a little bit of confusion over what it actually did, and how it 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 it is, how it’s declared, some practical uses for it, and drawbacks that need to be considered before implementing it.
25 Classic Web Design Articles That Significantly Impacted the Way We Code
By Louis Lazaris on May 27th, 2009
Categories: Markup & Style, Web Design Articles, Web Standards & Best Practices | 9 Comments >
Over the years there have been hundreds, if not thousands of articles published online that have each had a tremendous impact on the world of web development and design. Some have been truly memorable, and have remained quite relevant for years, and remain so today. Others have outlived their usefulness, but we remember them because of the impact they had on our code and on the way we think about web design.
Occassionally, while reading or doing research, I still stumble upon “classic” web design articles. So I thought it would be a great idea to list what I feel are some of the most important articles that have been published in the relatively short history of the web development industry.
Originally, I had started with the idea of listing 10 articles — but when I began the research, I slowly started to realize that was not going to do justice to this list. So I settled on 25. I think this is a good collection of some of the more significant articles that have been produced over the past 13 years or so.
10 Useful CSS Properties Not Supported By Internet Explorer
By Louis Lazaris on May 13th, 2009
Categories: Markup & Style, Web Design Articles | 21 Comments >
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.)
10 Cross-Browser CSS Properties You’ve Probably Forgotten
By Louis Lazaris on May 3rd, 2009
Categories: Markup & Style, Web Design Articles | 17 Comments >
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.
JavaScript-Powered HTML Table Code Generator
By Louis Lazaris on April 13th, 2009
Categories: Markup & Style, Scripting | 7 Comments >
Recently I searched Google to try to find an HTML table code generator that would let me easily create an HTML table quickly and efficiently, similar to how Dreamweaver does it — but with more customization options that are in line with the the latest in web standards and best practices. I also wanted to be able to enter my data right inside the code generator itself, and not have to copy the code with empty cells, then tediously cut and paste all the data into the individual cells. I found a few options that were reasonably good, but I decided instead to build my own HTML table code generator using pure, (sort of) unobtrusive JavaScript. The entire table and data insertion would take place on the client side and be fully customizable and easy to use.
Well, after about 5 or 6 hours of blood sweat and tears (not really, it was fun), I’ve completed what I feel is one of the most efficient and useful table code generators available on the web. I know what you’re thinking: tables aren’t used very often these days by top web developers, and all HTML editors provide good support for table code generation. But the customization I’ve added and the ease with which the data can be inserted I think is worth giving it a try.
Why IE6 is the Greatest Browser Ever Made
By Louis Lazaris on September 8th, 2008
Categories: Markup & Style, Web Standards & Best Practices | 18 Comments >
How would you react if I told you that I had released a piece of software on August 27, 2001 that was deemed (at the time) to be of high standards and quality by its users and reviewers, and that, although it is unstable and buggy by today’s standards, currently holds a 25% market share [...]
