What’s the Difference Between Margins and Padding?
When you first start out with CSS development, you might be a bit confused about the difference between margins and padding. Here’s a summary with some images to help visualize the difference.
Articles By: Louis Lazaris
Image Tint With CSS
The other day Paul Irish posted an article that collected together responses to a question that he and Yehuda Katz asked their Twitter followers.
One of the wishlist items a few people mentioned was “CSS blend modes” with a use case of tinting an image on hover (or tinting it statically, then removing the tint on hover or by some other interaction). My immediate thought was: That should be simple enough, shouldn’t it?
Is HTML5 Good for SEO?
This is a question that has been answered in a number of different places. Unfortunately, the answers in some instances have not been good ones. In fact, they’ve either been way too optimistic and/or presumptuous — or else just downright wrong.
Also, when we use the term “HTML5”, what exactly are we referring to? HTML5 covers a number of different features and technologies, some of which have nothing to do with SEO. So, generally speaking, when people ask this question, they’re usually referring to HTML5’s new semantic elements. So, I’ll primarily focus on those here.
Book Review: Canvas Pocket Reference
Earlier this year, the folks at O’Reilly were kind enough to send me a review copy of Canvas Pocket Reference: Scripted Graphics for HTML5 by David Flanagan.
Admittedly, this is not a truly legitimate review because, well, I haven’t actually read the entire book. But as you can tell from the title, this is not exactly something you’d read cover to cover and get much out of. I’ve gone through some of it, and since I have no immediate plans to use HTML5’s canvas element or its related API, I probably won’t be referring to it much any time soon.
Nonetheless, there’s good reason for a positive review here.
Cross-Browser CSS Development Workflow
Most good developers by now accept the fact that pixel-perfect cross-browser CSS is not only unnecessary, but also totally impossible.
Of course, when we speak of the challenge of “cross-browser” CSS, we’re really saying “How can I make this work in Internet Explorer versions 6-8?” — because those are really the most problematic browsers.
Although I’ve written before about cross-browser CSS, and I still stand by just about every word in that article, I thought I’d reiterate my feelings on this subject by providing what I feel is the best workflow for getting your CSS to be as efficient, hack-free, and maintainable as possible while providing as similar an experience in all supported browsers.
One Thing I Don’t Like About Drop-Down Menus
I don’t mind drop-down menus. They give designers and information architects options for using screen space wisely. But I think many sites do themselves a disfavour by using them in an inconsistent manner.
The popular travel site Carnival Cruise Lines is a perfect example of what I’m talking about. I love the design of their site. For a travel website, it’s very good; it’s clean, and professionally designed. But I have one small problem with their drop-down menus.
How Do I Target IE7 or IE8 Using CSS Hacks?
If you’ve dropped support for IE6 and/or IE7, then your repertoire of CSS hacks is probably pretty minimal. Here I outline the methods I feel are the best ways to write IE7- and IE8-specific CSS.
How Do I Force the Browser to Use the Newest Version of my Stylesheet?
If you’re a beginner and you’re developing HTML and CSS using an external stylesheet, you might notice that in some browsers, under some circumstances, the changes you’ve made to your CSS don’t take effect immediately.
What’s the Best Way to Add CSS to a Web Page?
In an HTML page, you can add CSS in a number of different ways, which I explain below. After I show you each method, I’ll tell you which method is best, and why.
Centered Heading Overlaying a Horizontal Line with CSS
Maybe there’s a technical term that I’m not aware of for this type of centered, line-splitting heading. Whatever it’s called, I’ve used it in a project’s footer in the past, where I’ve divided the footer into sections with headers that overlay a horizontal line.
I wanted to try to do this as efficiently as possible, and without images. I came up with three solutions with pure CSS and one that uses JavaScript.
