Question

I have some css, which when inside my CSS file isn’t applied to my designer in Visual Studio, but is applied to the page when I publish it. This issue is slowing down site development massively as I’m trying to pick up CSS as I go…

Here’s a sample bit of CSS:

.header {
    background-color: #ccc;
    border-bottom: 1px solid #666;
    color: #222;
    display: block;
    font-size: 20px;
    font-weight: bold;
    padding: 100px 100px 100px 100px;
    text-align: center;
    text-decoration: none;
        text-shadow: 0px 1px 0px #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, 
                                       from(#ccc), to(#999));
}

Me applying the CSS on the page:

<header>
    <asp:Label ID="lblQuestion" runat="server" Font-Bold="True" Font-Size="16pt" Text="Your question goes here..." CssClass="header"></asp:Label>
</header>

Me adding the CSS to the page:

<link rel="stylesheet" type="text/css" href="mycss.css" media="only screen and (max-width: 480px)" />

I’m pretty new to CSS, so I’m hoping someone can tell me what I’m doing that is stopping Visual Studio rendering the CSS properly in the designer…

Also, if I put my CSS tags directly in the page then it works, but I’d much rather keep my CSS out in it’s own file, where it can be reused.

Example style working:

<style>
    .header {
        background-color: #ccc;
        border-bottom: 1px solid #666;
        color: #222;
        display: block;
        font-size: 20px;
        font-weight: bold;
        padding: 100px 100px 100px 100px;
        text-align: center;
        text-decoration: none;
        text-shadow: 0px 1px 0px #fff;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
    }
</style>

Thanks

Answer 1

I suggest taking a look at Jeff Widmer’s blog post, Why does Visual Studio not resolve my CSS class names?

Basically, site relative path’s aren’t supported by Visual Studio. It is the same reason why intellisense doesn’t work for javascript.

He offers a fix for this issue:

<link href="/content/default.css" rel="stylesheet" type="text/css" />
    <% if (false) {%>
        <link href="../../content/default.css" rel="stylesheet" type="text/css" />
    <% } %>

UPDATE:

The problem here was the media element in the link tag for the css. It doesn’t appear that VS knows what that tag is and thus doesn’t try to resolve the url.

In this case, the css file is in the same folder as the page, so it would work. But, if the css file is moved into another folder, then it would stop working and the fix above would solve the issue.