Styling Images with CSS

Maybe I’m being a bit too picky, but styling images with inline code doesn’t (always) seem like the best option. To me, it isn’t even a question of utility, such as whether inline or imported styles are the most effective and easiest to use. No, it seems to be more of an issue of what is correct and proper. I question myself on this constantly, as any good semanticist should. I ask myself:

  • Where, grammatically, should this content go?
  • What markup is available that would correctly show this?
  • If necessary, how can I style this so that it appears like it seems it should?

From these questions I try to find the best way to mark up content. In this way I want to look at images, most particularly images in blog posts, and see what the best way to mark them up might be.

Where, grammatically, should this content go?

An image is a unique form of content. There seem to be two uses for images, and I’ll attempt to define them below.

Decorative images
Used to decorate the design of a website, usually not critical to the consumption of content
Content images
Used as a substantial source of content within the site, and usually is critical to the consumption of content

A couple of examples of what I’m talking about:

CSS for Images - Example 01, Church Marketing Sucks

The above screen is taken from Church Marketing Sucks, an offshoot of the Center for Church Communication, something I’m pretty passionate about. As you can see, the background image on the site is for decoration, as is the header sweeper design. I consider these decorative because they could be stripped away without the content of the site going away.

CSS for Images - Example 01, A List Apart

The above screen was taken from an article via A List Apart, which you can see by clicking either the image or this link. Actually it’s not a bad article—it talks about using Javascript to help with image placement, which is yet another technique. Anyway, the point of this page is that the image within the content is intended to work cooperatively with the content, and would detract from the message if it went away.

I use a different technique, depending on whether the image is intended to contribute to content vs. decoration. If something is intended for decoration, I will do my best to make the image the background of a div. Only if the image is intended to contribute to the content (such as the ALA example) will I use an <img> tag.

What markup is available that would correctly show this?

One of my pet peeves is when designers use class titles like alignleft and alignright when styling content images. The issue I have with this is the same I would have if these class names were used to name divs being floated to the right or the left. The problem is simple: the purpose of class names is to identify the purpose of the element, and not describe them according to how you will style them. This way, if you change the style of these elements later, they aren’t classified incorrectly.

This same principle applies to content images. If content images are styled with alignright or alignleft, either by the user or a WYSIWYG editor, their positions can’t be changed later without having awkwardly classified images.

I suggest three classes for content images.

  1. main
  2. major
  3. minor

With this system, I analyzed how images could be aligned and matched them up with appropriate semantic classifications. A main image, for instance, is centered horizontally and text doesn’t wrap around it. A major image floats to the right and wraps text to the left. A minor image floats to the left and wraps text to the right.

The CSS for the images would look like the following.


img.main {
margin: 0 auto 1em auto;
display: block;
}
img.major {
float: right;
margin: 0 0 1em 1.5em;
}
img.minor {
float: left;
margin: 0 1.5em 1em 0;
}

Then all you have to do is add class=“main” or other classes to the img tag and there you have it. Images with proper classifications and correct alignment that could later be changed to fit a new hierarchy or site layout.

Benefits to Proper Image Classification

  • Uses classes correctly
  • Makes content forward–compatible
  • It’s proper semantics

Negatives to Proper Image Classification

  • Won’t work well with WYSIWYG editors
  • Requires more work/case by the user

These are techniques with kinks which I’m still working out. For instance, I still want to figure out a solid way to use this technique in conjunction with captions. I’m addicted to Arun Kale’s technique in The Morning After theme which I’ve been using at Theme Playground. I’ll post once I perfect this technique.

This post was initiated, in part, by Sarah over at BlueJar with her post How to Position Your Photos and Images Using CSS. I’m kind of a semantics dork, so this topic caught my attention. Overall, I look forward to seeing these things develop, especially as far as valid, semantic blogging is concerned.

Advertisements

One thought on “Styling Images with CSS

  1. Theme Review: Amazing Grace < Theme Playground

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s