Category: CSS Tutorials

How CSS is Implemented in E-mail Clients

The other day, Smashing Magazine tweeted about an updated guide to CSS implementation in e-mail clients. The guide is extremely helpful, as it shows you exactly what CSS techniques and features you can use within your HTML e-mail messages and which e-mail clients will display them correctly.

The chart displayed in theĀ original blog post shows over 50 different CSS techniques and elements are evaluated for 11 different e-mail/Webmail clients. Apparently the PDF and Excel versions of the chart that are linked from the post include more than 23 different mail clients. Unfortunately, looking at the chart, it appears that the safest way to create an attractive e-mail message that looks the way you intend in multiple e-mail clients is to code with tables and inline styles.

Read More >
Interview with CSSMania Founder Gabriel Segura

Over the past year I’ve had several sites listed on a variety of CSS galleries. CSS Mania has always provided the most traffic and comments/votes and I thought it would be interesting to chat with the founder, Gabriel Segura. Gabriel was kind enough to answer our questions and the transcript is below.

Allen: Can we start with a brief overview of yourself?
Gabriel: My name is Gabriel Segura. I was born in 1975. I am a telecomunications engineer (working at Ericsson during the day), flash designer, front-end web developer and CSS Mania’s father (at night). Married with a beautiful woman, Susana, and father of a “real” daughter Claudia (3 years old). We also have a Himalayan Persian cat at home called “Yuna” (Final Fantasy X). God gave me a wife that loves to play PS3/Xbox/Wii more than me.

Allen: What is CSS Mania?
Gabriel: We believe that CSS Mania is the largest CSS showcase in the world.

Allen: Why did you start CSS Mania and when did it launch?
Gabriel: CSS Mania was born in March 2004 as a section on my personal blog as I loafed around the few CSS Showcases that existed during that time. In 2005, before our admired Paul Scrivens sold CSSVault to Jacob Gower, we realized that other CSS Showcases sites, except ours, weren’t updating very regularly. We know that updates are what make a difference to readers.

We aren’t interested in the geek insights or trivial discussions common on other similar sites. We are interested in learning what any CSS afficionado or professional might want to learn.

Read More >
Accessibly Use Image Headers

A while ago, I heard rumors that the next incarnation of HTML would include support for easily replacing HTML elements (such as headers) with images by simply adding a “src” attribute to the HTML tag. For instance, you might be able to do something like:

<h1 src="myimage.png">This is my alt text</h1>

However, it seems that the advent of this type of thing, if it ever happens, is still quite a ways off. Therefore, if you’re looking for an easy way to replace a plain text header with a nice image, for instance, a banner, you need to find another way of doing so.

This article will briefly explain how to do so using purely CSS.

Read More >
Eight Links – April 22

Here are today’s Eight Links — links for web developers:

  1. JsPDF – create PDF files completely using JavaScript
  2. The Database Rant – begins with “It’s time for SQL to die.”
  3. iPhone app sales – a developer explains the income his app has generated and how changing pricing didn’t change sales
  4. Why writing software is like writing
  5. 18 Seriously Helpful Cheat Sheets for Easier Coding
  6. Google Analytics API Launched
  7. Finding and Fixing Memory Leaks in Python
  8. A Design for a Distributed Transaction Layer for Google App Engine
Read More >
CSS3 Will Include Rounded Corners

With Web 2.0, rounded corners have become wildly popular. Unfortunately, as of right now, you need to use transparent images, some fancy CSS hacks and some extraneous HTML to make them work properly.

However, Mozilla (Firefox) and Webkit (Safari, Konqueror) browsers have implemented a property called border-radius, which will apparently be included in the CSS3 spec, allowing you to easily create rounded corners on any bordered HTML element.

At this time, you have to use browser-specific properties for Mozilla and Webkit browsers, as the border-radius property is not yet fully implemented. You can find more information about the -moz-border-radius and -webkit-border-radius implementations on The Art of Web. More info about the proposed CSS3 spec on border-radius can be found on the W3 site.

Read More >
Cross-Browser Semi-Transparent Backgrounds

This is a simple tutorial to explain how to implement semi-transparent backgrounds for your HTML elements in all browsers. By now, most people are probably aware of the fact that you can use 24-bit PNG images to create semi-transparent backgrounds in newer browsers. However, because a large percentage of Internet users have still not adopted Internet Explorer 7; which means that they’re still using IE6, which doesn’t support 24-bit PNG images, we have to find a way to mimic that behavior. It should be noted that the fix described in this tutorial is only applicable to solid color backgrounds; it cannot be applied to backgrounds that include some sort of image.

Read More >
Creating Print Style Sheets

As CSS becomes more and more popular and Web designers are using it more and more to develop the look of their Web sites, browsers are causing more and more problems when trying to print Web pages. CSS styles do not always translate nicely when printed. Some browsers actually freeze or crash when using specific CSS style definitions.

Read More >
Identifying External Links – Like Wikipedia

Wikipedia - External Link Identification

I found myself wondering a while back how Wikipedia identifies external links the way they do. I’ve seen the same concept on many other sites, but I had never really looked into how it was done. I always just assumed that an image was dynamically added to any code that included external links.

It turns out that I was wrong, and I was kind of happy to find that out. The answer I found makes much more sense, and is much more simple to implement.

Read More >
Common CSS Issue Resolution

NetTuts has a good look into 5 common css issues and how to resolve them easily and quickly. The five css issues are:

  • Why are my styles not effective?
  • The difference between relative and absolute positioning
  • Internet Explorer 6 double margin issue
  • Specific selector issues
  • Testing your site in multiple browsers

As always, if you run into trouble, post your questions in our CSS help forum.

Read More >
The Beginner’s Guide to CSS Video

Videojug has put together a simple video about what CSS is and how to use it. It’s just the really simple basics but still worth a view. And if you have questions, stop by our CSS help forum.

Read More >

Join our team

Do you enjoy technical writing? Care about cross platform mobile apps, HTML5, Javascript and Ninja's? Write for us! We would like to hear from you, get in touch!

Worth your attention