You suggest to add the link for the css file in the head after the asp:ContentPlaceHolder, and VWD will place it there as well automatically:

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />

I like to experement so I noticed that I cannot override any styles when it's placed there. But it works if I place the link before the asp:ContentPlaceHolder, as follows:

<link href="../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>

Is that acceptable? If not, what problems can it create?

Terry

Hi Terry,

Either way is acceptable and has its own benefits in certain situations.

As you found out, by placing it after the ContentPlaceHolder, the master page is in control. That is, possible changes made by a content page can be rest by styles in the central Styles.css file.

If you reverse the order, you also reverse the rules: the master page can no longer enforce the look and feel, and content pages are more free to do what they like.

I prefer to have the master page in control, but feel free to choose what you like best. Both will work fine at run-time, with the mentioned differences in behavior....

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of Beginning ASP.NET 3.5 : in C# and VB, ASP.NET 2.0 Instant Results and Dreamweaver MX 2004
Want to be my colleague? Then check out this post.

I don't understand. In reverse order, the master page still forces the look and feel, unless I make changes. Following is an example, I will just show some relevant info focusing on the id="events_li":

MasterPage:

...
    <link href="../CSS/MainStyleSheet.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
...

<div id="menuItem">
    [list]
    <li id="home_li"><asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx"
            ToolTip="Home">Home</asp:HyperLink></li>
    <li id="artists_li"><asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Artists.aspx">Artists</asp:HyperLink></li>
    <li id="showroom_li"><asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Showroom.aspx">Showroom</asp:HyperLink></li>
    <li id="events_li"><asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Events.aspx">Events</asp:HyperLink></li>
    <li id="links_li"><asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/Links.aspx">Links</asp:HyperLink></li>
    <li id="contact_li"><asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="~/Contact.aspx">Contact</asp:HyperLink></li>
    </ul>
</div>

MainStyleSheet.css:

...

li#events_li
{
    position: absolute;
    top: 0px;
    left: 529px;
    height: 30px;
    width: 87px;
    background-image: url('../images/eventsUp.gif' );
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

div#menuItem ul a
{
    display: block;
    width: 100%;
    height: 30px;
    text-indent: -9999px;
    text-decoration: none;
    overflow: hidden;
}
...

Event.aspx:

asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="CSS/Events.css" rel="stylesheet" type="text/css" />
</asp:Content>

Events.css:

...
li#events_li
{
    background-image: url('../images/eventsDown.gif' );
}
...

The image for the menu item, events, changes when I go to the events.aspx page (no javascript required - etc). Is there another, or better way?

That's exactly what it's about. Maybe my choice of words was wrong when I said enforce.

CSS allows you to override things that have previously been declared. For example, this in the master page:

#SomeElement
{
  color: green;
}

can be overriden by a content page:

#SomeElement
{
  color: red;
}

However, if the CSS from the master page comes last, it overrides what has been set by content pages, therefore "enforcing" the look and feel for the site, regardless of what has been defined in the content page.

Your example is an excellent example of letting content pages override that of the master page. In the master page you define the global looks, and then you override whatever you see fit to make items appear "preselected" or whatever it is you need to do.

Hope this helps,

Imar


---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of Beginning ASP.NET 3.5 : in C# and VB, ASP.NET 2.0 Instant Results and Dreamweaver MX 2004
Want to be my colleague? Then check out this post.

Thanks... I was expecting a different response, considering I never worked with .net and master pages before.

Later I will check to see if I can override a styles with the css after the <asp:content... in the master page while adding an "!Important" element to one of the styles in the css on my content page. I'm not sure if I will use it even if it works. It might create some bad habits.

There is one other concern I have using a master page. However, I will finish the chapter first in case it answers it for me before I bring it up.

Terry

What was it that you expected?

Note that this is not really master page related. This is how CSS works by design. Selectors that are defined later can override ones that have been defined earlier in the document. The master page and the ContentPlaceHolder in the head of the page just make this a little more obvious...

Imar


---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of Beginning ASP.NET 3.5 : in C# and VB, ASP.NET 2.0 Instant Results and Dreamweaver MX 2004
Want to be my colleague? Then check out this post.

So it comes down to a matter of inherentence for the css file then. So the !Important element will work then.

I've trying to keep style from code as much as possible. I noticed that VWD make it too easy to add in inline styles.

Themes and skins are very new to me. It would be neat to create holiday themes (like christmas) and have them turn on and off automatically at set dates, or be set up where the owner of the site could log in to turn them on and off. Do you know if that is possible?

I'm really enjoying your book. I was expecting to get through it faster but there's too much meat in there. I appreciate all the samples.

Terry

Yes, it comes down to CSS inheritance, so !important will work. Master pages add no magic to CSS; all they do is separate page structure and page content. In the end, the content and master pages are merged resulting in a normal HTML document being sent to the browser that contains CSS that plays by standard CSS rules.

Themes can be set programmatically (as you'll learn later) so yes: you can set them automatically during specific periods. Instead of relying on cookies or Profile (as you'll learn later), you could set them based on the current date.

Glad you're enjoying the book....

Imar


---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of Beginning ASP.NET 3.5 : in C# and VB, ASP.NET 2.0 Instant Results and Dreamweaver MX 2004
Want to be my colleague? Then check out this post.

:D Kewl, being able to set the theme automatically during specific periods makes a good selling point. :D

Hopefully, by the time you've read Chapter 16 (Personalization) you know how to do it. If not, let me know and I'll show you some code and ideas.

Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of Beginning ASP.NET 3.5 : in C# and VB, ASP.NET 2.0 Instant Results and Dreamweaver MX 2004
Want to be my colleague? Then check out this post.