You've developed a SharePoint portal landing page and want to add some visual appeal. You want to do so by creating editable, custom Web Part zones, as opposed to a static custom master page.
You can use Cascading Style Sheets (CSS) or HTML to create a completely custom look for a particular Web Part.
Figure 1 illustrates the use of custom HTML to create custom containers for three Web Parts (Calendar, Just Announced, and Columbia RSS) on a Columbia University portal.
HTML was used to create the title, borders, gradient background, and View all buttons. Each Web Part sits inside its respective HTML container. (Title and borders have been turned off for each Web Part, so all you see is the content.) You can choose to embed an actual Web Part or to insert a Web Part zone into a custom HTML container.
You can also use CSS descendant selectors to create a custom look for a particular Web Part zone. Descendant selectors are used to style elements that are descendants of another element in the same document tree. If you want to give a particular Web Part zone a unique look, simply wrap the zone in a
Figure 2 shows an example of this approach. Zone 1 holds the Announcements Web Part and an as-yet unnamed Web Part; the CSS descendant selector is applied to this column. Zone 2 allows Web Parts to be stacked horizontally. This zone includes the Project Timeline, Meetings, and Major Milestones Web Parts. Zone 3 also allows Web Parts to be stacked horizontally and includes the Upcoming Events and Upcoming Holidays Web Parts. Zones 2 and 3 inherit the global styling that was created for Web Parts.
Figure 3 shows a second example of the CSS method, Zone 1 holds the Contacts Web Part; the CSS descendant selector is applied to this column. Zones 2 through 4 use the traditional approach of stacking Web Parts vertically. These zones all inherit global styling.