A way to style elements on a page

There are several ways to add styles to elements on a page...

• You can set a reference to a css file (from the style library) directly in the masterpage / page layout


• You can specify a CSS file via the UI. Navigate to Site Settings > Site Master Page Settings -> Alternate CSS URL section


• You don't have to use CSS files... you can also do it inline.


• Another option is by using a Content Editor WebPart. In my option it is quick and dirty, but in some cases it might be useful.

How to style with a Content Editor WebPart?

1. Set a CssClass for your control you want to style (or just a div with a class attribute)
   eg. myPanel.CssClass = "myPanel"


2. Drag a Content Editor WebPart on the page


3. Open the source editor and set the Css styles
   
   
   

When you are back in displayMode you will see that we have an ugly line (with default a webpart title). To hide this you can modify the webpart properties:

• (appearance section) set the width attribute to "1px".
• (appearance section) set Chrome Type to "None"
• (appearance section) set Title to ""

Result: Our Content Editor WebPart is completely hidden and we have styled our page ;)