The OOTB tag cloud web part in SharePoint 2010 leaves much to be desired asthetically speaking. The problem is that there’s not a lot of look-and-feel settings within the edit web part configuration. Additionally, the .webpart file still does not allow you to add a class property. There’s really not much you can easily do to uniquely identify the web part on the page and apply a style specifically to the tag cloud web part. Or is there?

The solution is simple enough and I’m sure there’s another 1,000 ways to skin-the-cat as they say. Here’s what I did. Edit the web part properties and set the web part height to something unique. I decided to set the unit of measurements to points and I made the height 200 points. You may have to experiment with the height in order to get it the height you desire.

After you apply the settings, if you were to view the rendered HTML in a browser you would find a div (with all the rif-raf omitted from this example) as follows:

Next I open my Cascading Style sheet (CSS) file and I add an attribute selector method. In this case I’m going to match any div element whose “style” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.

div[style~="200pt"] a:link,
div[style~="200pt"] a:active,
div[style~="200pt"] a:visited {
 color: #999;
 font-family: "Lucida Sans";
 font-weight: 700;
 line-height: 1em;
 word-spacing: -1px;
}
div[style~="200pt"] a:hover {
 background-color: #fff;
 color: #454545;
 text-transform: uppercase;
}
div[style~="200pt"] {
 text-align: center;
}

A few points. SharePoint will automatically add a ; to the height of the div as follows: height: 200pt;. However, in the CSS the div[style~="200pt"] does not require the ; and infact will not work if you retain the ;.