Now, I want to show the Manage Styles and Attaching a Style Sheet task pane. So I am going to first apply the master page to this page and then map the content region from the body of this page to the placeholder main of the master page.
To do so, I simply drag the master page on top of this page. It maps the current page body to the placeholder main content region. I click OK, and then this page becomes branded based on the default.masterpage, the core.css file which is being used by default.master. In addition, I can apply my own custom.css file by using the Attach Style Sheet Link in the Apply Styles dialog.
I will click the Attach Style Sheet link, and that brings up a Attach Style Sheet dialog, and I can click Browse and I am going to choose one of the style sheets that is at the Root of my sever. Right now, I am looking at the Server Site Collection that I am editing in SharePoint Designer. So I need to go up a level into my websites, and then I can see the Root of the server here.
I will double-click that Root of the server, and then I can see the Style Library Folder. I double-click the Style Library folder, and then I can choose any of these cascading style sheets. I will choose Orange. Click open, click OK, and now this page is being rendered by both the core.css file and orange.css. So I can also collapse it.
What I want to do is apply a style from orange.css to this page, so I am going to make sure my selection is inside of this top table cell, and then scroll down and pick my pageContentem style. When I click it, it will be applied to that table cell. I could also click the Down Arrow and have a whole bunch of different choices in order to modify the style, copy the style or create a new style from here. Now, there are a lot of styles applied to this page because core.css contains hundreds of styles.
So in order to make that more manageable, I can also click on the Options button and choose to see styles used only in the current page. Notice, it remains contextually grouped and I can see that core.css is here, Inline Styles are below it, Orange.css is here and more Core.css selectors are here.
Transcription by:
Scribe4you Transcription Services