One of the things that as been driving me crazy is the inability to selectively style webparts. On the home page of my company’s intranet, I have several webparts pulling content in, and they all look the same. I primarily wanted to make the announcements web part look different. I tried every hack I could think of to find some kind of unique hook to attach some styling to. I would change the title style and then watch it change ever title on the page. I have been trying to find uses for the data view web part and so I thought, maybe I can use that to pull in the announcements and then style them…
Long story short, it worked. Using the dvwp I was able to pull in the announcements list, set what fields to display, and then individually style the display of those fields.
First, I created a page layout. You can’t add the dvwp to pages directly unless you create a page based off a page layout and then detach that page from the page layout in SPD before you work on it. On the page layout in Sharepoint Designer, I selected a web part zone, clicked on Data View in the toolbar, and then selected Insert Data View. I then pulled the announcements list onto the dvwp area. I clicked on the arrow to the right of the DVWP and the Common Data View Tasks box displayed.
First, I edited the columns. I removed all but Title and Body. Then I changed the layout to Repeating Form Style. I then set the paging to display items in sets of 4. Under Sort and Groups, I set it to sort by Created, descending.
Now it was time to style the content. First, I removed the word Body that displayed right over the body content. Then I moved the title xsl code to right above the body code. I created two styles, one to handle the title and one for the body. I wrapped the styles around the fields and then cleaned up the display a bit by removing the extra row, hr and br tags.
Once that was done, I saved the layout, checked it in and then created a new page based off that layout. The dvwp displayed on the page as a webpart. I exported the webpart and then added it to the Web Part Gallery. I went to the intranet home page, put it in edit mode, and then added the webpart to the page.
One note, I tested this on my dev server first and made sure it worked before I tried it on production 😉
SharePoint for Designers 
Yup, DataViews rock. You can also control the layout of lists so much more effectively, and do fancy things like joining/merging lists, etc..
Regarding the styling side of things, though, Heather Solomon did post about styling individual web parts:
http://www.heathersolomon.com/blog/articles/Controlling-Single-Web-Parts-with-CSS.aspx
Personally, though, I tend to style web parts in individual web part zones… …so slightly different, but a bit simpler. Heather decribes that too, at the bottom of that article.
The reason I didn’t use Heather’s tips is because they don’t work in IE 6 and we have to make sure everyone on our intranet gets the same experience.
I have a “problem” with the Data View Web Part:
whenever I insert a DVWP, it defaults to displaying the data in a tag when viewing the source file.
Is there a way to avoid this? I would like to set the whole style by myself. Any points in how to do this???
All webparts will have some default code/styles that render and are necessary for them to render properly on screen. You can wrap those styles with your own code and override some of the values in the css.