Microsoft® SharePoint® Designer 2010 Unleashed

Style the New Page Layout with DIVs and CSS

In this section, you learn how to style a new page layout using a simple DIV-based layout. You use the tools available in SharePoint Designer to create DIVs as well as create a new custom CSS file to define the relevant styles for each DIV. You also include a link to the custom CSS file in the new page layout. Use the following steps to create a new DIV-based layout in your page layout.

1. Continuing on from the previous exercise, in design view, click the ribbon’s Insert tab. In the Controls group, click the HTML drop-down selection and then click <div> (located under the Tags section of the HTML drop-down selection).

2. Click outside the content placeholder and then click back in. You should now see ...