Archive for the ‘CSS’ Category


All about hex

August 12, 2017

My friend Dave Gash has written a GREAT article on understanding hex colors – long, but worth it!:

[Link last checked August 2017]


Super easy zebra-striped tables using CSS selectors

October 16, 2013

I read about this trick in an article in the October 2013 issue of Australian Personal Computer (‘Powerful styling with CSS selectors’ by John Allsopp, p98-100) and thought I’d give it a try.

Wow! Super simple! Much better and cleaner than using JavaScript or coding each table row with an odd/even class.

The result

Here’s the result (ignore the ugly colors — they were just for testing the code):

zebra_tables01 The CSS

Here’s the code in my test CSS file that created the differently colored rows for odd and even rows (yes, I comment my code, especially where I can’t figure out what a color is by the hex value):


How simple and elegant is that! Basically just two lines of CSS and you’re done. Of course, substitute your own colors.

One caveat: If you have a TH row at the top of the table, it gets ‘counted’ as Row 1 (an odd row), so the color striping is ‘out’ by one.


And here’s the bare bones HTML code I used for my test file:


Thanks for the article, John!

(John’s article has more on how this all works, and how to assign different column colors using math in the CSS, but for this post I just wanted to share the simplicity of the doing ‘zebra’ striped tables with CSS.)


Test fonts before adding them to your website’s CSS

September 30, 2010

There are many font testers around that show you what a font will look like before you apply it to your website, but I think that Font Tester is one of the easiest to use.

You enter the parameters for the font and can see the example text change immediately to match your selections.

Once you’re happy with what you’ve chosen, you click Get CSS Code and a new window opens that contains the CSS for the selections you made, gives you the option of setting the HTML element to which it will apply, allows you to name your own class or ID, and shows the HTML of how that CSS class/ID etc. should be written.

Neat. And useful for any web designer who doesn’t already have such a tool in the HTML editor they use. Oh, and it’s free to use!

[Links last checked September 2010]


Browser support for HTML5 and CSS3

June 23, 2010

As HTML5 and CSS3 support grows, you might need to know which browsers support the various new features.

While there are many tables that give this information in text form (see for an example), some of you might find that a graphic explains it better.

The screen shot below is from — when you go to that website, hover over the radiating points to see which feature is support by the various browsers; the screen shot shows that none of the Internet Explorer (IE) versions support HTML5 Forms:

See also:

[Links last checked June 2010]


Practising what you preach

April 27, 2010

Bottom line: If you’re going to write articles and create a website all about the user experience (UX), especially the UX of websites, then at least make the site usable and readable for as many users as possible.

One of my RSS feeds displayed an article from the 52 Weeks of UX website. The problem: I could hardly read the article — the image on the left took up much of the space, and the text column on the right was not fluid, i.e. it didn’t reflow the text as I resized the browser window.

I thought the problem was with my feed reader, so I opened the page in Firefox. Same deal. The right side was cut off. I have dual 19″ monitors rotated into portrait mode, but I still had to stretch the browser window a long way across the two monitors to read the article’s text without using the horizontal scroll bar.

Next I checked the code, looking for a link to the CSS file. And to my absolute surprise, I found that the CSS was incorporated directly into the HTML page. That may be because this is a blog-style website. So next I checked the almost unreadable CSS, finally finding the culprit — a fixed 525 px width for articles (.entry-content div, in case you go looking).

This site would be even worse on a small form factor device, such as a cell phone. That fixed width is the killer.

BTW, I also noticed a typo in the keywords — that’ll make it hard for some search engines to find…

[Links last checked April 2010]


Opera Web Standards Curriculum

March 9, 2010

Over the past couple of years, the Opera browser people have created a course in HTML, CSS and web standards. All 40+ ‘lessons’ are freely available online from:

(On a personal note, two of the articles were written by my friend and fellow technical writer, Frank Palinkas, who now resides in Norway where he works for Opera.)

[Link last checked March 2010]


Working with RGBA colors in CSS3

February 17, 2010

Drew McLellan’s article — Working with RGBA colour — on the 24 Ways website, describes how to use the opacity settings available in CSS3 to set transparency on various colored elements.

It seems you can only use these with RGB colors, not Hex values, so you’ll need to convert your hex values to RGB values if you want to take advantage of this attribute. Most graphics software will display both, so you shouldn’t need to get any other software. However, if you don’t want to open up your graphics software every time you need to grab the RGB values, there are some simple ‘on top’ tools that let you do this, such as ColorPix, which I mentioned on this blog back in March 2009.

That link to the article again:

[Links last checked January 2010]


Still supporting multiple versions of IE?

November 5, 2009

If you still have to support multiple versions of Internet Explorer, then you’ll want to take a look at this Smashing Magazine article about how IE 6, 7 and 8 treat various elements of CSS:

And for those who scoff at the idea of anyone still using IE6, I’m currently working for a large global corporate where they’ve only *just* changed from IE6 to IE7. And some people there are still on IE6.

[Links last checked November 2009]


New to CSS? or just need a refresher?

October 6, 2009

Chris Spooner has compiled a list of 15 must read articles for CSS beginners, which is available on the Line 25 website. The articles he’s linked to are:

  1. Resetting your Styles with CSS Reset
  2. Learn CSS Positioning in Ten Steps
  3. Internet Explorer and the CSS Box Model
  4. Specifics on CSS Specificity
  5. Faux Columns
  6. Sexy Ordered Lists with CSS
  7. Divitis: What it is and How to Avoid it
  8. Using background-image to Replace Text
  9. CSS Sprites: What They Are, Why They’re Cool, and How to Use Them
  10. How to Create a CSS Menu Using Image Sprites
  11. 10 Examples of Beautiful CSS Typography and How They Did It…
  12. CSS Shorthand Guide
  13. Push Your Web Design Into the Future With CSS3
  14. How to Use Headings in HTML
  15. 10 HTML Tag Crimes You Really Shouldn’t Commit

I’m not sure that all these articles are ‘beginner’ articles, but they are articles that can help you solve many of the ‘What happened?’ and ‘How do I get it to do that?’ questions.

That link again:

[Links last checked July 2009]


Round-up of 50 free lessons in graphic design

July 21, 2009

The good folks over at PSD Tuts Plus have pulled together a collection of 50 free lessons in various aspects of graphic design — from typography to color theory, to grid-based design and design theory, and rounding out the collection with some UI and usability lessons.

In their own words:

While many of us can create something that looks good in Photoshop or attractive when spliced into CSS, do we actually understand the design theory behind what we create? Theory is the missing link for many untrained but otherwise talented designers. Here are 50 excellent graphic design theory lessons to help you understand the ‘Whys’, not just the ‘Hows’.

[Links last checked June 2009; thanks to Char JTF for alerting me to this site]