Sharepoint Forum

Ask Question   UnAnswered
Home » Forum » Sharepoint       RSS Feeds

Looking for Best Practice to Style Custom SharePoint Web Part

  Asked By: Helen    Date: Feb 12    Category: Sharepoint    Views: 1845

In the web part, there are various controls, such as table, button,
textbox etc. So the question is what is the best way to style those
elements so they look like the controls out of the SharePoint box?

I know that we can get the cssclass of the corresponding out of the
box SharePoint controls, then apply those cssclass to the custom web
part. Is this the best approach? Are there any other esier and better



4 Answers Found

Answer #1    Answered By: Amar Kumbar     Answered On: Feb 12

In my opinion using the standard Core.css styles is the best approach.
That way if you override the core css in SharePoint by using a theme or
custom  CSS file the web  part will be styled appropriately as well. If
you use your own style  you would have to either distribute an external
CSS file or embed the CSS in the web part. Either one is problematic
and could be difficult to override with a custom CSS file.

Answer #2    Answered By: Marc Dixon     Answered On: Feb 12

The next question  is how I do use
the core.css in my code and make sure the controls  use the styles from
the core.css?

Answer #3    Answered By: Johathan Mcgowan     Answered On: Feb 12

Just fill in the CSSclass attribute of the controls  you instantiate in
the CreateChildControls method of the web  part with appropriate class
names from the Core.css file. Since the webpart  is always used on a
webpart page, and those pages use a master that loads the core.css,
everything just works automatically. The trick is normally finding
which CSSclass you want to use in Core.css. It's a big file.

Answer #4    Answered By: Georgia Barr     Answered On: Feb 12

Heather Solomon has put together a nice reference for the WSS3/MOSS07
core styles, at


Doesn't have a lot on web  parts specifically, but it might be a good
starting point for understanding how core.css is organized.